mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-06-20 01:44:42 +02:00
587 lines
20 KiB
JavaScript
587 lines
20 KiB
JavaScript
/*
|
|
* 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');
|
|
|
|
|
|
// 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();
|
|
|
|
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 = '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();
|
|
|
|
|
|
// lister les changesets de l'utilisateur osm-commerces
|
|
async function listChangesets() {
|
|
// const changesets = await fetch('https://api.openstreetmap.org/api/0.6/changesets?display_name=osm-commerce-fr');
|
|
// Ajouter le header Accept pour demander du JSON
|
|
const options = {
|
|
headers: {
|
|
'Accept': 'application/json'
|
|
}
|
|
};
|
|
const changesets = await fetch('https://api.openstreetmap.org/api/0.6/changesets?display_name=osm-commerce-fr', options);
|
|
const data = await changesets.json();
|
|
console.log(data.changesets.length);
|
|
|
|
// Grouper les changesets par période
|
|
const now = new Date();
|
|
const last24h = new Date(now - 24 * 60 * 60 * 1000);
|
|
const last7days = new Date(now - 7 * 24 * 60 * 60 * 1000);
|
|
const last30days = new Date(now - 30 * 24 * 60 * 60 * 1000);
|
|
|
|
const stats = {
|
|
last24h: 0,
|
|
last7days: 0,
|
|
last30days: 0
|
|
};
|
|
|
|
data.changesets.forEach(changeset => {
|
|
const changesetDate = new Date(changeset.closed_at);
|
|
|
|
if (changesetDate >= last24h) {
|
|
stats.last24h++;
|
|
}
|
|
if (changesetDate >= last7days) {
|
|
stats.last7days++;
|
|
}
|
|
if (changesetDate >= last30days) {
|
|
stats.last30days++;
|
|
}
|
|
});
|
|
|
|
// Afficher les statistiques
|
|
const historyDiv = document.getElementById('userChangesHistory');
|
|
if (historyDiv) {
|
|
historyDiv.innerHTML = `
|
|
<div id="changesets_history">
|
|
<p>Changesets créés :</p>
|
|
<div class="row">
|
|
<div class="col-6">Dernières 24h :</div> <div class="col-6 text-right">${stats.last24h}</div>
|
|
<div class="col-6">7 derniers jours :</div> <div class="col-6 text-right">${stats.last7days}</div>
|
|
<div class="col-6">30 derniers jours :</div> <div class="col-6 text-right">${stats.last30days}</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Vérifier si l'élément avec l'ID 'userChangesHistory' existe avant d'appeler la fonction
|
|
if (document.getElementById('userChangesHistory')) {
|
|
listChangesets();
|
|
} else {
|
|
console.log('userChangesHistory non trouvé');
|
|
}
|
|
|
|
|
|
|
|
function updateCompletionProgress() {
|
|
const inputs = document.querySelectorAll('input[type="text"]');
|
|
let filledInputs = 0;
|
|
let totalInputs = inputs.length;
|
|
|
|
inputs.forEach(input => {
|
|
if (input.value.trim() !== '') {
|
|
filledInputs++;
|
|
}
|
|
});
|
|
|
|
const completionPercentage = (filledInputs / totalInputs) * 100;
|
|
const progressBar = document.querySelector('#completion_progress .progress-bar');
|
|
if (progressBar) {
|
|
progressBar.style.width = completionPercentage + '%';
|
|
progressBar.setAttribute('aria-valuenow', completionPercentage);
|
|
document.querySelector('#completion_display').innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}%`;
|
|
}
|
|
}
|
|
|
|
document.querySelectorAll('input[type="text"]').forEach(input => {
|
|
input.addEventListener('blur', updateCompletionProgress);
|
|
});
|
|
const form = document.querySelector('form')
|
|
if (form) {
|
|
form.addEventListener('submit', check_validity);
|
|
updateCompletionProgress()
|
|
}
|
|
document.addEventListener('DOMContentLoaded', updateCompletionProgress);
|
|
|
|
// Focus sur le premier champ texte au chargement
|
|
const firstTextInput = document.querySelector('input.form-control');
|
|
if (firstTextInput) {
|
|
firstTextInput.focus();
|
|
console.log('focus sur le premier champ texte', firstTextInput);
|
|
} else {
|
|
console.log('pas de champ texte trouvé');
|
|
}
|
|
|
|
|
|
|
|
function parseCuisine() {
|
|
const cuisineInput = document.querySelector('input[name="commerce_tag_value__cuisine"]');
|
|
|
|
// Récupérer tous les checkboxes de type de cuisine
|
|
const cuisineCheckboxes = document.querySelectorAll('input[name="cuisine_type"]');
|
|
|
|
// Ajouter un écouteur d'événement sur chaque checkbox
|
|
cuisineCheckboxes.forEach(checkbox => {
|
|
checkbox.addEventListener('change', () => {
|
|
// Récupérer toutes les checkboxes cochées
|
|
const checkedCuisines = Array.from(document.querySelectorAll('input[name="cuisine_type"]:checked'))
|
|
.map(input => input.value);
|
|
|
|
// Mettre à jour l'input avec les valeurs séparées par des points-virgules
|
|
cuisineInput.value = checkedCuisines.join(';');
|
|
});
|
|
});
|
|
}
|
|
|
|
parseCuisine();
|
|
|
|
// Tri automatique des tableaux
|
|
const tables = document.querySelectorAll('table');
|
|
tables.forEach(table => {
|
|
table.classList.add('js-sort-table');
|
|
});
|
|
|
|
|
|
});
|