Ajout des rôles Cuisnier et Serveur

Mise en page des index

config/packages/security.yaml

@@ -31,12 +31,14 @@ security:
 
     role_hierarchy:
         ROLE_SUPER_ADMIN: [ROLE_ADMIN, ROLE_ALLOWED_TO_SWITCH]
+        ROLE_CUISINIER: ROLE_CUISINIER
+        ROLE_SERVEUR: ROLE_SERVEUR
 
     access_control:
 #        - { path: ^/, roles: ROLE_USER }
         - { path: ^/login, roles: PUBLIC_ACCESS }
         - { path: ^/logout, roles: ROLE_USER }
-        - { path: ^/index, roles: ROLE_ADMIN }
+        - { path: ^/index, roles: [ROLE_ADMIN, ROLE_CUISINIER, ROLE_SERVEUR]}
         - { path: ^/user, roles: ROLE_ADMIN }
 
 #when@test:

public/css/compte/index.css

@@ -0,0 +1,69 @@
+/* Style pour chaque élément d'information de l'utilisateur */
+.user-info-item {
+    display: flex;
+    padding: 10px 0;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+/* Dernier élément sans bordure */
+.user-info-item:last-child {
+    border-bottom: none;
+}
+
+/* Style pour le label de chaque information (Nom, Prénom, etc.) */
+.user-info-label {
+    font-weight: bold;
+    color: #333;
+    width: 7%;
+}
+
+/* Style pour la valeur de chaque information (la donnée de l'utilisateur) */
+.user-info-value {
+    color: #555;
+    text-align: left;
+    width: 65%;
+    word-wrap: break-word; /* Gère les débordements */
+}
+
+.password {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    text-align: left;
+}
+
+/* Ajout d'un style pour rendre responsive */
+@media (max-width: 600px) {
+    #InformationUser {
+        padding: 15px;
+    }
+
+    .user-info-item {
+        flex-direction: column;
+        padding: 8px 0;
+    }
+
+    .user-info-label, .user-info-value {
+        width: 100%;
+    }
+}
+
+#container_gestion_user {
+    background-color: white;
+    margin-left: 20%; /* Centrage vertical */
+    margin-top: 5%;
+    padding: 20px;
+    border: 1px solid black;
+    width: 75%; /* Largeur du contenu de la modal */
+    height: 100%; /* Hauteur du contenu de la modal */
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+    display: none;
+}
+
+a{
+    text-decoration: none;
+}
+
+a:visited {
+    color: initial;
+}

public/js/modal.js

@@ -1,38 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    // Fonction pour ouvrir la modal
-    function openModal(modalId) {
-        const modal = document.getElementById(modalId);
-        if (modal) {
-            modal.style.display = "block";
-        }
-    }
-
-    // Fonction pour fermer la modal
-    function closeModal(modalId) {
-        const modal = document.getElementById(modalId);
-        if (modal) {
-            modal.style.display = "none";
-        }
-    }
-
-    // Ouvre les modals lorsqu'un bouton est cliqué
-    document.body.addEventListener('click', function(event) {
-        if (event.target.matches('span[data-modal]')) {
-            const modalId = event.target.getAttribute('data-modal');
-            openModal(modalId);
-        }
-
-        // Ferme la modal lorsqu'on clique sur le bouton de fermeture
-        if (event.target.matches('.close[data-modal]')) {
-            const modalId = event.target.getAttribute('data-modal');
-            closeModal(modalId);
-        }
-
-        // Ferme la modal lorsqu'on clique en dehors du contenu
-        document.querySelectorAll('.modal').forEach(modal => {
-            if (event.target === modal) {
-                modal.style.display = "none";
-            }
-        });
-    });
-});

public/js/test.js

@@ -0,0 +1,29 @@
+document.querySelector('.btn-info-compte').addEventListener('click', function(event) {
+    event.preventDefault();
+
+    const contentContainer = document.getElementById('container-gestion-user');
+
+    // Vérifie si le contenu est déjà affiché
+    if (container_gestion_user.style.display === 'block') {
+        // Masquer la section "Compte" si elle est déjà affichée
+        container_gestion_user.style.display = 'none';
+        container_gestion_user.innerHTML = ''; // On efface le contenu pour éviter la réutilisation
+    } else {
+        // Afficher le conteneur et charger le contenu via AJAX
+        fetch('/gestion-user')
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Erreur de chargement de la section Compte');
+                }
+                return response.text();
+            })
+            .then(html => {
+                // Insérer le HTML dans le conteneur et l'afficher
+                container_gestion_user.innerHTML = html;
+                container_gestion_user.style.display = 'block';
+            })
+            .catch(error => {
+                console.error('Erreur:', error);
+            });
+    }
+});

