From 467e7abf7ac0035c3330fa62a5d4fc432164af5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois?= <francois.zhu@etu.univ-orleans.fr>
Date: Fri, 10 Feb 2023 20:06:41 +0000
Subject: [PATCH] Embellissement de la page d'atelier, mes ateliers et des
 ateliers suivis. Ajout aussi d'une page d'accueil

---
 templates/atelier/index.html.twig         | 88 ++++++++++++-----------
 templates/atelier/index_inscrit.html.twig | 72 ++++++++++---------
 templates/components/navbar.html.twig     |  4 +-
 templates/pages/index.html.twig           | 47 ++++++++----
 templates/user/index.html.twig            |  2 +-
 5 files changed, 122 insertions(+), 91 deletions(-)

diff --git a/templates/atelier/index.html.twig b/templates/atelier/index.html.twig
index c164b6c..8b8a194 100644
--- a/templates/atelier/index.html.twig
+++ b/templates/atelier/index.html.twig
@@ -3,51 +3,55 @@
 {% block title %}Atelier index{% endblock %}
 
 {% block body %}
-    <h1>Liste des Ateliers</h1>
+    <div class="card mb-4">
+        <div class="card-header">
+            <h1 class="card-title">Liste des Ateliers</h1>
+        </div>
 
-    {% if (ateliers | length) > 0 %}
-        <table class="table">
-            <thead>
-            <tr>
-                <th scope="row">Id</th>
-                <th scope="col">Nom</th>
-                <th class="" scope="col">Description</th>
-                <th scope="col">Actions</th>
-            </tr>
-            </thead>
-            <tbody>
-            {% for atelier in ateliers %}
+        {% if (ateliers | length) > 0 %}
+        <div class="card-body table-responsive">
+            <table class="table align-middle">
+                <thead>
                 <tr>
-                    <td>{{ atelier.id }}</td>
-                    <td>{{ atelier.nom }}</td>
-                    <td>{{ atelier.description | raw }}</td>
-                    <td>
-                        <div class="d-flex flex-row align-content-end">
-                            <a class="btn btn-outline-primary m-1"
-                               href="{{ path('app_atelier_show', {'id': atelier.id}) }}">Afficher</a>
-                            {% if app.user and app.user == atelier.instructeur %}
-                                <a class="btn btn-outline-primary m-1"
-                                   href="{{ path('app_atelier_edit', {'id': atelier.id}) }}">Modifier</a>
-                            {% else %}
-                                <button class="btn btn-outline-secondary m-1"
-                                        href="{{ path('app_atelier_edit', {'id': atelier.id}) }}" disabled>Modifier
-                                </button>
-                            {% endif %}
-                        </div>
-                    </td>
+                    <th scope="col">NOM</th>
+                    <th scope="col">DESCRIPTION</th>
+                    <th scope="col">ACTIONS</th>
                 </tr>
-            {% endfor %}
-            </tbody>
-        </table>
+                </thead>
+                <tbody>
+                {% for atelier in ateliers %}
+                    <tr>
+                        <td>{{ atelier.nom }}</td>
+                        <td>{{ atelier.description | raw }}</td>
+                        <td>
+                            <div class="d-flex flex-row align-content-end">
+                                <a class="btn btn-outline-primary m-1"
+                                   href="{{ path('app_atelier_show', {'id': atelier.id}) }}">Afficher</a>
+                                {% if app.user and app.user == atelier.instructeur %}
+                                    <a class="btn btn-outline-primary m-1"
+                                       href="{{ path('app_atelier_edit', {'id': atelier.id}) }}">Modifier</a>
+                                {% else %}
+                                    <button class="btn btn-outline-secondary m-1"
+                                            href="{{ path('app_atelier_edit', {'id': atelier.id}) }}" disabled>Modifier
+                                    </button>
+                                {% endif %}
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+                </tbody>
+            </table>
 
-        <div class="d-flex justify-content-center">
-            <a class="btn btn-primary mb-3" href="{{ path('app_atelier_new') }}">Créer atelier</a>
+            <div class="card-footer d-flex justify-content-center">
+                <a class="btn btn-primary" href="{{ path('app_atelier_new') }}">Créer atelier</a>
+            </div>
+        {% else %}
+            <div class="alert alert-info" role="alert">
+                Il n'y a pas encore d'ateliers. Vous pouvez commencer par <a class="alert-link"
+                                                                             href="{{ path('app_atelier_new') }}">en créer
+                    un !</a>
+            </div>
+        {% endif %}
         </div>
-    {% else %}
-        <div class="alert alert-info" role="alert">
-            Il n'y a pas encore d'ateliers. Vous pouvez commencer par <a class="alert-link"
-                                                                         href="{{ path('app_atelier_new') }}">en créer
-                un !</a>
-        </div>
-    {% endif %}
+    </div>
 {% endblock %}
diff --git a/templates/atelier/index_inscrit.html.twig b/templates/atelier/index_inscrit.html.twig
index 9fd43fd..f9bde00 100644
--- a/templates/atelier/index_inscrit.html.twig
+++ b/templates/atelier/index_inscrit.html.twig
@@ -3,39 +3,43 @@
 {% block title %}Atelier suivis{% endblock %}
 
 {% block body %}
