refacto fonctions

assets/app.js

@@ -10,19 +10,14 @@ import './styles/app.css';
 import './utils.js';
 import './opening_hours.js';
 import './josm.js';
-
+import './edit.js';
 
 
 // Attendre le chargement du DOM
 document.addEventListener('DOMContentLoaded', () => {
   console.log('DOMContentLoaded');
 
-
+ 
-
-
-
-  updateMapHeightForLargeScreens()
-
   const randombg = genererCouleurPastel();
   // Appliquer la couleur au body
   document.body.style.backgroundColor = randombg;
@@ -56,61 +51,6 @@ document.addEventListener('DOMContentLoaded', () => {
   openingHoursFormManager.init();
 
 
-  // lister les changesets de l'utilisateur osm-commerces 
-  async function listChangesets() {
-    // const changesets = await fetch('https://api.openstreetmap.org/api/0.6/changesets?display_name=osm-commerce-fr');
-    // Ajouter le header Accept pour demander du JSON
-    const options = {
-      headers: {
-        'Accept': 'application/json'
-      }
-    };
-    const changesets = await fetch('https://api.openstreetmap.org/api/0.6/changesets?display_name=osm-commerce-fr', options);
-    const data = await changesets.json();
-    console.log(data.changesets.length);
-
-    // Grouper les changesets par période
-    const now = new Date();
-    const last24h = new Date(now - 24 * 60 * 60 * 1000);
-    const last7days = new Date(now - 7 * 24 * 60 * 60 * 1000);
-    const last30days = new Date(now - 30 * 24 * 60 * 60 * 1000);
-
-    const stats = {
-      last24h: 0,
-      last7days: 0,
-      last30days: 0
-    };
-
-    data.changesets.forEach(changeset => {
-      const changesetDate = new Date(changeset.closed_at);
-
-      if (changesetDate >= last24h) {
-        stats.last24h++;
-      }
-      if (changesetDate >= last7days) {
-        stats.last7days++;
-      }
-      if (changesetDate >= last30days) {
-        stats.last30days++;
-      }
-    });
-
-    // Afficher les statistiques
-    const historyDiv = document.getElementById('userChangesHistory');
-    if (historyDiv) {
-      historyDiv.innerHTML = `
-      <div id="changesets_history">
-        <p>Changesets créés :</p>
-        <div class="row">
-           <div class="col-6">Dernières 24h :</div> <div class="col-6 text-right">${stats.last24h}</div>
-           <div class="col-6">7 derniers jours :</div> <div class="col-6 text-right">${stats.last7days}</div>
-           <div class="col-6">30 derniers jours :</div> <div class="col-6 text-right">${stats.last30days}</div>
-        </div>
-      </div>
-      `;
-    }
-  }
-
   // Vérifier si l'élément avec l'ID 'userChangesHistory' existe avant d'appeler la fonction
   if (document.getElementById('userChangesHistory')) {
     listChangesets();
@@ -118,32 +58,6 @@ document.addEventListener('DOMContentLoaded', () => {
     console.log('userChangesHistory non trouvé');
   }
 
-
-
-  /**
-   * mettre à jour la barre de progression 
-   * pour le formulaire de modification
-   */
-  function updateCompletionProgress() {
-    const inputs = document.querySelectorAll('input[type="text"]');
-    let filledInputs = 0;
-    let totalInputs = inputs.length;
-
-    inputs.forEach(input => {
-      if (input.value.trim() !== '') {
-        filledInputs++;
-      }
-    });
-
-    const completionPercentage = (filledInputs / totalInputs) * 100;
-    const progressBar = document.querySelector('#completion_progress .progress-bar');
-    if (progressBar) {
-      progressBar.style.width = completionPercentage + '%';
-      progressBar.setAttribute('aria-valuenow', completionPercentage);
-      document.querySelector('#completion_display').innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}%`;
-    }
-  }
-
   document.querySelectorAll('input[type="text"]').forEach(input => {
     input.addEventListener('blur', updateCompletionProgress);
   });
@@ -165,24 +79,6 @@ document.addEventListener('DOMContentLoaded', () => {
 
 
 
-  function parseCuisine() {
-    const cuisineInput = document.querySelector('input[name="commerce_tag_value__cuisine"]');
-
-    // Récupérer tous les checkboxes de type de cuisine
-    const cuisineCheckboxes = document.querySelectorAll('input[name="cuisine_type"]');
-
-    // Ajouter un écouteur d'événement sur chaque checkbox
-    cuisineCheckboxes.forEach(checkbox => {
-      checkbox.addEventListener('change', () => {
-        // Récupérer toutes les checkboxes cochées
-        const checkedCuisines = Array.from(document.querySelectorAll('input[name="cuisine_type"]:checked'))
-          .map(input => input.value);
-
-        // Mettre à jour l'input avec les valeurs séparées par des points-virgules
-        cuisineInput.value = checkedCuisines.join(';');
-      });
-    });
-  }
 
   parseCuisine();
 

assets/edit.js

@@ -0,0 +1,46 @@
+
+/**
+ * mettre à jour la barre de progression 
+ * pour le formulaire de modification
+ */
+function updateCompletionProgress() {
+  const inputs = document.querySelectorAll('input[type="text"]');
+  let filledInputs = 0;
+  let totalInputs = inputs.length;
+
+  inputs.forEach(input => {
+    if (input.value.trim() !== '') {
+      filledInputs++;
+    }
+  });
+
+  const completionPercentage = (filledInputs / totalInputs) * 100;
+  const progressBar = document.querySelector('#completion_progress .progress-bar');
+  if (progressBar) {
+    progressBar.style.width = completionPercentage + '%';
+    progressBar.setAttribute('aria-valuenow', completionPercentage);
+    document.querySelector('#completion_display').innerHTML = `Votre commerce est complété à ${Math.round(completionPercentage)}%`;
+  }
+}
+
+function parseCuisine() {
+  const cuisineInput = document.querySelector('input[name="commerce_tag_value__cuisine"]');
+
+  // Récupérer tous les checkboxes de type de cuisine
+  const cuisineCheckboxes = document.querySelectorAll('input[name="cuisine_type"]');
+
+  // Ajouter un écouteur d'événement sur chaque checkbox
+  cuisineCheckboxes.forEach(checkbox => {
+    checkbox.addEventListener('change', () => {
+      // Récupérer toutes les checkboxes cochées
+      const checkedCuisines = Array.from(document.querySelectorAll('input[name="cuisine_type"]:checked'))
+        .map(input => input.value);
+
+      // Mettre à jour l'input avec les valeurs séparées par des points-virgules
+      cuisineInput.value = checkedCuisines.join(';');
+    });
+  });
+}
+
+window.updateCompletionProgress = updateCompletionProgress;
+window.parseCuisine = parseCuisine;

assets/josm.js

@@ -74,3 +74,4 @@ function openInJOSM(map, map_is_loaded, osmElements) {
   document.body.removeChild(tempLink);
 
 }
+window.openInJOSM = openInJOSM;

assets/opening_hours.js

@@ -1,23 +1,35 @@
 
-
+/**
+ * Gestion du formulaire d'horaires d'ouverture
+ * 
+ */
 const openingHoursFormManager = {
   defaultOpeningHours: '',
-  init: function () {
+  inputSelector: '',
+  init: function (inputSelector = 'input[name="custom__opening_hours"]') {
     // Rechercher l'élément par son attribut name plutôt que par son id
-    const openingHoursInput = document.querySelector('input[name="custom__opening_hours"]');
+    this.setInputSelector(inputSelector);
+    const openingHoursInput = document.querySelector(inputSelector);
     if (!openingHoursInput) {
-      console.warn('Élément input[name="custom__opening_hours"] non trouvé');
+      console.warn('Élément ', inputSelector, ' non trouvé');
       return;
     }
     this.defaultOpeningHours = openingHoursInput.value;
 
-    this.makeForm();
+    this.makeForm(inputSelector);
 
     if (this.defaultOpeningHours !== '') {
-      this.parseOpeningHoursValue();
+      this.parseOpeningHoursValue(inputSelector);
     }
   },
-  parseOpeningHoursValue: function () {
+  setInputSelector: function (inputSelector) {
+    this.inputSelector = inputSelector;
+  },
+  /**
+   * convertir les checkboxes et inputs en horaires OSM dans l'input de référence
+   * @param {string} inputSelector 
+   */
+  parseOpeningHoursValue: function (inputSelector = 'input[name="custom__opening_hours"]') {
     // Analyser la chaîne d'horaires d'ouverture
     const parsedOpeningHours = {};
 
@@ -78,8 +90,8 @@ const openingHoursFormManager = {
 
     console.log(parsedOpeningHours);
   },
-  makeForm: function () {
+  makeForm: function (inputSelector = 'input[name="custom__opening_hours"]') {
-    const customOpeningHours = document.querySelector('input[name="custom__opening_hours"]');
+    const customOpeningHours = document.querySelector(inputSelector);
     console.log('makeForm customOpeningHours', customOpeningHours);
 
     if (customOpeningHours) {
@@ -146,7 +158,7 @@ const openingHoursFormManager = {
         // Ajouter l'événement pour afficher/masquer les plages horaires
         input.addEventListener('change', (e) => {
           horairesContainer.classList.toggle('d-none', !e.target.checked);
-          this.convertToOSMOpeningHours();
+          this.convertToOSMOpeningHours(inputSelector);
         });
       });
 
@@ -318,7 +330,7 @@ const openingHoursFormManager = {
     return container;
   },
 
-  convertToOSMOpeningHours: function () {
+  convertToOSMOpeningHours: function (inputSelector = 'input[name="custom__opening_hours"]') {
     const jours = {
       'Lundi': 'Mo',
       'Mardi': 'Tu',
@@ -363,7 +375,7 @@ const openingHoursFormManager = {
     }
 
     // Mettre à jour l'input custom__opening_hours
-    const customOpeningHours = document.querySelector('input[name="custom__opening_hours"]');
+    const customOpeningHours = document.querySelector(inputSelector);
     if (customOpeningHours) {
       customOpeningHours.value = osmFormat;
     }
@@ -386,3 +398,4 @@ const openingHoursFormManager = {
     return null;
   }
 }
+window.openingHoursFormManager = openingHoursFormManager;

assets/utils.js

@@ -61,16 +61,6 @@ const genererCouleurPastel = () => {
 };
 
 
-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);
-  }
-}
-
 async function searchInseeCode(query) {
   try {
 
@@ -90,4 +80,86 @@ async function searchInseeCode(query) {
     console.error('Erreur lors de la recherche du code INSEE:', error);
     return [];
   }
-}
+}
+
+
+function updateMapHeightForLargeScreens() {
+
+  const mapFound = document.querySelector('#map');
+  if (mapFound && window.innerHeight > 800 && window.innerWidth > 800) {
+
+    mapFound.style.height = window.innerWidth * 0.8 + 'px';
+  } else {
+    console.log('window.innerHeight', window.innerHeight);
+  }
+}
+
+// lister les changesets de l'utilisateur osm-commerces 
+async function listChangesets() {
+  // Ajouter le header Accept pour demander du JSON
+  const options = {
+    headers: {
+      'Accept': 'application/json'
+    }
+  };
+  const changesets = await fetch('https://api.openstreetmap.org/api/0.6/changesets?display_name=osm-commerce-fr', options);
+  const data = await changesets.json();
+  console.log(data.changesets.length);
+
+  // Grouper les changesets par période
+  const now = new Date();
+  const last24h = new Date(now - 24 * 60 * 60 * 1000);
+  const last7days = new Date(now - 7 * 24 * 60 * 60 * 1000);
+  const last30days = new Date(now - 30 * 24 * 60 * 60 * 1000);
+
+  const stats = {
+    last24h: 0,
+    last7days: 0,
+    last30days: 0
+  };
+
+  data.changesets.forEach(changeset => {
+    const changesetDate = new Date(changeset.closed_at);
+
+    if (changesetDate >= last24h) {
+      stats.last24h++;
+    }
+    if (changesetDate >= last7days) {
+      stats.last7days++;
+    }
+    if (changesetDate >= last30days) {
+      stats.last30days++;
+    }
+  });
+
+  // Afficher les statistiques
+  const historyDiv = document.getElementById('userChangesHistory');
+  if (historyDiv) {
+    historyDiv.innerHTML = `
+      <div id="changesets_history">
+        <p>Changesets créés :</p>
+        <div class="row">
+           <div class="col-6">Dernières 24h :</div> <div class="col-6 text-right">${stats.last24h}</div>
+           <div class="col-6">7 derniers jours :</div> <div class="col-6 text-right">${stats.last7days}</div>
+           <div class="col-6">30 derniers jours :</div> <div class="col-6 text-right">${stats.last30days}</div>
+        </div>
+      </div>
+      `;
+  }
+}
+
+
+
+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);
+}
+
+window.openInPanoramax = openInPanoramax;
+window.listChangesets = listChangesets;
+window.updateMapHeightForLargeScreens = updateMapHeightForLargeScreens;
+window.searchInseeCode = searchInseeCode;
+window.genererCouleurPastel = genererCouleurPastel;
+window.check_validity = check_validity;

templates/public/edit.html.twig

@@ -181,17 +181,11 @@
         {{ parent() }}
         <script src={{asset('js/mapbox/mapbox-gl.js')}}></script>
         <script>
-            function openInJOSM(type, id) {
+            {# function openInJOSM(type, id) {
                 const josmUrl = `http://localhost:8111/load_object?objects=${type}${id}`;
                 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);
-            }
 
             {% 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 %}
                 mapboxgl.accessToken = '{{ mapbox_token }}'; 
@@ -208,5 +202,11 @@
                     .addTo(map);
             {% endif %}
 
+
+// Ajouter un écouteur d'événement pour le redimensionnement de la fenêtre
+window.addEventListener('resize', () => {
+  updateMapHeightForLargeScreens();
+});
+
         </script> 
     {% endblock %}

templates/public/edit/address.html.twig

@@ -3,10 +3,11 @@
 
     {# {{ dump(commerce_overpass)}} #}
     <div class="row mb-3">
-        <div class="col-md-5">
+        <div class="col-12 col-md-2">
             <label for="commerce_tag_value__addr:housenumber">{{'display.keys.contact:housenumber'|trans}}</label>
-            <input type="text" class="form-control" name="commerce_tag_value__contact:housenumber" value="{% if commerce_overpass.tags_converted['contact:housenumber'] is defined %}{{ commerce_overpass.tags_converted['contact:housenumber'] }}{% endif %}">
+            <input type="text" class="form-control text-end" name="commerce_tag_value__contact:housenumber" value="{% if commerce_overpass.tags_converted['contact:housenumber'] is defined %}{{ commerce_overpass.tags_converted['contact:housenumber'] }}{% endif %}">
-
+        </div>
+        <div class="col-12 col-md-10">
             <label for="commerce_tag_value__contact:street">{{'display.keys.contact:street'|trans}}</label>
             <input type="text" class="form-control" name="commerce_tag_value__contact:street" value="{% if commerce_overpass.tags_converted['contact:street'] is defined %}{{ commerce_overpass.tags_converted['contact:street'] }}{% endif %}">
         </div>

templates/public/edit/opening_hours.html.twig

@@ -1,25 +1,24 @@
 <div id="opening_hours">
-                                <h2>
+    <h2>
-                                <i class="bi bi-clock"></i> 
+    <i class="bi bi-clock"></i> 
-                                {{ 'display.opening_hours'|trans }}</h2>
+    {{ 'display.opening_hours'|trans }}</h2>
-                                <p class="description">{{ 'display.opening_hours_description'|trans }}</p>
+    <p class="description">{{ 'display.opening_hours_description'|trans }}</p>
 
-                                {% if commerce_overpass.tags_converted.opening_hours is defined and commerce_overpass.tags_converted.opening_hours != '' %} 
+    {% if commerce_overpass.tags_converted.opening_hours is defined and commerce_overpass.tags_converted.opening_hours != '' %} 
-                                    <input type="text" placeholder="Remplissez" class="form-control" name="custom__opening_hours" value="{{ commerce_overpass.tags_converted.opening_hours }}">
+        <input type="text" 
-                                {% else %}
+        placeholder="Remplissez" 
-                                    <input type="text" placeholder="Lundi de 10h à 12h et de 14h à 18h" class="form-control" name="custom__opening_hours" value="">
+        class="form-control" 
-                                    <br>
+        name="custom__opening_hours" 
-                                {% endif %}
+        id="custom__opening_hours"
-
+        value="{{ commerce_overpass.tags_converted.opening_hours }}">
-                                {# <div class="examples d-none">
+    {% else %}
-                                    Exemples :
+        <input type="text" 
-                                    <ul>
+        placeholder="Mo-Fr 10:00-12:00 " 
-                                        <li>Écrivez "24/7" pour indiquer que le commerce est ouvert 24 heures sur 24</li>
+        class="form-control" 
-                                        <li>Écrivez "Mo-Fr 9:00 - 18:00" pour indiquer que le commerce est ouvert du lundi au vendredi de 9h à 18h</li>
+        name="custom__opening_hours" 
-                                        <li>Pour des horaires plus complexes, écrivez "Mo-Fr 9:00 - 18:00; Sa 9:00 - 12:00" pour indiquer que le commerce est ouvert du lundi au vendredi de 9h à 18h et le samedi de 9h à 12h</li>
+        id="custom__opening_hours"
-                                    </ul>
+        value="">
-                                </div> #}
+        <br>
-                                <hr>
+    {% endif %}
-                                 <script src="{{ asset('js/main.js') }}"></script>
+    <hr> 
-                                 </script>
+</div>
-                            </div>