From b98318b79f42701e5e7daf7d5ebf949ec3ad4ce5 Mon Sep 17 00:00:00 2001 From: Joshua Date: Mon, 28 Oct 2024 02:45:24 +0100 Subject: [PATCH] Ajout et modification du nouvelle index.html fait dans realease/Index --- composer.json | 1 + composer.lock | 95 ++++++++++- config/bundles.php | 1 + public/css/modal.css | 152 ++++++++++++++++++ public/js/modal.js | 38 +++++ src/Entity/Utilisateurs.php | 10 ++ symfony.lock | 12 ++ templates/Modals/gestionCompteModal.html.twig | 58 +++++++ templates/Modals/gestionTableModal.html.twig | 8 + .../Modals/gestionUtilisateurModal.html.twig | 8 + templates/index/index.html.twig | 95 +++++++++-- 11 files changed, 465 insertions(+), 13 deletions(-) create mode 100644 public/css/modal.css create mode 100644 public/js/modal.js create mode 100644 templates/Modals/gestionCompteModal.html.twig create mode 100644 templates/Modals/gestionTableModal.html.twig create mode 100644 templates/Modals/gestionUtilisateurModal.html.twig diff --git a/composer.json b/composer.json index 89c873e..fc4788a 100644 --- a/composer.json +++ b/composer.json @@ -39,6 +39,7 @@ "symfony/string": "7.1.*", "symfony/translation": "7.1.*", "symfony/twig-bundle": "7.1.*", + "symfony/ux-icons": "^2.21", "symfony/ux-turbo": "^2.20", "symfony/validator": "7.1.*", "symfony/web-link": "7.1.*", diff --git a/composer.lock b/composer.lock index 6754347..fee8a0b 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "47211a90e8abd68321e402e4a6f94465", + "content-hash": "7fff997f78db4185bb53c4543a245c74", "packages": [ { "name": "amphp/amp", @@ -8153,6 +8153,95 @@ ], "time": "2024-09-19T21:48:23+00:00" }, + { + "name": "symfony/ux-icons", + "version": "v2.21.0", + "source": { + "type": "git", + "url": "https://github.com/symfony/ux-icons.git", + "reference": "c3b3fd29b3f90e977b267251ef15ea06f3cec553" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/symfony/ux-icons/zipball/c3b3fd29b3f90e977b267251ef15ea06f3cec553", + "reference": "c3b3fd29b3f90e977b267251ef15ea06f3cec553", + "shasum": "" + }, + "require": { + "php": ">=8.1", + "symfony/framework-bundle": "^6.4|^7.0", + "symfony/twig-bundle": "^6.4|^7.0" + }, + "conflict": { + "symfony/flex": "<1.13", + "symfony/ux-twig-component": "<2.21" + }, + "require-dev": { + "psr/log": "^2|^3", + "symfony/asset-mapper": "^6.4|^7.0", + "symfony/console": "^6.4|^7.0", + "symfony/http-client": "6.4|^7.0", + "symfony/phpunit-bridge": "^6.3|^7.0", + "symfony/ux-twig-component": "^2.14", + "zenstruck/console-test": "^1.5" + }, + "type": "symfony-bundle", + "extra": { + "thanks": { + "name": "symfony/ux", + "url": "https://github.com/symfony/ux" + } + }, + "autoload": { + "psr-4": { + "Symfony\\UX\\Icons\\": "src/" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Kevin Bond", + "email": "kevinbond@gmail.com" + }, + { + "name": "Simon André", + "email": "smn.andre@gmail.com" + }, + { + "name": "Symfony Community", + "homepage": "https://symfony.com/contributors" + } + ], + "description": "Renders local and remote SVG icons in your Twig templates.", + "homepage": "https://symfony.com", + "keywords": [ + "icons", + "svg", + "symfony-ux", + "twig" + ], + "support": { + "source": "https://github.com/symfony/ux-icons/tree/v2.21.0" + }, + "funding": [ + { + "url": "https://symfony.com/sponsor", + "type": "custom" + }, + { + "url": "https://github.com/fabpot", + "type": "github" + }, + { + "url": "https://tidelift.com/funding/github/packagist/symfony/symfony", + "type": "tidelift" + } + ], + "time": "2024-10-21T19:01:22+00:00" + }, { "name": "symfony/ux-turbo", "version": "v2.20.0", @@ -11143,7 +11232,7 @@ ], "aliases": [], "minimum-stability": "stable", - "stability-flags": {}, + "stability-flags": [], "prefer-stable": true, "prefer-lowest": false, "platform": { @@ -11151,6 +11240,6 @@ "ext-ctype": "*", "ext-iconv": "*" }, - "platform-dev": {}, + "platform-dev": [], "plugin-api-version": "2.6.0" } diff --git a/config/bundles.php b/config/bundles.php index 4e3a560..e8e6f69 100644 --- a/config/bundles.php +++ b/config/bundles.php @@ -13,4 +13,5 @@ return [ Symfony\Bundle\SecurityBundle\SecurityBundle::class => ['all' => true], Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true], Symfony\Bundle\MakerBundle\MakerBundle::class => ['dev' => true], + Symfony\UX\Icons\UXIconsBundle::class => ['all' => true], ]; diff --git a/public/css/modal.css b/public/css/modal.css new file mode 100644 index 0000000..f09f4d3 --- /dev/null +++ b/public/css/modal.css @@ -0,0 +1,152 @@ +.top-bar { + background-color: #db5559; + width: calc(100% - 18%); /*Calcule la totalité de l'écran - le left-background */ + height: 60px; + position: fixed; + top: 0; + left: 18%; /*Evite le chauvechement des 2 bars */ + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + color: white; + font-size: 18px; + box-sizing: border-box; /* Inclut le padding dans la largeur totale */ +} + + +.user-role { + background-color: white; + color: black; + padding: 10px 15px; + font-weight: bold; + overflow: hidden; +} + + + +.left-background { + background-color: #db5559; + width: 18%; + height: 100%; + position: fixed; + top: 0; + left: 0; + display: flex; + flex-direction: column; + justify-content: space-between; +} + + +.index-title-page { + color: #FFFFFF; + font-size: 60px; + padding-bottom: 10px; + font-family: 'Brittany Signature', sans-serif; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + padding-bottom: 30px; +} + +.btn-custom { + background-color: #FFFFFF; + color: black; + padding: 15px 40px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + display: inline-block; + + border-right: 5px solid #db5559; + border-left: 5px solid #db5559; +} + + +.btn-custom:hover, .btn-info-compte:hover, .btn-info-exit:hover { + background-color: #f8b5b5; + color: #FFFFFF; +} + +.icon-medium { + width: 25px; + height: 25px; +} + +.icon-container { + display: flex; + align-items: center; + gap: 10px; +} + + +.Information-perso { + display: flex; + justify-content: space-between; + padding: 20px; + margin-top: auto; +} + +.btn-info-compte, .btn-info-exit { + background-color: #FFFFFF; + color: black; + padding: 10px 20px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + border: 1px solid black; +} + +.btn-info-compte { + width: 50%; + height: 30px; +} + +.btn-info-exit { + width: 10%; + height: 30px; +} + +/* Style pour la modal (cachée par défaut) */ +.modal { + display: none; /* Masquée par défaut */ + position: fixed; + z-index: 1; /* Au-dessus du contenu normal */ + left: 18%; /* Commence juste après ton left-background */ + top: 0; + width: 82%; /* Prend le reste de la largeur après le left-background */ + height: 100%; /* Prend toute la hauteur de l'écran */ + background-color: rgba(0, 0, 0, 0.4); /* Couleur d'arrière-plan avec transparence */ + overflow: auto; /* Permet le défilement si le contenu dépasse */ +} + +/* Contenu de la modal */ +.modal-content { + background-color: white; + margin: 5% auto; /* Centrage vertical */ + padding: 20px; + border: 1px solid black; + width: 80%; /* Largeur du contenu de la modal */ + height: 80%; /* Hauteur du contenu de la modal */ + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); +} + +/* Bouton de fermeture */ +.close { + color: black; + float: right; + font-size: 28px; + font-weight: bold; +} + +.close:hover, +.close:focus { + color: red; + cursor: pointer; +} + diff --git a/public/js/modal.js b/public/js/modal.js new file mode 100644 index 0000000..707776d --- /dev/null +++ b/public/js/modal.js @@ -0,0 +1,38 @@ +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"; + } + }); + }); +}); diff --git a/src/Entity/Utilisateurs.php b/src/Entity/Utilisateurs.php index 9a5190a..c4af5ea 100644 --- a/src/Entity/Utilisateurs.php +++ b/src/Entity/Utilisateurs.php @@ -108,6 +108,16 @@ class Utilisateurs implements UserInterface, PasswordAuthenticatedUserInterface return $this->Role; } + public function getRolesAsString(): string + { + // Supprime le préfixe "ROLE_" et formate en majuscule seulement la première lettre + $roles = array_map(function($role) { + return ucfirst(strtolower(str_replace('ROLE_', '', $role))); + }, $this->Role); + + return implode(', ', $roles); + } + public function setRoles(array $Role): self { $this->Role = $Role; diff --git a/symfony.lock b/symfony.lock index cf1900f..8cadaf0 100644 --- a/symfony.lock +++ b/symfony.lock @@ -248,6 +248,18 @@ "templates/base.html.twig" ] }, + "symfony/ux-icons": { + "version": "2.21", + "recipe": { + "repo": "github.com/symfony/recipes", + "branch": "main", + "version": "2.17", + "ref": "803a3bbd5893f9584969ab8670290cdfb6a0a5b5" + }, + "files": [ + "./assets/icons/symfony.svg" + ] + }, "symfony/ux-turbo": { "version": "v2.20.0" }, diff --git a/templates/Modals/gestionCompteModal.html.twig b/templates/Modals/gestionCompteModal.html.twig new file mode 100644 index 0000000..a5d43af --- /dev/null +++ b/templates/Modals/gestionCompteModal.html.twig @@ -0,0 +1,58 @@ + + + + diff --git a/templates/Modals/gestionTableModal.html.twig b/templates/Modals/gestionTableModal.html.twig new file mode 100644 index 0000000..e7a45fd --- /dev/null +++ b/templates/Modals/gestionTableModal.html.twig @@ -0,0 +1,8 @@ + diff --git a/templates/Modals/gestionUtilisateurModal.html.twig b/templates/Modals/gestionUtilisateurModal.html.twig new file mode 100644 index 0000000..de2e688 --- /dev/null +++ b/templates/Modals/gestionUtilisateurModal.html.twig @@ -0,0 +1,8 @@ + diff --git a/templates/index/index.html.twig b/templates/index/index.html.twig index a82fa1e..a259820 100644 --- a/templates/index/index.html.twig +++ b/templates/index/index.html.twig @@ -1,16 +1,91 @@ {% extends 'base.html.twig' %} -{% block title %}Hello IndexController!{% endblock %} +{% block head %} + + + {% block title %}Index FestinHegre!{% endblock %} + + + +{% endblock %} + +{% block stylesheets %} + +{% endblock %} {% block body %} - + + + +
+
+ Bonjour, {{ app.user.prenom }} +
+
+ Rôle : {{ app.user.getRolesAsString() }} +
+
+ + +
+ + +
+
    +
  • +
    + {{ ux_icon('grommet-icons:group') }} + Gérer Utilisateur +
    +
    • +
  • +
    + {{ ux_icon('ic:outline-table-bar') }} + Gérer Table +
    +
    • +
  • +
    + {{ ux_icon('bx:food-menu') }} + Gestion Menu +
    +
    • +
  • +
    + {{ ux_icon('lsicon:badge-promotion-outline') }} + Gestion Promotion +
    +
    • +
  • +
    + {{ ux_icon('fluent-emoji-high-contrast:ten-oclock') }} + Voir tendances +
    +
    • +
+
+ +
+
+ {{ ux_icon('ph:user-circle-fill') }} + Compte +
+
+ + {{ ux_icon('iconamoon:exit-bold') }} + +
+
+
+ + + {% include 'Modals/gestionUtilisateurModal.html.twig' %} + {% include 'Modals/gestionTableModal.html.twig' %} + {% include 'Modals/gestionCompteModal.html.twig' %} + {% include 'Modals/gestionUtilisateurModal.html.twig' %} - {% if 'ROLE_ADMIN' in app.user.roles %} -

Vous avez accès à toutes les fonctionnalités administratives.

- {% elseif 'ROLE_USER' in app.user.roles %} -

Vous êtes un utilisateur standard.

- {% else %} -

Accès limité.

- {% endif %} +{% endblock %} + +{% block javascripts %} + {% endblock %}