-    <h1>Liste des Atelier suivis</h1>
-
-    {% if (ateliers | length) > 0 %}
-        <table class="table">
-            <thead>
-            <tr>
-                <th scope="row">Id</th>
-                <th scope="col">Nom</th>
-                <th class="" scope="col">Description</th>
-                <th scope="col">Actions</th>
-            </tr>
-            </thead>
-            <tbody>
-            {% for atelier in ateliers %}
-                <tr>
-                    <td>{{ atelier.id }}</td>
-                    <td>{{ atelier.nom }}</td>
-                    <td>{{ atelier.description | raw }}</td>
-                    <td>
-                        <div class="d-flex flex-row align-content-end">
-                            <a class="btn btn-outline-primary m-1"
-                               href="{{ path('app_atelier_show', {'id': atelier.id}) }}">Afficher</a>
-                        </div>
-                    </td>
-                </tr>
-            {% endfor %}
-            </tbody>
-        </table>
-
-    {% else %}
-        <div class="alert alert-info" role="alert">
-            Il n'y a pas encore d'ateliers. Vous pouvez commencer par <a class="alert-link"
-                                                                         href="{{ path('app_atelier_index') }}">en suivre un !</a>
+    <div class="card mb-4">
+        <div class="card-header">
+            <h1 class="card-title">Liste des Ateliers suivis</h1>
         </div>
-    {% endif %}
+
+        {% if (ateliers | length) > 0 %}
+            <div class="card-body table-responsive">
+                <table class="table">
+                    <thead>
+                    <tr>
+                        <th scope="col">NOM</th>
+                        <th class="" scope="col">DESCRIPTION</th>
+                        <th scope="col">ACTIONS</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    {% for atelier in ateliers %}
+                        <tr>
+                            <td>{{ atelier.nom }}</td>
+                            <td>{{ atelier.description | raw }}</td>
+                            <td>
+                                <div class="d-flex flex-row align-content-end">
+                                    <a class="btn btn-outline-primary m-1"
+                                       href="{{ path('app_atelier_show', {'id': atelier.id}) }}">Afficher</a>
+                                </div>
+                            </td>
+                        </tr>
+                    {% endfor %}
+                    </tbody>
+                </table>
+
+                {% else %}
+                    <div class="alert alert-info" role="alert">
+                        Il n'y a pas encore d'ateliers. Vous pouvez commencer par <a class="alert-link"
+                                                                                     href="{{ path('app_atelier_index') }}">en suivre un !</a>
+                    </div>
+                {% endif %}
+            </div>
+    </div>
 {% endblock %}
diff --git a/templates/components/navbar.html.twig b/templates/components/navbar.html.twig
index 31c43b8..dd00a64 100644
--- a/templates/components/navbar.html.twig
+++ b/templates/components/navbar.html.twig
@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
     <div class="container-fluid">
-        <a class="navbar-brand" href="#">CC34</a>
+        <a class="navbar-brand" href="{{ path('app_index') }}">CC34</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
                 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
@@ -11,7 +11,7 @@
                     <a class="nav-link active" aria-current="page" href="{{ path('app_index') }}">Home</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="{{ path('app_atelier_index') }}">Atelier</a>
+                    <a class="nav-link" href="{{ path('app_atelier_index') }}">Ateliers</a>
                 </li>
 
                 {% if app.user and is_granted('ROLE_INSTRUCTEUR') %}
diff --git a/templates/pages/index.html.twig b/templates/pages/index.html.twig
index d59dde5..8ffca65 100644
--- a/templates/pages/index.html.twig
+++ b/templates/pages/index.html.twig
@@ -3,18 +3,41 @@
 {% block title %}Hello PagesController!{% endblock %}
 
 {% block body %}
-<style>
-    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
-    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
-</style>
+    <style>
+        .example-wrapper {
+            margin: 1em auto;
+            max-width: 800px;
+            width: 95%;
+            font: 18px/1.5 sans-serif;
+        }
 
-<div class="example-wrapper">
-    <h1>Hello {{ controller_name }}! ✅</h1>
+        .example-wrapper code {
+            background: #F5F5F5;
+            padding: 2px 6px;
+        }
+    </style>
+
+    <div class="d-flex justify-content-center">
+        <div class="row text-center mt-2">
+
+            {% if not app.user %}
+            <h1>
+                Bonjour utilisateur !
+            </h1>
+            {% elseif app.user %}
+            <h1>
+                Bonjour <strong>{{ app.user.nom }} {{ app.user.prenom }}</strong> !
+            </h1>
+
+            <div class="row mt-4 mx-auto w-50">
+                <a class="btn btn-primary btn-lg" href="{{ path('app_atelier_index') }} }">Afficher tous les
+                    ateliers</a>
+                <a class="btn btn-primary btn-lg mt-2" href="{{ path('app_atelier_by_me') }}">Afficher mes
+                    ateliers</a>
+                <a class="btn btn-primary btn-lg mt-2" href="{{ path('app_logout') }}">Déconnexion</a>
+            </div>
+            {% endif %}
+        </div>
+    </div>
 
-    This friendly message is coming from:
-    <ul>
-        <li>Your controller at <code><a href="{{ '/var/www/html/cc34/src/Controller/PagesController.php'|file_link(0) }}">src/Controller/PagesController.php</a></code></li>
-        <li>Your template at <code><a href="{{ '/var/www/html/cc34/templates/pages/index.html.twig'|file_link(0) }}">templates/pages/index.html.twig</a></code></li>
-    </ul>
-</div>
 {% endblock %}
diff --git a/templates/user/index.html.twig b/templates/user/index.html.twig
index 505c627..d36716d 100644
--- a/templates/user/index.html.twig
+++ b/templates/user/index.html.twig
@@ -37,7 +37,7 @@
         </table>
         </div>
 
-        <div class="card-footer">
+        <div class="card-footer d-flex justify-content-center">
             <a class="btn btn-primary" href="{{ path('app_user_new') }}">Créer un Utilisateur</a>
         </div>
     </div>