src/Controller/IndexController.php

@@ -11,7 +11,7 @@ class IndexController extends AbstractController
     #[Route('/index', name: 'app_index')]
     public function index(): Response
     {
-        return $this->render('index/index.html.twig', [
+        return $this->render('index/admin.html.twig', [
             'controller_name' => 'IndexController',
         ]);
     }

src/Form/AddUserFormType.php

@@ -42,6 +42,8 @@ class AddUserFormType extends AbstractType
                 'choices' => [
                     'Admin' => 'ROLE_ADMIN',
                     'User' => 'ROLE_USER',
+                    'Cuisinier' => 'ROLE_CUISINIER',
+                    'Serveur' => 'ROLE_SERVEUR',
                 ],
                 'expanded' => true,
                 'multiple' => true,

templates/Modals/gestionTableModal.html.twig

@@ -1,8 +0,0 @@
-<div id="tableModal" class="modal">
-    <div class="modal-content">
-        <span class="close" data-modal="tableModal">&times;</span>
-        <h2>Gestion Table</h2>
-        <!-- Contenu de la modal Gestion Table -->
-        <p>Ajouter ici le formulaire ou les informations pour gérer les tables.</p>
-    </div>
-</div>

templates/Modals/gestionUtilisateurModal.html.twig

@@ -1,8 +0,0 @@
-<div id="userModal" class="modal">
-    <div class="modal-content">
-        <span class="close" data-modal="userModal">&times;</span>
-        <h2>Gestion Utilisateur</h2>
-        <!-- Contenu de la modal Gestion Utilisateur -->
-        <p>Ajouter ici le formulaire ou les informations pour gérer les utilisateurs.</p>
-    </div>
-</div>

templates/access_denied/index.html.twig

@@ -23,6 +23,6 @@
      <div class="container">
         <h1>Accès Refusé</h1>
         <p>Vous n'avez pas les permissions nécessaires pour accéder à cette page.</p>
-        <a href="{{ path('app_login') }}" class="btn btn-primary">Ce connecter</a>
+        <a href="{{ path('app_login') }}" class="btn btn-primary">Se connecter</a>
     </div>
 {% endblock %}

templates/gestion_user/index.html.twig

@@ -4,110 +4,35 @@
 
 {% block body %}
     <style>
-        body {
-            width: 100%;
-            height: 100%;
-        }
 
-        /* Style pour chaque élément d'information de l'utilisateur */
-        .user-info-item {
-            display: flex;
-            padding: 10px 0;
-            border-bottom: 1px solid #e0e0e0;
-        }
 
-        /* Dernier élément sans bordure */
-        .user-info-item:last-child {
-            border-bottom: none;
-        }
 
-        /* Style pour le label de chaque information (Nom, Prénom, etc.) */
-        .user-info-label {
-            font-weight: bold;
-            color: #333;
-            width: 7%;
-        }
-
-        /* Style pour la valeur de chaque information (la donnée de l'utilisateur) */
-        .user-info-value {
-            color: #555;
-            text-align: left;
-            width: 65%;
-            word-wrap: break-word; /* Gère les débordements */
-        }
-
-        .password {
-            display: flex;
-            flex-direction: column;
-            width: 100%;
-            text-align: left;
-        }
-
-        /* Ajout d'un style pour rendre responsive */
-        @media (max-width: 600px) {
-            #InformationUser {
-                padding: 15px;
-            }
-
-            .user-info-item {
-                flex-direction: column;
-                padding: 8px 0;
-            }
-
-            .user-info-label, .user-info-value {
-                width: 100%;
-            }
-        }
 
 
     </style>
+    <form id="UpdateUser" action="{{ path('update-user', { 'id': app.user.id }) }}" method="post">
+        <div id="InformationUser">
+            <div class="user-info-item">
+                <span class="user-info-label">Nom :</span>
+                <span class="user-info-value">{{ app.user.nom }}</span>
+            </div>
+            <div class="user-info-item">
+                <span class="user-info-label">Prénom :</span>
+                <span class="user-info-value">{{ app.user.prenom }}</span>
+            </div>
+            <div class="user-info-item">
+                <span class="user-info-label">Email :</span>
+                <span class="user-info-value">{{ app.user.userIdentifier }}</span>
+            </div>
+            <div class="user-info-item">
+                <span class="user-info-label">Roles :</span>
+                <span class="user-info-value">{{ app.user.getRolesAsString() }}</span>
+            </div>
 
-
+            <div class="btn">
-    <p>Test</p>
+                <button type="submit" class="submit-button">Mettre à jour</button>
-
+            </div>
-{#    {{ form_start(form) }}#}
+        </div>
-{#    <div>        #}
+    </form>
-{#        {{ form_row(form.UserIdentifier) }}#}
-{#        {{ form_row(form.Password) }}#}
-{#        {{ form_row(form.Nom) }}#}
-{#        {{ form_row(form.Prenom) }}#}
-{#        {{ form_row(form.Roles) }}#}
-{#    </div>#}
-{#    {{ form_end(form) }}#}
-
-{#    <form id="UpdateUser" action="{{ path('update-user', { 'id': app.user.id }) }}" method="post">#}
-{#        <div id="InformationUser">#}
-{#            <div class="user-info-item">#}
-{#                <span class="user-info-label">Nom :</span>#}
-{#                <span class="user-info-value">{{ app.user.nom }}</span>#}
-{#                <input type="text" id="nom" name="nom" value="{{ app.user.nom }}" class="user-info-input">#}
-{#            </div>#}
-{#            <div class="user-info-item">#}
-{#                <span class="user-info-label">Prénom :</span>#}
-{#                <span class="user-info-value">{{ app.user.prenom }}</span>#}
-{#                <input type="text" id="prenom" name="prenom" value="{{ app.user.prenom }}" class="user-info-input">#}
-{#            </div>#}
-{#            <div class="user-info-item">#}
-{#                <span class="user-info-label">Email :</span>#}
-{#                <span class="user-info-value">{{ app.user.userIdentifier }}</span>#}
-{#                <input type="text" id="email" name="email" value="{{ app.user.userIdentifier }}" class="user-info-input">#}
-{#            </div>#}
-{#            <div class="user-info-item">#}
-{#                <div id="passwordConfirmDiv" class="password-confirm-div">#}
-{#                    <label for="confirm_password" class="user-info-label">Confirmer ou modifier le mot de passe :</label>#}
-{#                    <input type="password" id="confirm_password" name="confirm_password" class="user-info-input" placeholder="Mot de passe">#}
-{#                </div>#}
-{#            </div>#}
-{#            <div class="user-info-item">#}
-{#                <span class="user-info-label">Roles :</span>#}
-{#                <span class="user-info-value">{{ app.user.getRolesAsString() }}</span>#}
-{#                <input type="checkbox" id="roles" name="roles" value="{{ app.user.getRolesAsString() }}" class="user-info-input" readonly>#}
-{#            </div>#}
-
-{#            <div class="btn">#}
-{#                <button type="submit" class="submit-button">Mettre à jour</button>#}
-{#            </div>#}
-{#        </div>#}
-{#    </form>#}
 
 {% endblock %}

templates/index/admin.html.twig

@@ -0,0 +1,135 @@
+{% extends 'base.html.twig' %}
+
+{% block head %}
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}Accueil{% endblock %}</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
+    <link href="https://fonts.cdnfonts.com/css/brittany-signature" rel="stylesheet">
+</head>
+{% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ asset('css/modal.css') }}"> <!-- Ajout du fichier CSS -->
+    <link rel="stylesheet" href="{{ asset('css/compte/index.css') }}"> <!-- Ajout du fichier CSS -->
+{% endblock %}
+
+{% block body %}
+    <style>
+
+
+    </style>
+
+    <!-- Top Bar -->
+    <div class="top-bar">
+        <div>
+            Bonjour, {{ app.user.prenom }}
+        </div>
+    </div>
+
+    <!-- Left Menu -->
+    <div class="left-background">
+        <img class="LogoHegre" src="{{ asset('asset/image/LogoHegre.png') }}">
+        {% if is_granted('ROLE_ADMIN') %}
+            <div class="nav-bar">
+                <ul>
+                    <li>
+                        <div class="btn-custom icon-container">
+                            <i class="icon-medium"> {{ ux_icon('grommet-icons:group') }}</i>
+                            <span>Gérer Utilisateur</span>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="btn-custom icon-container">
+                            <i class="icon-medium"> {{ ux_icon('ic:outline-table-bar') }}</i>
+                            <span>Gérer Table</span>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="btn-custom icon-container">
+                            <i class="icon-medium"> {{ ux_icon('bx:food-menu') }}</i>
+                            <span>Gestion Menu</span>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="btn-custom icon-container">
+                            <i class="icon-medium"> {{ ux_icon('lsicon:badge-promotion-outline') }}</i>
+                            <span>Gestion Promotion</span>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="btn-custom icon-container">
+                            <i class="icon-medium"> {{ ux_icon('fluent-emoji-high-contrast:ten-oclock') }}</i>
+                            <span>Voir tendances</span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        {% elseif is_granted('ROLE_CUISINIER') %}
+            <div class="nav-bar">
+                <ul>
+                    <li>
+                        <div class="btn-custom icon-container">
+                            <i class="icon-medium"> {{ ux_icon('icon-park-outline:view-list') }}</i>
+                            <span>Liste des commandes</span>
+                        </div>
+                    </li>
+                </ul>
+                <ul>
+                    <li>
+                        <div class="btn-custom icon-container">
+                            <i class="icon-medium"> {{ ux_icon('grommet-icons:group') }}</i>
+                            <span>Je sais pas encore</span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        {% elseif is_granted('ROLE_SERVEUR') %}
+            <div class="nav-bar">
+                <ul>
+                    <li>
+                        <div class="btn-custom icon-container">
+                            <i class="icon-medium"> {{ ux_icon('fluent-mdl2:reservation-orders') }}</i>
+                            <span>Réservation</span>
+                        </div>
+                    </li>
+                </ul>
+                <ul>
+                    <li>
+                        <div class="btn-custom icon-container">
+                            <i class="icon-medium"> {{ ux_icon('icon-park-outline:view-list') }}</i>
+                            <span>Commande</span>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        {% endif %}
+        <div class="Information-perso">
+            <div class="btn-info-compte icon-container">
+                <i class="icon-medium"> {{ ux_icon('ph:user-circle-fill') }}</i>
+                <span>Compte</span>
+            </div>
+            <div class="btn-info-exit icon-container">
+                <a href="{{ path('app_logout') }}" class="icon-medium">
+                    {{ ux_icon('iconamoon:exit-bold') }}
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div id="container_gestion_user">
+        <!-- Contenu par défaut, ou vous pouvez laisser vide -->
+    </div>
+
+    <script>
+
+    </script>
+
+    <!-- Include modals -->
+    {% include 'Modals/gestionCompteModal.html.twig' %}
+
+{% endblock %}
+
+{% block javascripts %}
+    <script src="{{ asset('js/test.js') }}" defer></script>
+{% endblock %}

templates/index/cuisinier.html.twig

@@ -3,7 +3,7 @@
 {% block head %}
 <head>
     <meta charset="UTF-8">
-    <title>{% block title %}Index FestinHegre!{% endblock %}</title>
+    <title>{% block title %}Cuisine{% endblock %}</title>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
     <link href="https://fonts.cdnfonts.com/css/brittany-signature" rel="stylesheet">
 </head>
@@ -26,6 +26,15 @@
             box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
             display: none;
         }
+
+        a{
+            text-decoration: none;
+        }
+
+        a:visited {
+            color: initial;
+        }
+
     </style>
 
     <!-- Top Bar -->
@@ -126,10 +135,7 @@
     </script>
 
     <!-- Include modals -->
-    {% include 'Modals/gestionUtilisateurModal.html.twig' %}
-    {% include 'Modals/gestionTableModal.html.twig' %}
     {% include 'Modals/gestionCompteModal.html.twig' %}
-    {% include 'Modals/gestionUtilisateurModal.html.twig' %}
 
 {% endblock %}
 

templates/index/serveur.html.twig

@@ -0,0 +1,144 @@
+{% extends 'base.html.twig' %}
+
+{% block head %}
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}Cuisine{% endblock %}</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text><text y=%221.3em%22 x=%220.2em%22 font-size=%2276%22 fill=%22%23fff%22>sf</text></svg>">
+    <link href="https://fonts.cdnfonts.com/css/brittany-signature" rel="stylesheet">
+</head>
+{% endblock %}
+
+{% block stylesheets %}
+    <link rel="stylesheet" href="{{ asset('css/modal.css') }}"> <!-- Ajout du fichier CSS -->
+{% endblock %}
+
+{% block body %}
+    <style>
+        #container_gestion_user {
+            background-color: white;
+            margin-left: 20%; /* Centrage vertical */
+            margin-top: 5%;
+            padding: 20px;
+            border: 1px solid black;
+            width: 75%; /* Largeur du contenu de la modal */
+            height: 100%; /* Hauteur du contenu de la modal */
+            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+            display: none;
+        }
+
+        a{
+            text-decoration: none;
+        }
+
+        a:visited {
+            color: initial;
+        }
+
+    </style>
+
+    <!-- Top Bar -->
+    <div class="top-bar">
+        <div>
+            Bonjour, {{ app.user.prenom }}
+        </div>
+        <div class="user-role">
+            Rôle : {{ app.user.getRolesAsString() }}
+        </div>
+    </div>
+
+    <!-- Left Menu -->
+    <div class="left-background">
+        <img class="LogoHegre" src="{{ asset('asset/image/LogoHegre.png') }}">
+
+        <div class="nav-bar">
+            <ul>
+                <li>
+                    <div class="btn-custom icon-container">
+                        <i class="icon-medium"> {{ ux_icon('grommet-icons:group') }}</i>
+                        <span data-modal="userModal">Gérer Utilisateur</span>
+                    </div>
+                </li>
+                <li>
+                    <div class="btn-custom icon-container">
+                        <i class="icon-medium"> {{ ux_icon('ic:outline-table-bar') }}</i>
+                        <span data-modal="tableModal">Gérer Table</span>
+                    </div>
+                </li>
+                <li>
+                    <div class="btn-custom icon-container">
+                        <i class="icon-medium"> {{ ux_icon('bx:food-menu') }}</i>
+                        <span>Gestion Menu</span>
+                    </div>
+                </li>
+                <li>
+                    <div class="btn-custom icon-container">
+                        <i class="icon-medium"> {{ ux_icon('lsicon:badge-promotion-outline') }}</i>
+                        <span>Gestion Promotion</span>
+                    </div>
+                </li>
+                <li>
+                    <div class="btn-custom icon-container">
+                        <i class="icon-medium"> {{ ux_icon('fluent-emoji-high-contrast:ten-oclock') }}</i>
+                        <span>Voir tendances</span>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <div class="Information-perso">
+            <div class="btn-info-compte icon-container">
+                <i class="icon-medium"> {{ ux_icon('ph:user-circle-fill') }}</i>
+                <span>Compte</span>
+            </div>
+            <div class="btn-info-exit icon-container">
+                <a href="{{ path('app_logout') }}" class="icon-medium">
+                    {{ ux_icon('iconamoon:exit-bold') }}
+                </a>
+            </div>
+        </div>
+    </div>
+
+    <div id="container_gestion_user">
+        <!-- Contenu par défaut, ou vous pouvez laisser vide -->
+    </div>
+
+    <script>
+        document.querySelector('.btn-info-compte').addEventListener('click', function(event) {
+            event.preventDefault();
+
+            const contentContainer = document.getElementById('container-gestion-user');
+
+            // Vérifie si le contenu est déjà affiché
+            if (container_gestion_user.style.display === 'block') {
+                // Masquer la section "Compte" si elle est déjà affichée
+                container_gestion_user.style.display = 'none';
+                container_gestion_user.innerHTML = ''; // On efface le contenu pour éviter la réutilisation
+            } else {
+                // Afficher le conteneur et charger le contenu via AJAX
+                fetch('/gestion-user')
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Erreur de chargement de la section Compte');
+                        }
+                        return response.text();
+                    })
+                    .then(html => {
+                        // Insérer le HTML dans le conteneur et l'afficher
+                        container_gestion_user.innerHTML = html;
+                        container_gestion_user.style.display = 'block';
+                    })
+                    .catch(error => {
+                        console.error('Erreur:', error);
+                    });
+            }
+        });
+    </script>
+
+    <!-- Include modals -->
+    {% include 'Modals/gestionCompteModal.html.twig' %}
+
+{% endblock %}
+
+{%  block javascripts %}
+    <script src="{{ asset('js/modal.js') }}"></script> <!-- Ajout du fichier JS -->
+{% endblock %}