mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
up
This commit is contained in:
Tykayn
tykayn
parent
a17fd9c232
commit
8bce5fe21c
14 changed files with 628 additions and 634 deletions
408
assets/app.js
408
assets/app.js
|
|
@ -7,8 +7,10 @@
|
|||
|
||||
// any CSS you import will output into a single css file (app.css in this case)
|
||||
import './styles/app.css';
|
||||
import './utils.js';
|
||||
import './opening_hours.js';
|
||||
import './josm.js';
|
||||
|
||||
console.log('Hello World de app.js');
|
||||
|
||||
|
||||
// Attendre le chargement du DOM
|
||||
|
|
@ -16,17 +18,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
console.log('DOMContentLoaded');
|
||||
|
||||
|
||||
function updateMapHeightForLargeScreens() {
|
||||
|
||||
const map = document.querySelector('#map');
|
||||
// Vérifier si on est sur une page avec un titre h1 contenant "statistiques"
|
||||
const h1Element = document.querySelector('h1');
|
||||
if (h1Element && h1Element.textContent.toLowerCase().includes('statistiques')) {
|
||||
if (map && window.innerHeight > 800 && window.innerWidth > 800) {
|
||||
map.style.height = '80vh';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
updateMapHeightForLargeScreens()
|
||||
|
||||
|
|
@ -78,11 +71,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
const randombg = genererCouleurPastel();
|
||||
// Appliquer la couleur au body
|
||||
document.body.style.backgroundColor = randombg;
|
||||
// Appliquer le style pour .body-landing
|
||||
const bodyLanding = document.querySelector('.body-landing');
|
||||
if (bodyLanding) {
|
||||
bodyLanding.style.backgroundColor = randombg;
|
||||
}
|
||||
|
||||
// Gestion du bouton pour afficher tous les champs
|
||||
const btnShowAllFields = document.querySelector('#showAllFields');
|
||||
|
|
@ -110,394 +98,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
}
|
||||
|
||||
|
||||
const openingHoursFormManager = {
|
||||
defaultOpeningHours: '',
|
||||
init: function () {
|
||||
// Rechercher l'élément par son attribut name plutôt que par son id
|
||||
const openingHoursInput = document.querySelector('input[name="custom__opening_hours"]');
|
||||
if (!openingHoursInput) {
|
||||
console.warn('Élément input[name="custom__opening_hours"] non trouvé');
|
||||
return;
|
||||
}
|
||||
this.defaultOpeningHours = openingHoursInput.value;
|
||||
|
||||
this.makeForm();
|
||||
|
||||
if (this.defaultOpeningHours !== '') {
|
||||
this.parseOpeningHoursValue();
|
||||
}
|
||||
},
|
||||
parseOpeningHoursValue: function () {
|
||||
// Analyser la chaîne d'horaires d'ouverture
|
||||
const parsedOpeningHours = {};
|
||||
|
||||
// Masquer toutes les plages horaires par défaut
|
||||
const allDayContainers = document.querySelectorAll('.jour-container');
|
||||
allDayContainers.forEach(container => {
|
||||
const checkbox = container.querySelector('input[type="checkbox"]');
|
||||
const horairesContainer = container.querySelector('.horaires-container');
|
||||
checkbox.checked = false;
|
||||
horairesContainer.classList.add('d-none');
|
||||
});
|
||||
|
||||
if (this.defaultOpeningHours) {
|
||||
// Diviser les différentes règles (séparées par des points-virgules)
|
||||
const rules = this.defaultOpeningHours.split(';').map(r => r.trim());
|
||||
|
||||
rules.forEach(rule => {
|
||||
// Extraire les jours et les heures
|
||||
const [days, hours] = rule.split(' ').filter(Boolean);
|
||||
|
||||
// Convertir les jours en français
|
||||
const daysMap = {
|
||||
'Mo': 'lundi',
|
||||
'Tu': 'mardi',
|
||||
'We': 'mercredi',
|
||||
'Th': 'jeudi',
|
||||
'Fr': 'vendredi',
|
||||
'Sa': 'samedi',
|
||||
'Su': 'dimanche'
|
||||
};
|
||||
|
||||
// Gérer les plages de jours (ex: Mo-Fr)
|
||||
if (days.includes('-')) {
|
||||
const [start, end] = days.split('-');
|
||||
const startIndex = Object.keys(daysMap).indexOf(start);
|
||||
const endIndex = Object.keys(daysMap).indexOf(end);
|
||||
|
||||
for (let i = startIndex; i <= endIndex; i++) {
|
||||
const day = daysMap[Object.keys(daysMap)[i]];
|
||||
// Cocher la case du jour
|
||||
const checkbox = document.querySelector(`#jour-${day}`);
|
||||
if (checkbox) {
|
||||
checkbox.checked = true;
|
||||
checkbox.closest('.jour-container').querySelector('.horaires-container').classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Jour unique
|
||||
const day = daysMap[days];
|
||||
const checkbox = document.querySelector(`#jour-${day}`);
|
||||
if (checkbox) {
|
||||
checkbox.checked = true;
|
||||
checkbox.closest('.jour-container').querySelector('.horaires-container').classList.remove('d-none');
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
console.log(parsedOpeningHours);
|
||||
},
|
||||
makeForm: function () {
|
||||
const customOpeningHours = document.querySelector('input[name="custom__opening_hours"]');
|
||||
console.log('makeForm customOpeningHours', customOpeningHours);
|
||||
|
||||
if (customOpeningHours) {
|
||||
// Créer un conteneur flex pour aligner l'input et le formulaire
|
||||
const container = document.createElement('div');
|
||||
container.classList.add('d-flex', 'flex-column', 'flex-md-row', 'align-items-start', 'gap-3', 'w-100');
|
||||
|
||||
// Créer le formulaire
|
||||
const form = document.createElement('form');
|
||||
form.id = 'app_public_opening_hours';
|
||||
form.classList.add('mt-3', 'flex-grow-1');
|
||||
|
||||
// Créer les cases à cocher pour chaque jour
|
||||
const jours = ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'];
|
||||
const joursDiv = document.createElement('div');
|
||||
joursDiv.classList.add('jours-ouverture', 'mb-4', 'row', 'g-3', 'mx-4');
|
||||
|
||||
jours.forEach(jour => {
|
||||
const jourContainer = document.createElement('div');
|
||||
jourContainer.classList.add('jour-container', 'col-12');
|
||||
|
||||
// Checkbox pour le jour
|
||||
const divCheck = document.createElement('div');
|
||||
divCheck.classList.add('form-check', 'mb-2');
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'checkbox';
|
||||
input.id = `jour-${jour.toLowerCase()}`;
|
||||
input.name = `jour-${jour.toLowerCase()}`;
|
||||
input.classList.add('form-check-input');
|
||||
|
||||
const label = document.createElement('label');
|
||||
label.htmlFor = `jour-${jour.toLowerCase()}`;
|
||||
label.classList.add('form-check-label');
|
||||
label.textContent = jour;
|
||||
|
||||
divCheck.appendChild(input);
|
||||
|
||||
divCheck.appendChild(label);
|
||||
jourContainer.appendChild(divCheck);
|
||||
|
||||
// Conteneur pour les plages horaires
|
||||
const horairesContainer = document.createElement('div');
|
||||
horairesContainer.classList.add('horaires-container', 'ms-4', 'd-none');
|
||||
|
||||
// Première plage horaire
|
||||
const plage1 = this.createTimeRangeInputs(`${jour.toLowerCase()}-plage1`);
|
||||
horairesContainer.appendChild(plage1);
|
||||
|
||||
// Séparateur
|
||||
const separator = document.createElement('div');
|
||||
separator.classList.add('text-center', 'my-2');
|
||||
separator.textContent = 'et';
|
||||
horairesContainer.appendChild(separator);
|
||||
|
||||
|
||||
// Deuxième plage horaire
|
||||
const plage2 = this.createTimeRangeInputs(`${jour.toLowerCase()}-plage2`);
|
||||
horairesContainer.appendChild(plage2);
|
||||
|
||||
jourContainer.appendChild(horairesContainer);
|
||||
joursDiv.appendChild(jourContainer);
|
||||
|
||||
// Ajouter l'événement pour afficher/masquer les plages horaires
|
||||
input.addEventListener('change', (e) => {
|
||||
horairesContainer.classList.toggle('d-none', !e.target.checked);
|
||||
this.convertToOSMOpeningHours();
|
||||
});
|
||||
});
|
||||
|
||||
form.appendChild(joursDiv);
|
||||
|
||||
// Ajouter le formulaire au conteneur
|
||||
container.appendChild(form);
|
||||
|
||||
// Insérer le conteneur après l'input original
|
||||
const parent = customOpeningHours.parentNode;
|
||||
if (parent) {
|
||||
parent.insertBefore(container, customOpeningHours.nextSibling);
|
||||
}
|
||||
|
||||
// Ajouter un debounce pour limiter les appels lors des modifications
|
||||
const debounce = (func, wait) => {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
};
|
||||
|
||||
// Appliquer le debounce à la fonction de conversion
|
||||
const debouncedConvert = debounce(() => {
|
||||
this.convertToOSMOpeningHours();
|
||||
}, 300);
|
||||
|
||||
// Ajouter les listeners sur tous les inputs
|
||||
const allInputs = form.querySelectorAll('input');
|
||||
allInputs.forEach(input => {
|
||||
input.addEventListener('change', debouncedConvert);
|
||||
input.addEventListener('input', debouncedConvert);
|
||||
});
|
||||
} else {
|
||||
console.log('pas d input opening hours détecté')
|
||||
}
|
||||
},
|
||||
|
||||
createTimeRangeInputs: function (prefix) {
|
||||
const container = document.createElement('div');
|
||||
container.classList.add('time-range', 'mb-2');
|
||||
|
||||
// Case à cocher pour activer la plage
|
||||
const checkboxContainer = document.createElement('div');
|
||||
checkboxContainer.classList.add('form-check', 'mb-2');
|
||||
|
||||
const checkbox = document.createElement('input');
|
||||
checkbox.type = 'checkbox';
|
||||
checkbox.id = `${prefix}-active`;
|
||||
checkbox.name = `${prefix}-active`;
|
||||
checkbox.classList.add('form-check-input');
|
||||
checkbox.checked = true;
|
||||
|
||||
const checkboxLabel = document.createElement('label');
|
||||
checkboxLabel.htmlFor = `${prefix}-active`;
|
||||
checkboxLabel.classList.add('form-check-label');
|
||||
checkboxLabel.textContent = '';
|
||||
|
||||
checkboxContainer.appendChild(checkbox);
|
||||
checkboxContainer.appendChild(checkboxLabel);
|
||||
container.appendChild(checkboxContainer);
|
||||
|
||||
// Conteneur pour les inputs d'horaires
|
||||
const timeContainer = document.createElement('div');
|
||||
timeContainer.classList.add('ms-4', 'row', 'g-2');
|
||||
|
||||
// Heure de début
|
||||
const startContainer = document.createElement('div');
|
||||
startContainer.classList.add('col-6', 'd-flex', 'align-items-center', 'gap-2');
|
||||
|
||||
const startHour = document.createElement('input');
|
||||
startHour.type = 'number';
|
||||
startHour.min = '0';
|
||||
startHour.max = '23';
|
||||
startHour.classList.add('form-control', 'form-control-sm');
|
||||
startHour.style.width = '60px';
|
||||
startHour.placeholder = 'HH';
|
||||
startHour.name = `${prefix}-start-hour`;
|
||||
// Définir les horaires par défaut selon la plage
|
||||
startHour.value = prefix.includes('plage1') ? '08' : '14';
|
||||
|
||||
const startMinute = document.createElement('input');
|
||||
startMinute.type = 'number';
|
||||
startMinute.min = '0';
|
||||
startMinute.max = '59';
|
||||
startMinute.classList.add('form-control', 'form-control-sm');
|
||||
startMinute.style.width = '60px';
|
||||
startMinute.placeholder = 'MM';
|
||||
startMinute.name = `${prefix}-start-minute`;
|
||||
startMinute.value = '00';
|
||||
|
||||
// Heure de fin
|
||||
const endContainer = document.createElement('div');
|
||||
endContainer.classList.add('col-6', 'd-flex', 'align-items-center', 'gap-2');
|
||||
|
||||
const endHour = document.createElement('input');
|
||||
endHour.type = 'number';
|
||||
endHour.min = '0';
|
||||
endHour.max = '23';
|
||||
endHour.classList.add('form-control', 'form-control-sm');
|
||||
endHour.style.width = '60px';
|
||||
endHour.placeholder = 'HH';
|
||||
endHour.name = `${prefix}-end-hour`;
|
||||
// Définir les horaires par défaut selon la plage
|
||||
endHour.value = prefix.includes('plage1') ? '12' : '18';
|
||||
|
||||
const endMinute = document.createElement('input');
|
||||
endMinute.type = 'number';
|
||||
endMinute.min = '0';
|
||||
endMinute.max = '59';
|
||||
endMinute.classList.add('form-control', 'form-control-sm');
|
||||
endMinute.style.width = '60px';
|
||||
endMinute.placeholder = 'MM';
|
||||
endMinute.name = `${prefix}-end-minute`;
|
||||
endMinute.value = '00';
|
||||
|
||||
// Créer le texte avec les horaires
|
||||
const timeText = document.createElement('div');
|
||||
timeText.classList.add('d-flex', 'align-items-center', 'gap-2', 'flex-wrap');
|
||||
|
||||
// Texte de début
|
||||
const startText = document.createElement('span');
|
||||
startText.textContent = 'de';
|
||||
timeText.appendChild(startText);
|
||||
timeText.appendChild(startHour);
|
||||
timeText.appendChild(document.createTextNode(':'));
|
||||
timeText.appendChild(startMinute);
|
||||
|
||||
// Texte du milieu
|
||||
const middleText = document.createElement('span');
|
||||
middleText.textContent = 'à';
|
||||
timeText.appendChild(middleText);
|
||||
|
||||
// Texte de fin
|
||||
timeText.appendChild(endHour);
|
||||
timeText.appendChild(document.createTextNode(':'));
|
||||
timeText.appendChild(endMinute);
|
||||
|
||||
timeContainer.appendChild(timeText);
|
||||
container.appendChild(timeContainer);
|
||||
|
||||
// Fonction pour mettre à jour le style des inputs
|
||||
const updateInputsStyle = (isActive) => {
|
||||
const inputs = timeContainer.querySelectorAll('input');
|
||||
inputs.forEach(input => {
|
||||
if (isActive) {
|
||||
input.classList.remove('bg-light', 'text-muted');
|
||||
input.disabled = false;
|
||||
} else {
|
||||
input.classList.add('bg-light', 'text-muted');
|
||||
input.disabled = true;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Ajouter l'événement sur la checkbox
|
||||
checkbox.addEventListener('change', (e) => {
|
||||
updateInputsStyle(e.target.checked);
|
||||
});
|
||||
|
||||
// Appliquer le style initial
|
||||
updateInputsStyle(checkbox.checked);
|
||||
|
||||
return container;
|
||||
},
|
||||
|
||||
convertToOSMOpeningHours: function () {
|
||||
const jours = {
|
||||
'Lundi': 'Mo',
|
||||
'Mardi': 'Tu',
|
||||
'Mercredi': 'We',
|
||||
'Jeudi': 'Th',
|
||||
'Vendredi': 'Fr',
|
||||
'Samedi': 'Sa',
|
||||
'Dimanche': 'Su'
|
||||
};
|
||||
|
||||
let joursSelectionnes = [];
|
||||
let horairesParJour = {};
|
||||
|
||||
// Parcourir les checkboxes des jours
|
||||
Object.keys(jours).forEach(jour => {
|
||||
const checkbox = document.getElementById(`jour-${jour.toLowerCase()}`);
|
||||
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`);
|
||||
|
||||
let horaires = [];
|
||||
if (plage1) horaires.push(plage1);
|
||||
if (plage2) horaires.push(plage2);
|
||||
|
||||
if (horaires.length > 0) {
|
||||
horairesParJour[jours[jour]] = horaires.join(',');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Construire la chaîne au format OSM
|
||||
let osmFormat = '';
|
||||
if (joursSelectionnes.length > 0) {
|
||||
const horairesStrings = joursSelectionnes.map(jour => {
|
||||
return horairesParJour[jour] ? `${jour} ${horairesParJour[jour]}` : jour;
|
||||
});
|
||||
osmFormat = horairesStrings.join('; ');
|
||||
}
|
||||
|
||||
// Mettre à jour l'input custom__opening_hours
|
||||
const customOpeningHours = document.querySelector('input[name="custom__opening_hours"]');
|
||||
if (customOpeningHours) {
|
||||
customOpeningHours.value = osmFormat;
|
||||
}
|
||||
},
|
||||
|
||||
getTimeRange: function (prefix) {
|
||||
const isActive = document.querySelector(`input[name="${prefix}-active"]`).checked;
|
||||
if (!isActive) return null;
|
||||
|
||||
const startHour = document.querySelector(`input[name="${prefix}-start-hour"]`).value;
|
||||
const startMinute = document.querySelector(`input[name="${prefix}-start-minute"]`).value;
|
||||
const endHour = document.querySelector(`input[name="${prefix}-end-hour"]`).value;
|
||||
const endMinute = document.querySelector(`input[name="${prefix}-end-minute"]`).value;
|
||||
|
||||
if (startHour && startMinute && endHour && endMinute) {
|
||||
const start = `${startHour.padStart(2, '0')}:${startMinute.padStart(2, '0')}`;
|
||||
const end = `${endHour.padStart(2, '0')}:${endMinute.padStart(2, '0')}`;
|
||||
return `${start}-${end}`;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
openingHoursFormManager.init();
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue