filtrer une puissance minimale

index.html

@@ -30,18 +30,6 @@
             <img class="icon-img" src="img/prise-de-courant.png" alt="prise"> Libre Charge Map
         </h1>
     </header>
-
-
-
-    <main>
-
-
-        <button id="toggleSidePanel">
-            ☰
-        </button>
-        <div id="zoomMessage">
-            Zoomez pour voir les stations de recharge
-        </div>
     <div class="research_display">
         <div id='spinning_icon'>
             <svg id='star' width='4cm' height='4cm' viewBox='0 0 700 400' xmlns='http://www.w3.org/2000/svg'
@@ -53,6 +41,18 @@
             </svg>
         </div>
     </div>
+
+
+    <main>
+
+
+        <button id="toggleSidePanel">
+            ☰
+        </button>
+        <div id="zoomMessage">
+            Zoomez pour voir les stations de recharge
+        </div>
+
         <div id='count_features_fond'>
         </div>
         <div id='map'>
@@ -109,15 +109,32 @@
 
 
         <div id="current_station_infos"></div>
-        <div id="infos_carte"></div>
+        <!-- <div id="infos_carte"></div> -->
 
         <div id="filters">
-            <!-- <h2>
+            <h2>
                 ⚙️ Filtres:
-            </h2> -->
+            </h2>
             <div class="filter-group">
                 <!-- TODO ajouter des filtres selon la puissance et le type de socket -->
+                <p>
+                    <!-- <input type="checkbox" id="filter_unknown_output" checked>
+                    <label for="filter_unknown_output">
+                        Afficher les stations avec une puissance inconnue
+                    </label>
+                    <br> -->
+                    <!-- <input type="checkbox" id="filter_max_output" checked> -->
+                    <label for="filter_max_output">
+                        Afficher les stations avec une puissance supérieure à:
+                    </label>
 
+                    <span id="filter_max_output_display">
+                        3 kW
+                    </span>
+                </p>
+            </div>
+
+            <input type="range" min="1" max="400" value="3" class="slider" id="filter_max_output_slider">
         </div>
         <br>
         <!--        TODO filtrer les bornes selon la puissance -->

js/lcm_config.js

