up speed limit map

assets/app.js

@@ -8,13 +8,10 @@
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.css';
 import jQuery from 'jquery';
-window.$ = jQuery;
-window.jQuery = jQuery;
 import 'tablesort/tablesort.css';
 
 // start the Stimulus application
 // import './bootstrap';
-
 import './utils.js';
 import './opening_hours.js';
 import './josm.js';
@@ -27,17 +24,21 @@ import Chart from 'chart.js/auto';
 import ChartDataLabels from 'chartjs-plugin-datalabels';
 import maplibregl from 'maplibre-gl';
 import {
-  genererCouleurPastel,
-  setupCitySearch,
-  handleAddCityFormSubmit,
-  enableLabourageForm,
-  getLabourerUrl,
     adjustListGroupFontSize,
+    enableLabourageForm,
+    genererCouleurPastel,
+    getLabourerUrl,
+    handleAddCityFormSubmit,
+    setupCitySearch,
     toggleCompletionInfo,
     updateMapHeightForLargeScreens
 } from './utils.js';
 import tableSortJs from 'table-sort-js/table-sort.js';
 import 'chartjs-adapter-date-fns';
+
+window.$ = jQuery;
+window.jQuery = jQuery;
+
 console.log('TableSort', tableSortJs)
 
 // Charger table-sortable (version non minifiée locale)
@@ -131,8 +132,6 @@ document.addEventListener('DOMContentLoaded', () => {
     // }
 
 
-
-
     parseCuisine();
 
     // Modifier la fonction de recherche existante
@@ -209,24 +208,6 @@ document.addEventListener('DOMContentLoaded', () => {
         console.log('pas de tablesort')
     }
 
-  // Initialisation du tri et filtrage sur les tableaux du dashboard et de la page stats
-  // if (document.querySelector('#dashboard-table')) {
-  //   $('#dashboard-table').tableSortable({
-  //     pagination: false,
-  //     showPaginationLabel: true,
-  //     searchField: '#dashboard-table-search',
-  //     responsive: false
-  //   });
-  // }
-  // if (document.querySelector('#stats-table')) {
-  //   $('#stats-table').tableSortable({
-  //     pagination: false,
-  //     showPaginationLabel: true,
-  //     searchField: '#stats-table-search',
-  //     responsive: false
-  //   });
-  // }
-
     // Correction pour le formulaire de labourage
     const labourerForm = document.getElementById('labourerForm');
     if (labourerForm) {
@@ -277,12 +258,21 @@ document.addEventListener('DOMContentLoaded', () => {
     const series = window.followupSeries;
 
     // Données bornes de recharge
-  const chargingStationCount = (series['charging_station_count'] || []).map(point => ({ x: point.date, y: point.value }));
+    const chargingStationCount = (series['charging_station_count'] || []).map(point => ({
-  const chargingStationCompletion = (series['charging_station_completion'] || []).map(point => ({ x: point.date, y: point.value }));
+        x: point.date,
+        y: point.value
+    }));
+    const chargingStationCompletion = (series['charging_station_completion'] || []).map(point => ({
+        x: point.date,
+        y: point.value
+    }));
 
     // Données bornes incendie
     const fireHydrantCount = (series['fire_hydrant_count'] || []).map(point => ({x: point.date, y: point.value}));
-  const fireHydrantCompletion = (series['fire_hydrant_completion'] || []).map(point => ({ x: point.date, y: point.value }));
+    const fireHydrantCompletion = (series['fire_hydrant_completion'] || []).map(point => ({
+        x: point.date,
+        y: point.value
+    }));
 
     // Graphique bornes de recharge
     const chargingStationChart = document.getElementById('chargingStationChart');
@@ -315,7 +305,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 scales: {
                     x: {type: 'time', time: {unit: 'day'}, title: {display: true, text: 'Date'}},
                     y: {beginAtZero: true, title: {display: true, text: 'Nombre'}},
-          y1: { beginAtZero: true, position: 'right', title: { display: true, text: 'Complétion (%)' }, grid: { drawOnChartArea: false } }
+                    y1: {
+                        beginAtZero: true,
+                        position: 'right',
+                        title: {display: true, text: 'Complétion (%)'},
+                        grid: {drawOnChartArea: false}
+                    }
                 }
             }
         });
@@ -352,7 +347,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 scales: {
                     x: {type: 'time', time: {unit: 'day'}, title: {display: true, text: 'Date'}},
                     y: {beginAtZero: true, title: {display: true, text: 'Nombre'}},
-          y1: { beginAtZero: true, position: 'right', title: { display: true, text: 'Complétion (%)' }, grid: { drawOnChartArea: false } }
+                    y1: {
+                        beginAtZero: true,
+                        position: 'right',
+                        title: {display: true, text: 'Complétion (%)'},
+                        grid: {drawOnChartArea: false}
+                    }
                 }
             }
         });

