up validate edit form

templates/admin/stats.html.twig

@@ -87,10 +87,10 @@
    </div>
    <div class="d-flex justify-content-end mb-2">
         <div class="btn-group" role="group">
-            <button type="button" class="btn btn-outline-primary active" id="circleMarkersBtn">
+            <button type="button" class="btn btn-outline-primary" id="circleMarkersBtn">
                 <i class="bi bi-circle"></i> Cercles
             </button>
-            <button type="button" class="btn btn-outline-primary" id="dropMarkersBtn">
+            <button type="button" class="btn btn-outline-primary active" id="dropMarkersBtn">
                 <i class="bi bi-geo-alt"></i> Gouttes
             </button>
         </div>
@@ -151,6 +151,9 @@
     let maplibre;
     let map;
     let overpassData = {}; // Stockage des données Overpass
+    let currentMarkerType = 'drop'; // Type de marqueur actuel
+    let dropMarkers = []; // Tableau pour stocker les marqueurs en goutte
+    let contextMenu = null; // Menu contextuel
 
     function getCompletionColor(completion) {
         if (completion === undefined || completion === null) {
@@ -186,28 +189,28 @@
     }
 
     function createPopupContent(element) {
-        console.log("createPopupContent",element);
+        let content = `
-
+            <div class="mb-2">
-        const completion = calculateCompletion(element);
+                <a class="btn btn-primary" href="/admin/placeType/${element.type}/${element.id}">
-        console.log("completion", completion);
+                    <i class="bi bi-pencil"></i> ${element.tags?.name || 'Sans nom'}
-
+                </a>
-        let tagstable = '<table class="table table-bordered"><tr><th>Clé</th><th>Valeur</th></tr>';
+                <a class="btn btn-secondary ms-2" href="https://openstreetmap.org/${element.type}/${element.id}">
+                    <i class="bi bi-map"></i> OSM
+                </a>
+            </div>
+        `;
+        
+        content += '<table class="table table-sm">';
+        
+        // Ajouter tous les tags
         if (element.tags) {
             for (const tag in element.tags) {
-                tagstable += `<tr><td>${tag}</td><td>${element.tags[tag]}</td></tr>`;
+                content += `<tr><td><strong>${tag}</strong></td><td>${element.tags[tag]}</td></tr>`;
             }
         }
-        tagstable += '</table>';
 
-        return `
+        content += '</table>';
-            <a class="btn btn-primary" href="/admin/placeType/${element.type}/${element.id}">
+        return content;
-                <i class="bi bi-pencil"></i> Modifier
-                <h3>${element.tags?.name || 'Sans nom'}</h3>
-            </a>
-            <br>
-            <a class="btn btn-secondary" href="https://openstreetmap.org/${element.type}/${element.id}"> <i class="bi bi-map"></i> OSM</a>
-            ${tagstable}
-        `;
     }
 
     function calculateCompletionDistribution(elements) {
@@ -307,7 +310,7 @@
                 overpassData[element.id] = element;
             });
 
