From 86a870d1e7f6a3343ed006e8434e3bdcbde0cae9 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Fri, 6 Jun 2025 16:16:34 +0200
Subject: [PATCH] up badges on stats

---
 assets/styles/app.css               |  12 ++++
 templates/admin/stats.html.twig     | 106 +++++++++++++++++++++-------
 templates/admin/stats/row.html.twig |   4 +-
 3 files changed, 96 insertions(+), 26 deletions(-)

diff --git a/assets/styles/app.css b/assets/styles/app.css
index a4517ac1..84aa21a4 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -61,6 +61,10 @@ table.js-sort-table th:active {
     max-height: 11rem !important;
 }
 
+.maplibregl-popup-content strong {
+    min-width: 10rem;
+}
+
 .maplibregl-popup-content table {
     width: 100%;
     max-height: 300px;
@@ -71,4 +75,12 @@ table.js-sort-table th:active {
 .maplibregl-popup-content h2,
 .maplibregl-popup-contenth3 {
     font-size: 1rem;
+}
+
+.card {
+    overflow: auto;
+}
+
+#attribution {
+    font-size: 0.6rem;
 }
\ No newline at end of file
diff --git a/templates/admin/stats.html.twig b/templates/admin/stats.html.twig
index 5c568496..ad75f147 100644
--- a/templates/admin/stats.html.twig
+++ b/templates/admin/stats.html.twig
@@ -36,26 +36,46 @@
         </div>
         <div class="row">
             <div class="col-md-3 col-12">
-                {{ stats.getCompletionPercent() }} % complété sur les critères donnés.
+                <span class="badge {% if stats.getCompletionPercent() > 85 %}bg-success{% else %}bg-warning{% endif %}">
+                {{ stats.getCompletionPercent() }} %
+                </span>
+                 complété sur les critères donnés.
                 </div>
                 <div class="col-md-3 col-12">
-                <i class="bi bi-building"></i> {{ stats.places | length}} commerces dans la zone.
+                <span class="badge bg-primary">
+                <i class="bi bi-building"></i> {{ stats.places | length}} 
+                </span>commerces dans la zone.
                 </div>
                 <div class="col-md-3 col-12">
-                <i class="bi bi-clock"></i> {{ stats.getAvecHoraires() }} commerces avec horaires.
+                <span class="badge bg-primary">
+                <i class="bi bi-clock"></i> {{ stats.getAvecHoraires() }} 
+                </span>
+                commerces avec horaires.
                 </div>
                 <div class="col-md-3 col-12">
-                    <i class="bi bi-map"></i> {{ stats.getAvecAdresse() }} commerces avec adresse.
+                    <span class="badge bg-primary">
+                    <i class="bi bi-map"></i> {{ stats.getAvecAdresse() }} 
+                    </span>
+                    commerces avec adresse.
                 </div>
                 <div class="col-md-3 col-12">
-                    <i class="bi bi-globe"></i> {{ stats.getAvecSite() }} commerces avec site web renseigné.
+                    <span class="badge bg-primary">
+                    <i class="bi bi-globe"></i> {{ stats.getAvecSite() }} 
+                    </span>
+                    commerces avec site web renseigné.
                 </div>
                 <div class="col-md-3 col-12">
+                    <span class="badge bg-primary">
                     <i class="bi bi-arrow-up-right"></i>
-                    {{ stats.getAvecAccessibilite() }} commerces avec accessibilité PMR renseignée.
+                    {{ stats.getAvecAccessibilite() }} 
+                    </span>
+                    commerces avec accessibilité PMR renseignée.
                 </div>
                 <div class="col-md-3 col-12">
-                    <i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }} commerces avec note renseignée.
+                    <span class="badge bg-primary">
+                    <i class="bi bi-chat-dots"></i> {{ stats.getAvecNote() }} 
+                    </span>
+                    commerces avec note renseignée.
                 </div>
             </div> 
    
@@ -66,7 +86,9 @@
         </div>
    </div>
         <div id="map" class="mt-4" style="height: 400px;"></div>
- 
+        <div id="attribution">
+            <a href="https://www.openstreetmap.org/copyright">Données OpenStreetMap</a>
+        </div>
     </div>
     <div class="card mt-4">
 