templates/admin/speed_limit.html.twig

@@ -3,8 +3,23 @@
 {% block title %}Limites de vitesse - {{ stats.name }}{% endblock %}
 
 {% block body %}
+    <div class="container-fluid">
+        <div class="row">
+            <!-- Sidebar de navigation -->
+            <div class="col-12 col-lg-3">
+                {{ stats.name }} :
+                {% include 'admin/_city_sidebar.html.twig' with {'stats': stats, 'active_menu': 'speed-limit'} %}
+            </div>
+
+            <!-- Contenu principal -->
+            <div class="col-lg-9 col--12 main-content">
+
+                <div class="mt-4">
+
+
                     <div class="container mt-4">
-    <h1><i class="bi bi-speedometer2"></i> Limites de vitesse à {{ stats.name }} ({{ stats.zone }})</h1>
+                        <h1><i class="bi bi-speedometer2"></i> Limites de vitesse à {{ stats.name }} ({{ stats.zone }})
+                        </h1>
                         <p>Complétion des limitations de vitesse sur le réseau routier OSM.<br>
                             <span class="text-muted">Tags attendus :
         {% for tag in expected_tags %}<code>{{ tag }}</code>{% if not loop.last %}, {% endif %}{% endfor %}
@@ -12,17 +27,31 @@
                         <div class="row">
                             <div class="col-md-8">
                                 <div class="card mb-3">
-                <div class="card-header"><i class="bi bi-map"></i> Carte des routes (coloration selon maxspeed)</div>
+                                    <div class="card-header"><i class="bi bi-map"></i> Carte des routes (coloration
+                                        selon maxspeed)
+                                    </div>
                                     <div class="card-body p-2">
                                         <div id="speedlimit-map" style="height: 450px; width: 100%;"></div>
                                         <div id="speedlimit-completion" class="mt-2"></div>
                                     </div>
                                 </div>
                                 <div class="card mb-3">
-                <div class="card-header"><i class="bi bi-traffic-cone"></i> Panneaux routiers & feux de circulation</div>
+                                    <div class="card-header"><i class="bi bi-traffic-cone"></i> Panneaux routiers & feux
+                                        de circulation
+                                    </div>
                                     <div class="card-body p-2">
+                                        <div class="row">
+                                            <div class="col-md-8">
                                                 <div id="traffic-map" style="height: 350px; width: 100%;"></div>
                                             </div>
+                                            <div class="col-md-4">
+                                                <div id="traffic-stats" class="mt-2">
+                                                    <h5>Objets trouvés</h5>
+                                                    <div id="traffic-objects-list">Chargement...</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
                             <div class="col-md-4">
@@ -41,6 +70,12 @@
                             </div>
                         </div>
                     </div>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
 {% endblock %}
 
 {% block javascripts %}
@@ -48,7 +83,7 @@
     <script src="/js/maplibre/maplibre-gl.js"></script>
     <script>
         const insee = '{{ insee_code }}';
