templates/front/disponibilites_fragment.html.twig line 1

Open in your IDE?
  1. {# templates/front/disponibilites_fragment.html.twig #}
  2. <section id="planning">
  3.     <h3 class="mb-3 color-green-s">{{ titre }}</h3>
  5.     <h6 class="title-admin-p hr color-admin">Calendrier de la {{ titre_tableau }}</h6>
  7.     <div class="calendar-navigation mb-4">
  8.         <a href="#" class="change-week" data-date="{{ date_last }}"><img src="{{ asset('/assets/images/imgEC/semaine_precedente.png') }}" alt="Semaine précédente"></a>
  9.         <span id="current-week" class="mx-3">{{ titre_tableau }}</span>
  10.         <a href="#" class="change-week" data-date="{{ date_next }}"><img src="{{ asset('/assets/images/imgEC/semaine_suivante.png') }}" alt="Semaine suivante"></a>
  11.     </div>
  13.     <!-- Légende visible uniquement sur mobile -->
  14.     <div class="calendar-legend-mobile d-flex flex-wrap gap-3 align-items-center my-3">
  15.         <div class="legend-item d-flex align-items-center">
  16.             <span class="legend-box reserved"></span> Réservé
  17.         </div>
  18.         <div class="legend-item d-flex align-items-center">
  19.             <span class="legend-box available"></span> Disponible
  20.         </div>
  21.         <div class="legend-item d-flex align-items-center">
  22.             <span class="legend-box past"></span> Indisponible
  23.         </div>
  24.         <div class="legend-item d-flex align-items-center">
  25.             <span class="legend-box past-reserved"></span> Réservé (passé)
  26.         </div>
  27.     </div>
  29.     <div class="calendar-container">
  30.         <table class="table table-bordered text-center">
  31.             <thead>
  32.             <tr>
  33.                 <th>H</th>
  34.                 <th>Lun</th>
  35.                 <th>Mar</th>
  36.                 <th>Mer</th>
  37.                 <th>Jeu</th>
  38.                 <th>Ven</th>
  39.                 <th>Sam</th>
  40.                 <th>Dim</th>
  41.             </tr>
  42.             </thead>
  43.             <tbody id="calendar-body">
  44.             </tbody>
  45.         </table>
  46.     </div>
  47. </section>
  48. <style type="text/css">
  49.     .credits-header .badge { font-size: 1rem; padding: 0.5rem 1rem; }
  50.     .calendar-container { overflow-x: auto; }
  51.     .table th, .table td { vertical-align: middle; height: 60px; }
  52.     .table td.reserved { background-color: #f8d7da; color: #721c24; }
  53.     .table td.available { background-color: #d4edda;color: #155724; border: 1px solid #aaa!important;}
  54.     .table td:hover.available { background-color: #c3e6cb;}
  55.     section#planning{ width: 100%; }
  56.     .table td.past-reserved {background-color: #d6d8dc;}
  57.     /* Par défaut, on cache la légende */
  58.     .calendar-legend-mobile { display: none; }
  59.     /* Affiche la légende uniquement sur les petits écrans */
  60.     @media (max-width: 768px) { .calendar-legend-mobile { display: flex; }}
  61.     /* Style des pastilles couleur */
  62.     .legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
  63.     .legend-box { width: 20px; height: 20px; display: inline-block; border: 1px solid #999; border-radius: 4px; }
  64.     .legend-box.reserved { background-color: #f8d7da; }
  65.     .legend-box.available { background-color: #d4edda; }
  66.     .legend-box.past { background-color: #ffffff; }
  67.     .legend-box.past-reserved { background-color: #d6d8dc; /* Même couleur que past */ border: 2px solid #721c24; /* Bord plus foncé pour signaler une réservation passée */ }
  68. </style>
  69. <script type="application/json" id="calendar-data" data-calendar-json>
  70.     {{ {
  71.         reservations: reservations,
  72.         dates: dates
  73.     } | json_encode | raw }}
  74. </script>