filter min power slider, display count of hidden stations

index.html

@@ -139,8 +139,6 @@
         <br>
         <!--        TODO filtrer les bornes selon la puissance -->
 
-
-    </div>
         <div id="statsChargingStation">
 
             <h2 id="toggle-stats" style="cursor: pointer;">
@@ -168,7 +166,6 @@
         </p>
         <p>
 
-        <br>
             Fait par <a href="https://mastodon.cipherbliss.com/@tykayn">Tykayn</a> - <a
                 href="https://www.cipherbliss.com">www.cipherbliss.com</a>.
             <a href="https://forge.chapril.org/tykayn/">Sources disponibles sur la forge du Chapril.</a>
@@ -181,11 +178,17 @@
             <img class="icon-img" src="img/chademo.svg" alt="prise">
         </div>
         <br>
+        <span class="small">
+
             icones
-    câble électrique <a href="https://www.flaticon.com/fr/icones-gratuites/energie" title="energie icônes">Energie
+            câble électrique <a href="https://www.flaticon.com/fr/icones-gratuites/energie"
+                title="energie icônes">Energie
                 icônes créées par rukanicon - Flaticon</a>
+        </span>
 
         </p>
+
+    </div>
     </div>
 
 

js/lcm_config.js

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

js/lcm_main.js

@@ -344,6 +344,9 @@ function calculerPourcentage(partie, total, reduc) {
 // Ajouter une variable globale pour stocker le nombre d'issues Osmose
 let osmoseIssuesCount = 0;
 
+// Ajouter une variable globale pour stocker le nombre de stations affichées
+let displayedStationsCount = 0;
+
 function displayStatsFromGeoJson(resultAsGeojson) {
     let count = resultAsGeojson.features.length;
     let count_station_output = 0;
@@ -463,6 +466,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
 
     // Remplacer la ligne existante par un appel à updateCounters
     updateCounters();
+
 }
 
 // Ajouter une fonction pour mettre à jour les compteurs
@@ -506,6 +510,9 @@ function displayPointsFromApi(points, convert_to_osm_json) {
         geojsondata = osmtogeojson(points);
     }
 
+    // Réinitialiser le compteur avant d'afficher les points
+    displayedStationsCount = 0;
+
     displayStatsFromGeoJson(geojsondata);
 
     let resultLayer = L.geoJson(geojsondata, {
@@ -530,6 +537,9 @@ function displayPointsFromApi(points, convert_to_osm_json) {
         },
         onEachFeature: eachFeature,
     });
+
+    // Mettre à jour le compteur de stations filtrées
+    updateFilteredStationsCount();
 }
 
 function makePopupOfFeature(feature) {
@@ -580,7 +590,6 @@ function eachFeature(feature, layer) {
 
     // Filtrage par puissance
     if (outPowerGuessed === 0 || outPowerGuessed === null) {
-        // Gestion des stations à puissance inconnue
         if (display_unknown_max_power_station === 'hide') {
             return;
         }
@@ -591,6 +600,9 @@ function eachFeature(feature, layer) {
         }
     }
 
+    // Incrémenter le compteur de stations affichées
+    displayedStationsCount++;
+
     let link_josm = createJOSMEditLink(feature);
 
     let popupContent = makePopupOfFeature(feature);
@@ -840,7 +852,8 @@ 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
+        updateCounters();
+        updateFilteredStationsCount();
     }
 }
 
@@ -1260,6 +1273,12 @@ function init() {
             "Bornes potentielles (Osmose)": osmose_markers
         };
 
+        // const baseLayersControl = L.control.layers(baseLayers, null, {
+        //     collapsed: true,
+        //     className: 'leaflet-control-layers base-layers',
+        //     id: 'base-layers-control'
+        // }).addTo(map);
+
         const overlayControl = L.control.layers(null, overlayMaps, {
             collapsed: true,
             className: 'leaflet-control-layers overlay-layers',
@@ -1334,3 +1353,17 @@ init()
 // Créer un nouveau pane pour les marqueurs Osmose avec un zIndex plus élevé
 map.createPane('osmosePane');
 map.getPane('osmosePane').style.zIndex = 1000;
+
+// Ajouter une nouvelle fonction pour mettre à jour le compteur de stations filtrées
+function updateFilteredStationsCount() {
+    const totalStations = geojsondata ? geojsondata.features.length : 0;
+    const filterStats = `<div class="filter-stats">${displayedStationsCount} stations sur ${totalStations} trouvées</div>`;
+
+    // Mettre à jour ou créer l'élément après le slider
+    let existingStats = $('.filter-stats');
+    if (existingStats.length) {
+        existingStats.replaceWith(filterStats);
+    } else {
+        $('#filter_max_output_display').after(filterStats);
+    }
+}

styles/_filters.scss

@@ -4,3 +4,8 @@
   background: #ccc;
   border-radius: 5px;
 }
+
+.filter-stats {
+  font-size: 0.8rem;
+  color: #666;
+}

styles/_mobile.scss

@@ -1,10 +1,14 @@
 /* Style pour mobile ---------------------------------- */
-@media (max-width: 1200px) {
+@media (max-width: 700px) {
   header h1 {
     width: 100vw;
     font-size: 1.5rem;
   }
 
+  #searchButton {
+    margin-top: 0rem;
+  }
+
   #bars_power {
     position: absolute;
     top: 59.1vh;

styles/_overrides.scss

@@ -10,6 +10,12 @@ overrides leaflet
   border: solid 3px white;
 }
 
+.leaflet-control-layers {
+  &.leaflet-control-layers-toggle {
+    background: url('img/burger.png');
+  }
+}
+
 /* Styles pour les contrôles de couches */
 .leaflet-control-layers {
   &.base-layers {
@@ -52,3 +58,35 @@ overrides leaflet
     }
   }
 }