@@ -155,6 +177,10 @@
 
     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>';
         if (element.tags) {
             for (const tag in element.tags) {
@@ -164,11 +190,12 @@
         tagstable += '</table>';
 
         return `
-            <a href="/admin/placeType/${element.type}/${element.id}">
+            <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 href="https://openstreetmap.org/${element.type}/${element.id}" target="_blank">OSM</a>
+            <a class="btn btn-secondary" href="https://openstreetmap.org/${element.type}/${element.id}"> <i class="bi bi-map"></i> OSM</a>
             ${tagstable}
         `;
     }
@@ -250,6 +277,7 @@
     }
 
     let josm_elements = [];
+    features = []; 
 
     async function loadPlaces(map) {
         try {
@@ -310,7 +338,7 @@
 
                 const circle = turf.circle(
                     feature.properties.center,
-                    0.02, // Rayon initial en kilomètres
+                    5/1000, // Rayon initial en kilomètres
                     { steps: 64, units: 'kilometers' }
                 );
 
@@ -344,21 +372,8 @@
                     const element = overpassData[elementId];
                     
                     if (element) {
-                        const completion = calculateCompletion(element);
-                        
                         // Créer le contenu de la popup
-                        const popupContent = `
-                            <div class="popup-content">
-                                <h5>${element.tags?.name || 'Sans nom'}</h5>
-                                <p>Taux de complétion: ${Math.round(completion)}%</p>
-                                <ul>
-                                    ${Object.entries(element.tags || {})
-                                        .filter(([key]) => !['name'].includes(key))
-                                        .map(([key, value]) => `<li><strong>${key}:</strong> ${value}</li>`)
-                                        .join('')}
-                                </ul>
-                            </div>
-                        `;
+                        const popupContent = createPopupContent(element);
 
                         new maplibregl.Popup()
                             .setLngLat(e.lngLat)
@@ -395,6 +410,45 @@
         }
     }
 
+    function draw_circle_containing_all_features(map) {
+        if (features.length === 0) return;
+
+        // Calculer le centre à partir de toutes les features
+        const center = features.reduce((acc, feature) => {
+            return [
+                acc[0] + feature.properties.center[0],
+                acc[1] + feature.properties.center[1]
+            ];
+        }, [0, 0]).map(coord => coord / features.length);
+
+        // Calculer le rayon nécessaire pour couvrir tous les points
+        const radius = features.reduce((maxRadius, feature) => {
+            const distance = turf.distance(
+                center,
+                feature.properties.center,
+                { units: 'kilometers' }
+            );
+            return Math.max(maxRadius, distance);
+        }, 0);
+
+        const circle = turf.circle(center, radius, { steps: 64, units: 'kilometers' });
+        map.addSource('circle', { type: 'geojson', data: circle });
+        map.addLayer({ 
+            id: 'circle', 
+            type: 'fill', 
+            source: 'circle', 
+            paint: { 
+                'fill-color': 'blue', 
+                'fill-opacity': 0.25 
+            } 
+        });
+
+        // Ajouter un marqueur au centre du cercle
+        new maplibregl.Marker()
+            .setLngLat(center)
+            .addTo(map);
+    }
+
     function updateCircles(map) {
         if (!map) return;
 
@@ -495,6 +549,8 @@
 
             // Charger les lieux
             loadPlaces(map);
+
+            draw_circle_containing_all_features(map);
         });
 
         sortTable();
diff --git a/templates/admin/stats/row.html.twig b/templates/admin/stats/row.html.twig
index 05efbd1d..99b44e52 100644
--- a/templates/admin/stats/row.html.twig
+++ b/templates/admin/stats/row.html.twig
@@ -43,7 +43,9 @@
                             <i class="bi bi-tag"></i>
                         {% endif %}
 
-                        {{ commerce.mainTag }}
+                        <a href="https://wiki.openstreetmap.org/wiki/FR:Tag:{{ commerce.mainTag }}">
+                            {{ commerce.mainTag }}
+                        </a>
                         </td>
                         <td  class="{{ commerce.hasAddress() ? 'filled' : '' }}">{{ commerce.address }}</td>
                         <td  class="{{ commerce.hasWebsite() ? 'filled' : '' }}">{{ commerce.website }}</td>