up infos habitants sur stats

assets/utils.js

@@ -1,4 +1,3 @@
-
 function colorHeadingTable() {
 
   const headers = document.querySelectorAll('th');
@@ -21,7 +20,7 @@ function check_validity(e) {
     'input[name="commerce_tag_value__contact:email"]',
     'input[name="commerce_tag_value__contact:phone"]',
     'input[name="commerce_tag_value__contact:website"]',
-    'commerce_tag_value__contact:mastodon',
+    '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"]',

labourage.sh

@@ -12,6 +12,18 @@ codes_insee=(
   "33063" # Bordeaux
   "59350" # Lille
   "35238" # Rennes
+  "75101" # Paris 1er
+  "75102" # Paris 2e
+  "75103" # Paris 3e
+  "75104" # Paris 4e
+  "75105" # Paris 5e
+  "75106" # Paris 6e
+  "75107" # Paris 7e
+  "75108" # Paris 8e
+  "75109" # Paris 9e
+  "75110" # Paris 10e
+  "75111" # Paris 11e
+  "75112" # Paris 12e
   "75113" # Paris 13e
   "75114" # Paris 14e
   "75115" # Paris 15e

migrations/Version20250617141249.php

@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20250617141249 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql(<<<'SQL'
+            ALTER TABLE place ADD habitants INT DEFAULT NULL
+        SQL);
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql(<<<'SQL'
+            ALTER TABLE place DROP habitants
+        SQL);
+    }
+}

migrations/Version20250617141824.php

@@ -0,0 +1,35 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20250617141824 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql(<<<'SQL'
+            ALTER TABLE stats ADD population INT DEFAULT NULL
+        SQL);
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql(<<<'SQL'
+            ALTER TABLE stats DROP population
+        SQL);
+    }
+}

public/js/utils.js

@@ -0,0 +1,166 @@
+// Fonction pour gérer la recherche de villes
+/**
+ * Configure la recherche de ville avec autocomplétion
+ * @param {string} inputId - ID de l'input de recherche
+ * @param {string} suggestionListId - ID de la liste des suggestions
+ * @param {Function} onSelect - Callback appelé lors de la sélection d'une ville
+ */
+export function setupCitySearch(inputId, suggestionListId, onSelect) {
+    const searchInput = document.getElementById(inputId);
+    const suggestionList = document.getElementById(suggestionListId);
+
+    if (!searchInput || !suggestionList) return;
+
+    let timeoutId = null;
+
+    searchInput.addEventListener('input', function () {
+        clearTimeout(timeoutId);
+        const query = this.value.trim();
+
+        if (query.length < 2) {
+            clearSuggestions();
+            return;
+        }
+
+        timeoutId = setTimeout(() => performSearch(query), 300);
+    });
+
+    function performSearch(query) {
+        fetch(`https://geo.api.gouv.fr/communes?nom=${encodeURIComponent(query)}&fields=nom,code,codesPostaux&limit=5`)
+            .then(response => response.json())
+            .then(data => {
+                const citySuggestions = data.map(city => ({
+                    name: city.nom,
+                    postcode: city.codesPostaux[0],
+                    insee: city.code
+                }));
+                displaySuggestions(citySuggestions);
+            })
+            .catch(error => {
+                console.error('Erreur lors de la recherche:', error);
+                clearSuggestions();
+            });
+    }
+
+    function displaySuggestions(suggestions) {
+        clearSuggestions();
+        suggestions.forEach(suggestion => {
+            const li = document.createElement('li');
+            li.className = 'list-group-item';
+            li.textContent = `${suggestion.name} (${suggestion.postcode})`;
+            li.addEventListener('click', () => {
+                searchInput.value = suggestion.name;
+                clearSuggestions();
+                if (onSelect) onSelect(suggestion);
+            });
+            suggestionList.appendChild(li);
+        });
+    }
+
+    function clearSuggestions() {
+        suggestionList.innerHTML = '';
+    }
+
+    // Fermer les suggestions en cliquant en dehors
+    document.addEventListener('click', function (e) {
+        if (!searchInput.contains(e.target) && !suggestionList.contains(e.target)) {
+            clearSuggestions();
+        }
+    });
+}
+
+// Fonction pour formater l'URL de labourage
+/**
+ * Génère l'URL de labourage pour un code postal donné
+ * @param {string} zipCode - Le code postal
+ * @returns {string} L'URL de labourage
+ */
+export function getLabourerUrl(zipCode) {
+    return `/admin/labourer/${zipCode}`;
+}
+
+// Fonction pour gérer la soumission du formulaire d'ajout de ville
+export function handleAddCityFormSubmit(event) {
+    event.preventDefault();
+    const form = event.target;
+    const submitButton = form.querySelector('button[type="submit"]');
+    const zipCodeInput = form.querySelector('input[name="zip_code"]');
+    if (!zipCodeInput.value) {
+        return;
+    }
+    // Afficher le spinner
+    submitButton.disabled = true;
+    const originalContent = submitButton.innerHTML;
+    submitButton.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Labourer...';
+    // Rediriger
+    window.location.href = getLabourerUrl(zipCodeInput.value);
+}
+
+/**
+ * Colore les cellules d'un tableau en fonction des pourcentages
+ * @param {string} selector - Le sélecteur CSS pour cibler les cellules à colorer
+ * @param {string} color - La couleur de base en format RGB (ex: '154, 205, 50')
+ */
+export function colorizePercentageCells(selector, color = '154, 205, 50') {
+    document.querySelectorAll(selector).forEach(cell => {
+        const percentage = parseInt(cell.textContent);
+        if (!isNaN(percentage)) {
+            const alpha = percentage / 100;
+            cell.style.backgroundColor = `rgba(${color}, ${alpha})`;
+        }
+    });
+}
+
+/**
+ * Colore les cellules d'un tableau avec un gradient relatif à la valeur maximale
+ * @param {string} selector - Le sélecteur CSS pour cibler les cellules à colorer
+ * @param {string} color - La couleur de base en format RGB (ex: '154, 205, 50')
+ */
+export function colorizePercentageCellsRelative(selector, color = '154, 205, 50') {
+    // Récupérer toutes les cellules
+    const cells = document.querySelectorAll(selector);
+
+    // Trouver la valeur maximale
+    let maxValue = 0;
+    cells.forEach(cell => {
+        const value = parseInt(cell.textContent);
+        if (!isNaN(value) && value > maxValue) {
+            maxValue = value;
+        }
+    });
+
+    // Appliquer le gradient relatif à la valeur max
+    cells.forEach(cell => {
+        const value = parseInt(cell.textContent);
+        if (!isNaN(value)) {
+            const alpha = value / maxValue; // Ratio relatif au maximum
+            cell.style.backgroundColor = `rgba(${color}, ${alpha})`;
+        }
+    });
+}
+
+/**
+ * Ajuste dynamiquement la taille du texte des éléments list-group-item selon leur nombre
+ * @param {string} selector - Le sélecteur CSS des éléments à ajuster
+ * @param {number} [minFont=0.8] - Taille de police minimale en rem
+ * @param {number} [maxFont=1.2] - Taille de police maximale en rem
+ */
+export function adjustListGroupFontSize(selector, minFont = 0.8, maxFont = 1.2) {
+    const items = document.querySelectorAll(selector);
+    const count = items.length;
+    let fontSize = maxFont;
+    if (count > 0) {
+        // Plus il y a d'items, plus la taille diminue, mais jamais en dessous de minFont
+        fontSize = Math.max(minFont, maxFont - (count - 5) * 0.05);
+    }
+    items.forEach(item => {
+        item.style.fontSize = fontSize + 'rem';
+    });
+}
+
+function check_validity() {
+    if (!document.getElementById('editLand')) {
+        return;
+    }
+    // ... suite du code ...
+} 

