add bubble chart, fix dashboard perf
This commit is contained in:
parent
ca00f8c0be
commit
ad4170db14
8 changed files with 335 additions and 248 deletions
|
@ -7,11 +7,17 @@
|
||||||
|
|
||||||
// any CSS you import will output into a single css file (app.css in this case)
|
// any CSS you import will output into a single css file (app.css in this case)
|
||||||
import './styles/app.css';
|
import './styles/app.css';
|
||||||
|
|
||||||
|
// start the Stimulus application
|
||||||
|
// import './bootstrap';
|
||||||
|
|
||||||
import './utils.js';
|
import './utils.js';
|
||||||
import './opening_hours.js';
|
import './opening_hours.js';
|
||||||
import './josm.js';
|
import './josm.js';
|
||||||
import './edit.js';
|
import './edit.js';
|
||||||
|
|
||||||
|
import Chart from 'chart.js/auto';
|
||||||
|
window.Chart = Chart;
|
||||||
|
|
||||||
// Attendre le chargement du DOM
|
// Attendre le chargement du DOM
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
|
277
assets/utils.js
277
assets/utils.js
|
@ -1,5 +1,4 @@
|
||||||
function colorHeadingTable() {
|
function colorHeadingTable() {
|
||||||
|
|
||||||
const headers = document.querySelectorAll('th');
|
const headers = document.querySelectorAll('th');
|
||||||
headers.forEach(header => {
|
headers.forEach(header => {
|
||||||
const text = header.textContent;
|
const text = header.textContent;
|
||||||
|
@ -13,9 +12,7 @@ function colorHeadingTable() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function check_validity(e) {
|
function check_validity(e) {
|
||||||
|
|
||||||
list_inputs_good_to_fill = [
|
list_inputs_good_to_fill = [
|
||||||
'input[name="commerce_tag_value__contact:email"]',
|
'input[name="commerce_tag_value__contact:email"]',
|
||||||
'input[name="commerce_tag_value__contact:phone"]',
|
'input[name="commerce_tag_value__contact:phone"]',
|
||||||
|
@ -73,20 +70,16 @@ function check_validity(e) {
|
||||||
document.querySelector('#validation_messages').classList.add('is-invalid');
|
document.querySelector('#validation_messages').classList.add('is-invalid');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Générer une couleur pastel aléatoire
|
|
||||||
const genererCouleurPastel = () => {
|
const genererCouleurPastel = () => {
|
||||||
// Utiliser des valeurs plus claires (180-255) pour obtenir des tons pastel
|
|
||||||
const r = Math.floor(Math.random() * 75 + 180);
|
const r = Math.floor(Math.random() * 75 + 180);
|
||||||
const g = Math.floor(Math.random() * 75 + 180);
|
const g = Math.floor(Math.random() * 75 + 180);
|
||||||
const b = Math.floor(Math.random() * 75 + 180);
|
const b = Math.floor(Math.random() * 75 + 180);
|
||||||
return `rgb(${r}, ${g}, ${b})`;
|
return `rgb(${r}, ${g}, ${b})`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
async function searchInseeCode(query) {
|
async function searchInseeCode(query) {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
// Afficher l'indicateur de chargement
|
|
||||||
document.querySelector('#loading_search_insee').classList.remove('d-none');
|
document.querySelector('#loading_search_insee').classList.remove('d-none');
|
||||||
|
|
||||||
const response = await fetch(`https://geo.api.gouv.fr/communes?nom=${query}&fields=nom,code,codesPostaux&limit=10`);
|
const response = await fetch(`https://geo.api.gouv.fr/communes?nom=${query}&fields=nom,code,codesPostaux&limit=10`);
|
||||||
|
@ -104,21 +97,16 @@ async function searchInseeCode(query) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function updateMapHeightForLargeScreens() {
|
function updateMapHeightForLargeScreens() {
|
||||||
|
|
||||||
const mapFound = document.querySelector('#map');
|
const mapFound = document.querySelector('#map');
|
||||||
if (mapFound && window.innerHeight > 800 && window.innerWidth > 800) {
|
if (mapFound && window.innerHeight > 800 && window.innerWidth > 800) {
|
||||||
|
|
||||||
mapFound.style.height = window.innerWidth * 0.8 + 'px';
|
mapFound.style.height = window.innerWidth * 0.8 + 'px';
|
||||||
} else {
|
} else {
|
||||||
console.log('window.innerHeight', window.innerHeight);
|
console.log('window.innerHeight', window.innerHeight);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// lister les changesets de l'utilisateur osm-commerces
|
|
||||||
async function listChangesets() {
|
async function listChangesets() {
|
||||||
// Ajouter le header Accept pour demander du JSON
|
|
||||||
const options = {
|
const options = {
|
||||||
headers: {
|
headers: {
|
||||||
'Accept': 'application/json'
|
'Accept': 'application/json'
|
||||||
|
@ -128,7 +116,6 @@ async function listChangesets() {
|
||||||
const data = await changesets.json();
|
const data = await changesets.json();
|
||||||
console.log(data.changesets.length);
|
console.log(data.changesets.length);
|
||||||
|
|
||||||
// Grouper les changesets par période
|
|
||||||
const now = new Date();
|
const now = new Date();
|
||||||
const last24h = new Date(now - 24 * 60 * 60 * 1000);
|
const last24h = new Date(now - 24 * 60 * 60 * 1000);
|
||||||
const last7days = new Date(now - 7 * 24 * 60 * 60 * 1000);
|
const last7days = new Date(now - 7 * 24 * 60 * 60 * 1000);
|
||||||
|
@ -154,7 +141,6 @@ async function listChangesets() {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Afficher les statistiques
|
|
||||||
const historyDiv = document.getElementById('userChangesHistory');
|
const historyDiv = document.getElementById('userChangesHistory');
|
||||||
if (historyDiv) {
|
if (historyDiv) {
|
||||||
historyDiv.innerHTML = `
|
historyDiv.innerHTML = `
|
||||||
|
@ -170,8 +156,6 @@ async function listChangesets() {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function openInPanoramax() {
|
function openInPanoramax() {
|
||||||
const center = map.getCenter();
|
const center = map.getCenter();
|
||||||
const zoom = map.getZoom();
|
const zoom = map.getZoom();
|
||||||
|
@ -179,147 +163,111 @@ function openInPanoramax() {
|
||||||
window.open(panoramaxUrl);
|
window.open(panoramaxUrl);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function enableLabourageForm() {
|
function enableLabourageForm() {
|
||||||
|
|
||||||
// Récupérer les éléments du formulaire
|
|
||||||
const citySearchInput = document.getElementById('citySearch');
|
const citySearchInput = document.getElementById('citySearch');
|
||||||
const citySuggestionsList = document.getElementById('citySuggestions');
|
const citySuggestionsList = document.getElementById('citySuggestions');
|
||||||
|
|
||||||
if (citySearchInput && citySuggestionsList) {
|
if (citySearchInput && citySuggestionsList) {
|
||||||
// Configurer la recherche de ville avec la fonction existante
|
|
||||||
setupCitySearch('citySearch', 'citySuggestions', function (result_search) {
|
setupCitySearch('citySearch', 'citySuggestions', function (result_search) {
|
||||||
console.log('code_insee', result_search.insee);
|
|
||||||
// Activer le spinner dans le bouton de labourage
|
|
||||||
const labourageBtn = document.querySelector('.btn-labourer');
|
const labourageBtn = document.querySelector('.btn-labourer');
|
||||||
if (labourageBtn) {
|
if (labourageBtn) {
|
||||||
labourageBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Chargement...';
|
labourageBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Chargement...';
|
||||||
labourageBtn.disabled = true;
|
labourageBtn.disabled = true;
|
||||||
}
|
}
|
||||||
console.log('result_search', result_search, getLabourerUrl(result_search));
|
|
||||||
window.location.href = getLabourerUrl(result_search);
|
window.location.href = getLabourerUrl(result_search);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// Fonction pour gérer la recherche de villes
|
|
||||||
/**
|
|
||||||
* Configure la recherche de ville avec autocomplétion
|
|
||||||
* @param {string} inputId - ID de l'input de recherche
|
|
||||||
* @param {string} suggestionListId - ID de la liste des suggestions
|
|
||||||
* @param {Function} onSelect - Callback appelé lors de la sélection d'une ville
|
|
||||||
*/
|
|
||||||
function setupCitySearch(inputId, suggestionListId, onSelect) {
|
function setupCitySearch(inputId, suggestionListId, onSelect) {
|
||||||
const searchInput = document.getElementById(inputId);
|
const searchInput = document.getElementById(inputId);
|
||||||
const suggestionList = document.getElementById(suggestionListId);
|
const suggestionList = document.getElementById(suggestionListId);
|
||||||
|
|
||||||
window.searchInput = searchInput;
|
|
||||||
window.suggestionList = suggestionList;
|
|
||||||
window.onSelect = onSelect;
|
|
||||||
|
|
||||||
if (!searchInput || !suggestionList) return;
|
if (!searchInput || !suggestionList) return;
|
||||||
|
|
||||||
let timeoutId = null;
|
let timeoutId = null;
|
||||||
|
|
||||||
let searchOngoing = false;
|
let searchOngoing = false;
|
||||||
|
|
||||||
searchInput.addEventListener('input', function () {
|
searchInput.addEventListener('input', function () {
|
||||||
console.log('input', this.value);
|
|
||||||
clearTimeout(timeoutId);
|
clearTimeout(timeoutId);
|
||||||
const query = this.value.trim();
|
const query = this.value.trim();
|
||||||
|
if (query.length < 3) {
|
||||||
|
clearSuggestions();
|
||||||
|
return;
|
||||||
|
}
|
||||||
timeoutId = setTimeout(() => {
|
timeoutId = setTimeout(() => {
|
||||||
if (!searchOngoing) {
|
if (!searchOngoing) {
|
||||||
searchOngoing = true;
|
searchOngoing = true;
|
||||||
performSearch(query);
|
performSearch(query).then(() => {
|
||||||
searchOngoing = false;
|
searchOngoing = false;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}, 300);
|
}, 300);
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
async function performSearch(query) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`https://geo.api.gouv.fr/communes?nom=${encodeURIComponent(query)}&fields=nom,code,codesPostaux&limit=5`);
|
||||||
function performSearch(query) {
|
const data = await response.json();
|
||||||
console.log('performSearch', query);
|
|
||||||
fetch(`https://geo.api.gouv.fr/communes?nom=${encodeURIComponent(query)}&fields=nom,code,codesPostaux&limit=5`)
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
const citySuggestions = data.map(city => ({
|
const citySuggestions = data.map(city => ({
|
||||||
name: city.nom,
|
name: city.nom,
|
||||||
postcode: city.codesPostaux[0],
|
postcode: city.codesPostaux[0],
|
||||||
insee: city.code
|
insee: city.code,
|
||||||
|
display_name: `${city.nom} (${city.codesPostaux[0]})`
|
||||||
}));
|
}));
|
||||||
displaySuggestions(citySuggestions);
|
displaySuggestions(citySuggestions);
|
||||||
})
|
} catch (error) {
|
||||||
.catch(error => {
|
console.error("Erreur de recherche:", error);
|
||||||
console.error('Erreur lors de la recherche:', error);
|
}
|
||||||
clearSuggestions();
|
}
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function displaySuggestions(suggestions) {
|
function displaySuggestions(suggestions) {
|
||||||
console.log('displaySuggestions', suggestions);
|
|
||||||
clearSuggestions();
|
|
||||||
suggestions.forEach(suggestion => {
|
|
||||||
const li = document.createElement('li');
|
|
||||||
li.className = 'list-group-item p-2';
|
|
||||||
li.textContent = `${suggestion.name} (${suggestion.postcode})`;
|
|
||||||
li.addEventListener('click', () => {
|
|
||||||
searchInput.value = suggestion.name;
|
|
||||||
clearSuggestions();
|
|
||||||
if (onSelect) onSelect(suggestion);
|
|
||||||
});
|
|
||||||
window.suggestionList.appendChild(li);
|
|
||||||
});
|
|
||||||
|
|
||||||
window.suggestionList.classList.remove('d-none');
|
|
||||||
console.log('window.suggestionList', window.suggestionList);
|
|
||||||
}
|
|
||||||
|
|
||||||
function clearSuggestions() {
|
|
||||||
window.suggestionList.innerHTML = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fermer les suggestions en cliquant en dehors
|
|
||||||
document.addEventListener('click', function (e) {
|
|
||||||
if (window.searchInput && !window.searchInput?.contains(e.target) && !window.suggestionList?.contains(e.target)) {
|
|
||||||
clearSuggestions();
|
clearSuggestions();
|
||||||
|
suggestions.forEach(suggestion => {
|
||||||
|
const item = document.createElement('div');
|
||||||
|
item.classList.add('suggestion-item');
|
||||||
|
item.textContent = suggestion.display_name;
|
||||||
|
item.addEventListener('click', () => {
|
||||||
|
searchInput.value = suggestion.display_name;
|
||||||
|
clearSuggestions();
|
||||||
|
if (onSelect) {
|
||||||
|
onSelect(suggestion);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
suggestionList.appendChild(item);
|
||||||
|
});
|
||||||
|
suggestionList.style.display = 'block';
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
||||||
// Fonction pour formater l'URL de labourage
|
function clearSuggestions() {
|
||||||
/**
|
suggestionList.innerHTML = '';
|
||||||
* Génère l'URL de labourage pour un code postal donné
|
suggestionList.style.display = 'none';
|
||||||
* @param {string} zipCode - Le code postal
|
}
|
||||||
* @returns {string} L'URL de labourage
|
|
||||||
*/
|
document.addEventListener('click', (e) => {
|
||||||
|
if (!searchInput.contains(e.target) && !suggestionList.contains(e.target)) {
|
||||||
|
clearSuggestions();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function getLabourerUrl(obj) {
|
function getLabourerUrl(obj) {
|
||||||
|
if (obj && obj.insee) {
|
||||||
return `/admin/labourer/${obj.insee}`;
|
return `/admin/labourer_insee/${obj.insee}`;
|
||||||
}
|
|
||||||
|
|
||||||
// Fonction pour gérer la soumission du formulaire d'ajout de ville
|
|
||||||
function handleAddCityFormSubmit(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
const form = event.target;
|
|
||||||
const submitButton = form.querySelector('button[type="submit"]');
|
|
||||||
const zipCodeInput = form.querySelector('input[name="zip_code"]');
|
|
||||||
if (!zipCodeInput.value) {
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
// Afficher le spinner
|
return '#';
|
||||||
submitButton.disabled = true;
|
}
|
||||||
const originalContent = submitButton.innerHTML;
|
|
||||||
submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Labourer...';
|
function handleAddCityFormSubmit(event) {
|
||||||
// Rediriger
|
event.preventDefault();
|
||||||
window.location.href = getLabourerUrl(zipCodeInput.value);
|
const zipCode = document.getElementById('selectedZipCode').value;
|
||||||
|
if (zipCode && zipCode.match(/^\d{5}$/)) {
|
||||||
|
window.location.href = `/admin/labourer/${zipCode}`;
|
||||||
|
} else {
|
||||||
|
alert('Veuillez sélectionner une ville valide avec un code postal.');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Colore les cellules d'un tableau en fonction des pourcentages
|
|
||||||
* @param {string} selector - Le sélecteur CSS pour cibler les cellules à colorer
|
|
||||||
* @param {string} color - La couleur de base en format RGB (ex: '154, 205, 50')
|
|
||||||
*/
|
|
||||||
function colorizePercentageCells(selector, color = '154, 205, 50') {
|
function colorizePercentageCells(selector, color = '154, 205, 50') {
|
||||||
document.querySelectorAll(selector).forEach(cell => {
|
document.querySelectorAll(selector).forEach(cell => {
|
||||||
const percentage = parseInt(cell.textContent);
|
const percentage = parseInt(cell.textContent);
|
||||||
|
@ -330,16 +278,9 @@ function colorizePercentageCells(selector, color = '154, 205, 50') {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Colore les cellules d'un tableau avec un gradient relatif à la valeur maximale
|
|
||||||
* @param {string} selector - Le sélecteur CSS pour cibler les cellules à colorer
|
|
||||||
* @param {string} color - La couleur de base en format RGB (ex: '154, 205, 50')
|
|
||||||
*/
|
|
||||||
function colorizePercentageCellsRelative(selector, color = '154, 205, 50') {
|
function colorizePercentageCellsRelative(selector, color = '154, 205, 50') {
|
||||||
// Récupérer toutes les cellules
|
|
||||||
const cells = document.querySelectorAll(selector);
|
const cells = document.querySelectorAll(selector);
|
||||||
|
|
||||||
// Trouver la valeur maximale
|
|
||||||
let maxValue = 0;
|
let maxValue = 0;
|
||||||
cells.forEach(cell => {
|
cells.forEach(cell => {
|
||||||
const value = parseInt(cell.textContent);
|
const value = parseInt(cell.textContent);
|
||||||
|
@ -348,28 +289,20 @@ function colorizePercentageCellsRelative(selector, color = '154, 205, 50') {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// Appliquer le gradient relatif à la valeur max
|
|
||||||
cells.forEach(cell => {
|
cells.forEach(cell => {
|
||||||
const value = parseInt(cell.textContent);
|
const value = parseInt(cell.textContent);
|
||||||
if (!isNaN(value)) {
|
if (!isNaN(value)) {
|
||||||
const alpha = value / maxValue; // Ratio relatif au maximum
|
const alpha = value / maxValue;
|
||||||
cell.style.backgroundColor = `rgba(${color}, ${alpha})`;
|
cell.style.backgroundColor = `rgba(${color}, ${alpha})`;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Ajuste dynamiquement la taille du texte des éléments list-group-item selon leur nombre
|
|
||||||
* @param {string} selector - Le sélecteur CSS des éléments à ajuster
|
|
||||||
* @param {number} [minFont=0.8] - Taille de police minimale en rem
|
|
||||||
* @param {number} [maxFont=1.2] - Taille de police maximale en rem
|
|
||||||
*/
|
|
||||||
function adjustListGroupFontSize(selector, minFont = 0.8, maxFont = 1.2) {
|
function adjustListGroupFontSize(selector, minFont = 0.8, maxFont = 1.2) {
|
||||||
const items = document.querySelectorAll(selector);
|
const items = document.querySelectorAll(selector);
|
||||||
const count = items.length;
|
const count = items.length;
|
||||||
let fontSize = maxFont;
|
let fontSize = maxFont;
|
||||||
if (count > 0) {
|
if (count > 0) {
|
||||||
// Plus il y a d'items, plus la taille diminue, mais jamais en dessous de minFont
|
|
||||||
fontSize = Math.max(minFont, maxFont - (count - 5) * 0.05);
|
fontSize = Math.max(minFont, maxFont - (count - 5) * 0.05);
|
||||||
}
|
}
|
||||||
items.forEach(item => {
|
items.forEach(item => {
|
||||||
|
@ -377,97 +310,13 @@ function adjustListGroupFontSize(selector, minFont = 0.8, maxFont = 1.2) {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function check_validity() {
|
|
||||||
if (!document.getElementById('editLand')) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const form = document.getElementById('editLand');
|
|
||||||
const fields = {
|
|
||||||
'name': {
|
|
||||||
required: true,
|
|
||||||
message: 'Le nom est requis'
|
|
||||||
},
|
|
||||||
'contact:street': {
|
|
||||||
required: true,
|
|
||||||
message: 'La rue est requise'
|
|
||||||
},
|
|
||||||
'contact:housenumber': {
|
|
||||||
required: true,
|
|
||||||
message: 'Le numéro est requis'
|
|
||||||
},
|
|
||||||
'contact:phone': {
|
|
||||||
pattern: /^(?:(?:\+|00)33|0)\s*[1-9](?:[\s.-]*\d{2}){4}$/,
|
|
||||||
message: 'Le numéro de téléphone n\'est pas valide'
|
|
||||||
},
|
|
||||||
'contact:email': {
|
|
||||||
pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
|
|
||||||
message: 'L\'adresse email n\'est pas valide'
|
|
||||||
},
|
|
||||||
'contact:website': {
|
|
||||||
pattern: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/,
|
|
||||||
message: 'L\'URL du site web n\'est pas valide'
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let isValid = true;
|
|
||||||
const errorMessages = {};
|
|
||||||
|
|
||||||
// Supprimer les messages d'erreur précédents
|
|
||||||
document.querySelectorAll('.error-message').forEach(el => el.remove());
|
|
||||||
|
|
||||||
// Vérifier chaque champ
|
|
||||||
for (const [fieldName, rules] of Object.entries(fields)) {
|
|
||||||
const input = form.querySelector(`[name="${fieldName}"]`);
|
|
||||||
if (!input) continue;
|
|
||||||
|
|
||||||
const value = input.value.trim();
|
|
||||||
let fieldError = null;
|
|
||||||
|
|
||||||
// Ne valider que si le champ n'est pas vide
|
|
||||||
if (value) {
|
|
||||||
if (rules.pattern && !rules.pattern.test(value)) {
|
|
||||||
fieldError = rules.message;
|
|
||||||
}
|
|
||||||
} else if (rules.required) {
|
|
||||||
// Si le champ est vide et requis
|
|
||||||
fieldError = rules.message;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (fieldError) {
|
|
||||||
isValid = false;
|
|
||||||
errorMessages[fieldName] = fieldError;
|
|
||||||
|
|
||||||
// Créer et afficher le message d'erreur
|
|
||||||
const errorDiv = document.createElement('div');
|
|
||||||
errorDiv.className = 'error-message text-danger small mt-1';
|
|
||||||
errorDiv.textContent = fieldError;
|
|
||||||
input.parentNode.appendChild(errorDiv);
|
|
||||||
|
|
||||||
// Ajouter une classe d'erreur au champ
|
|
||||||
input.classList.add('is-invalid');
|
|
||||||
} else {
|
|
||||||
input.classList.remove('is-invalid');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return isValid;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Exporter les fonctions dans window
|
|
||||||
window.setupCitySearch = setupCitySearch;
|
window.setupCitySearch = setupCitySearch;
|
||||||
window.getLabourerUrl = getLabourerUrl;
|
|
||||||
window.handleAddCityFormSubmit = handleAddCityFormSubmit;
|
window.handleAddCityFormSubmit = handleAddCityFormSubmit;
|
||||||
window.colorizePercentageCells = colorizePercentageCells;
|
window.colorizePercentageCells = colorizePercentageCells;
|
||||||
window.colorizePercentageCellsRelative = colorizePercentageCellsRelative;
|
window.colorizePercentageCellsRelative = colorizePercentageCellsRelative;
|
||||||
window.adjustListGroupFontSize = adjustListGroupFontSize;
|
|
||||||
window.check_validity = check_validity;
|
window.check_validity = check_validity;
|
||||||
window.enableLabourageForm = enableLabourageForm;
|
|
||||||
window.performSearch = performSearch;
|
|
||||||
window.openInPanoramax = openInPanoramax;
|
window.openInPanoramax = openInPanoramax;
|
||||||
window.listChangesets = listChangesets;
|
window.listChangesets = listChangesets;
|
||||||
window.updateMapHeightForLargeScreens = updateMapHeightForLargeScreens;
|
window.colorHeadingTable = colorHeadingTable;
|
||||||
window.searchInseeCode = searchInseeCode;
|
window.adjustListGroupFontSize = adjustListGroupFontSize;
|
||||||
window.genererCouleurPastel = genererCouleurPastel;
|
window.genererCouleurPastel = genererCouleurPastel;
|
||||||
window.check_validity = check_validity;
|
|
21
package-lock.json
generated
21
package-lock.json
generated
|
@ -9,6 +9,7 @@
|
||||||
"@babel/core": "^7.17.0",
|
"@babel/core": "^7.17.0",
|
||||||
"@babel/preset-env": "^7.16.0",
|
"@babel/preset-env": "^7.16.0",
|
||||||
"@symfony/webpack-encore": "^5.0.0",
|
"@symfony/webpack-encore": "^5.0.0",
|
||||||
|
"chart.js": "^4.5.0",
|
||||||
"core-js": "^3.38.0",
|
"core-js": "^3.38.0",
|
||||||
"regenerator-runtime": "^0.13.9",
|
"regenerator-runtime": "^0.13.9",
|
||||||
"webpack": "^5.74.0",
|
"webpack": "^5.74.0",
|
||||||
|
@ -1694,6 +1695,13 @@
|
||||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@kurkle/color": {
|
||||||
|
"version": "0.3.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
|
||||||
|
"integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/@nuxt/friendly-errors-webpack-plugin": {
|
"node_modules/@nuxt/friendly-errors-webpack-plugin": {
|
||||||
"version": "2.6.0",
|
"version": "2.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/@nuxt/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-2.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/@nuxt/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-2.6.0.tgz",
|
||||||
|
@ -2469,6 +2477,19 @@
|
||||||
"node": ">=4"
|
"node": ">=4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/chart.js": {
|
||||||
|
"version": "4.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
|
||||||
|
"integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
|
||||||
|
"dev": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@kurkle/color": "^0.3.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"pnpm": ">=8"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/chrome-trace-event": {
|
"node_modules/chrome-trace-event": {
|
||||||
"version": "1.0.4",
|
"version": "1.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
"@babel/core": "^7.17.0",
|
"@babel/core": "^7.17.0",
|
||||||
"@babel/preset-env": "^7.16.0",
|
"@babel/preset-env": "^7.16.0",
|
||||||
"@symfony/webpack-encore": "^5.0.0",
|
"@symfony/webpack-encore": "^5.0.0",
|
||||||
|
"chart.js": "^4.5.0",
|
||||||
"core-js": "^3.38.0",
|
"core-js": "^3.38.0",
|
||||||
"regenerator-runtime": "^0.13.9",
|
"regenerator-runtime": "^0.13.9",
|
||||||
"webpack": "^5.74.0",
|
"webpack": "^5.74.0",
|
||||||
|
|
|
@ -97,6 +97,7 @@ final class AdminController extends AbstractController
|
||||||
} elseif ($updateExisting) {
|
} elseif ($updateExisting) {
|
||||||
// Mettre à jour les données depuis Overpass uniquement si updateExisting est true
|
// Mettre à jour les données depuis Overpass uniquement si updateExisting est true
|
||||||
$existingPlace->update_place_from_overpass_data($placeData);
|
$existingPlace->update_place_from_overpass_data($placeData);
|
||||||
|
$stats->addPlace($existingPlace);
|
||||||
$this->entityManager->persist($existingPlace);
|
$this->entityManager->persist($existingPlace);
|
||||||
$updatedCount++;
|
$updatedCount++;
|
||||||
}
|
}
|
||||||
|
@ -452,11 +453,14 @@ final class AdminController extends AbstractController
|
||||||
}
|
}
|
||||||
|
|
||||||
// Récupérer toutes les données
|
// Récupérer toutes les données
|
||||||
$places = $this->motocultrice->labourer($insee_code);
|
$places_overpass = $this->motocultrice->labourer($insee_code);
|
||||||
$processedCount = 0;
|
$processedCount = 0;
|
||||||
$updatedCount = 0;
|
$updatedCount = 0;
|
||||||
|
$deletedCount = 0;
|
||||||
|
|
||||||
foreach ($places as $placeData) {
|
$overpass_osm_ids = array_map(fn($place) => $place['id'], $places_overpass);
|
||||||
|
|
||||||
|
foreach ($places_overpass as $placeData) {
|
||||||
// Vérifier si le lieu existe déjà
|
// Vérifier si le lieu existe déjà
|
||||||
$existingPlace = $this->entityManager->getRepository(Place::class)
|
$existingPlace = $this->entityManager->getRepository(Place::class)
|
||||||
->findOneBy(['osmId' => $placeData['id']]);
|
->findOneBy(['osmId' => $placeData['id']]);
|
||||||
|
@ -477,8 +481,11 @@ final class AdminController extends AbstractController
|
||||||
->setSiret($this->motocultrice->find_siret($placeData['tags']) ?? '')
|
->setSiret($this->motocultrice->find_siret($placeData['tags']) ?? '')
|
||||||
->setAskedHumainsSupport(false)
|
->setAskedHumainsSupport(false)
|
||||||
->setLastContactAttemptDate(null)
|
->setLastContactAttemptDate(null)
|
||||||
->setNote('')
|
->setNote($this->motocultrice->find_tag($placeData['tags'], 'note') ? true : false)
|
||||||
->setPlaceCount(0);
|
->setNoteContent($this->motocultrice->find_tag($placeData['tags'], 'note') ?? '')
|
||||||
|
->setPlaceCount(0)
|
||||||
|
// ->setOsmData($placeData['modified'] ?? null)
|
||||||
|
;
|
||||||
|
|
||||||
// Mettre à jour les données depuis Overpass
|
// Mettre à jour les données depuis Overpass
|
||||||
$place->update_place_from_overpass_data($placeData);
|
$place->update_place_from_overpass_data($placeData);
|
||||||
|
@ -487,17 +494,63 @@ final class AdminController extends AbstractController
|
||||||
$stats->addPlace($place);
|
$stats->addPlace($place);
|
||||||
$processedCount++;
|
$processedCount++;
|
||||||
} elseif ($updateExisting) {
|
} elseif ($updateExisting) {
|
||||||
// Mettre à jour les données depuis Overpass uniquement si updateExisting est true
|
// Mettre à jour les données depuis Overpass et s'assurer qu'il est marqué comme "vivant"
|
||||||
|
$existingPlace->setDead(false);
|
||||||
$existingPlace->update_place_from_overpass_data($placeData);
|
$existingPlace->update_place_from_overpass_data($placeData);
|
||||||
|
$stats->addPlace($existingPlace);
|
||||||
$this->entityManager->persist($existingPlace);
|
$this->entityManager->persist($existingPlace);
|
||||||
$updatedCount++;
|
$updatedCount++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Flush final
|
// Supprimer les lieux qui ne sont plus dans la réponse Overpass
|
||||||
$this->entityManager->flush();
|
$db_places = $this->entityManager->getRepository(Place::class)->findBy(['zip_code' => $insee_code]);
|
||||||
|
foreach ($db_places as $db_place) {
|
||||||
|
if (!in_array($db_place->getOsmId(), $overpass_osm_ids)) {
|
||||||
|
$this->entityManager->remove($db_place);
|
||||||
|
$deletedCount++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Récupérer tous les commerces de la zone qui n'ont pas été supprimés
|
||||||
|
$commerces = $this->entityManager->getRepository(Place::class)->findBy(['zip_code' => $insee_code]);
|
||||||
|
|
||||||
|
// Récupérer les stats existantes pour la zone
|
||||||
|
$stats = $this->entityManager->getRepository(Stats::class)->findOneBy(['zone' => $insee_code]);
|
||||||
|
if(!$stats) {
|
||||||
|
$stats = new Stats();
|
||||||
|
$stats->setZone($insee_code);
|
||||||
|
}
|
||||||
|
|
||||||
|
$urls = $stats->getAllCTCUrlsMap();
|
||||||
|
|
||||||
|
$statsHistory = $this->entityManager->getRepository(StatsHistory::class)
|
||||||
|
->createQueryBuilder('sh')
|
||||||
|
->where('sh.stats = :stats')
|
||||||
|
->setParameter('stats', $stats)
|
||||||
|
->orderBy('sh.id', 'DESC')
|
||||||
|
->setMaxResults(365)
|
||||||
|
->getQuery()
|
||||||
|
->getResult();
|
||||||
|
|
||||||
|
// Calculer les statistiques
|
||||||
|
$calculatedStats = $this->motocultrice->calculateStats($commerces);
|
||||||
|
|
||||||
|
// Mettre à jour les stats pour la zone donnée
|
||||||
|
$stats->setPlacesCount($calculatedStats['places_count']);
|
||||||
|
$stats->setAvecHoraires($calculatedStats['counters']['avec_horaires']);
|
||||||
|
$stats->setAvecAdresse($calculatedStats['counters']['avec_adresse']);
|
||||||
|
$stats->setAvecSite($calculatedStats['counters']['avec_site']);
|
||||||
|
$stats->setAvecAccessibilite($calculatedStats['counters']['avec_accessibilite']);
|
||||||
|
$stats->setAvecNote($calculatedStats['counters']['avec_note']);
|
||||||
|
$stats->setCompletionPercent($calculatedStats['completion_percent']);
|
||||||
|
|
||||||
|
// Associer les stats à chaque commerce
|
||||||
|
foreach ($commerces as $commerce) {
|
||||||
|
$commerce->setStats($stats);
|
||||||
|
$this->entityManager->persist($commerce);
|
||||||
|
}
|
||||||
|
|
||||||
// Mettre à jour les statistiques finales
|
|
||||||
$stats->computeCompletionPercent();
|
$stats->computeCompletionPercent();
|
||||||
|
|
||||||
// Calculer les statistiques de fraîcheur des données OSM
|
// Calculer les statistiques de fraîcheur des données OSM
|
||||||
|
@ -564,8 +617,12 @@ final class AdminController extends AbstractController
|
||||||
|
|
||||||
$message = 'Labourage terminé avec succès. ' . $processedCount . ' nouveaux lieux traités.';
|
$message = 'Labourage terminé avec succès. ' . $processedCount . ' nouveaux lieux traités.';
|
||||||
if ($updateExisting) {
|
if ($updateExisting) {
|
||||||
$message .= ' ' . $updatedCount . ' lieux existants mis à jour pour la zone '.$stats->getName().' ('.$stats->getZone().').';
|
$message .= ' ' . $updatedCount . ' lieux existants mis à jour.';
|
||||||
}
|
}
|
||||||
|
if ($deletedCount > 0) {
|
||||||
|
$message .= ' ' . $deletedCount . ' lieux ont été supprimés.';
|
||||||
|
}
|
||||||
|
$message .= ' Zone : '.$stats->getName().' ('.$stats->getZone().').';
|
||||||
$this->addFlash('success', $message);
|
$this->addFlash('success', $message);
|
||||||
} catch (\Exception $e) {
|
} catch (\Exception $e) {
|
||||||
$this->addFlash('error', 'Erreur lors du labourage : ' . $e->getMessage());
|
$this->addFlash('error', 'Erreur lors du labourage : ' . $e->getMessage());
|
||||||
|
|
|
@ -162,16 +162,33 @@ out meta;';
|
||||||
|
|
||||||
public function labourer(string $zone): array
|
public function labourer(string $zone): array
|
||||||
{
|
{
|
||||||
|
$query = $this->get_query_places($zone);
|
||||||
|
$url = 'https://overpass-api.de/api/interpreter?data=' . urlencode($query);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
$query = $this->get_query_places($zone);
|
$response = $this->client->request('GET', $url, [
|
||||||
$response = $this->client->request('POST', $this->overpassApiUrl, [
|
'timeout' => 90, // Augmenter le timeout pour les zones très denses
|
||||||
'body' => ['data' => $query]
|
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
if ($response->getStatusCode() !== 200) {
|
||||||
|
throw new \Exception('L\'API Overpass a retourné un code de statut non-200 : ' . $response->getStatusCode());
|
||||||
|
}
|
||||||
|
|
||||||
$data = json_decode($response->getContent(), true);
|
$data = json_decode($response->getContent(), true);
|
||||||
|
|
||||||
|
if (json_last_error() !== JSON_ERROR_NONE) {
|
||||||
|
// Tenter de récupérer le corps de la réponse brute en cas d'erreur JSON pour le débogage
|
||||||
|
$rawResponse = $response->getContent(false); // ne pas lancer d'exception si la réponse n'est pas décodable
|
||||||
|
throw new \Exception('Réponse JSON invalide depuis l\'API Overpass. Erreur: ' . json_last_error_msg() . '. Réponse brute : ' . substr($rawResponse, 0, 500));
|
||||||
|
}
|
||||||
|
|
||||||
$places = [];
|
$places = [];
|
||||||
if (isset($data['elements'])) {
|
if (isset($data['elements'])) {
|
||||||
|
if (count($data['elements']) === 0) {
|
||||||
|
// Ce n'est pas une erreur, juste aucun lieu trouvé. On retourne un tableau vide.
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
foreach ($data['elements'] as $element) {
|
foreach ($data['elements'] as $element) {
|
||||||
if (isset($element['tags'])) {
|
if (isset($element['tags'])) {
|
||||||
$places[] = [
|
$places[] = [
|
||||||
|
@ -198,8 +215,13 @@ out meta;';
|
||||||
gc_collect_cycles();
|
gc_collect_cycles();
|
||||||
|
|
||||||
return $places;
|
return $places;
|
||||||
|
|
||||||
|
} catch (\Symfony\Contracts\HttpClient\Exception\TransportExceptionInterface $e) {
|
||||||
|
// Gérer spécifiquement les erreurs de transport (timeout, problème de connexion)
|
||||||
|
throw new \Exception('Erreur de communication avec l\'API Overpass (le service est peut-être indisponible ou la requête a expiré) : ' . $e->getMessage(), 0, $e);
|
||||||
} catch (\Exception $e) {
|
} catch (\Exception $e) {
|
||||||
throw new \Exception("Erreur lors de la requête Overpass : " . $e->getMessage());
|
// Rattraper et relancer les autres exceptions (y compris celles que nous avons définies)
|
||||||
|
throw $e;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -23,6 +23,7 @@
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
.suggestion-item {
|
.suggestion-item {
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
|
@ -58,7 +59,42 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="row mb-4">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
Statistiques des villes (nombre de commerces)
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<canvas id="statsBubbleChart" style="min-height: 400px; width: 100%;"></canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
|
<h3 class="card-title">Labourer une ville</h3>
|
||||||
|
<form id="labourerForm">
|
||||||
|
<div class="search-container">
|
||||||
|
<input type="text"
|
||||||
|
id="citySearch"
|
||||||
|
class="form-control"
|
||||||
|
placeholder="Rechercher une ville..."
|
||||||
|
autocomplete="off">
|
||||||
|
<div id="citySuggestions" class="suggestion-list"></div>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" name="zip_code" id="selectedZipCode">
|
||||||
|
<button type="submit" class="btn btn-primary mt-3">Labourer cette ville</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mt-4">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<h2>Statistiques par ville</h2>
|
<h2>Statistiques par ville</h2>
|
||||||
<div class="table-responsive">
|
<div class="table-responsive">
|
||||||
|
@ -69,6 +105,7 @@
|
||||||
<th>Code postal</th>
|
<th>Code postal</th>
|
||||||
<th>Complétion</th>
|
<th>Complétion</th>
|
||||||
<th>Nombre de commerces</th>
|
<th>Nombre de commerces</th>
|
||||||
|
<th>Lieux par habitants</th>
|
||||||
<th>Actions</th>
|
<th>Actions</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
@ -84,7 +121,8 @@
|
||||||
</a></td>
|
</a></td>
|
||||||
<td>{{ stat.zone }}</td>
|
<td>{{ stat.zone }}</td>
|
||||||
<td>{{ stat.completionPercent }}%</td>
|
<td>{{ stat.completionPercent }}%</td>
|
||||||
<td>{{ stat.places|length }}</td>
|
<td>{{ stat.placesCount }}</td>
|
||||||
|
<td>{{ (stat.placesCount / (stat.population or 1 ))|round(2) }}</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="btn-group" role="group">
|
<div class="btn-group" role="group">
|
||||||
<a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}" class="btn btn-sm btn-primary" title="Voir les statistiques de cette ville">
|
<a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}" class="btn btn-sm btn-primary" title="Voir les statistiques de cette ville">
|
||||||
|
@ -114,31 +152,119 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include 'public/labourage-form.html.twig' %}
|
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
||||||
{% block javascripts %}
|
{% block javascripts %}
|
||||||
{{ parent() }}
|
{{ parent() }}
|
||||||
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
|
{# Les scripts sont maintenant gérés par Webpack Encore via app.js #}
|
||||||
<script src='{{ asset('js/utils.js') }}'></script>
|
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// Initialiser les tooltips Bootstrap
|
const statsDataRaw = [
|
||||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
{% for stat in stats %}
|
||||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
{% if stat.placesCount > 0 and stat.name is not null and stat.population > 0 %}
|
||||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
{
|
||||||
});
|
label: '{{ (stat.name ~ " (" ~ stat.zone ~ ")")|e('js') }}',
|
||||||
|
placesCount: {{ stat.placesCount }},
|
||||||
|
completion: {{ stat.completionPercent|default(0) }},
|
||||||
|
x: {{ stat.population }},
|
||||||
|
y: {{ (stat.placesCount / stat.population * 1000)|round(2) }}
|
||||||
|
},
|
||||||
|
{% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
];
|
||||||
|
|
||||||
// Colorer les cellules de pourcentage
|
const ctx = document.getElementById('statsBubbleChart');
|
||||||
colorizePercentageCells('td:nth-child(3)');
|
if (ctx && statsDataRaw.length > 0) {
|
||||||
// colorier selon le nombre de lieux
|
const statsData = statsDataRaw.map(d => ({
|
||||||
colorizePercentageCellsRelative('td:nth-child(4)', '154, 205, 50');
|
...d,
|
||||||
|
r: Math.sqrt(d.placesCount) * 2.5 // Utilise la racine carrée pour la taille, avec un facteur d'échelle
|
||||||
|
}));
|
||||||
|
|
||||||
enableLabourageForm();
|
new Chart(ctx.getContext('2d'), {
|
||||||
performSearch('dieppe');
|
type: 'bubble',
|
||||||
|
data: {
|
||||||
|
datasets: [{
|
||||||
|
label: 'Commerces par ville',
|
||||||
|
data: statsData,
|
||||||
|
backgroundColor: statsData.map(d => `hsla(120, 60%, 70%, ${d.completion / 120 + 0.2})`),
|
||||||
|
borderColor: 'hsl(120, 60%, 40%)',
|
||||||
|
borderWidth: 1,
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
maintainAspectRatio: false,
|
||||||
|
plugins: {
|
||||||
|
legend: {
|
||||||
|
display: false
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
callbacks: {
|
||||||
|
label: function(context) {
|
||||||
|
const data = context.dataset.data[context.dataIndex];
|
||||||
|
let label = data.label || '';
|
||||||
|
if (label) {
|
||||||
|
label += ': ';
|
||||||
|
}
|
||||||
|
label += `${data.placesCount} commerces, ${data.y} pour 1000 hab., ${data.completion}% complétion`;
|
||||||
|
return label;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
x: {
|
||||||
|
type: 'logarithmic',
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Population (échelle log)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
y: {
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Commerces pour 1000 habitants'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// La fonction est maintenant globale grâce à l'import dans app.js
|
||||||
|
if (typeof colorizePercentageCells === 'function') {
|
||||||
|
colorizePercentageCells('td:nth-child(3)');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Gérer le formulaire de labourage
|
||||||
|
const labourageForm = document.getElementById('labourerForm');
|
||||||
|
const citySearchInput = document.getElementById('citySearch');
|
||||||
|
const selectedZipCodeInput = document.getElementById('selectedZipCode');
|
||||||
|
const labourageBtn = labourageForm.querySelector('button[type="submit"]');
|
||||||
|
const originalBtnHtml = labourageBtn.innerHTML;
|
||||||
|
|
||||||
|
if (labourageForm && citySearchInput && typeof setupCitySearch === 'function') {
|
||||||
|
setupCitySearch('citySearch', 'citySuggestions', function (suggestion) {
|
||||||
|
// Afficher le spinner et désactiver le bouton
|
||||||
|
labourageBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Chargement...';
|
||||||
|
labourageBtn.disabled = true;
|
||||||
|
citySearchInput.disabled = true;
|
||||||
|
|
||||||
|
if (suggestion.insee) {
|
||||||
|
window.location.href = `/admin/labourer/${suggestion.insee}`;
|
||||||
|
} else if (suggestion.postcode) {
|
||||||
|
// Moins probable, mais en solution de repli
|
||||||
|
window.location.href = `/admin/labourer/${suggestion.postcode}`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
labourageForm.addEventListener('submit', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
alert("Veuillez rechercher et sélectionner une ville directement dans la liste de suggestions.");
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
|
@ -100,7 +100,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row city-list ">
|
<div class="row city-list ">
|
||||||
|
<div id="stats_bubble"></div>
|
||||||
<div class="mt-5">
|
<div class="mt-5">
|
||||||
<h2><i class="bi bi-geo-alt"></i> Villes disponibles</h2>
|
<h2><i class="bi bi-geo-alt"></i> Villes disponibles</h2>
|
||||||
<p>Visualisez un tableau de bord de la complétion des commerces et autres lieux d'intérêt pour votre ville grâce à OpenStreetMap</p>
|
<p>Visualisez un tableau de bord de la complétion des commerces et autres lieux d'intérêt pour votre ville grâce à OpenStreetMap</p>
|
||||||
|
@ -239,6 +239,11 @@
|
||||||
});
|
});
|
||||||
enableLabourageForm();
|
enableLabourageForm();
|
||||||
|
|
||||||
|
function displayStatsBubble(){
|
||||||
|
const statsBubble = document.querySelector('#stats_bubble');
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue