up validate edit form

2025-06-20 01:44:42 +02:00 · 2025-06-09 00:34:33 +02:00 · 2025-06-09 00:34:33 +02:00 · 81c613e93c
commit 81c613e93c
parent 3ccfd732e7
4 changed files with 263 additions and 69 deletions
--- a/templates/admin/stats.html.twig
+++ b/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);
-
-        const completion = calculateCompletion(element);
-        console.log("completion", completion);
-
-        let tagstable = '<table class="table table-bordered"><tr><th>Clé</th><th>Valeur</th></tr>';
+        let content = `
+            <div class="mb-2">
+                <a class="btn btn-primary" href="/admin/placeType/${element.type}/${element.id}">
+                    <i class="bi bi-pencil"></i> ${element.tags?.name || 'Sans nom'}
+                </a>
+                <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 `
-            <a class="btn btn-primary" href="/admin/placeType/${element.type}/${element.id}">
-                <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}
-        `;
+        content += '</table>';
+        return content;
    }

    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 = {
-                        id: `circle-${element.id}`,
+                    const feature = {
+                        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
-            features.forEach(feature => {
-                const layerId = `circle-${feature.properties.id}`;
-                if (map.getSource(layerId)) {
-                    map.removeSource(layerId);
-                }
-                if (map.getLayer(layerId)) {
-                    map.removeLayer(layerId);
-                }
+            // Afficher les marqueurs selon le type actuel
+            updateMarkers();

+            // 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 @@
                    }
                }
            });
-
-            // 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));
+        } else {
+            // Afficher les marqueurs en goutte
+            features.forEach(feature => {
+                const element = overpassData[feature.properties.id];
+                const popupContent = element ? createPopupContent(element) : `<h1>${feature.properties.name}</h1>`;
                
-                // Vérifier que les bounds sont valides avant de les utiliser
-                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);
+                const marker = new maplibregl.Marker({
+                    color: getCompletionColor(feature.properties.completion)
+                })
+                .setLngLat(feature.properties.center)
+                .setPopup(new maplibregl.Popup({ offset: 25 })
+                    .setHTML(popupContent))
+                .addTo(map);
+                dropMarkers.push(marker);
+            });
        }
    }

@ -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 = '';
--- a/templates/admin/stats/table-head.html.twig
+++ b/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>
--- a/templates/public/edit.html.twig
+++ b/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 %}
--- a/templates/public/view.html.twig
+++ b/templates/public/view.html.twig
@ -60,7 +60,7 @@
        {{ parent() }} 
        <script> 

-check_validity();
+check_validity ? check_validity() : null;

        </script> 
 {% endblock %}