src/Controller/AdminController.php

@@ -131,10 +131,8 @@ final class AdminController extends AbstractController
             // Récupérer ou créer les stats pour cette zone
             $stats = $this->entityManager->getRepository(Stats::class)->findOneBy(['zone' => $zip_code]);
 
-
             $city = $this->motocultrice->get_city_osm_from_zip_code($zip_code);
             if (!$stats) {
-
                 $stats = new Stats();
                 $stats->setZone($zip_code)
                       ->setPlacesCount(0)
@@ -144,11 +142,27 @@ final class AdminController extends AbstractController
                       ->setAvecAccessibilite(0)
                       ->setAvecNote(0)
                       ->setCompletionPercent(0);
-                      $this->entityManager->persist($stats);
-                      $this->entityManager->flush();
-                    }
+                $this->entityManager->persist($stats);
+                $this->entityManager->flush();
+            }
             $stats->setName($city);
 
+            // Récupérer la population via l'API
+            $population = null;
+            try {
+                $apiUrl = 'https://geo.api.gouv.fr/communes/' . $zip_code . '?fields=population';
+                $response = file_get_contents($apiUrl);
+                if ($response !== false) {
+                    $data = json_decode($response, true);
+                    if (isset($data['population'])) {
+                        $population = (int)$data['population'];
+                        $stats->setPopulation($population);
+                    }
+                }
+            } catch (\Exception $e) {
+                // Ne rien faire si l'API échoue
+            }
+
             // Récupérer toutes les données
             $places = $this->motocultrice->labourer($zip_code);
             $processedCount = 0;

src/Controller/PublicController.php

@@ -102,7 +102,7 @@ class PublicController extends AbstractController
         $message = (new Email())
             ->from('contact@osm-commerce.fr')
             ->to($destinataire)
