360 lines
12 KiB
JavaScript
360 lines
12 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';
|
|
import jQuery from 'jquery';
|
|
import 'tablesort/tablesort.css';
|
|
|
|
// start the Stimulus application
|
|
// import './bootstrap';
|
|
import './utils.js';
|
|
import './opening_hours.js';
|
|
import './josm.js';
|
|
import './edit.js';
|
|
import './table-map-toggles.js';
|
|
import './stats-charts.js';
|
|
import './dashboard-charts.js';
|
|
|
|
import Chart from 'chart.js/auto';
|
|
import ChartDataLabels from 'chartjs-plugin-datalabels';
|
|
import maplibregl from 'maplibre-gl';
|
|
import {
|
|
adjustListGroupFontSize,
|
|
enableLabourageForm,
|
|
genererCouleurPastel,
|
|
getLabourerUrl,
|
|
handleAddCityFormSubmit,
|
|
setupCitySearch,
|
|
toggleCompletionInfo,
|
|
updateMapHeightForLargeScreens
|
|
} from './utils.js';
|
|
import tableSortJs from 'table-sort-js/table-sort.js';
|
|
import 'chartjs-adapter-date-fns';
|
|
|
|
window.$ = jQuery;
|
|
window.jQuery = jQuery;
|
|
|
|
console.log('TableSort', tableSortJs)
|
|
|
|
// Charger table-sortable (version non minifiée locale)
|
|
// import '../assets/js/table-sortable.js';
|
|
|
|
window.Chart = Chart;
|
|
window.genererCouleurPastel = genererCouleurPastel;
|
|
window.setupCitySearch = setupCitySearch;
|
|
window.handleAddCityFormSubmit = handleAddCityFormSubmit;
|
|
window.getLabourerUrl = getLabourerUrl;
|
|
window.ChartDataLabels = ChartDataLabels;
|
|
window.maplibregl = maplibregl;
|
|
window.toggleCompletionInfo = toggleCompletionInfo;
|
|
window.updateMapHeightForLargeScreens = updateMapHeightForLargeScreens;
|
|
// window.Tablesort = Tablesort;
|
|
|
|
Chart.register(ChartDataLabels);
|
|
|
|
// Attendre le chargement du DOM
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('DOMContentLoaded');
|
|
|
|
if (updateMapHeightForLargeScreens) {
|
|
|
|
|
|
window.addEventListener('resize', updateMapHeightForLargeScreens);
|
|
}
|
|
|
|
const randombg = genererCouleurPastel();
|
|
// Appliquer la couleur au body
|
|
|
|
document.querySelectorAll('body, .edit-land, .body-landing').forEach(element => {
|
|
element.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) {
|
|
// Sélectionner tous les inputs sauf #validation_messages
|
|
const hiddenInputs = form.querySelectorAll('#advanced_tags');
|
|
|
|
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;
|
|
});
|
|
}
|
|
|
|
openingHoursFormManager.init();
|
|
|
|
|
|
// 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é');
|
|
}
|
|
|
|
document.querySelectorAll('input[type="text"]').forEach(input => {
|
|
input.addEventListener('blur', updateCompletionProgress);
|
|
});
|
|
const form = document.querySelector('form')
|
|
if (form) {
|
|
form.addEventListener('submit', check_validity);
|
|
updateCompletionProgress()
|
|
}
|
|
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é');
|
|
// }
|
|
|
|
|
|
parseCuisine();
|
|
|
|
// Modifier la fonction de recherche existante
|
|
const searchInput = document.getElementById('app_admin_labourer');
|
|
const suggestionList = document.getElementById('suggestionList');
|
|
|
|
if (searchInput && suggestionList) {
|
|
let timeoutId;
|
|
|
|
searchInput.addEventListener('input', () => {
|
|
clearTimeout(timeoutId);
|
|
const query = searchInput.value.trim();
|
|
|
|
if (query.length < 2) {
|
|
suggestionList.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
timeoutId = setTimeout(async () => {
|
|
const suggestions = await searchInseeCode(query);
|
|
suggestionList.innerHTML = '';
|
|
|
|
if (suggestions.length === 0) {
|
|
const li = document.createElement('li');
|
|
li.style.cssText = `
|
|
padding: 8px 12px;
|
|
color: #666;
|
|
font-style: italic;
|
|
`;
|
|
li.textContent = 'Aucun résultat trouvé';
|
|
suggestionList.appendChild(li);
|
|
return;
|
|
}
|
|
|
|
suggestions.forEach(suggestion => {
|
|
const li = document.createElement('li');
|
|
li.style.cssText = `
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #eee;
|
|
`;
|
|
li.textContent = suggestion.label;
|
|
|
|
li.addEventListener('mouseenter', () => {
|
|
li.style.backgroundColor = '#f0f0f0';
|
|
});
|
|
|
|
li.addEventListener('mouseleave', () => {
|
|
li.style.backgroundColor = 'white';
|
|
});
|
|
|
|
li.addEventListener('click', () => {
|
|
searchInput.value = suggestion.insee;
|
|
suggestionList.innerHTML = '';
|
|
labourer();
|
|
});
|
|
|
|
suggestionList.appendChild(li);
|
|
});
|
|
}, 300);
|
|
});
|
|
}
|
|
|
|
if (enableLabourageForm) {
|
|
|
|
enableLabourageForm();
|
|
}
|
|
adjustListGroupFontSize('.list-group-item');
|
|
|
|
// Activer le tri naturel sur tous les tableaux avec la classe table-sort
|
|
if (tableSortJs) {
|
|
tableSortJs();
|
|
} else {
|
|
console.log('pas de tablesort')
|
|
}
|
|
|
|
// Correction pour le formulaire de labourage
|
|
const labourerForm = document.getElementById('labourerForm');
|
|
if (labourerForm) {
|
|
labourerForm.addEventListener('submit', async function (e) {
|
|
e.preventDefault();
|
|
const zipInput = document.getElementById('selectedZipCode');
|
|
const cityInput = document.getElementById('citySearch');
|
|
let insee = zipInput.value;
|
|
if (!insee && cityInput && cityInput.value.trim().length > 0) {
|
|
// Recherche du code INSEE via l'API
|
|
const response = await fetch(`https://geo.api.gouv.fr/communes?nom=${encodeURIComponent(cityInput.value.trim())}&fields=nom,code&limit=1`);
|
|
const data = await response.json();
|
|
if (data.length > 0) {
|
|
insee = data[0].code;
|
|
}
|
|
}
|
|
if (insee) {
|
|
window.location.href = `/add-city-without-labourage/${insee}`;
|
|
} else {
|
|
alert('Veuillez sélectionner une ville valide.');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Ajouter un écouteur pour l'événement 'load' de MapLibre afin d'ajuster la hauteur de la carte
|
|
if (window.maplibregl && document.getElementById('map')) {
|
|
// On suppose que la carte est initialisée ailleurs et accessible via window.mapInstance
|
|
// Sinon, on peut essayer de détecter l'instance automatiquement
|
|
let mapInstance = window.mapInstance;
|
|
if (!mapInstance && window.maplibreMap) {
|
|
mapInstance = window.maplibreMap;
|
|
}
|
|
// Si l'instance n'est pas trouvée, essayer de la récupérer via une variable globale courante
|
|
if (!mapInstance && window.map) {
|
|
mapInstance = window.map;
|
|
}
|
|
if (mapInstance && typeof mapInstance.on === 'function') {
|
|
mapInstance.on('load', function () {
|
|
updateMapHeightForLargeScreens();
|
|
});
|
|
}
|
|
}
|
|
//updateMapHeightForLargeScreens();
|
|
|
|
console.log('window.followupSeries', window.followupSeries)
|
|
if (!window.followupSeries) return;
|
|
|
|
const series = window.followupSeries;
|
|
|
|
// Données bornes de recharge
|
|
const chargingStationCount = (series['charging_station_count'] || []).map(point => ({
|
|
x: point.date,
|
|
y: point.value
|
|
}));
|
|
const chargingStationCompletion = (series['charging_station_completion'] || []).map(point => ({
|
|
x: point.date,
|
|
y: point.value
|
|
}));
|
|
|
|
// Données bornes incendie
|
|
const fireHydrantCount = (series['fire_hydrant_count'] || []).map(point => ({x: point.date, y: point.value}));
|
|
const fireHydrantCompletion = (series['fire_hydrant_completion'] || []).map(point => ({
|
|
x: point.date,
|
|
y: point.value
|
|
}));
|
|
|
|
// Graphique bornes de recharge
|
|
const chargingStationChart = document.getElementById('chargingStationChart');
|
|
if (chargingStationChart) {
|
|
new Chart(chargingStationChart, {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
label: 'Nombre de bornes de recharge',
|
|
data: chargingStationCount,
|
|
borderColor: 'blue',
|
|
backgroundColor: 'rgba(0,0,255,0.1)',
|
|
fill: false,
|
|
yAxisID: 'y',
|
|
},
|
|
{
|
|
label: 'Complétion (%)',
|
|
data: chargingStationCompletion,
|
|
borderColor: 'green',
|
|
backgroundColor: 'rgba(0,255,0,0.1)',
|
|
fill: false,
|
|
yAxisID: 'y1',
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
parsing: false,
|
|
responsive: true,
|
|
scales: {
|
|
x: {type: 'time', time: {unit: 'day'}, title: {display: true, text: 'Date'}},
|
|
y: {beginAtZero: true, title: {display: true, text: 'Nombre'}},
|
|
y1: {
|
|
beginAtZero: true,
|
|
position: 'right',
|
|
title: {display: true, text: 'Complétion (%)'},
|
|
grid: {drawOnChartArea: false}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Graphique bornes incendie
|
|
const fireHydrantChart = document.getElementById('fireHydrantChart');
|
|
if (fireHydrantChart) {
|
|
new Chart(fireHydrantChart, {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [
|
|
{
|
|
label: 'Nombre de bornes incendie',
|
|
data: fireHydrantCount,
|
|
borderColor: 'red',
|
|
backgroundColor: 'rgba(255,0,0,0.1)',
|
|
fill: false,
|
|
yAxisID: 'y',
|
|
},
|
|
{
|
|
label: 'Complétion (%)',
|
|
data: fireHydrantCompletion,
|
|
borderColor: 'orange',
|
|
backgroundColor: 'rgba(255,165,0,0.1)',
|
|
fill: false,
|
|
yAxisID: 'y1',
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
parsing: false,
|
|
responsive: true,
|
|
scales: {
|
|
x: {type: 'time', time: {unit: 'day'}, title: {display: true, text: 'Date'}},
|
|
y: {beginAtZero: true, title: {display: true, text: 'Nombre'}},
|
|
y1: {
|
|
beginAtZero: true,
|
|
position: 'right',
|
|
title: {display: true, text: 'Complétion (%)'},
|
|
grid: {drawOnChartArea: false}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|