From 16bc549ece9164d16ae3eb0d13c189086c2a3990 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Sat, 7 Jun 2025 00:06:34 +0200 Subject: [PATCH] opening and off days --- assets/opening_hours.js | 218 ++++++++++++++++++--------- assets/styles/app.css | 9 ++ templates/public/edit.html.twig | 11 +- templates/public/edit/clim.html.twig | 2 +- 4 files changed, 167 insertions(+), 73 deletions(-) diff --git a/assets/opening_hours.js b/assets/opening_hours.js index 1cca745..54a394a 100644 --- a/assets/opening_hours.js +++ b/assets/opening_hours.js @@ -94,30 +94,44 @@ const openingHoursFormManager = { const horairesContainer = checkbox.closest('.jour-container').querySelector('.horaires-container'); horairesContainer.classList.remove('d-none'); - // 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"]`); - if (plage2Checkbox) { - plage2Checkbox.checked = false; + // 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"]`); + if (plage2Checkbox) { + plage2Checkbox.checked = false; + } } - } - // Remplir la première plage horaire si spécifiée - if (hours) { - const [startTime, endTime] = hours.split('-'); - if (startTime && endTime) { - const [startHour, startMinute] = startTime.split(':'); - const [endHour, endMinute] = endTime.split(':'); + // Remplir la première plage horaire si spécifiée + if (hours) { + const [startTime, endTime] = hours.split('-'); + if (startTime && endTime) { + const [startHour, startMinute] = startTime.split(':'); + const [endHour, endMinute] = endTime.split(':'); - const startHourInput = horairesContainer.querySelector(`input[name="${daysMap[day]}-plage1-start-hour"]`); - const startMinuteInput = horairesContainer.querySelector(`input[name="${daysMap[day]}-plage1-start-minute"]`); - const endHourInput = horairesContainer.querySelector(`input[name="${daysMap[day]}-plage1-end-hour"]`); - const endMinuteInput = horairesContainer.querySelector(`input[name="${daysMap[day]}-plage1-end-minute"]`); + const startHourInput = horairesContainer.querySelector(`input[name="${daysMap[day]}-plage1-start-hour"]`); + const startMinuteInput = horairesContainer.querySelector(`input[name="${daysMap[day]}-plage1-start-minute"]`); + const endHourInput = horairesContainer.querySelector(`input[name="${daysMap[day]}-plage1-end-hour"]`); + const endMinuteInput = horairesContainer.querySelector(`input[name="${daysMap[day]}-plage1-end-minute"]`); - if (startHourInput) startHourInput.value = startHour; - if (startMinuteInput) startMinuteInput.value = startMinute; - if (endHourInput) endHourInput.value = endHour; - if (endMinuteInput) endMinuteInput.value = endMinute; + if (startHourInput) startHourInput.value = startHour; + if (startMinuteInput) startMinuteInput.value = startMinute; + if (endHourInput) endHourInput.value = endHour; + if (endMinuteInput) endMinuteInput.value = endMinute; + } } } } @@ -135,30 +149,44 @@ const openingHoursFormManager = { const horairesContainer = checkbox.closest('.jour-container').querySelector('.horaires-container'); horairesContainer.classList.remove('d-none'); - // 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"]`); - if (plage2Checkbox) { - plage2Checkbox.checked = false; + // 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"]`); + if (plage2Checkbox) { + plage2Checkbox.checked = false; + } } - } - // Remplir la première plage horaire si spécifiée - if (hours) { - const [startTime, endTime] = hours.split('-'); - if (startTime && endTime) { - const [startHour, startMinute] = startTime.split(':'); - const [endHour, endMinute] = endTime.split(':'); + // Remplir la première plage horaire si spécifiée + if (hours) { + const [startTime, endTime] = hours.split('-'); + if (startTime && endTime) { + const [startHour, startMinute] = startTime.split(':'); + const [endHour, endMinute] = endTime.split(':'); - const startHourInput = horairesContainer.querySelector(`input[name="${day}-plage1-start-hour"]`); - const startMinuteInput = horairesContainer.querySelector(`input[name="${day}-plage1-start-minute"]`); - const endHourInput = horairesContainer.querySelector(`input[name="${day}-plage1-end-hour"]`); - const endMinuteInput = horairesContainer.querySelector(`input[name="${day}-plage1-end-minute"]`); + const startHourInput = horairesContainer.querySelector(`input[name="${day}-plage1-start-hour"]`); + const startMinuteInput = horairesContainer.querySelector(`input[name="${day}-plage1-start-minute"]`); + const endHourInput = horairesContainer.querySelector(`input[name="${day}-plage1-end-hour"]`); + const endMinuteInput = horairesContainer.querySelector(`input[name="${day}-plage1-end-minute"]`); - if (startHourInput) startHourInput.value = startHour; - if (startMinuteInput) startMinuteInput.value = startMinute; - if (endHourInput) endHourInput.value = endHour; - if (endMinuteInput) endMinuteInput.value = endMinute; + if (startHourInput) startHourInput.value = startHour; + if (startMinuteInput) startMinuteInput.value = startMinute; + if (endHourInput) endHourInput.value = endHour; + if (endMinuteInput) endMinuteInput.value = endMinute; + } } } } @@ -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,17 +482,23 @@ const openingHoursFormManager = { if (checkbox && checkbox.checked) { joursSelectionnes.push(jours[jour]); - // Récupérer les horaires pour ce jour - const prefix = jour.toLowerCase(); - const plage1 = this.getTimeRange(`${prefix}-plage1`); - const plage2 = this.getTimeRange(`${prefix}-plage2`); + // 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`); + const plage2 = this.getTimeRange(`${prefix}-plage2`); - let horaires = []; - if (plage1) horaires.push(plage1); - if (plage2) horaires.push(plage2); + let horaires = []; + if (plage1) horaires.push(plage1); + if (plage2) horaires.push(plage2); - if (horaires.length > 0) { - horairesParJour[jours[jour]] = horaires.join(','); + if (horaires.length > 0) { + horairesParJour[jours[jour]] = horaires.join(','); + } } } }); @@ -527,6 +590,9 @@ const openingHoursFormManager = { transform: translateY(-50%); z-index: 1; } + .opening-hours-closed { + background-color: #f8d7da; + } `; document.head.appendChild(style); @@ -554,29 +620,43 @@ const openingHoursFormManager = { // Trouver les horaires pour ce jour const rule = rules.find(r => r.days.includes(osmDay)); - if (rule && rule.hours) { - const timeRanges = rule.hours.split(','); - timeRanges.forEach((timeRange, index) => { - const [start, end] = timeRange.split('-'); - const [startHour, startMinute] = start.split(':'); - const [endHour, endMinute] = end.split(':'); + 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('-'); + const [startHour, startMinute] = start.split(':'); + const [endHour, endMinute] = end.split(':'); - // Calculer la position et la largeur - const startMinutes = parseInt(startHour) * 60 + parseInt(startMinute); - const endMinutes = parseInt(endHour) * 60 + parseInt(endMinute); - const totalMinutes = 24 * 60; + // Calculer la position et la largeur + const startMinutes = parseInt(startHour) * 60 + parseInt(startMinute); + const endMinutes = parseInt(endHour) * 60 + parseInt(endMinute); + const totalMinutes = 24 * 60; - const left = (startMinutes / totalMinutes) * 100; - const width = ((endMinutes - startMinutes) / totalMinutes) * 100; + const left = (startMinutes / totalMinutes) * 100; + const width = ((endMinutes - startMinutes) / totalMinutes) * 100; + const timeDiv = document.createElement('div'); + timeDiv.classList.add('opening-hours-time'); + timeDiv.style.left = `${left}%`; + timeDiv.style.width = `${width}%`; + timeDiv.title = `${start}-${end}`; + + dayDiv.appendChild(timeDiv); + }); + } else { + // Toute la journée const timeDiv = document.createElement('div'); timeDiv.classList.add('opening-hours-time'); - timeDiv.style.left = `${left}%`; - timeDiv.style.width = `${width}%`; - timeDiv.title = `${start}-${end}`; - + timeDiv.style.left = '0%'; + timeDiv.style.width = '100%'; + timeDiv.title = 'Toute la journée'; dayDiv.appendChild(timeDiv); - }); + } } container.appendChild(dayDiv); diff --git a/assets/styles/app.css b/assets/styles/app.css index 6630f27..0c9addc 100644 --- a/assets/styles/app.css +++ b/assets/styles/app.css @@ -99,4 +99,13 @@ table.js-sort-table th:active { #advanced_tags { border-left: solid 3px #ccc; padding-left: 2rem; +} + + +.start-hour { + margin-left: -1rem; +} + +.end-hour { + margin-left: -1rem; } \ No newline at end of file diff --git a/templates/public/edit.html.twig b/templates/public/edit.html.twig index 3b2ca58..8ed0034 100644 --- a/templates/public/edit.html.twig +++ b/templates/public/edit.html.twig @@ -106,7 +106,7 @@
-
+
@@ -141,7 +141,7 @@
- {{ 'display.view_on_osm'|trans }} + {{ 'display.view_on_osm'|trans }}
- + {# {{ 'display.view_stats'|trans }} + #} + + + + Dashboard
diff --git a/templates/public/edit/clim.html.twig b/templates/public/edit/clim.html.twig index 2ac0e14..d6a1602 100644 --- a/templates/public/edit/clim.html.twig +++ b/templates/public/edit/clim.html.twig @@ -1,4 +1,4 @@ -
+