-            ->subject('Votre lien de modification Ope nStreetMap')
+            ->subject('Votre lien de modification OpenStreetMap')
             ->text('Bonjour, nous sommes des bénévoles d\'OpenStreetMap France et nous vous proposons de modifier les informations de votre commerce. Voici votre lien unique de modification: ' . $this->generateUrl('app_public_edit', [
                 'zipcode' => $zipCode,
                 'name' => $place_name,
@@ -117,10 +117,11 @@ class PublicController extends AbstractController
     #[Route('/', name: 'app_public_index')]
     public function index(): Response
     {
+        $stats = $this->entityManager->getRepository(Stats::class)->findAll();
         
         return $this->render('public/home.html.twig', [
             'controller_name' => 'PublicController',
-            
+            'stats' => $stats
         ]);
     }
 
@@ -190,7 +191,6 @@ class PublicController extends AbstractController
     #[Route('/modify/{osm_object_id}/{version}/{changesetID}', name: 'app_public_submit')]
     public function submit($osm_object_id, $version, $changesetID): Response
     {
-
         $place = $this->entityManager->getRepository(Place::class)->findOneBy(['osmId' => $osm_object_id]);
         if (!$place) {
             $this->addFlash('warning', 'Ce commerce n\'existe pas.');
@@ -212,11 +212,9 @@ class PublicController extends AbstractController
 
             $request_post = $request->request->all();
  
-
             $request_post = $this->motocultrice->map_post_values($request_post);
 
             foreach ($request_post as $key => $value) {
-              
                 if (strpos($key, 'commerce_tag_value__') === 0) {
                     $tagKey = str_replace('commerce_tag_value__', '', $key);
                     if (!empty($value)) {
@@ -236,7 +234,6 @@ class PublicController extends AbstractController
             // Récupérer le token OSM depuis les variables d'environnement
             $osm_api_token = $_ENV['APP_OSM_BEARER'];
 
-
             $exception = false;
             $exception_message = "";
             try {
@@ -293,7 +290,6 @@ class PublicController extends AbstractController
 
                 // Debug du XML généré
                 $xmlString = $xml->asXML();
-                // echo('xml : <br>'.$xmlString);
 
                 $response = $client->put("https://api.openstreetmap.org/api/0.6/{$osm_kind}/" . $osm_object_id, [
                     'body' => $xmlString,
@@ -327,15 +323,13 @@ class PublicController extends AbstractController
         }
         
         // après envoi on récupère les données
-        $commerce = $this->motocultrice->get_osm_object_data($osm_kind, $osm_object_id);
+        $commerce_overpass = $this->motocultrice->get_osm_object_data($osm_kind, $osm_object_id);
 
-
-        $place->update_place_from_overpass_data($commerce);
+        $place->update_place_from_overpass_data($commerce_overpass);
         $this->entityManager->persist($place);
         $this->entityManager->flush();
         $this->entityManager->clear();
 
-
         $stats = $place->getStats();
         if(!$stats) {
             $stats = $this->entityManager->getRepository(Stats::class)->findOneBy(['zip_code' => $place->getZipCode()]);
@@ -345,19 +339,20 @@ class PublicController extends AbstractController
             $stats->setZipCode($place->getZipCode());
         }
         
-            $stats->addPlace($place);
-            $place->setStats($stats);
-            $place->setModifiedDate(new \DateTime());
+        $stats->addPlace($place);
+        $place->setStats($stats);
+        $place->setModifiedDate(new \DateTime());
 
-            $stats->computeCompletionPercent();
-            $this->entityManager->persist($stats);
-            $this->entityManager->persist($place);
-            $this->entityManager->flush();
-            $this->entityManager->clear();
+        $stats->computeCompletionPercent();
+        $this->entityManager->persist($stats);
+        $this->entityManager->persist($place);
+        $this->entityManager->flush();
+        $this->entityManager->clear();
 
         return $this->render('public/view.html.twig', [
             'controller_name' => 'PublicController',
-            'commerce' => $commerce,
+            'commerce' => $commerce_overpass,
+            'commerce_overpass' => $commerce_overpass,
             'place' => $place,
             'status' => $status,
             'exception' => $exception,

src/Entity/Place.php

@@ -100,6 +100,9 @@ class Place
     #[ORM\Column(length: 255, nullable: true)]
     private ?string $siret = null;
 
+    #[ORM\Column(nullable: true)]
+    private ?int $habitants = null;
+
     public function getMainTag(): ?string
     {
         return $this->main_tag;
@@ -579,4 +582,16 @@ class Place
 
         return $this;
     }
+
+    public function getHabitants(): ?int
+    {
+        return $this->habitants;
+    }
+
+    public function setHabitants(?int $habitants): static
+    {
+        $this->habitants = $habitants;
+
+        return $this;
+    }
 }

src/Entity/Stats.php

@@ -17,7 +17,7 @@ class Stats
     private ?int $id = null;
 
     #[ORM\Column(length: 255)]
-    private ?string $zone = null;
+    private ?string $zone = null; // code insee de la zone
 
     #[ORM\Column(type: Types::SMALLINT)]
     private ?int $completion_percent = null;
@@ -55,6 +55,10 @@ class Stats
     #[ORM\Column(length: 255, nullable: true)]
     private ?string $name = null;
 
+    // nombre d'habitants dans la zone
+    #[ORM\Column(type: Types::INTEGER, nullable: true)]
+    private ?int $population = null;
+
     // calcule le pourcentage de complétion de la zone
     public function computeCompletionPercent(): ?int
     {
@@ -255,6 +259,17 @@ class Stats
 
         return $this;
     }
+
+    public function getPopulation(): ?int
+    {
+        return $this->population;
+    }
+
+    public function setPopulation(?int $population): static
+    {
+        $this->population = $population;
+        return $this;
+    }
  
 
 }   

templates/admin/stats.html.twig

@@ -16,6 +16,9 @@
             height: 300px;
             margin: 20px 0;
         }
+        .completion-info {
+            margin-bottom: 2rem;
+        }
     </style>
 {% endblock %}
 
@@ -34,6 +37,27 @@
                 </button>
             </div>
         </div>
+        {% if stats.population %}
+        <div class="row mb-3">
+            <div class="col-md-4 col-12">
+                <span class="badge bg-info">
+                    <i class="bi bi-people"></i> Population&nbsp;: {{ stats.population|number_format(0, '.', ' ') }}
+                </span>
+            </div>
+            <div class="col-md-4 col-12">
+                <span class="badge bg-secondary">
+                    <i class="bi bi-shop"></i> 1 lieu pour
+                    {% set ratio = (stats.population and stats.places|length > 0) ? (stats.population / stats.places|length)|round(0, 'ceil') : '?' %}
+                    {{ ratio|number_format(0, '.', ' ') }} habitants
+                </span>
+            </div>
+            <div class="col-md-4 col-12">
+                <span class="badge bg-success">
+                    <i class="bi bi-pencil-square"></i> {{ stats.getAvecNote() }} / {{ stats.places|length }} commerces avec note
+                </span>
+            </div>
+        </div>
+        {% endif %}
         <div class="row">
             <div class="col-md-3 col-12">
                 <span class="badge {% if stats.getCompletionPercent() > 85 %}bg-success{% else %}bg-warning{% endif %}">
@@ -78,6 +102,29 @@
                     commerces avec note renseignée.
                 </div>
             </div> 
+
+            <div class="completion-info mt-4">
+                <div class="alert alert-info">
+                    <div class="d-flex align-items-center" style="cursor: pointer;" onclick="toggleCompletionInfo()">
+                        <i class="bi bi-info-circle me-2"></i>
+                        <h4 class="alert-heading mb-0">Comment est calculé le score de complétion ?</h4>
+                        <i class="bi bi-chevron-down ms-auto" id="completionInfoIcon"></i>
+                    </div>
+                    <div id="completionInfoContent" style="display: none;" class="mt-3">
+                        <p>Le score de complétion est calculé en fonction de plusieurs critères :</p>
+                        <ul>
+                            <li>Nom du commerce (obligatoire)</li>
+                            <li>Adresse complète (numéro, rue, code postal)</li>
+                            <li>Horaires d'ouverture</li>
+                            <li>Site web</li>
+                            <li>Numéro de téléphone</li>
+                            <li>Accessibilité PMR</li>
+                            <li>Note descriptive</li>
+                        </ul>
+                        <p>Chaque critère rempli augmente le score de complétion. Un commerce parfaitement renseigné aura un score de 100%.</p>
+                    </div>
+                </div>
+            </div>
    
    <div id="maploader">
         <div class="spinner-border" role="status">
@@ -101,12 +148,9 @@
         </div>
     </div>
     <div class="card mt-4">
-
-
     
     <div id="distribution_completion" class="mt-4 mb-4"></div>
 
-
     <div class="row">
         <div class="col-md-6 col-12">
             <h1 class="card-title p-4">Tableau des {{ stats.places |length }} lieux</h1>
@@ -128,11 +172,19 @@
         </table>
     </div>
 
-    <h2>requête overpass</h2>
-    <pre class="p-4 bg-light">
-    {{query_places|raw}}
-    </pre>
-     </div>
+    <div class="card mt-4">
+        <div class="card-header">
+            <h2>Requête Overpass</h2>
+        </div>
+        <div class="card-body">
+            <pre class="p-4 bg-light">
+            {{query_places|raw}}
+            </pre>
+            <a href="https://overpass-turbo.eu/?Q={{ query_places|url_encode }}" class="btn btn-primary" target="_blank">
+                <i class="bi bi-box-arrow-up-right"></i> Exécuter dans Overpass Turbo
+            </a>
+        </div>
+    </div>
 </div>
 
 <!-- Bouton caché pour JOSM -->
@@ -167,28 +219,52 @@
     function calculateCompletion(element) {
         let completionCount = 0;
         let totalFields = 0;
+        let missingFields = [];
         
         const fieldsToCheck = [
-            'name',
-            'contact:street', 
-            'contact:housenumber',
-            'opening_hours',
-            'contact:website',
-            'contact:phone',
-            'wheelchair'
+            {name: 'name', label: 'Nom du commerce'},
+            {name: 'contact:street', label: 'Rue'}, 
+            {name: 'contact:housenumber', label: 'Numéro'},
+            {name: 'opening_hours', label: 'Horaires d\'ouverture'},
+            {name: 'contact:website', label: 'Site web'},
+            {name: 'contact:phone', label: 'Téléphone'},
+            {name: 'wheelchair', label: 'Accessibilité PMR'}
         ];
 
         fieldsToCheck.forEach(field => {
             totalFields++;
-            if (element.tags && element.tags[field]) {
+            if (element.tags && element.tags[field.name]) {
                 completionCount++;
+            } else {
+                missingFields.push(field.label);
             }
         });
 
-        return (completionCount / totalFields) * 100;
+        return {
+            percentage: (completionCount / totalFields) * 100,
+            missingFields: missingFields
+        };
+    }
+
+    function showMissingFieldsPopup(element) {
+        const completion = calculateCompletion(element);
+        if (completion.percentage < 100) {
+            const popup = new maplibregl.Popup()
+                .setLngLat(element.geometry.coordinates)
+                .setHTML(`
+                    <div class="p-2">
+                        <h5>Informations manquantes pour ${element.tags?.name || 'ce commerce'}</h5>
+                        <ul class="list-unstyled">
+                            ${completion.missingFields.map(field => `<li><i class="bi bi-x-circle text-danger"></i> ${field}</li>`).join('')}
+                        </ul>
+                    </div>
+                `);
+            popup.addTo(map);
+        }
     }
 
     function createPopupContent(element) {
+        const completion = calculateCompletion(element);
         let content = `
             <div class="mb-2">
                 <a class="btn btn-primary" href="/admin/placeType/${element.type}/${element.id}">
@@ -200,6 +276,17 @@
             </div>
         `;
         
+        if (completion.percentage < 100) {
+            content += `
+                <div class="alert alert-warning mt-2">
+                    <h6>Informations manquantes :</h6>
+                    <ul class="list-unstyled mb-0">
+                        ${completion.missingFields.map(field => `<li><i class="bi bi-x-circle text-danger"></i> ${field}</li>`).join('')}
+                    </ul>
+                </div>
+            `;
+        }
+        
         content += '<table class="table table-sm">';
         
         // Ajouter tous les tags
@@ -219,7 +306,7 @@
         
         elements.forEach(element => {
             const completion = calculateCompletion(element);
-            const bucketIndex = Math.floor(completion / 10);
+            const bucketIndex = Math.floor(completion.percentage / 10);
             buckets[bucketIndex]++;
         });
 
@@ -325,7 +412,7 @@
                         properties: {
                             id: element.id,
                             name: element.tags?.name || 'Sans nom',
-                            completion: completion,
+                            completion: completion.percentage,
                             center: [lon, lat]
                         },
                         geometry: {
@@ -369,86 +456,33 @@
 
     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,
-                    { steps: 64, units: 'kilometers' }
-                );
+        features.forEach(feature => {
+            const el = document.createElement('div');
+            el.className = 'marker';
+            el.style.backgroundColor = getCompletionColor(feature.properties.completion);
+            el.style.width = '15px';
+            el.style.height = '15px';
+            el.style.borderRadius = '50%';
+            el.style.border = '2px solid white';
+            el.style.cursor = 'pointer';
 
-                map.addSource(layerId, {
-                    'type': 'geojson',
-                    'data': circle
-                });
+            const marker = new maplibregl.Marker(el)
+                .setLngLat(feature.geometry.coordinates)
+                .addTo(map);
 
-                map.addLayer({
-                    'id': layerId,
-                    'type': 'fill',
-                    'source': layerId,
-                    'paint': {
-                        'fill-color': getCompletionColor(feature.properties.completion),
-                        'fill-opacity': 0.7
-                    }
-                });
-            });
-
-            // Ajouter les popups sur les cercles
-            map.on('click', function(e) {
-                const clickedFeatures = map.queryRenderedFeatures(e.point, {
-                    layers: features.map(f => `marker-${f.properties.id}`)
-                });
-
-                if (clickedFeatures.length > 0) {
-                    const feature = clickedFeatures[0];
-                    const elementId = feature.layer.id.replace('marker-', '');
-                    const element = overpassData[elementId];
-                    
-                    if (element) {
-                        // Créer le contenu de la popup
-                        const popupContent = createPopupContent(element);
-
-                        new maplibregl.Popup()
-                            .setLngLat(e.lngLat)
-                            .setHTML(popupContent)
-                            .addTo(map);
-                    }
+            // Ajouter l'événement de clic
+            el.addEventListener('click', () => {
+                const element = overpassData[feature.properties.id];
+                if (element) {
+                    showMissingFieldsPopup(element);
                 }
             });
-        } 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>`;
-                
-                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);
-            });
-        }
+
+            dropMarkers.push(marker);
+        });
     }
 
     function draw_circle_containing_all_features(map) {
@@ -691,6 +725,55 @@
         });
 
         sortTable();
+
+        // Initialiser les popovers pour les cellules de complétion
+        const completionCells = document.querySelectorAll('.completion-cell');
+        completionCells.forEach(cell => {
+            new bootstrap.Popover(cell, {
+                trigger: 'hover',
+                html: true
+            });
+
+            // Fermer tous les popovers au clic sur une cellule
+            cell.addEventListener('click', function(e) {
+                e.stopPropagation();
+                completionCells.forEach(otherCell => {
+                    if (otherCell !== cell) {
+                        const popover = bootstrap.Popover.getInstance(otherCell);
+                        if (popover) {
+                            popover.hide();
+                        }
+                    }
+                });
+            });
+        });
+
+        // Fermer tous les popovers quand on clique ailleurs
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('.completion-cell')) {
+                completionCells.forEach(cell => {
+                    const popover = bootstrap.Popover.getInstance(cell);
+                    if (popover) {
+                        popover.hide();
+                    }
+                });
+            }
+        });
     });
+
+    function toggleCompletionInfo() {
+        const content = document.getElementById('completionInfoContent');
+        const icon = document.getElementById('completionInfoIcon');
+        
+        if (content.style.display === 'none') {
+            content.style.display = 'block';
+            icon.classList.remove('bi-chevron-down');
+            icon.classList.add('bi-chevron-up');
+        } else {
+            content.style.display = 'none';
+            icon.classList.remove('bi-chevron-up');
+            icon.classList.add('bi-chevron-down');
+        }
+    }
 </script>
 {% endblock %} 

templates/admin/stats/row.html.twig

@@ -10,7 +10,37 @@
                         {% endif %}
                         </a>
                         </td>
-                        <td class="text-right" style="background : rgba(0,255,0,{{ commerce.getCompletionPercentage() / 100 }})">
+                        <td class="text-right completion-cell" 
+                            style="background : rgba(0,255,0,{{ commerce.getCompletionPercentage() / 100 }})"
+                            data-bs-toggle="popover"
+                            data-bs-trigger="hover"
+                            data-bs-html="true"
+                            data-bs-content="
+                                <div class='p-2'>
+                                    <h6>Informations manquantes :</h6>
+                                    <ul class='list-unstyled mb-0'>
+                                        {% if not commerce.name %}
+                                            <li><i class='bi bi-x-circle text-danger'></i> Nom du commerce</li>
+                                        {% endif %}
+                                        {% if not commerce.hasAddress() %}
+                                            <li><i class='bi bi-x-circle text-danger'></i> Adresse complète</li>
+                                        {% endif %}
+                                        {% if not commerce.hasOpeningHours() %}
+                                            <li><i class='bi bi-x-circle text-danger'></i> Horaires d'ouverture</li>
+                                        {% endif %}
+                                        {% if not commerce.hasWebsite() %}
+                                            <li><i class='bi bi-x-circle text-danger'></i> Site web</li>
+                                        {% endif %}
+                                        {# {% if not commerce.phone %}
+                                            <li><i class='bi bi-x-circle text-danger'></i> Téléphone</li>
+                                        {% endif %} #}
+                                        {% if not commerce.hasWheelchair() %}
+                                            <li><i class='bi bi-x-circle text-danger'></i> Accessibilité PMR</li>
+                                        {% endif %}
+                                    </ul>
+                                </div>
+                            "
+                            >
                             {{ commerce.getCompletionPercentage() }}
                         </td>
                         <td  class="{{ commerce.mainTag ? 'filled' : '' }}">

templates/public/dashboard.html.twig

@@ -14,216 +14,184 @@
             width: 100%;
             margin-bottom: 1rem;
         }
+        .suggestion-list {
+            position: absolute;
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            max-height: 200px;
+            overflow-y: auto;
+            width: 100%;
+            z-index: 1000;
+            display: none;
+        }
+        .suggestion-item {
+            padding: 8px 12px;
+            cursor: pointer;
+            border-bottom: 1px solid #eee;
+        }
+        .suggestion-item:hover {
+            background-color: #f5f5f5;
+        }
+        .suggestion-name {
+            font-weight: bold;
+        }
+        .suggestion-details {
+            font-size: 0.9em;
+            color: #666;
+        }
+        .suggestion-type {
+            margin-right: 8px;
+        }
+        .search-container {
+            position: relative;
+            margin-bottom: 1rem;
+        }
     </style>
 {% endblock %}
 
 {% block javascripts %}
     {{ parent() }}
-
-    <script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script> 
-    <script >
-    
-
-        // Fonction pour rechercher avec Addok
+    <script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
+    <script type="module">
+        import { colorizePercentageCells, setupCitySearch, getLabourerUrl, handleAddCityFormSubmit, colorizePercentageCellsRelative } from '{{ asset('js/utils.js') }}';
         
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialiser les tooltips Bootstrap
+            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new bootstrap.Tooltip(tooltipTriggerEl)
+            });
 
-        // Créer et configurer la liste de suggestions
-        const suggestionList = document.createElement('ul');
-        suggestionList.style.cssText = `
-            list-style: none;
-            padding: 0;
-            margin: 0;
-            border: 1px solid #ccc;
-            border-top: none;
-            max-height: 200px;
-            overflow-y: auto;
-            position: absolute;
-            background: white;
-            width: 100%;
-            z-index: 1000;
-        `;
+            // Colorer les cellules de pourcentage
+            colorizePercentageCells('td:nth-child(3)');
+            // colorier selon le nombre de lieux 
+            colorizePercentageCellsRelative('td:nth-child(4)', '154, 205, 50');
 
-        // Configurer l'input de recherche
-        document.addEventListener('DOMContentLoaded', () => {
-            const searchInput = document.getElementById('app_admin_labourer');
-            const inputContainer = searchInput.parentElement;
+            const searchInput = document.getElementById('citySearch');
+            const suggestionList = document.getElementById('citySuggestions');
             
-            // Ajouter un conteneur relatif pour le positionnement
-            const searchWrapper = document.createElement('div');
-            searchWrapper.style.position = 'relative';
-            inputContainer.appendChild(searchWrapper);
-            searchWrapper.appendChild(searchInput);
-            searchWrapper.appendChild(suggestionList);
-
-            let debounceTimer;
-
-            searchInput.addEventListener('input', async (e) => {
-                clearTimeout(debounceTimer);
-                debounceTimer = setTimeout(async () => {
-                    const query = e.target.value;
-                    if (query.length < 2) {
-                        suggestionList.innerHTML = '';
-                        return;
-                    }
-
-                    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.postcode;
-                            suggestionList.innerHTML = '';
-                            labourer();
-                        });
-                        
-                        suggestionList.appendChild(li);
-                    });
-                }, 300);
-            });
-
-            // Cacher la liste quand on clique ailleurs
-            document.addEventListener('click', (e) => {
-                if (!inputContainer.contains(e.target)) {
-                    suggestionList.innerHTML = '';
-                }
-            });
-        });
-        // Définir la fonction labourer dans le scope global
-        function labourer() {
-            window.location.href = '/admin/labourer/' + document.getElementById('app_admin_labourer').value;
-        }
-
-       
- 
-        // Fonction pour obtenir la couleur selon le pourcentage
-        function getColorFromPercent(percent) {
-            const red = Math.round(255 * (1 - percent/100));
-            const green = Math.round(255 * (percent/100));
-            return `rgb(${red}, ${green}, 0)`;
-        }
-
-       
-
-        // Attendre le chargement du DOM
-        document.addEventListener('DOMContentLoaded', async function() {
-            // Récupérer le bouton labourer
-            const btnLabourer = document.querySelector('#labourer');
-            if (btnLabourer) {
-                // Ajouter l'écouteur d'événement click
-                btnLabourer.addEventListener('click', function() {
-                    // Récupérer la valeur du code postal
-                    const codePostal = document.querySelector('#app_admin_labourer').value;
-                    // Rediriger vers la route de labourage avec le code postal
-                    window.location.href = `/admin/labourer/${codePostal}`;
+            if (searchInput && suggestionList) {
+                setupCitySearch('citySearch', 'citySuggestions', function(suggestion) {
+                    document.getElementById('selectedZipCode').value = suggestion.postcode;
                 });
             }
 
-            const postalCodes = [{% for stat in stats %}'{{ stat.zone }}'{% if not loop.last %}, {% endif %}{% endfor %}];
-            {% verbatim %}
-            console.log(postalCodes);
-            let postalLines = ``;
-            postalCodes.forEach(code => {
-                if (/^\d+$/.test(code)) {
-                    postalLines += `
-area["postal_code"="${code}"]->.searchArea_${code};
-nwr["admin_level"="8"]["name"](area.searchArea_${code});`;
-                }
+            // Attacher le submit du formulaire en JS
+            const labourerForm = document.getElementById('labourerForm');
+            if (labourerForm) {
+                labourerForm.addEventListener('submit', handleAddCityFormSubmit);
+            }
+
+            // Gestionnaire pour les boutons de labourage
+            document.querySelectorAll('.btn-labourer').forEach(button => {
+                button.addEventListener('click', function(e) {
+                    e.preventDefault();
+                    console.log('submit', this.dataset);
+                    const zipCode = this.dataset.zipCode;
+                    if (!zipCode) return;
+
+                    // Désactiver le bouton et ajouter le spinner
+                    this.disabled = true;
+                    const originalContent = this.innerHTML;
+                    this.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Labourer...';
+
+                    // Rediriger vers l'URL de labourage
+                    window.location.href = getLabourerUrl(zipCode);
+                });
             });
-            const query = `[out:json][timeout:25];
-(
-${postalLines}
-);
-out body;
->;
-out skel qt;`;
-            {% endverbatim %}
- 
-             
- 
         });
     </script>
 {% endblock %}
 
 {% block body %}
-<div class="container mt-4">
+<div class="container">
     <div class="row">
         <div class="col-12">
-            <h1>Dashboard</h1>
+            <h1 class="mb-4">Tableau de bord</h1>
         </div>
+    </div>
+
+    <div class="row">
         <div class="col-12">
-            <h2>Statistiques : {{ stats|length }} codes postaux</h2>
- 
-            
+            <h2>Statistiques par ville</h2>
+            <div class="table-responsive">
+                <table class="table table-striped">
+                    <thead>
+                        <tr>
+                            <th>Ville</th>
+                            <th>Code postal</th>
+                            <th>Complétion</th>
+                            <th>Nombre de commerces</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for stat in stats %}
+                            <tr>
+                                <td><a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}" title="Voir les statistiques de cette ville">
+                                            {{ stat.name }}
+                                        </a></td>
+                                <td>{{ stat.zone }}</td>
+                                <td>{{ stat.completionPercent }}%</td>
+                                <td>{{ stat.places|length }}</td>
+                                <td>
+                                    <div class="btn-group" role="group">
+                                        <a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}" class="btn btn-sm btn-primary" title="Voir les statistiques de cette ville">
+                                            <i class="bi bi-eye"></i>   
+                                        </a>
+                                        <a href="{{ path('app_admin_labourer', {'zip_code': stat.zone}) }}" 
+                                           class="btn btn-sm btn-success btn-labourer"
+                                           data-zip-code="{{ stat.zone }}"
+                                           title="Labourer cette ville"
+                                           >
+                                            <i class="bi bi-recycle"></i>
+                                        </a>
+                                        <a href="{{ path('app_admin_delete_by_zone', {'zip_code': stat.zone}) }}" 
+                                           class="btn btn-sm btn-danger"
+                                           onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette zone ?')"
+                                           title="Supprimer cette ville"
+                                           >
+                                            <i class="bi bi-trash"></i>
+                                        </a>
+                                    </div>
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
 
-              <table class="table table-hover table-striped table-responsive js-sort-table">
-                  <thead>
-                      <tr>
-                          <th>Zone</th>
-                          <th>Nombre de lieux</th>
-                          <th>Complétude %</th>
-                          <th>Actions</th>
-                      </tr>
-                  </thead>
-                  <tbody>
-                      {% for stat in stats %}
-                          <tr>
-                              <td>
-                              <a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}">{{ stat.zone }} {{ stat.name }}</a>
-                              </td>
-                              <td>{{ stat.placesCount }}</td>
-                              <td style="background : rgba(0 , 255, 0, {{stat.completionPercent / 100 }} )">{{ stat.completionPercent }}</td>
-                              <td>
-                              <a class="btn btn-sm btn-primary" href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}"><i class="bi bi-eye"></i></a>
-                              <a class="btn btn-sm btn-warning" href="{{ path('app_admin_labourer', {'zip_code': stat.zone}) }}"><i class="bi bi-arrow-repeat"></i></a>
-                              <a class="btn btn-sm btn-danger" href="{{ path('app_admin_delete_by_zone', {'zip_code': stat.zone}) }}"><i class="bi bi-trash"></i></a>
-                              </td>
-                          </tr>
-                      {% endfor %}
-                  </tbody>
-              </table> 
-               
-
-              <h2>{{ places_count }} Lieux</h2>
-              <h2><button class="btn btn-primary" id="labourer">Labourer les mises à jour</button></h2>
-              <label for="app_admin_labourer">Rechercher une ville par son nom 
-              <div id="loading_search_insee" class="d-none">
-                <div class="spinner-grow text-primary" role="status">
+    <div class="row mt-4">
+        <div class="col-12">
+            <div class="card">
+                <div class="card-body">
+                    <h3 class="card-title">Labourer une ville</h3>
+                    <p class="card-text">
+                        <i class="bi bi-info-circle" 
+                           data-bs-toggle="tooltip" 
+                           data-bs-placement="right"
+                           data-bs-html="true"
+                           title="<strong>Qu'est-ce que le labourage ?</strong><br><br>Le labourage consiste à rechercher automatiquement tous les commerces et lieux d'intérêt dans une ville sur OpenStreetMap. Cette action permet de :<br><br>- Découvrir les commerces existants<br>- Mesurer leur taux de complétion<br>- Identifier les informations manquantes<br>- Faciliter la mise à jour des données"></i>
+                        Rechercher une ville pour labourer ses commerces
+                    </p>
+                    <form id="labourerForm">
+                        <div class="search-container">
+                            <input type="text" 
+                                   id="citySearch" 
+                                   class="form-control" 
+                                   placeholder="Rechercher une ville..."
+                                   autocomplete="off">
+                            <div id="citySuggestions" class="suggestion-list"></div>
+                        </div>
+                        <input type="hidden" name="zip_code" id="selectedZipCode">
+                        <button type="submit" class="btn btn-primary mt-3 btn-labourer">Labourer cette ville</button>
+                    </form>
                 </div>
-                    <span class="sr-only">Chargement...</span>
-              </div>
-              </label>
-              <input class="form-control" type="text" id="app_admin_labourer" placeholder="Entrez le nom d'une ville...">
-              <div id="suggestionList" class="suggestion-list"></div>
-
-          </div>
+            </div>
+        </div>
     </div>
 </div>
 {% endblock %}

templates/public/edit.html.twig

@@ -4,11 +4,7 @@
 
 
 {% block body %}
-<div class="container edit-land mt-4"> 
-
-<pre>
-    {{ dump(commerce_overpass) }}
-</pre>
+<div class="container edit-land mt-4" id="editLand"> 
 
             <div class="card shadow-sm">
                 <div class="card-body">
@@ -19,7 +15,7 @@
                     {% if commerce_overpass is not empty %}
                         <form action="{{ path('app_public_submit', {'osm_object_id': commerce_overpass['@attributes'].id, 'version': commerce_overpass['@attributes'].version, 'changesetID': commerce_overpass['@attributes'].changeset }) }}" method="post" class="needs-validation">
                             <input type="hidden" name="osm_kind" value="{{ osm_kind }}">
-                             {# nom #}
+
                             <div class="row g-3 mb-4"> 
                                 <div class="col-12 col-md-4">
                                     <label for="commerce_tag_value__name" class="form-label">{{'display.keys.name'|trans}}</label>
@@ -90,13 +86,10 @@
                             <hr>
                             
                         </form>
-
-                        
                     {% endif %}
                 </div>
             </div>
         </div>
-
         <div class="row">
             <div class="col-12 mt-4">
                 <div class="actions-modification mb-4 mx-2">
@@ -130,23 +123,31 @@
                             {{ 'display.by'|trans }} 
                             <a href="https://www.openstreetmap.org/user/{{ commerce_overpass['@attributes'].user }}" >{{ commerce_overpass['@attributes'].user }}</a>
                         </div> 
-
-
                         <div class="lien-OpenStreetMap">
                             <a href="https://www.openstreetmap.org/{{commerce.osmKind}}/{{ commerce_overpass['@attributes'].id }}"  class="btn btn-outline-secondary">
                               <i class="bi bi-globe"></i>  {{ 'display.view_on_osm'|trans }}
+                              {{ asset('img/logo-osm.png') }}
                             </a>
-                            <button onclick="openInJOSM('{{commerce.osmKind}}', '{{ commerce_overpass['@attributes'].id }}')" class="btn btn-outline-secondary ms-2">
-                                <i class="bi bi-pencil"></i> Éditer dans JOSM
+                            <button onclick="openInJOSM('{{commerce.osmKind}}', '{{ commerce_overpass['@attributes'].id }}')"
+                            title="Ouvrir dans JOSM"
+                             class="btn btn-outline-secondary ms-2">
+                                <i class="bi bi-pencil"></i> 
+                                {{ asset('img/josm.png') }}
                             </button>
-                            <button onclick="openInPanoramax()" class="btn btn-outline-secondary ms-2">
-                                <i class="bi bi-camera"></i> Voir dans Panoramax
+                            <button onclick="openInPanoramax()" title="Ouvrir dans Panoramax" class="btn btn-outline-secondary ms-2">
+                                <i class="bi bi-camera"></i>
+                                {{ asset('img/logo-panoramax.png') }}
                             </button>
                         </div> 
 
+                        {% if commerce.stats %}
+                            <a href="{{ path('app_admin_stats', {'zip_code': commerce.stats.zone}) }}" class="btn btn-outline-secondary">
+                                <i class="bi bi-bar-chart"></i> zone {{commerce.stats.zone}}
+                            </a>
+                        {% endif %}
+
                         <a href="{{ path('app_public_dashboard' )}}" class="btn btn-outline-secondary">
-                        <i class="bi bi-bar-chart"></i>
-                            Dashboard
+                            <i class="bi bi-bar-chart"></i> Dashboard
                         </a>
                     </div>
                     <div class="disclaimer mt-3 p-3 bg-light rounded">

templates/public/edit/tags.html.twig

@@ -1,43 +1,45 @@
 {% block tags %}
 <fieldset>
 <div id="tags">
-    
-        {% for k, v in commerce_overpass.tags_converted %}
-        
-            <div class="row mb-3 {% if hide_filled_inputs and v is not empty %}d-none{% endif %}">
-                <div class="col-md-5">
-                {% if k not in excluded_tags_to_render  %}
-                    {% if k == 'phone' or k == 'contact:phone' %}
-                        <i class="bi bi-telephone"></i>
-                    {% elseif k == 'addr:housenumber' or k == 'addr:street' or k == 'addr:city' or k == 'addr:postcode' or k == 'addr:country' %}
-                        <i class="bi bi-geo-alt"></i>
-                    {% elseif k == 'contact:mastodon' %}
-                        <i class="bi bi-mastodon"></i>
-                    {% elseif k == 'email' or k == 'contact:email' %}
-                        <i class="bi bi-envelope"></i>
-                    {% elseif k == 'website' or k == 'contact:website' %}
-                    {% elseif k == 'opening_hours' %}   
-                        <i class="bi bi-clock"></i>
-                    {% else %}
-                    <i class="bi bi-tag"></i>
-                    {% endif %}
-                 {% endif %}
-                    <input type="text" class="form-control hidden" name="commerce_tag_key__{{ k }}" value="{{ k }}" title="{{ k }}" readonly>
-                    {% if k not in excluded_tags_to_render %}
-
-                    <span class="label-translated" title="{{ k }}">{{ ('display.keys.' ~ k)|trans }}</span>
-                    {% endif %}
-                </div>
-                <div class="col-md-5">
+    {% for k, v in commerce_overpass.tags_converted %}
+        <div class="row mb-3 {% if hide_filled_inputs and v is not empty %}d-none{% endif %}">
+            <div class="col-md-5">
                 {% if k not in excluded_tags_to_render %}
-
-                    <input type="text" class="form-control" name="commerce_tag_value__{{ k }}" value="{{ v }}">
+                    <div class="d-flex align-items-center">
+                        {% if k == 'phone' or k == 'contact:phone' %}
+                            <i class="bi bi-telephone me-2"></i>
+                        {% elseif k == 'addr:housenumber' or k == 'addr:street' or k == 'addr:city' or k == 'addr:postcode' or k == 'addr:country' %}
+                            <i class="bi bi-geo-alt me-2"></i>
+                        {% elseif k == 'contact:mastodon' %}
+                            <i class="bi bi-mastodon me-2"></i>
+                        {% elseif k == 'email' or k == 'contact:email' %}
+                            <i class="bi bi-envelope me-2"></i>
+                        {% elseif k == 'website' or k == 'contact:website' %}
+                            <i class="bi bi-globe me-2"></i>
+                        {% elseif k == 'opening_hours' %}   
+                            <i class="bi bi-clock me-2"></i>
+                        {% else %}
+                            <i class="bi bi-tag me-2"></i>
+                        {% endif %}
+                        <span class="label-translated" title="{{ k }}">{{ ('display.keys.' ~ k)|trans }}</span>
+                    </div>
+                    <input type="text" class="form-control d-none" name="commerce_tag_key__{{ k }}" value="{{ k }}" title="{{ k }}" readonly>
                 {% endif %}
-                </div>
             </div>
-        
-        {% endfor %}
-    
+            <div class="col-md-5">
+                {% if k not in excluded_tags_to_render %}
+                    <div class="input-group">
+                        <input type="text" 
+                               class="form-control" 
+                               id="commerce_tag_value__{{ k }}" 
+                               name="commerce_tag_value__{{ k }}" 
+                               value="{{ v }}"
+                               {% if hide_filled_inputs and v %}style="display: none;"{% endif %}> 
+                    </div>
+                {% endif %}
+            </div>
+        </div>
+    {% endfor %}
 </div>
 </fieldset>
 {% endblock %}

templates/public/home.html.twig

@@ -6,7 +6,63 @@
     {{ parent() }}
      
     <style>
-        
+        .city-list {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 1rem;
+            margin: 2rem 0;
+        }
+        .city-item {
+            padding: 1rem;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            text-align: center;
+        }
+        .city-item a {
+            text-decoration: none;
+            color: inherit;
+        }
+        .suggestion-list {
+            position: absolute;
+            background: white;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            max-height: 200px;
+            overflow-y: auto;
+            width: 100%;
+            z-index: 1000;
+            display: none;
+        }
+        .suggestion-item {
+            padding: 8px 12px;
+            cursor: pointer;
+            border-bottom: 1px solid #eee;
+        }
+        .suggestion-item:hover {
+            background-color: #f5f5f5;
+        }
+        .suggestion-name {
+            font-weight: bold;
+        }
+        .suggestion-details {
+            font-size: 0.9em;
+            color: #666;
+        }
+        .suggestion-type {
+            margin-right: 8px;
+        }
+        .search-container {
+            position: relative;
+            margin-bottom: 1rem;
+        }
+        .list-group-item{
+            cursor: pointer;
+
+        }
+        .list-group-item:hover{
+            background-color: #f5f5f5;
+            color: #000;
+        }
     </style>
 {% endblock %}
 
@@ -14,40 +70,56 @@
 <div class="container mt-4">
     <div class="row">
         <div class="col-12">
+            <h1>
+                <i class="bi bi-shop"></i> Mon Commerce OSM
+            </h1>
+            <p class="mt-4 p-4">
+                Bonjour, ce site permet de modifier les informations de votre commerce sur OpenStreetMap afin de gagner en visibilité sur des milliers de sites web à la fois en une minute, c'est gratuit et sans engagement.
+                <br>Nous sommes bénévoles dans une association à but non lucratif.
+                <br>Nous vous enverrons un lien unique pour cela par email, et si vous en avez besoin, nous pouvons vous aider.
+            </p>
 
+            <div class="row">
+                <div class="col-12">
+                    <label class="label" for="researchShop">
+                        <i class="bi bi-search bi-2x"></i> Rechercher un commerce, écrivez son nom et la ville
+                    </label>
+                    <input class="form-control" type="text" id="researchShop" placeholder="Mon commerce, Paris">
+                </div>
+            </div>  
+            
+            <div id="resultsList"></div>
+            <div id="proposeLink" class="d-none"></div>
+            <div id="proposeMail" class="d-none">
+                <input type="email" id="emailInput" class="form-control" placeholder="mon_email_de_commerce@exemple.com">
+                <button type="submit" class="btn btn-primary p-4 d-block"> <i class="bi bi-envelope"></i> Envoyer</button>
+            </div>
+            <div id="emailForm"></div>
 
-
-        <h1>
-        <i class="bi bi-shop"></i> Mon Commerce OSM
-        </h1>
-        <p class="mt-4 p-4">
-            Bonjour, ce site permet de modifier les informations de votre commerce sur OpenStreetMap afin de gagner en visibilité sur des milliers de sites web à la fois en une minute, c'est gratuit et sans engagement.
-            <br>Nous sommes bénévoles dans une association à but non lucratif.
-            <br>Nous vous enverrons un lien unique pour cela par email, et si vous en avez besoin, nous pouvons vous aider.
-        </p>
-        <p>
-        
-        
-        <div class="row">
-          <div class="col-12">
-          <label class="label" for="researchShop"><i class="bi bi-search bi-2x"></i> Rechercher un commerce, écrivez son nom et la ville
-              </label>
-               <input class="form-control" type="text" id="researchShop" placeholder="Mon commerce, Paris">
-          
-          </div>
-        </div>  
-        
-        <div id="resultsList"></div>
-        <div id="proposeLink" class="d-none"></div>
-        <div id="proposeMail" class="d-none">
-        
-        <input type="email" id="emailInput" class="form-control" placeholder="mon_email_de_commerce@exemple.com">
-        <button type="submit" class="btn btn-primary p-4 d-block"> <i class="bi bi-envelope"></i> Envoyer</button>
-        </div>
-        <div id="emailForm"></div>
-
+            
         </div>
     </div>
+    <div class="row city-list ">
+    
+    <div class="mt-5">
+        <h2><i class="bi bi-geo-alt"></i> Villes disponibles</h2>
+        <p>Visualisez un tableau de bord de la complétion des commerces et autres lieux d'intérêt pour votre ville grâce à OpenStreetMap</p>
+                
+    </div>
+            
+    {% for stat in stats %}
+        <a href="{{ path('app_admin_stats', {'zip_code': stat.zone}) }}" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+            <div class="d-flex flex-column">
+                <span class="zone">{{ stat.zone }}</span>
+                <span class="name">{{ stat.name }}</span>
+            </div>
+            <span class="badge bg-primary rounded-pill">{{ stat.placesCount }} lieux</span>
+        </a>
+    {% endfor %}
+                            
+              
+              
+    </div>  
 </div>
 <script>
     // Créer le formulaire email
@@ -154,3 +226,13 @@
 </script>
 {% endblock %}
 
+{% block javascripts %}
+    {{ parent() }}
+    <script type="module">
+        import { adjustListGroupFontSize } from '{{ asset('js/utils.js') }}';
+        document.addEventListener('DOMContentLoaded', function() {
+            adjustListGroupFontSize('.list-group-item');
+        });
+    </script>
+{% endblock %}
+

templates/public/view.html.twig

@@ -27,7 +27,7 @@
         <hr>
 
         <form action="{{ path('app_public_submit', {'osm_object_id': commerce_overpass['@attributes'].id, 'version': commerce_overpass['@attributes'].version, 'changesetID': commerce_overpass['@attributes'].changeset }) }}" method="post" class="needs-validation">
-                            <input type="hidden" name="osm_kind" value="{{ osm_kind }}">
+            <input type="hidden" name="osm_kind" value="{{ place.osmKind }}">
 
 
         {% include 'public/edit/yenaunpeuplusjevouslemets.html.twig' %}