{% block title %}Pointage{% endblock %}

{# ══════════════════════════════════════════════════════════════════ Template de base — base.html.twig ══════════════════════════════════════════════════════════════════ Hérité par tous les templates de l'application via {% extends %}. Blocs redéfinissables : title : titre de l'onglet (suffixé par « - Culture Controle ») page_title : titre affiché dans la topbar stylesheets : CSS supplémentaires par page importmap : assets Symfony (app.js → app.css) — ne pas surcharger body : contenu principal de la page javascripts : scripts JS supplémentaires en fin de body Structure de mise en page : ┌─────────────────────────────────────────────┐ │ .d-flex (min-height: 100vh) │ │ ├──

(desktop ≥ lg)│ │ ├── #sidebarMobile (offcanvas < lg) │ │ └── .main-wrapper │ │ ├── .topbar (fil d'Ariane + date) │ │ └── .page-content ({% block body %}) │ └─────────────────────────────────────────────┘ La sidebar et la topbar ne s'affichent que si l'utilisateur est connecté (app.user). La page de login hérite de ce template mais ne voit donc ni sidebar ni topbar. Dépendances CDN (chargées dans ) : - Bootstrap 5.3.3 (CSS + JS bundle en fin de body) - Bootstrap Icons 1.11.3 - Google Fonts Inter (400/500/600/700) ══════════════════════════════════════════════════════════════════ #} {% block title %}Pointage{% endblock %} - Culture Controle {% block stylesheets %}{% endblock %} {% block importmap %}{{ importmap('app') }}{% endblock %}

{# Sidebar et topbar : affichées uniquement pour les utilisateurs connectés #} {% if app.user %} {# ── Sidebar desktop (visible ≥ lg = 992 px) ── #}

{% if is_granted('ROLE_ADMIN') %}

Administration

Pointage

Planning

Modification planning

Mon espace

{% else %}

Mon espace

{% endif %}

V1.0.0

Déconnexion

{# ── Sidebar mobile — panneau offcanvas Bootstrap (< lg) ── #}

{% if is_granted('ROLE_ADMIN') %}

Administration

Pointage

Planning

Modification planning

Mon espace

{% else %}

Mon espace

{% endif %}

V1.0.0

Déconnexion

{% endif %} {# Zone principale : prend tout l'espace restant à droite de la sidebar #}

{# Topbar : bouton menu mobile + titre de page + date du jour #} {% if app.user %} {% endif %} {# Contenu de page : messages flash + bloc body #}

{# Messages flash : success, danger, warning, info (Bootstrap alert) #} {% for label, messages in app.flashes %} {% for msg in messages %}

{% endfor %} {% endfor %} {% block body %}{% endblock %}

{% block javascripts %}{% endblock %} {# ── Web Push : enregistrement SW + souscription ───────────────────────────── Uniquement pour les utilisateurs connectés (ROLE_USER). Flux : 1. Enregistre le Service Worker (/sw.js) qui gère la réception des pushs 2. Demande la permission de notification (popup navigateur, une seule fois) 3. Crée ou récupère la souscription PushManager 4. Envoie la souscription au serveur via POST /push/subscribe Sécurité : - La clé VAPID_PUBLIC_KEY (data-vapid-key) est publique par définition : elle sert à chiffrer côté client, pas à signer. - La requête fetch vers /push/subscribe est JSON (Content-Type: application/json). Les attaques CSRF classiques (form POST) ne peuvent pas forger ce Content-Type depuis un autre domaine (bloqué par CORS + SameSite cookies). - userVisibleOnly: true est exigé par les navigateurs : toute notification reçue DOIT être affichée à l'utilisateur (pas de push silencieux). ──────────────────────────────────────────────────────────────────────────── #} {% if is_granted('ROLE_USER') %} {% endif %}