Ajout et modification du nouvelle index.html fait dans realease/Index
This commit is contained in:
parent
975bc1e153
commit
b98318b79f
@ -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.*",
|
||||
|
||||
95
composer.lock
generated
95
composer.lock
generated
@ -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"
|
||||
}
|
||||
|
||||
@ -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],
|
||||
];
|
||||
|
||||
152
public/css/modal.css
Normal file
152
public/css/modal.css
Normal file
@ -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;
|
||||
}
|
||||
|
||||
38
public/js/modal.js
Normal file
38
public/js/modal.js
Normal file
@ -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";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -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;
|
||||
|
||||
12
symfony.lock
12
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"
|
||||
},
|
||||
|
||||
58
templates/Modals/gestionCompteModal.html.twig
Normal file
58
templates/Modals/gestionCompteModal.html.twig
Normal file
@ -0,0 +1,58 @@
|
||||
<div id="compteModal" class="modal" tabindex="-1" aria-labelledby="compteModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<span class="close" data-modal="compteModal">×</span>
|
||||
<h2 class="modal-header" id="compteModalLabel">Gestion Compte</h2>
|
||||
<div class="modal-body">
|
||||
<!-- Contenu de la modal Gestion Utilisateur -->
|
||||
<div id="InformationUser">
|
||||
<div id="NomUser">
|
||||
<span>Nom : {{ app.user.nom }}</span>
|
||||
</div>
|
||||
<div id="NomUser">
|
||||
<span>Prenom : {{ app.user.prenom }}</span>
|
||||
</div>
|
||||
<div id="NomUser">
|
||||
<span>Email : {{ app.user.userIdentifier }}</span>
|
||||
</div>
|
||||
<div id="NomUser">
|
||||
<span>Roles : {{ app.user.getRolesAsString() }}</span>
|
||||
</div>
|
||||
<div class="btn-custom icon-container" data-bs-toggle="modal" data-bs-target="#modifModal">
|
||||
<i class="icon-medium"> {{ ux_icon('fluent-emoji-high-contrast:ten-oclock') }}</i>
|
||||
<span>Modifier</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal de Modification des Informations Utilisateur -->
|
||||
<div id="modifModal" class="modal" tabindex="-1" aria-labelledby="modifModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modifModalLabel">Modifier Informations Utilisateur</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="newEmail" class="form-label">Nouvel Email</label>
|
||||
<input type="email" class="form-control" id="newEmail" placeholder="Entrez votre nouvel email">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="newNom" class="form-label">Nouveau Nom</label>
|
||||
<input type="text" class="form-control" id="newNom" placeholder="Entrez votre nouveau nom">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="newPrenom" class="form-label">Nouveau Prenom</label>
|
||||
<input type="text" class="form-control" id="newPrenom" placeholder="Entrez votre nouveau prenom">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Confirmer</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
8
templates/Modals/gestionTableModal.html.twig
Normal file
8
templates/Modals/gestionTableModal.html.twig
Normal file
@ -0,0 +1,8 @@
|
||||
<div id="tableModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" data-modal="tableModal">×</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>
|
||||
8
templates/Modals/gestionUtilisateurModal.html.twig
Normal file
8
templates/Modals/gestionUtilisateurModal.html.twig
Normal file
@ -0,0 +1,8 @@
|
||||
<div id="userModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<span class="close" data-modal="userModal">×</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>
|
||||
@ -1,16 +1,91 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Hello IndexController!{% endblock %}
|
||||
{% block head %}
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% block title %}Index FestinHegre!{% 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>
|
||||
</style>
|
||||
<style></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 data-modal="compteModal">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>
|
||||
|
||||
<!-- Include modals -->
|
||||
{% 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 %}
|
||||
<p>Vous avez accès à toutes les fonctionnalités administratives.</p>
|
||||
{% elseif 'ROLE_USER' in app.user.roles %}
|
||||
<p>Vous êtes un utilisateur standard.</p>
|
||||
{% else %}
|
||||
<p>Accès limité.</p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
<script src="{{ asset('js/modal.js') }}"></script> <!-- Ajout du fichier JS -->
|
||||
{% endblock %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user