mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
opening and off days
This commit is contained in:
Tykayn
tykayn
parent
56ec8ba4f0
commit
16bc549ece
4 changed files with 167 additions and 73 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue