tykayn/osm-commerces
1
0
Fork 0
mirror of https://forge.chapril.org/tykayn/osm-commerces synced 2025-06-20 01:44:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

up

Browse source
This commit is contained in:
Tykayn 2025-06-06 13:26:44 +02:00 • committed by tykayn
parent a17fd9c232
commit 8bce5fe21c
14 changed files with 628 additions and 634 deletions
Download patch file Download diff file Expand all files Collapse all files

408
assets/app.js
View file

@ -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();

73
assets/josm.js Normal file
View file

@ -0,0 +1,73 @@
/**
* Ouvre les éléments sélectionnés dans JOSM
* @param {Object} map - L'instance de la carte MapLibre
* @param {boolean} map_is_loaded - État de chargement de la carte
* @param {Array|Object} osmElements - Élément(s) OSM à ouvrir (peut être un tableau d'objets ou un objet unique)
* @returns {void}
*/
function openInJOSM(map, map_is_loaded, osmElements) {
if (!map_is_loaded) {
alert('Veuillez attendre que la carte soit chargée');
return;
}
if (!osmElements || (Array.isArray(osmElements) && osmElements.length === 0)) {
alert('Aucun élément à ouvrir dans JOSM');
return;
}
const bounds = map.getBounds();
// Convertir en tableau si c'est un seul élément
const elements = Array.isArray(osmElements) ? osmElements : [osmElements];
// Séparer les éléments par type
const nodeIds = [];
const wayIds = [];
const relationIds = [];
elements.forEach(element => {
if (typeof element === 'string') {
// Si c'est juste un ID, on le traite comme un node par défaut
nodeIds.push(element);
} else {
// Sinon on utilise le type spécifié
switch (element.osm_type) {
case 'node':
nodeIds.push(element.osm_id);
break;
case 'way':
wayIds.push(element.osm_id);
break;
case 'relation':
relationIds.push(element.osm_id);
break;
}
}
});
// Construire les paramètres de sélection
const selectParams = [];
if (nodeIds.length > 0) selectParams.push(`node${nodeIds.join(',')}`);
if (wayIds.length > 0) selectParams.push(`way${wayIds.join(',')}`);
if (relationIds.length > 0) selectParams.push(`relation${relationIds.join(',')}`);
// Construire l'URL JOSM avec les paramètres de la boîte englobante
const josmUrl = `http://localhost:8111/load_and_zoom?` +
`left=${bounds.getWest()}&` +
`right=${bounds.getEast()}&` +
`top=${bounds.getNorth()}&` +
`bottom=${bounds.getSouth()}&` +
`select=${selectParams.join(',')}`;
// Utiliser le bouton caché pour ouvrir JOSM
const josmButton = document.getElementById('josmButton');
if (!josmButton) {
console.error('Le bouton JOSM n\'existe pas dans le DOM');
return;
}
josmButton.href = josmUrl;
josmButton.click();
}

388
assets/opening_hours.js Normal file
View file

@ -0,0 +1,388 @@
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;
}
}

26
assets/utils.js Normal file
View file

@ -0,0 +1,26 @@
function colorHeadingTable() {
const headers = document.querySelectorAll('th');
headers.forEach(header => {
const text = header.textContent;
const match = text.match(/\((\d+)\s*\/\s*(\d+)\)/);
if (match) {
const [_, completed, total] = match;
const ratio = completed / total;
const alpha = ratio.toFixed(2);
header.style.backgroundColor = `rgba(154, 205, 50, ${alpha})`;
}
});
}
function updateMapHeightForLargeScreens() {
const mapFound = document.querySelector('#map');
if (mapFound && window.innerHeight > 800 && window.innerWidth > 800) {
mapFound.style.height = '80vh';
} else {
console.log('window.innerHeight', window.innerHeight);
}
}

0
public/js/app.js Normal file
View file

21
templates/admin/edit.html.twig Normal file
View file

