/* * Welcome to your app's main JavaScript file! * * We recommend including the built version of this JavaScript file * (and its CSS file) in your base layout (base.html.twig). */ // any CSS you import will output into a single css file (app.css in this case) import './styles/app.css'; console.log('Hello World de app.js'); function labourer() { window.location.href = '/admin/labourer/' + document.getElementById('app_admin_labourer').value; } // Attendre le chargement du DOM document.addEventListener('DOMContentLoaded', () => { console.log('DOMContentLoaded'); // Générer une couleur pastel aléatoire const genererCouleurPastel = () => { // Utiliser des valeurs plus claires (180-255) pour obtenir des tons pastel const r = Math.floor(Math.random() * 75 + 180); const g = Math.floor(Math.random() * 75 + 180); const b = Math.floor(Math.random() * 75 + 180); return `rgb(${r}, ${g}, ${b})`; }; 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'); if (btnShowAllFields) { console.log('btnShowAllFields détecté'); btnShowAllFields.addEventListener('click', () => { // Sélectionner tous les inputs dans le formulaire const form = document.querySelector('form'); if (form) { const hiddenInputs = form.querySelectorAll('.d-none'); hiddenInputs.forEach(input => { input.classList.toggle('d-none'); }); } }); } const btnClosedCommerce = document.querySelector('#closedCommerce'); if (btnClosedCommerce) { btnClosedCommerce.addEventListener('click', () => { if (!confirm('Êtes-vous sûr de vouloir signaler ce commerce comme fermé ?')) { return; } window.location.href = '/closed_commerce/' + document.getElementById('app_public_closed_commerce').value; }); } 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(); this.parseOpeningHoursValue(); }, parseOpeningHoursValue: function () { // Analyser la chaîne d'horaires d'ouverture const parsedOpeningHours = {}; 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'); 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 = 'Activer cette plage'; 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(); });