osm-labo/assets/app.js

/*
 * 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';
window.$ = jQuery;
window.jQuery = 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 {
  genererCouleurPastel,
  setupCitySearch,
  handleAddCityFormSubmit,
  enableLabourageForm,
  getLabourerUrl,
  adjustListGroupFontSize,
  toggleCompletionInfo,
  updateMapHeightForLargeScreens
} from './utils.js';
import tableSortJs from 'table-sort-js/table-sort.js';
import 'chartjs-adapter-date-fns';
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')
  }

  // Initialisation du tri et filtrage sur les tableaux du dashboard et de la page stats
  // if (document.querySelector('#dashboard-table')) {
  //   $('#dashboard-table').tableSortable({
  //     pagination: false,
  //     showPaginationLabel: true,
  //     searchField: '#dashboard-table-search',
  //     responsive: false
  //   });
  // }
  // if (document.querySelector('#stats-table')) {
  //   $('#stats-table').tableSortable({
  //     pagination: false,
  //     showPaginationLabel: true,
  //     searchField: '#stats-table-search',
  //     responsive: false
  //   });
  // }

  // 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 } }
        }
      }
    });
  }
});