@ -0,0 +1,21 @@
<div class="container">
<h1>Édition</h1>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h5 class="card-title">Carte</h5>
<div id="map" style="height: 600px;"></div>
<div class="mt-3">
<button id="openInJOSM" class="btn btn-primary">Ouvrir dans JOSM</button>
<a href="#" id="viewInPanoramax" class="btn btn-secondary" target="_blank">Voir dans Panoramax</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="{{ asset('js/app.js') }}"></script>

2
templates/admin/labourage_results.html.twig
View file

@ -25,7 +25,7 @@ commerces existants déjà en base: {{ commerces|length }}
</p>
{# {{ dump(commerces[0]) }} #}
<table class="table table-striped">
<table class="table table-striped js-sort-table">
{% include 'admin/stats/table-head.html.twig' %}
<tbody>

316
templates/admin/stats.html.twig
View file

@ -86,7 +86,7 @@
</a>
</div>
</div>
<table class="table table-bordered table-striped table-hover table-responsive">
<table class="table table-bordered table-striped table-hover table-responsive js-sort-table">
{% include 'admin/stats/table-head.html.twig' %}
<tbody>
{% for commerce in stats.places %}
@ -103,21 +103,20 @@
</div>
</div>
<!-- Bouton caché pour JOSM -->
<a id="josmButton" style="display: none;"></a>
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
<script src='{{ asset('js/turf/turf.min.js') }}'></script>
<script src="{{ asset('js/chartjs/chart.umd.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script>
const request = `{{query_places|raw}}`;
const zip_code = `{{stats.zone}}`;
let mapElements = [];
let map_is_loaded = false;
let features = [];
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets-v2/style.json?key={{ maptiler_token }}',
center: [2.3488, 48.8534],
zoom: 12
});
function getCompletionColor(completion) {
if (completion === undefined || completion === null) {
@ -239,76 +238,104 @@ const map = new maplibregl.Map({
}
});
}
async function fetchland() {
// Requête pour obtenir le contour administratif
const boundaryQuery = `[out:json][timeout:25];
area["ref:INSEE"="${zip_code}"]->.searchArea;
(
relation["boundary"="postal_code"]["ref:INSEE"="${zip_code}"](area.searchArea);
);
out body;
>;
out skel qt;`;
const encodedBoundaryRequest = encodeURIComponent(boundaryQuery);
const boundaryResponse = await fetch(`https://overpass-api.de/api/interpreter?data=${encodedBoundaryRequest}`);
const boundaryData = await boundaryResponse.json();
const encodedRequest = encodeURIComponent(request);
const overpassUrl = `https://overpass-api.de/api/interpreter?data=${encodedRequest}`;
const response = await fetch(overpassUrl);
async function loadPlaces(map) {
map_is_loaded = false;
try {
const response = await fetch('https://overpass-api.de/api/interpreter', {
method: 'POST',
body: request
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
map.on('load', () => {
map_is_loaded=true;
console.log('map load...');
// Ajouter le contour administratif
if (boundaryData.elements && boundaryData.elements.length > 0) {
const boundary = boundaryData.elements[0];
if (boundary.members) {
const coordinates = boundary.members.map(member => {
if (member.type === 'node') {
return [member.lon, member.lat];
}
}).filter(coord => coord);
map.addSource('boundary', {
'type': 'geojson',
'data': {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [coordinates]
}
}
});
map.addLayer({
'id': 'boundary-layer',
'type': 'fill',
'source': 'boundary',
'paint': {
'fill-color': '#088',
'fill-opacity': 0.1,
'fill-outline-color': '#000'
}
});
}
}else{
console.log('pas de contour administratif trouvé');
}
console.log('map chargé',data.elements);
console.log('Lieux chargés:', data.elements);
mapElements = data.elements;
map_is_loaded = true;
// Créer le graphique de distribution
createCompletionChart(data.elements);
document.getElementById('maploader').classList.add('d-none');
// Mettre à jour les cercles
features = [];
data.elements.forEach(element => {
const lat = element.lat || (element.center && element.center.lat);
const lon = element.lon || (element.center && element.center.lon);
if (lat && lon) {
const completion = calculateCompletion(element);
const color = getCompletionColor(completion);
// Créer un cercle de 20 mètres de rayon (plus petit)
const circle = turf.circle([lon, lat], 0.04, { steps: 64, units: 'kilometers' });
circle.properties = {
color: color,
completion: completion,
name: element.tags?.name || 'Sans nom',
popupContent: createPopupContent(element),
center: [lon, lat] // Stocker le centre comme un tableau [lon, lat]
};
features.push(circle);
}
});
// Mettre à jour la source des cercles
map.getSource('completion-circles').setData({
'type': 'FeatureCollection',
'features': features
});
// Calculer les bounds pour tous les points
const points = features.map(f => f.properties.center);
if (points.length > 0) {
const bounds = new maplibregl.LngLatBounds(points[0], points[0]);
points.forEach(point => bounds.extend(point));
// Vérifier que les bounds sont valides avant de les utiliser
if (bounds?._sw && bounds?._ne) {
map.fitBounds(bounds, {
padding: 50,
maxZoom: 15
});
} else {
console.warn('Bounds invalides, utilisation des coordonnées par défaut');
}
}
document.getElementById('maploader').classList.add('d-none');
} catch (error) {
console.error('Erreur lors du chargement des lieux:', error);
document.getElementById('maploader').classList.add('d-none');
}
}
function openInJOSM() {
const selectedElements = document.querySelectorAll('input[type="checkbox"]:checked');
if (selectedElements.length === 0) {
alert('Veuillez sélectionner au moins un élément');
return;
}
const osmElements = Array.from(selectedElements).map(checkbox => {
return JSON.parse(checkbox.value);
});
window.openInJOSM(map, map_is_loaded, osmElements);
}
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded');
const map = new maplibregl.Map({
container: 'map',
style: 'https://api.maptiler.com/maps/streets-v2/style.json?key={{ maptiler_token }}',
center: [2.3488, 48.8534],
zoom: 12
});
document.getElementById('openInJOSM').addEventListener('click', openInJOSM);
map.on('load', () => {
// Créer une source pour les cercles
map.addSource('completion-circles', {
'type': 'geojson',
@ -341,57 +368,6 @@ out skel qt;`;
}
});
const features = [];
data.elements.forEach(element => {
const lat = element.lat || (element.center && element.center.lat);
const lon = element.lon || (element.center && element.center.lon);
if (lat && lon) {
const completion = calculateCompletion(element);
const color = getCompletionColor(completion);
// Créer un cercle de 20 mètres de rayon (plus petit)
const circle = turf.circle([lon, lat], 0.04, { steps: 64, units: 'kilometers' });
circle.properties = {
color: color,
completion: completion,
name: element.tags?.name || 'Sans nom',
popupContent: createPopupContent(element),
center: [lon, lat] // Stocker le centre comme un tableau [lon, lat]
};
features.push(circle);
}
});
// Mettre à jour la source des cercles
map.getSource('completion-circles').setData({
'type': 'FeatureCollection',
'features': features
});
// Fonction pour recalculer les cercles en fonction du zoom
function updateCircles() {
const zoom = map.getZoom();
const newFeatures = [];
features.forEach(feature => {
// Ajuster la taille du cercle en fonction du zoom
// Plus le zoom est élevé, plus le cercle est petit
const radius = 0.02 / Math.pow(1.5, zoom - 12); // 12 est le niveau de zoom de référence
const newCircle = turf.circle(feature.properties.center, radius, { steps: 64, units: 'kilometers' });
newCircle.properties = feature.properties;
newFeatures.push(newCircle);
});
map.getSource('completion-circles').setData({
'type': 'FeatureCollection',
'features': newFeatures
});
}
// Mettre à jour les cercles lors du zoom
map.on('zoom', updateCircles);
// Ajouter les popups sur les cercles
map.on('click', 'completion-circles', (e) => {
const properties = e.features[0].properties;
@ -410,104 +386,14 @@ out skel qt;`;
map.on('mouseleave', 'completion-circles', () => {
map.getCanvas().style.cursor = '';
});
// Charger les lieux
loadPlaces(map);
});
// Calculer les limites (bounds) à partir des marqueurs
const bounds = new maplibregl.LngLatBounds();
data.elements.forEach(element => {
if (element.lat && element.lon) {
bounds.extend([element.lon, element.lat]);
}
});
// Centrer et zoomer la carte pour inclure tous les marqueurs
if (!bounds.isEmpty()) {
map.fitBounds(bounds, {
padding: 50 // Ajoute une marge autour des marqueurs
});
}
}
function openInJOSM() {
if (mapElements.length === 0) {
alert('Aucun élément à ouvrir dans JOSM');
return;
}
if (!map_is_loaded) {
alert('La carte n\'est pas encore chargée, veuillez patienter');
return;
}
const nodeIds = [];
const wayIds = [];
const relationIds = [];
mapElements.forEach(element => {
switch(element.type) {
case 'node':
nodeIds.push(element.id);
break;
case 'way':
wayIds.push(element.id);
break;
case 'relation':
relationIds.push(element.id);
break;
}
});
// Obtenir les coordonnées du viewport actuel
const center = map.getCenter();
const zoom = map.getZoom();
const width = map.getCanvas().width;
const height = map.getCanvas().height;
// Calculer les limites en utilisant les coordonnées du centre et le zoom
const west = center.lng - (360 / Math.pow(2, zoom + 1)) * (width / 256);
const east = center.lng + (360 / Math.pow(2, zoom + 1)) * (width / 256);
const north = center.lat + (180 / Math.pow(2, zoom + 1)) * (height / 256);
const south = center.lat - (180 / Math.pow(2, zoom + 1)) * (height / 256);
let josmUrl = 'http://localhost:8111/load_and_zoom?';
const params = [];
if (nodeIds.length > 0) {
params.push(`node${nodeIds.join(',')}`);
}
if (wayIds.length > 0) {
params.push(`way${wayIds.join(',')}`);
}
if (relationIds.length > 0) {
params.push(`relation${relationIds.join(',')}`);
}
// Ajouter la bounding box calculée
params.push(`left=${west}&right=${east}&top=${north}&bottom=${south}`);
josmUrl += params.join('&');
window.open(josmUrl);
}
document.addEventListener('DOMContentLoaded', function() {
console.log('DOMContentLoaded');
const headers = document.querySelectorAll('th');
headers.forEach(header => {
const text = header.textContent;
const match = text.match(/\((\d+)\s*\/\s*(\d+)\)/);
if (match) {
const [_, completed, total] = match;
const ratio = completed / total;
const alpha = ratio.toFixed(2);
header.style.backgroundColor = `rgba(154, 205, 50, ${alpha})`;
}
});
document.getElementById('openInJOSM').addEventListener('click', openInJOSM);
fetchland();
sortTable();
colorHeadingTable();
});
</script>
{% endblock %}

4
templates/base.html.twig
View file

@ -107,11 +107,11 @@
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
<script src="{{ asset('js/bootstrap/bootstrap.bundle.min.js') }}"></script>
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
<script src="{{ asset('js/sort-table/sort-table.js') }}"></script>
<!-- Script pour le tri automatique des tableaux -->
<script src="{{ asset('js/bootstrap/Sortable.min.js') }}"></script>
{# <script src="{{ asset('js/bootstrap/Sortable.min.js') }}"></script> #}
<script src="{{ asset('js/qrcode/qrcode.min.js') }}"></script>
<script>
new QRCode(document.getElementById('qrcode'), {

2
templates/public/closed_commerces.html.twig
View file

@ -18,7 +18,7 @@
<h1>Commerces fermés</h1>
<p>Voici la liste des commerces fermés :</p>
<div class="table-responsive">
<table class="table table-striped">
<table class="table table-striped js-sort-table">
<thead>
<tr>
<th>Nom du commerce</th>

6
templates/public/dashboard.html.twig
View file

@ -122,12 +122,12 @@
}
// Créer une carte des villes avec les codes postaux
{# let map = new maplibregl.Map({
let map = new maplibregl.Map({
container: 'mapDashboard',
style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
center: [2.3488, 48.8534], // Paris
zoom: 10
}); #}
});
// Fonction pour obtenir la couleur selon le pourcentage
function getColorFromPercent(percent) {
@ -190,7 +190,7 @@ out skel qt;`;
{# <div id="mapDashboard"></div> #}
<table class="table table-hover table-striped table-responsive">
<table class="table table-hover table-striped table-responsive js-sort-table">
<thead>
<tr>
<th>Zone</th>

8
templates/public/edit.html.twig
View file

@ -135,12 +135,12 @@
<span class="last-modification">{{ 'display.last_modification'|trans }}: {{ commerce_overpass['@attributes'].timestamp }}</span>,
<strong>{{ 'display.days_ago'|trans({'%days%': date(commerce_overpass['@attributes'].timestamp).diff(date()).days}) }}</strong>
{{ 'display.by'|trans }}
<a href="https://www.openstreetmap.org/user/{{ commerce_overpass['@attributes'].user }}" target="_blank">{{ commerce_overpass['@attributes'].user }}</a>
<a href="https://www.openstreetmap.org/user/{{ commerce_overpass['@attributes'].user }}" >{{ commerce_overpass['@attributes'].user }}</a>
</div>
<div class="lien-OpenStreetMap">
<a href="https://www.openstreetmap.org/{{commerce.osmKind}}/{{ commerce_overpass['@attributes'].id }}" target="_blank" class="btn btn-outline-secondary">
<a href="https://www.openstreetmap.org/{{commerce.osmKind}}/{{ commerce_overpass['@attributes'].id }}" class="btn btn-outline-secondary">
{{ 'display.view_on_osm'|trans }}
</a>
<button onclick="openInJOSM('{{commerce.osmKind}}', '{{ commerce_overpass['@attributes'].id }}')" class="btn btn-outline-secondary ms-2">
@ -183,14 +183,14 @@
<script>
function openInJOSM(type, id) {
const josmUrl = `http://localhost:8111/load_object?objects=${type}${id}`;
window.open(josmUrl, '_blank');
window.open(josmUrl);
}
function openInPanoramax() {
const center = map.getCenter();
const zoom = map.getZoom();
const panoramaxUrl = `https://api.panoramax.xyz/?focus=map&map=${zoom}/${center.lat}/${center.lng}`;
window.open(panoramaxUrl, '_blank');
window.open(panoramaxUrl);
}
{% if commerce is not empty and mapbox_token is not empty and maptiler_token is not empty and commerce_overpass['@attributes'].lon is defined and commerce_overpass['@attributes'].lat is defined %}

4
templates/public/latest_changes.html.twig
View file

@ -9,7 +9,7 @@
<div class="row">
<div class="col-12 col-md-6 ">
<h2>Lieux modifiés</h2>
<table class="table table-striped table-hover table-responsive">
<table class="table table-striped table-hover table-responsive js-sort-table">
<thead>
<tr>
<th>Nom</th>
@ -33,7 +33,7 @@
</div>
<div class="col-12 col-md-6 ">
<h2>Lieux affichés</h2>
<table class="table table-striped table-hover table-responsive">
<table class="table table-striped table-hover table-responsive js-sort-table">
<thead>
<tr>
<th>Nom</th>

2
templates/public/places_with_note.html.twig
View file

@ -5,7 +5,7 @@
{% block body %}
<div class="container">
<h1>Commerces avec une note</h1>
<table class="table table-striped">
<table class="table table-striped js-sort-table table-hover table-responsive">
<thead>
<tr>
<th>Nom</th>