@@ -6,6 +6,12 @@ const lcm_config = {
 	hide_osmose_markers_if_close_to_existing_charging_stations: true,
 	hide_osmose_markers_if_close_to_existing_charging_stations_distance: 10, // meters
 
+	filter_max_output: true,
+	filter_max_output_min: 1,
+	filter_max_output_max: 401,
+	filter_max_output_default_value: 1,
+	filter_unknown_output: true,
+
 	max_possible_station_output: 400,
 	tileServers: {
 		osm: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',

js/lcm_main.js

@@ -468,7 +468,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
 // Ajouter une fonction pour mettre à jour les compteurs
 function updateCounters() {
     const stationsCount = geojsondata ? geojsondata.features.length : 0;
-    const osmoseText = osmoseIssuesCount > 0 ? ` (${osmoseIssuesCount} )` : '';
+    const osmoseText = osmoseIssuesCount > 0 ? ` <span class="osmose-counter">(+ ${osmoseIssuesCount} ?)</span>` : '';
     $('#count_features_fond').html(`⚡${stationsCount}${osmoseText} stations`);
 }
 
@@ -478,10 +478,10 @@ function bindEventsOnJosmRemote(popupElement) {
     $(popupElement).find('.edit-button.josm').each(function () {
         // Utiliser .off().on() pour éviter les liaisons multiples si la popup est rouverte
         $(this).off('click').on('click', (event) => {
-            event.preventDefault(); // Empêcher le comportement par défaut du lien
+            event.preventDefault();
             let josm_link = $(this).attr('data-href');
             console.log('Sending command to JOSM:', josm_link);
-            // Utiliser fetch pour la requête GET vers JOSM (plus moderne que $.get)
+
             fetch(josm_link)
                 .then(response => {
                     if (!response.ok) {
@@ -575,13 +575,27 @@ function makePopupOfFeature(feature) {
  * @param layer
  */
 function eachFeature(feature, layer) {
+    let outPowerGuessed = lcm_utils.guessOutputPowerFromFeature(feature);
+    const maxPowerFilter = parseInt($('#filter_max_output').val()) || lcm_config.filter_max_output_default_value;
+
+    // Filtrage par puissance
+    if (outPowerGuessed === 0 || outPowerGuessed === null) {
+        // Gestion des stations à puissance inconnue
+        if (display_unknown_max_power_station === 'hide') {
+            return;
+        }
+    } else {
+        // Filtrer les stations dont la puissance dépasse le maximum défini
+        if (outPowerGuessed < maxPowerFilter) {
+            return;
+        }
+    }
+
     let link_josm = createJOSMEditLink(feature);
 
     let popupContent = makePopupOfFeature(feature);
     layer.bindPopup(popupContent);
 
-    let outPowerGuessed = lcm_utils.guessOutputPowerFromFeature(feature);
-    let color = lcm_color_utils.getColor(feature);
     let displayOutPowerGuessed = '? kW';
     if (outPowerGuessed) {
         displayOutPowerGuessed = outPowerGuessed + ' kW max';
@@ -613,7 +627,7 @@ function eachFeature(feature, layer) {
 <a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a>
 <a href="${panoramaxLink}" target="_blank" class="panoramax-link" title="Voir sur Panoramax">
 <img src="styles/images/panoramax.ico" alt="icone"></a>
-<span class="color-indication" style="background-color: ${color};">${displayOutPowerGuessed}</span>
+<span class="color-indication" style="background-color: ${lcm_color_utils.getColor(feature)};">${displayOutPowerGuessed}</span>
 <button class="edit-button" id="fullDetails" >détails</button>
 <span class="popup-content">${popupContent}</span>`;
 
@@ -701,8 +715,8 @@ function eachFeature(feature, layer) {
      * affichage des marqueurs de stations de recharge
      */
     let circle = L.circle(layer._latlng, {
-        color: color,
-        fillColor: color,
+        color: lcm_color_utils.getColor(feature),
+        fillColor: lcm_color_utils.getColor(feature),
         fillOpacity: opacity,
         colorOpacity: opacity,
         radius: radius
@@ -711,7 +725,7 @@ function eachFeature(feature, layer) {
     if (zoom > 15) {
         let circle_center = L.circle(layer._latlng, {
             color: 'black',
-            fillColor: color,
+            fillColor: lcm_color_utils.getColor(feature),
             fillOpacity: 1,
             radius: 0.1
         }).addTo(all_stations_markers);
@@ -824,7 +838,10 @@ function loadOverpassQuery() {
 
 function refreshDisplay(convert_points_to_osm = false) {
     supprimerMarqueurs();
+    if (geojsondata) {
         displayPointsFromApi(geojsondata, convert_points_to_osm);
+        updateCounters(); // Mettre à jour les compteurs après le filtrage
+    }
 }
 
 
@@ -867,7 +884,7 @@ function onMapMoveEnd() {
     console.log("Zoom actuel:", map.getZoom());
 
     if (map.getZoom() >= 12) {
-        console.log("Recherche des issues Osmose...");
+        // console.log("Recherche des issues Osmose...");
         searchOsmoseIssues(map);
     } else {
         console.log("Zoom trop faible pour les issues Osmose");
@@ -980,6 +997,7 @@ $('#toggle-stats').on('click', function () {
     }
 });
 
+
 // Ajouter ces variables avec les autres déclarations globales
 let food_places_markers = L.layerGroup();
 const foodIcon = L.divIcon({
@@ -1058,7 +1076,6 @@ function searchOsmoseIssues(map) {
     const bbox = `${bounds.getWest()}%2C${bounds.getSouth()}%2C${bounds.getEast()}%2C${bounds.getNorth()}`;
     const url = `https://osmose.openstreetmap.fr/api/0.3/issues?zoom=${zoom}&item=8410%2C8411&level=1%2C2%2C3&limit=500&bbox=${bbox}`;
 
-    console.log("Recherche des issues Osmose (liste) avec l'URL :", url);
     osmose_markers.clearLayers();
 
     // Modifier la vérification des stations existantes
@@ -1232,6 +1249,7 @@ function handleMarkerClick(marker, map) {
 
 // Ajouter un écouteur d'événements pour le changement de visibilité des calques
 function init() {
+    $(document).ready(function () {
         food_places_markers.addTo(map);
         $('#found_charging_stations').hide();
 
@@ -1242,7 +1260,6 @@ function init() {
             "Bornes potentielles (Osmose)": osmose_markers
         };
 
-
         const overlayControl = L.control.layers(null, overlayMaps, {
             collapsed: true,
             className: 'leaflet-control-layers overlay-layers',
@@ -1270,10 +1287,23 @@ function init() {
 
         $('#searchButton').on('click', searchLocation);
         $('#shareUrl').on('click', copyCurrentUrl);
+        $('#filter_max_output').on('input', function () {
+            const value = $(this).val();
+            console.log('filter_max_output', value, $(this));
+            $('#filter_max_output_display').text(value + ' kW');
+            refreshDisplay();
+        });
+        $('#filter_max_output_slider').on('input', function () {
+            const value = $(this).val();
+
+            lcm_config.filter_max_output_default_value = value;
+            $('#filter_max_output_display').text(value + ' kW');
+            refreshDisplay();
+        });
 
 
         $('#searchResults').on('change', function () {
-        const selectedIndex = $(this).val();
+            const selectedIndex = $(this).eq(0).val();
             if (selectedIndex !== null) {
                 const selectedPlace = $(this).find('option:selected').data('place');
                 moveToLocation(selectedPlace);
@@ -1281,23 +1311,6 @@ function init() {
         });
 
         osmose_markers.addTo(map);
-
-    // Ajouter le contrôle de source de recherche
-    const searchControl = `
-        <div class="search-source-control">
-            <label>
-                <input type="checkbox" id="useAddok" checked> 
-                Utiliser Addok (France)
-            </label>
-        </div>
-    `;
-    $('#searchLocation').after(searchControl);
-
-    // Mettre à jour les marqueurs Osmose quand la visibilité des stations change
-    map.on('overlayremove overlayadd', function (e) {
-        if (e.name === "Stations de recharge" && map.getZoom() > 12) {
-            searchOsmoseIssues(map);
-        }
     });
 }
 

styles/_filters.scss

@@ -0,0 +1,6 @@
+#filter_max_output_slider {
+  width: 100%;
+  height: 10px;
+  background: #ccc;
+  border-radius: 5px;
+}

styles/_mobile.scss

@@ -6,9 +6,9 @@
   }
 
   #bars_power {
-    position: fixed;
-    bottom: -16px;
-    width: 123vw;
+    position: absolute;
+    top: 59.1vh;
+    width: 117%;
   }
 
   #toggleSidePanel {
@@ -32,7 +32,7 @@
     position: static;
     transform: none;
     box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
-    margin: 20px 0 0;
+    margin: 0;
     width: 100vw;
   }
 
@@ -70,3 +70,7 @@
     height: 2.6rem;
   }
 }
+
+#count_features_fond {
+  border: solid 1px grey;
+}

styles/_osmose.scss

@@ -3,6 +3,11 @@
   background-color: #9F2BFF;
 }
 
+.osmose-counter {
+  font-size: 0.85rem;
+  color: #999;
+}
+
 .proposed-tags-container {
   max-height: 200px;
   overflow-y: auto;

styles/_overrides.scss

@@ -6,6 +6,10 @@ overrides leaflet
   margin-left: 2rem;
 }
 
+.leaflet-interactive {
+  border: solid 3px white;
+}
+
 /* Styles pour les contrôles de couches */
 .leaflet-control-layers {
   &.base-layers {

styles/_recherche.scss

@@ -1,5 +1,5 @@
 #searchLocation {
-  width: 80%;
+  width: 88%;
 
   padding: 10px;
   margin-bottom: 10px;
@@ -18,8 +18,8 @@
 }
 
 #searchButton {
-  margin-right: 1rem;
-  margin-top: -2.8rem;
+  margin-right: 0rem;
+  margin-top: -4.8rem;
 }
 
 #count_features_fond {

styles/main.scss

@@ -222,13 +222,14 @@ a {
 
   svg {
     position: fixed;
-    top: 0.5rem;
-    right: 3rem;
+    top: 0.45rem;
+    left: 1.5rem;
     background: white;
     border-radius: 100%;
     width: 3rem;
     height: 3rem;
     animation: spin 2s linear infinite;
+    opacity: 0.3;
   }
 }
 
@@ -389,9 +390,6 @@ button {
   padding: 0.25rem;
 }
 
-.leaflet-interactive {
-  border: solid 3px white;
-}
 
 #infos_carte {
   padding: 1rem 0;
@@ -655,6 +653,7 @@ header {
 
 @import '_osmose.scss';
 @import '_recherche.scss';
+@import '_filters.scss';
 @import '_mobile.scss';
 @import '_overrides.scss';
 @import '_responsive.scss';

styles/style.css

@@ -175,13 +175,14 @@ a {
   font-size: 2rem; }
   #spinning_icon svg {
     position: fixed;
-    top: 0.5rem;
-    right: 3rem;
+    top: 0.45rem;
+    left: 1.5rem;
     background: white;
     border-radius: 100%;
     width: 3rem;
     height: 3rem;
-    animation: spin 2s linear infinite; }
+    animation: spin 2s linear infinite;
+    opacity: 0.3; }
 
 #footer {
   max-width: 70ch;
@@ -311,9 +312,6 @@ button {
   border-radius: 1rem;
   padding: 0.25rem; }
 
-.leaflet-interactive {
-  border: solid 3px white; }
-
 #infos_carte {
   padding: 1rem 0; }
 
@@ -514,6 +512,10 @@ header {
   animation: bounce 0.5s ease infinite;
   background-color: #9F2BFF; }
 
+.osmose-counter {
+  font-size: 0.85rem;
+  color: #999; }
+
 .proposed-tags-container {
   max-height: 200px;
   overflow-y: auto;
@@ -551,7 +553,7 @@ header {
     color: white; }
 
 #searchLocation {
-  width: 80%;
+  width: 88%;
   padding: 10px;
   margin-bottom: 10px;
   border: 1px solid var(--button-border);
@@ -566,8 +568,8 @@ header {
   border-color: var(--button-border); }
 
 #searchButton {
-  margin-right: 1rem;
-  margin-top: -2.8rem; }
+  margin-right: 0rem;
+  margin-top: -4.8rem; }
 
 #count_features_fond {
   position: fixed;
@@ -592,6 +594,12 @@ header {
   border: 0;
   border-radius: 3px; }
 
+#filter_max_output_slider {
+  width: 100%;
+  height: 10px;
+  background: #ccc;
+  border-radius: 5px; }
+
 /* Style pour mobile ---------------------------------- */
 @media (max-width: 1200px) {
   header h1 {
@@ -599,9 +607,9 @@ header {
     font-size: 1.5rem; }
 
   #bars_power {
-    position: fixed;
-    bottom: -16px;
-    width: 123vw; }
+    position: absolute;
+    top: 59.1vh;
+    width: 117%; }
 
   #toggleSidePanel {
     position: fixed;
@@ -622,7 +630,7 @@ header {
     position: static;
     transform: none;
     box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
-    margin: 20px 0 0;
+    margin: 0;
     width: 100vw; }
 
   .side-panel.active {
@@ -652,12 +660,18 @@ header {
     top: -4.9rem;
     right: 1.4rem;
     height: 2.6rem; } }
+#count_features_fond {
+  border: solid 1px grey; }
+
 /**
 overrides leaflet
  */
 .leaflet-left .leaflet-control {
   margin-left: 2rem; }
 
+.leaflet-interactive {
+  border: solid 3px white; }
+
 /* Styles pour les contrôles de couches */
 .leaflet-control-layers.base-layers {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 9l10-5 10 5-10 5-10-5zm0 6l10 5 10-5M2 12l10 5 10-5"/></svg>');