opening and off days

assets/opening_hours.js

@@ -94,6 +94,19 @@ const openingHoursFormManager = {
               const horairesContainer = checkbox.closest('.jour-container').querySelector('.horaires-container');
               horairesContainer.classList.remove('d-none');
 
+              // Gérer le cas "fermé"
+              if (hours === 'off') {
+                const fermeCheckbox = horairesContainer.querySelector(`input[name="${daysMap[day]}-ferme"]`);
+                if (fermeCheckbox) {
+                  fermeCheckbox.checked = true;
+                  // Décocher les plages horaires
+                  const plageInputs = horairesContainer.querySelectorAll('.time-range input[type="checkbox"]');
+                  plageInputs.forEach(plageInput => {
+                    plageInput.checked = false;
+                    plageInput.dispatchEvent(new Event('change'));
+                  });
+                }
+              } else {
                 // Décocher la deuxième plage si elle n'est pas présente dans l'input
                 if (hours && !hours.includes(',')) {
                   const plage2Checkbox = horairesContainer.querySelector(`input[name="${daysMap[day]}-plage2-active"]`);
@@ -122,6 +135,7 @@ const openingHoursFormManager = {
                 }
               }
             }
+          }
           parsedOpeningHours.push({
             days: dayRange,
             hours: hours
@@ -135,6 +149,19 @@ const openingHoursFormManager = {
             const horairesContainer = checkbox.closest('.jour-container').querySelector('.horaires-container');
             horairesContainer.classList.remove('d-none');
 
+            // Gérer le cas "fermé"
+            if (hours === 'off') {
+              const fermeCheckbox = horairesContainer.querySelector(`input[name="${day}-ferme"]`);
+              if (fermeCheckbox) {
+                fermeCheckbox.checked = true;
+                // Décocher les plages horaires
+                const plageInputs = horairesContainer.querySelectorAll('.time-range input[type="checkbox"]');
+                plageInputs.forEach(plageInput => {
+                  plageInput.checked = false;
+                  plageInput.dispatchEvent(new Event('change'));
+                });
+              }
+            } else {
               // Décocher la deuxième plage si elle n'est pas présente dans l'input
               if (hours && !hours.includes(',')) {
                 const plage2Checkbox = horairesContainer.querySelector(`input[name="${day}-plage2-active"]`);
@@ -162,6 +189,7 @@ const openingHoursFormManager = {
                 }
               }
             }
+          }
           parsedOpeningHours.push({
             days: [days],
             hours: hours
@@ -217,7 +245,26 @@ const openingHoursFormManager = {
 
         // Conteneur pour les plages horaires
         const horairesContainer = document.createElement('div');
-        horairesContainer.classList.add('horaires-container', 'ms-4', 'd-none', 'row', 'g-3');
+        horairesContainer.classList.add('horaires-container', 'ml-2', 'd-none', 'row');
+
+        // Option "fermé"
+        const fermeContainer = document.createElement('div');
+        fermeContainer.classList.add('col-12', 'mb-2');
+        const fermeCheck = document.createElement('div');
+        fermeCheck.classList.add('form-check');
+        const fermeInput = document.createElement('input');
+        fermeInput.type = 'checkbox';
+        fermeInput.id = `${jour.toLowerCase()}-ferme`;
+        fermeInput.name = `${jour.toLowerCase()}-ferme`;
+        fermeInput.classList.add('form-check-input');
+        const fermeLabel = document.createElement('label');
+        fermeLabel.htmlFor = `${jour.toLowerCase()}-ferme`;
+        fermeLabel.classList.add('form-check-label');
+        fermeLabel.textContent = 'Fermé';
+        fermeCheck.appendChild(fermeInput);
+        fermeCheck.appendChild(fermeLabel);
+        fermeContainer.appendChild(fermeCheck);
+        horairesContainer.appendChild(fermeContainer);
 
         // Première plage horaire
         const plage1 = this.createTimeRangeInputs(`${jour.toLowerCase()}-plage1`);
@@ -235,6 +282,16 @@ const openingHoursFormManager = {
           horairesContainer.classList.toggle('d-none', !e.target.checked);
           this.convertToOSMOpeningHours(inputSelector);
         });
+
+        // Ajouter l'événement pour gérer l'option "fermé"
+        fermeInput.addEventListener('change', (e) => {
+          const plageInputs = horairesContainer.querySelectorAll('.time-range input[type="checkbox"]');
+          plageInputs.forEach(plageInput => {
+            plageInput.checked = !e.target.checked;
+            plageInput.dispatchEvent(new Event('change'));
+          });
+          this.convertToOSMOpeningHours(inputSelector);
+        });
       });
 
       form.appendChild(joursDiv);
@@ -307,7 +364,7 @@ const openingHoursFormManager = {
 
     // Heure de début
     const startContainer = document.createElement('div');
-    startContainer.classList.add('col-6', 'd-flex', 'align-items-center', 'gap-2');
+    startContainer.classList.add('col-6', 'd-flex', 'align-items-center', 'gap-2', 'start-hour');
 
     const startHour = document.createElement('input');
     startHour.type = 'number';
@@ -332,7 +389,7 @@ const openingHoursFormManager = {
 
     // Heure de fin
     const endContainer = document.createElement('div');
-    endContainer.classList.add('col-6', 'd-flex', 'align-items-center', 'gap-2');
+    endContainer.classList.add('col-6', 'd-flex', 'align-items-center', 'gap-2', 'end-hour');
 
     const endHour = document.createElement('input');
     endHour.type = 'number';
@@ -425,6 +482,11 @@ const openingHoursFormManager = {
       if (checkbox && checkbox.checked) {
         joursSelectionnes.push(jours[jour]);
 
+        // Vérifier si le jour est marqué comme fermé
+        const fermeCheckbox = document.getElementById(`${jour.toLowerCase()}-ferme`);
+        if (fermeCheckbox && fermeCheckbox.checked) {
+          horairesParJour[jours[jour]] = 'off';
+        } else {
           // Récupérer les horaires pour ce jour
           const prefix = jour.toLowerCase();
           const plage1 = this.getTimeRange(`${prefix}-plage1`);
@@ -438,6 +500,7 @@ const openingHoursFormManager = {
             horairesParJour[jours[jour]] = horaires.join(',');
           }
         }
+      }
     });
 
     // Optimiser les plages horaires identiques consécutives
@@ -527,6 +590,9 @@ const openingHoursFormManager = {
         transform: translateY(-50%);
         z-index: 1;
       }
+      .opening-hours-closed {
+        background-color: #f8d7da;
+      }
     `;
     document.head.appendChild(style);
 
@@ -554,7 +620,12 @@ const openingHoursFormManager = {
 
       // Trouver les horaires pour ce jour
       const rule = rules.find(r => r.days.includes(osmDay));
-      if (rule && rule.hours) {
+      if (rule) {
+        if (rule.hours === 'off') {
+          // Jour fermé
+          dayDiv.classList.add('opening-hours-closed');
+        } else if (rule.hours) {
+          // Plages horaires spécifiques
           const timeRanges = rule.hours.split(',');
           timeRanges.forEach((timeRange, index) => {
             const [start, end] = timeRange.split('-');
@@ -577,6 +648,15 @@ const openingHoursFormManager = {
 
             dayDiv.appendChild(timeDiv);
           });
+        } else {
+          // Toute la journée
+          const timeDiv = document.createElement('div');
+          timeDiv.classList.add('opening-hours-time');
+          timeDiv.style.left = '0%';
+          timeDiv.style.width = '100%';
+          timeDiv.title = 'Toute la journée';
+          dayDiv.appendChild(timeDiv);
+        }
       }
 
       container.appendChild(dayDiv);

assets/styles/app.css

@@ -100,3 +100,12 @@ table.js-sort-table th:active {
     border-left: solid 3px #ccc;
     padding-left: 2rem;
 }
+
+
+.start-hour {
+    margin-left: -1rem;
+}
+
+.end-hour {
+    margin-left: -1rem;
+}

templates/public/edit.html.twig

@@ -106,7 +106,7 @@
 
         <div class="row">
             <div class="col-12 mt-4">
-                <div class="actions-modification">
+                <div class="actions-modification mb-4 mx-2">
                  
                     <a class="btn btn-info" href="{{ path('app_public_index') }}">
                         <i class="bi bi-people"></i> 
@@ -141,7 +141,7 @@
 
                         <div class="lien-OpenStreetMap">
                             <a href="https://www.openstreetmap.org/{{commerce.osmKind}}/{{ commerce_overpass['@attributes'].id }}"  class="btn btn-outline-secondary">
-                                {{ 'display.view_on_osm'|trans }}
+                              <i class="bi bi-globe"></i>  {{ 'display.view_on_osm'|trans }}
                             </a>
                             <button onclick="openInJOSM('{{commerce.osmKind}}', '{{ commerce_overpass['@attributes'].id }}')" class="btn btn-outline-secondary ms-2">
                                 <i class="bi bi-pencil"></i> Éditer dans JOSM
@@ -150,9 +150,14 @@
                                 <i class="bi bi-camera"></i> Voir dans Panoramax
                             </button>
                         </div>
-                        <a href="{{ path('app_admin_stats', {'zip_code':  zone ?? '-1'}) }}" class="btn btn-outline-secondary">
+                        {# <a href="{{ path('app_admin_stats', {'zip_code':  zone ?? '-1'}) }}" class="btn btn-outline-secondary">
                         <i class="bi bi-bar-chart"></i>
                             {{ 'display.view_stats'|trans }}
+                        </a> #}
+
+                        <a href="{{ path('app_admin_stats', {'zip_code':  zone ?? '-1'}) }}" class="btn btn-outline-secondary">
+                        <i class="bi bi-bar-chart"></i>
+                            Dashboard
                         </a>
                     </div>
                     <div class="disclaimer mt-3 p-3 bg-light rounded">

templates/public/edit/clim.html.twig

@@ -1,4 +1,4 @@
-<div id="clim" class="mb-6">
+<div id="clim" class="mb-4">
   <h2 class="mb-3 title">
       <label for="commerce_tag_value__clim">
       <i class="bi bi-thermometer-half"></i>