osm-commerces/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 '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 Tablesort from 'tablesort';

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;

Chart.register(ChartDataLabels);

// Attendre le chargement du DOM
document.addEventListener('DOMContentLoaded', () => {
  console.log('DOMContentLoaded');

  if(updateMapHeightForLargeScreens){

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

  // Activer le tri sur tous les tableaux désignés
  document.querySelectorAll('.js-sort-table').forEach(table => {
    new Tablesort(table);
  });

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

  // Tri automatique des tableaux
  // const tables = document.querySelectorAll('table');
  // tables.forEach(table => {
  //   table.classList.add('js-sort-table');
  // });


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

  enableLabourageForm();
  adjustListGroupFontSize('.list-group-item');
});