-            // Mettre à jour les cercles
+            // Mettre à jour les marqueurs
             features = [];
             josm_elements = [];
             data.elements.forEach(element => {
@@ -316,8 +319,8 @@
                 if (lat && lon) {
                     const completion = calculateCompletion(element);
                      
-                    const circle = {
+                    const feature = {
-                        id: `circle-${element.id}`,
+                        id: `marker-${element.id}`,
                         type: 'Feature',
                         properties: {
                             id: element.id,
@@ -330,24 +333,65 @@
                             coordinates: [lon, lat]
                         }
                     };
-                    features.push(circle);
+                    features.push(feature);
                     josm_elements.push(element);
                 }
             });
 
-            // Créer les cercles sur la carte
+            // Afficher les marqueurs selon le type actuel
-            features.forEach(feature => {
+            updateMarkers();
-                const layerId = `circle-${feature.properties.id}`;
-                if (map.getSource(layerId)) {
-                    map.removeSource(layerId);
-                }
-                if (map.getLayer(layerId)) {
-                    map.removeLayer(layerId);
-                }
 
+            // Ajuster la vue pour inclure tous les points
+            const points = features.map(f => f.properties.center);
+            if (points.length > 0) {
+                const bounds = new maplibregl.LngLatBounds(points[0], points[0]);
+                points.forEach(point => bounds.extend(point));
+                
+                if (bounds?._sw && bounds?._ne) {
+                    map.fitBounds(bounds, {
+                        padding: 50,
+                        maxZoom: 15
+                    });
+                } else {
+                    console.warn('Bounds invalides, utilisation des coordonnées par défaut');
+                }
+            }
+ 
+            createCompletionChart(data.elements);
+
+            // Cacher le spinner une fois le chargement terminé
+            document.getElementById('maploader').style.display = 'none';
+
+        } catch (error) {
+            console.error('Erreur lors du chargement des lieux:', error);
+        }
+    }
+
+    function updateMarkers() {
+        // Supprimer tous les marqueurs existants
+        features.forEach(feature => {
+            const layerId = `marker-${feature.properties.id}`;
+            // Supprimer d'abord la couche
+            if (map.getLayer(layerId)) {
+                map.removeLayer(layerId);
+            }
+            // Puis supprimer la source
+            if (map.getSource(layerId)) {
+                map.removeSource(layerId);
+            }
+        });
+
+        // Supprimer tous les marqueurs en goutte existants
+        dropMarkers.forEach(marker => marker.remove());
+        dropMarkers = [];
+
+        if (currentMarkerType === 'circle') {
+            // Afficher les cercles
+            features.forEach(feature => {
+                const layerId = `marker-${feature.properties.id}`;
                 const circle = turf.circle(
                     feature.properties.center,
-                    5/1000, // Rayon initial en kilomètres
+                    5/1000,
                     { steps: 64, units: 'kilometers' }
                 );
 
@@ -370,14 +414,12 @@
             // Ajouter les popups sur les cercles
             map.on('click', function(e) {
                 const clickedFeatures = map.queryRenderedFeatures(e.point, {
-                    layers: features.map(f => `circle-${f.properties.id}`)
+                    layers: features.map(f => `marker-${f.properties.id}`)
                 });
 
-                console.log('Clicked features:', clickedFeatures);
-
                 if (clickedFeatures.length > 0) {
                     const feature = clickedFeatures[0];
-                    const elementId = feature.layer.id.replace('circle-', '');
+                    const elementId = feature.layer.id.replace('marker-', '');
                     const element = overpassData[elementId];
                     
                     if (element) {
@@ -391,31 +433,21 @@
                     }
                 }
             });
-
+        } else {
-            // Ajuster la vue pour inclure tous les points
+            // Afficher les marqueurs en goutte
-            const points = features.map(f => f.properties.center);
+            features.forEach(feature => {
-            if (points.length > 0) {
+                const element = overpassData[feature.properties.id];
-                const bounds = new maplibregl.LngLatBounds(points[0], points[0]);
+                const popupContent = element ? createPopupContent(element) : `<h1>${feature.properties.name}</h1>`;
-                points.forEach(point => bounds.extend(point));
                 
-                // Vérifier que les bounds sont valides avant de les utiliser
+                const marker = new maplibregl.Marker({
-                if (bounds?._sw && bounds?._ne) {
+                    color: getCompletionColor(feature.properties.completion)
-                    map.fitBounds(bounds, {
+                })
-                        padding: 50,
+                .setLngLat(feature.properties.center)
-                        maxZoom: 15
+                .setPopup(new maplibregl.Popup({ offset: 25 })
-                    });
+                    .setHTML(popupContent))
-                } else {
+                .addTo(map);
-                    console.warn('Bounds invalides, utilisation des coordonnées par défaut');
+                dropMarkers.push(marker);
-                }
+            });
-            }
- 
-            createCompletionChart(data.elements);
-
-            // Cacher le spinner une fois le chargement terminé
-            document.getElementById('maploader').style.display = 'none';
-
-        } catch (error) {
-            console.error('Erreur lors du chargement des lieux:', error);
         }
     }
 
@@ -531,16 +563,112 @@
         });
         map = maplibre;
 
+        // Créer le menu contextuel
+        contextMenu = document.createElement('div');
+        contextMenu.id = 'context-menu';
+        contextMenu.style.display = 'none';
+        contextMenu.style.position = 'absolute';
+        contextMenu.style.backgroundColor = 'white';
+        contextMenu.style.border = '1px solid #ccc';
+        contextMenu.style.padding = '10px';
+        contextMenu.style.borderRadius = '4px';
+        contextMenu.style.boxShadow = '0 2px 4px rgba(0,0,0,0.2)';
+        contextMenu.style.zIndex = '1000';
+        document.body.appendChild(contextMenu);
+
+        // Gestionnaire de clic droit sur la carte
+        map.on('contextmenu', async function(e) {
+            e.preventDefault();
+            
+            // Vérifier si le clic est sur un marqueur
+            const clickedFeatures = map.queryRenderedFeatures(e.point, {
+                layers: features.map(f => `marker-${f.properties.id}`)
+            });
+
+            if (clickedFeatures.length > 0) {
+                return; // Ne rien faire si on clique sur un marqueur
+            }
+
+            // Afficher le menu contextuel
+            contextMenu.style.display = 'block';
+            
+            // Obtenir la position de la carte dans la page
+            const mapContainer = map.getContainer();
+            const mapRect = mapContainer.getBoundingClientRect();
+            
+            // Calculer la position relative au conteneur de la carte
+            const x = e.point.x + mapRect.left;
+            const y = e.point.y + mapRect.top;
+            
+            // Positionner le menu contextuel
+            contextMenu.style.left = `${x}px`;
+            contextMenu.style.top = `${y}px`;
+            
+            contextMenu.innerHTML = '<div class="spinner-border spinner-border-sm" role="status"></div> Recherche du code INSEE...';
+
+            try {
+                // Récupérer les coordonnées du clic
+                const { lng, lat } = e.lngLat;
+
+                // Appeler l'API pour obtenir le code INSEE
+                const response = await fetch(`https://api-adresse.data.gouv.fr/reverse/?lon=${lng}&lat=${lat}`);
+                const data = await response.json();
+
+                if (data.features && data.features.length > 0) {
+                    const feature = data.features[0];
+                    const city = feature.properties.city;
+                    const inseeCode = feature.properties.citycode;
+
+                    contextMenu.innerHTML = `
+                        <div class="mb-2">
+                            <strong>Ville :</strong> ${city}<br>
+                            <strong>Code INSEE :</strong> ${inseeCode}
+                        </div>
+                        <a href="/admin/labourer/${inseeCode}" class="btn btn-primary btn-sm">
+                            <i class="bi bi-tractor"></i> Labourer cette zone
+                        </a>
+                    `;
+                } else {
+                    contextMenu.innerHTML = 'Aucune information trouvée pour cette position';
+                }
+            } catch (error) {
+                console.error('Erreur lors de la recherche du code INSEE:', error);
+                contextMenu.innerHTML = 'Erreur lors de la recherche du code INSEE';
+            }
+        });
+
+        // Fermer le menu contextuel lors d'un clic ailleurs
+        document.addEventListener('click', function(e) {
+            if (contextMenu && !contextMenu.contains(e.target)) {
+                contextMenu.style.display = 'none';
+            }
+        });
+
+        // Gestionnaires d'événements pour les boutons de type de marqueur
+        document.getElementById('circleMarkersBtn').addEventListener('click', function() {
+            currentMarkerType = 'circle';
+            this.classList.add('active');
+            document.getElementById('dropMarkersBtn').classList.remove('active');
+            updateMarkers();
+        });
+
+        document.getElementById('dropMarkersBtn').addEventListener('click', function() {
+            currentMarkerType = 'drop';
+            this.classList.add('active');
+            document.getElementById('circleMarkersBtn').classList.remove('active');
+            updateMarkers();
+        });
+
         document.getElementById('openInJOSM').addEventListener('click', openInJOSM);
 
         // Attendre que la carte soit chargée avant d'ajouter les écouteurs d'événements
         map.on('load', function() {
             console.log('Map loaded');
             map_is_loaded = true;
-            // Changer le curseur au survol des cercles
+            // Changer le curseur au survol des marqueurs
             map.on('mouseenter', function(e) {
                 const hoveredFeatures = map.queryRenderedFeatures(e.point, {
-                    layers: features.map(f => f.id)
+                    layers: features.map(f => `marker-${f.properties.id}`)
                 });
                 if (hoveredFeatures.length > 0) {
                     map.getCanvas().style.cursor = 'pointer';
@@ -549,7 +677,7 @@
 
             map.on('mouseleave', function(e) {
                 const hoveredFeatures = map.queryRenderedFeatures(e.point, {
-                    layers: features.map(f => f.id)
+                    layers: features.map(f => `marker-${f.properties.id}`)
                 });
                 if (hoveredFeatures.length === 0) {
                     map.getCanvas().style.cursor = '';

templates/admin/stats/table-head.html.twig

@@ -15,11 +15,11 @@
 
         <th>
         <i class="bi bi-house-fill"></i>
-        Rue
+        Numéro
         </th>
         <th>
         <i class="bi bi-house-fill"></i>
-        Numéro
+        Rue
         </th>
         <i class="bi bi-globe"></i>
         Site web ({{ stats.getAvecSite() }} / {{ stats.places|length }})</th>

templates/public/edit.html.twig

@@ -5,6 +5,11 @@
 
 {% block body %}
 <div class="container edit-land mt-4"> 
+
+<pre>
+    {{ dump(commerce_overpass) }}
+</pre>
+
             <div class="card shadow-sm">
                 <div class="card-body">
                     <h1 class="card-title h2 mb-4">{{ 'display.welcome'|trans }} {{ commerce_overpass.tags_converted.name }}</h1>
@@ -175,7 +180,7 @@
 {% endblock %}
     {% block javascripts %}
         {{ parent() }}
-        <script src={{asset('js/mapbox/mapbox-gl.js')}}></script>
+        <script src="{{ asset('js/mapbox/mapbox-gl.js') }}"></script> 
         <script>
             {% 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 }}'; 
@@ -198,7 +203,68 @@ window.addEventListener('resize', () => {
   updateMapHeightForLargeScreens();
 });
 
-check_validity();
+
+function check_validity(e) {
+
+  list_inputs_good_to_fill = [
+    'input[name="commerce_tag_value__contact:email"]',
+    'input[name="commerce_tag_value__contact:phone"]',
+    'input[name="commerce_tag_value__contact:website"]',
+    'input[name="commerce_tag_value__contact:mastodon"]',
+    'input[name="commerce_tag_value__address"]',
+    'input[name="custom_opening_hours"]',
+    'input[name="commerce_tag_value__contact:street"]',
+    'input[name="commerce_tag_value__contact:housenumber"]',
+    'input[name="custom__cuisine"]',
+  ]
+
+  list_inputs_good_to_fill.forEach(selector => {
+    const input = document.querySelector(selector);
+    if (input) {
+      if (input.value.trim() !== '') {
+        input.classList.add('good_filled');
+      } else {
+        input.classList.remove('good_filled');
+      }
+    }
+  });
+  let errors = [];
+  document.querySelectorAll('.is-invalid').forEach(input => {
+    input.classList.remove('is-invalid');
+  });
+
+  const nameInput = document.querySelector('input[name="commerce_tag_value__name"]');
+  if (!nameInput.value.trim()) {
+    errors.push("Le nom de l'établissement est obligatoire");
+    nameInput.classList.add('is-invalid');
+  }
+
+  const emailInput = document.querySelector('input[name="commerce_tag_value__contact:email"]');
+  if (emailInput && emailInput.value) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(emailInput.value)) {
+      errors.push("L'adresse email n'est pas valide");
+      emailInput.classList.add('is-invalid');
+    }
+  }
+
+  const phoneInput = document.querySelector('input[name="commerce_tag_value__contact:phone"]');
+  if (phoneInput && phoneInput.value) {
+    const phoneRegex = /^(\+33|0)[1-9](\d{2}){4}$/;
+    if (!phoneRegex.test(phoneInput.value.replace(/\s/g, ''))) {
+      errors.push("Le numéro de téléphone n'est pas valide");
+      phoneInput.classList.add('is-invalid');
+    }
+  }
+
+  if (errors.length > 0) {
+    e.preventDefault();
+    document.querySelector('#validation_messages').innerHTML = errors.join('<br>');
+    document.querySelector('#validation_messages').classList.add('is-invalid');
+  }
+}
+
+check_validity ? check_validity() : null;
 
         </script> 
     {% endblock %}

templates/public/view.html.twig

@@ -60,7 +60,7 @@
         {{ parent() }} 
         <script> 
 
-check_validity();
+check_validity ? check_validity() : null;
 
         </script> 
 {% endblock %}