+
+// Styles pour les contrôles de calques
+.leaflet-control-layers {
+  &.base-layers {
+    .leaflet-control-layers-toggle {
+      background-image: url('../img/burger.png') !important;
+      background-size: 20px 20px !important;
+      background-position: center !important;
+      background-repeat: no-repeat !important;
+      width: 30px !important;
+      height: 30px !important;
+    }
+  }
+
+  &.overlay-layers {
+    .leaflet-control-layers-toggle {
+      background-image: url('../img/pizza.png') !important;
+      background-size: 20px 20px !important;
+      background-position: center !important;
+      background-repeat: no-repeat !important;
+      background-color: #3f74aa !important;
+      width: 30px !important;
+      height: 30px !important;
+    }
+  }
+
+  // Style commun pour le conteneur
+  background: white;
+  padding: 5px;
+  border-radius: 4px;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
+}

styles/_recherche.scss

@@ -19,7 +19,10 @@
 
 #searchButton {
   margin-right: 0rem;
-  margin-top: -4.8rem;
+  margin-top: -3.2rem;
+  z-index: 2;
+  position: relative;
+  background: var(--link-color);
 }
 
 #count_features_fond {

styles/main.scss

@@ -650,6 +650,9 @@ header {
   overflow: hidden;
 }
 
+.small {
+  font-size: 0.8rem;
+}
 
 @import '_osmose.scss';
 @import '_recherche.scss';

styles/style.css

@@ -508,6 +508,9 @@ header {
   height: 0.4rem;
   overflow: hidden; }
 
+.small {
+  font-size: 0.8rem; }
+
 .osmose-marker-drop:hover .osmose-marker-inner {
   animation: bounce 0.5s ease infinite;
   background-color: #9F2BFF; }
@@ -569,7 +572,10 @@ header {
 
 #searchButton {
   margin-right: 0rem;
-  margin-top: -4.8rem; }
+  margin-top: -3.2rem;
+  z-index: 2;
+  position: relative;
+  background: var(--link-color); }
 
 #count_features_fond {
   position: fixed;
@@ -600,12 +606,19 @@ header {
   background: #ccc;
   border-radius: 5px; }
 
+.filter-stats {
+  font-size: 0.8rem;
+  color: #666; }
+
 /* Style pour mobile ---------------------------------- */
-@media (max-width: 1200px) {
+@media (max-width: 700px) {
   header h1 {
     width: 100vw;
     font-size: 1.5rem; }
 
+  #searchButton {
+    margin-top: 0rem; }
+
   #bars_power {
     position: absolute;
     top: 59.1vh;
@@ -672,6 +685,9 @@ overrides leaflet
 .leaflet-interactive {
   border: solid 3px white; }
 
+.leaflet-control-layers.leaflet-control-layers-toggle {
+  background: url("img/burger.png"); }
+
 /* 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>');
@@ -702,6 +718,27 @@ overrides leaflet
     margin-left: 5px;
     font-size: 12px; }
 
+.leaflet-control-layers {
+  background: white;
+  padding: 5px;
+  border-radius: 4px;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); }
+  .leaflet-control-layers.base-layers .leaflet-control-layers-toggle {
+    background-image: url("../img/burger.png") !important;
+    background-size: 20px 20px !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    width: 30px !important;
+    height: 30px !important; }
+  .leaflet-control-layers.overlay-layers .leaflet-control-layers-toggle {
+    background-image: url("../img/pizza.png") !important;
+    background-size: 20px 20px !important;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    background-color: #3f74aa !important;
+    width: 30px !important;
+    height: 30px !important; }
+
 @keyframes rainbow-border {
   0% {
     border-left-color: #ff0000; }