-const overpassHighways = `[out:json][timeout:60];\narea["ref:INSEE"="${insee}"]->.searchArea;\nway["highway"](area.searchArea);\nout body;\n>;\nout skel qt;`;
+        const overpassHighways = `[out:json][timeout:60];\narea["ref:INSEE"="${insee}"]->.searchArea;\nway["highway"~"^(primary|secondary|tertiary|primary_link|secondary_link)$"](area.searchArea);\nout body;\n>;\nout skel qt;`;
         const overpassTraffic = `[out:json][timeout:60];\narea["ref:INSEE"="${insee}"]->.searchArea;\n(
   node["traffic_sign"](area.searchArea);
   node["highway"="traffic_signals"](area.searchArea);
@@ -74,7 +109,10 @@ document.addEventListener('DOMContentLoaded', function() {
             fetchOverpass(overpassHighways).then(data => {
                 let nodes = {};
                 let withMaxspeed = 0, total = 0;
-        data.elements.forEach(e => { if (e.type === 'node') nodes[e.id] = e; });
+                let allCoords = [];
+                data.elements.forEach(e => {
+                    if (e.type === 'node') nodes[e.id] = e;
+                });
                 data.elements.forEach(e => {
                     if (e.type === 'way' && e.tags && e.tags.highway) {
                         total++;
@@ -82,12 +120,18 @@ document.addEventListener('DOMContentLoaded', function() {
                         if (hasMaxspeed) withMaxspeed++;
                         let coords = e.nodes.map(nid => nodes[nid]).filter(n => n).map(n => [n.lon, n.lat]);
                         if (coords.length < 2) return;
+                        // Store all coordinates for calculating bounds
+                        allCoords = allCoords.concat(coords);
                         map.addLayer({
                             id: 'way-' + e.id,
                             type: 'line',
                             source: {
                                 type: 'geojson',
-                        data: { type: 'Feature', geometry: { type: 'LineString', coordinates: coords }, properties: {} }
+                                data: {
+                                    type: 'Feature',
+                                    geometry: {type: 'LineString', coordinates: coords},
+                                    properties: {}
+                                }
                             },
                             layout: {'line-join': 'round', 'line-cap': 'round'},
                             paint: {
@@ -106,7 +150,59 @@ document.addEventListener('DOMContentLoaded', function() {
                     }
                 });
                 let completion = total > 0 ? Math.round(100 * withMaxspeed / total) : 0;
-        document.getElementById('speedlimit-completion').innerHTML = `<b>Complétion maxspeed :</b> ${withMaxspeed} / ${total} (${completion}%)`;
+                let withoutMaxspeed = total - withMaxspeed;
+
+                // Center map on roads if we have coordinates
+                if (allCoords.length > 0) {
+                    // Calculate bounds
+                    let bounds = allCoords.reduce((bounds, coord) => {
+                        return [
+                            [Math.min(bounds[0][0], coord[0]), Math.min(bounds[0][1], coord[1])],
+                            [Math.max(bounds[1][0], coord[0]), Math.max(bounds[1][1], coord[1])]
+                        ];
+                    }, [[Infinity, Infinity], [-Infinity, -Infinity]]);
+
+                    // Fit map to bounds with padding
+                    map.fitBounds(bounds, {
+                        padding: 50,
+                        maxZoom: 15
+                    });
+                }
+
+                // Create HTML for completion info and JOSM button
+                let completionHtml = `
+                    <div class="d-flex justify-content-between align-items-center">
+                        <div>
+                            <b>Complétion maxspeed :</b> ${withMaxspeed} / ${total} (${completion}%)
+                            <br><b>Tronçons sans maxspeed :</b> ${withoutMaxspeed}
+                        </div>
+                        <div>
+                            <button id="open-josm-button" class="btn btn-sm btn-primary" disabled>
+                                <i class="bi bi-box-arrow-up-right"></i> Ouvrir dans JOSM
+                            </button>
+                        </div>
+                    </div>
+                `;
+                document.getElementById('speedlimit-completion').innerHTML = completionHtml;
+
+                // Store ways without maxspeed for JOSM
+                let waysWithoutMaxspeed = [];
+                data.elements.forEach(e => {
+                    if (e.type === 'way' && e.tags && e.tags.highway && !e.tags.maxspeed) {
+                        waysWithoutMaxspeed.push(e.id);
+                    }
+                });
+
+                // Enable JOSM button if there are ways without maxspeed
+                const josmButton = document.getElementById('open-josm-button');
+                if (waysWithoutMaxspeed.length > 0) {
+                    josmButton.disabled = false;
+                    josmButton.addEventListener('click', function () {
+                        const objects = waysWithoutMaxspeed.map(id => 'w' + id).join(',');
+                        const josmUrl = `http://127.0.0.1:8111/load_object?objects=${objects}`;
+                        window.open(josmUrl, '_blank');
+                    });
+                }
             });
             // --- Carte des panneaux et feux ---
             let map2 = new maplibregl.Map({
@@ -117,19 +213,105 @@ document.addEventListener('DOMContentLoaded', function() {
             });
             map2.addControl(new maplibregl.NavigationControl());
             fetchOverpass(overpassTraffic).then(data => {
+                // Compteurs pour les différents types d'objets
+                let objectCounts = {
+                    'traffic_signals': 0,
+                    'traffic_sign': 0
+                };
+
+                // Compteurs pour les différentes valeurs de traffic_sign
+                let trafficSignTypes = {};
+
                 data.elements.forEach(e => {
                     if (e.type === 'node') {
-                let color = e.tags && e.tags.highway === 'traffic_signals' ? 'orange' : 'blue';
+                        // Déterminer le type d'objet
-                let icon = e.tags && e.tags.highway === 'traffic_signals' ? '🚦' : '🛑';
+                        let isTrafficSignal = e.tags && e.tags.highway === 'traffic_signals';
-                let popupHtml = `<b>${icon} ${e.tags.highway === 'traffic_signals' ? 'Feu de circulation' : 'Panneau routier'}</b><br>ID: ${e.id}`;
+                        let objectType = isTrafficSignal ? 'traffic_signals' : 'traffic_sign';
-                if (e.tags.traffic_sign) popupHtml += `<br><b>traffic_sign:</b> ${e.tags.traffic_sign}`;
+
+                        // Incrémenter le compteur
+                        objectCounts[objectType]++;
+
+                        // Si c'est un panneau, compter son type
+                        if (!isTrafficSignal && e.tags && e.tags.traffic_sign) {
+                            // Un panneau peut avoir plusieurs types séparés par des points-virgules
+                            let signTypes = e.tags.traffic_sign.split(';');
+                            signTypes.forEach(type => {
+                                type = type.trim();
+                                if (type) {
+                                    trafficSignTypes[type] = (trafficSignTypes[type] || 0) + 1;
+                                }
+                            });
+                        }
+
+                        // Couleur et icône selon le type
+                        let color = isTrafficSignal ? 'orange' : 'blue';
+                        let icon = isTrafficSignal ? '🚦' : '🛑';
+
+                        // Construire le HTML du popup avec toutes les propriétés
+                        let popupHtml = `<b>${icon} ${isTrafficSignal ? 'Feu de circulation' : 'Panneau routier'}</b><br>ID: ${e.id}`;
+
+                        // Ajouter toutes les propriétés du panneau
+                        if (e.tags) {
+                            Object.entries(e.tags).forEach(([key, value]) => {
+                                popupHtml += `<br><b>${key}:</b> ${value}`;
+                            });
+                        }
+
+                        // Liens vers OSM, iD et JOSM
                         popupHtml += `<br><a href='https://www.openstreetmap.org/node/${e.id}' target='_blank'>OSM</a> | <a href='https://www.openstreetmap.org/edit?editor=id&node=${e.id}' target='_blank'>iD</a> | <a href='http://127.0.0.1:8111/load_object?objects=N${e.id}' target='_blank'>JOSM</a>`;
+
+                        // Ajouter le marqueur à la carte
                         new maplibregl.Marker({color: color})
                             .setLngLat([e.lon, e.lat])
                             .setPopup(new maplibregl.Popup({offset: 18}).setHTML(popupHtml))
                             .addTo(map2);
                     }
                 });
+
+                // Générer le HTML pour la liste des objets trouvés
+                let totalObjects = objectCounts.traffic_signals + objectCounts.traffic_sign;
+                let objectsListHtml = `
+                    <div class="list-group">
+                        <div class="list-group-item d-flex justify-content-between align-items-center">
+                            <span>🚦 Feux de circulation</span>
+                            <span class="badge bg-primary rounded-pill">${objectCounts.traffic_signals}</span>
+                        </div>
+                        <div class="list-group-item d-flex justify-content-between align-items-center">
+                            <span>🛑 Panneaux routiers</span>
+                            <span class="badge bg-primary rounded-pill">${objectCounts.traffic_sign}</span>
+                        </div>
+                        <div class="list-group-item d-flex justify-content-between align-items-center fw-bold">
+                            <span>Total</span>
+                            <span class="badge bg-success rounded-pill">${totalObjects}</span>
+                        </div>
+                    </div>
+                `;
+
+                // Si des types de panneaux ont été trouvés, les ajouter à la liste
+                if (Object.keys(trafficSignTypes).length > 0) {
+                    objectsListHtml += `
+                        <h6 class="mt-3">Types de panneaux</h6>
+                        <div class="list-group">
+                    `;
+
+                    // Trier les types de panneaux par nombre décroissant
+                    let sortedTypes = Object.entries(trafficSignTypes)
+                        .sort((a, b) => b[1] - a[1]);
+
+                    sortedTypes.forEach(([type, count]) => {
+                        objectsListHtml += `
+                            <div class="list-group-item d-flex justify-content-between align-items-center small">
+                                <span>${type}</span>
+                                <span class="badge bg-secondary rounded-pill">${count}</span>
+                            </div>
+                        `;
+                    });
+
+                    objectsListHtml += `</div>`;
+                }
+
+                // Mettre à jour la liste des objets
+                document.getElementById('traffic-objects-list').innerHTML = objectsListHtml;
             });
         });
     </script>