add filters for sockets

index.html

@@ -116,46 +116,55 @@
                 ⚙️ Filtres:
             </h2>
             <div class="filter-group">
-                
+                <h3>Types de prises</h3>
-                <div class="filter-group">
+                <label>
-                    Montrer: 
+                    <input type="checkbox" id="filterCableAttached">
-                    <br>
+                    <span class="checkbox-custom"></span>
-                    <label>
+                    <span>Prise avec câble attaché</span>
-                        <input type="checkbox" id="filterCableAttached"> Prise avec câble attaché
+                </label>
-                    </label>
+                <label>
-                    <br>
+                    <input type="checkbox" id="filterCCS">
-                    <label>
+                    <span class="checkbox-custom"></span>
-                        <input type="checkbox" id="filterCCS"> Prise CCS
+                    <span>Prise CCS</span>
-                    </label>
+                </label>
-                    <br>
+                <label>
-                    <label>
+                    <input type="checkbox" id="filterType2">
-                        <input type="checkbox" id="filterType2"> Prise Type 2
+                    <span class="checkbox-custom"></span>
-                    </label>
+                    <span>Prise Type 2</span>
-                    <br>
+                </label>
-                    <label>
+                <label>
-                        <input type="checkbox" id="filterDomestic"> Prise domestique
+                    <input type="checkbox" id="filterDomestic">
-                    </label>
+                    <span class="checkbox-custom"></span>
-                    <br>
+                    <span>Prise domestique</span>
-                    <label>
+                </label>
-                        <input type="checkbox" id="filterChademo"> Prise CHAdeMO
+                <label>
-                    </label>
+                    <input type="checkbox" id="filterChademo">
-                    <br>
+                    <span class="checkbox-custom"></span>
-                    <label>
+                    <span>Prise CHAdeMO</span>
-                        <input type="checkbox" id="filterType1"> Prise Type 1
+                </label>
-                    </label>
+                <label>
-                    <br>
+                    <input type="checkbox" id="filterType1">
-                    <label>
+                    <span class="checkbox-custom"></span>
-                        <input type="checkbox" id="filterType3"> Prise Type 3
+                    <span>Prise Type 1</span>
-                    </label>
+                </label>
-                    <hr>
+                <label>
-                    <label>
+                    <input type="checkbox" id="filterType3">
-                        <input type="checkbox" id="filterQuality"> Contrôle qualité
+                    <span class="checkbox-custom"></span>
-                    </label>
+                    <span>Prise Type 3</span>
-                    <br>
+                </label>
-                    <label>
+                <hr>
-                        <input type="checkbox" id="filterUnkown"> ❓ kW max inconnu
+                <h3>Qualité des données</h3>
-                    </label>
+                <label>
-                </div>
+                    <input type="checkbox" id="filterQuality">
+                    <span class="checkbox-custom"></span>
+                    <span>Contrôle qualité</span>
+                </label>
+                <label>
+                    <input type="checkbox" id="filterUnkown">
+                    <span class="checkbox-custom"></span>
+                    <span>❓ kW max inconnu</span>
+                </label>
+            </div>
 <!--
                 <br>
                 <fieldset class="wip">

js/lcm_main.js

@@ -342,7 +342,7 @@ function calculerPourcentage(partie, total, reduc) {
     return ((partie / total) * 100 * coef_reduction).toFixed(1)
 }
 
-function displayStatsFromGeoJson(resultAsGeojson) {
+function displayStatsFromGeoJson(resultAsGeojson, stats) {
     let count = resultAsGeojson.features.length;
     let count_station_output = 0;
     let count_ref_eu = 0;
@@ -355,7 +355,6 @@ function displayStatsFromGeoJson(resultAsGeojson) {
     let count_estimated_type2combo = 0;
     let count_found_type2combo = 0;
     let count_found_type2 = 0;
-    let count_hidden_by_filters = 0;
 
     // Compter les filtres désactivés
     let disabledFilters = 0;
@@ -363,7 +362,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
         if (!lcm_config.filterConfigs[filterId]) disabledFilters++;
     });
     
-    $('#count_features_fond').html('⚡' + count + ' stations' + (disabledFilters > 0 ? ` (${disabledFilters} filtre${disabledFilters > 1 ? 's' : ''} désactivé${disabledFilters > 1 ? 's' : ''}, ${count_hidden_by_filters} masqué${count_hidden_by_filters > 1 ? 's' : ''})` : ''));
+    $('#count_features_fond').html('⚡' + count + ' stations' + (disabledFilters > 0 ? ` (${disabledFilters} filtre${disabledFilters > 1 ? 's' : ''} désactivé${disabledFilters > 1 ? 's' : ''}, ${stats.count_hidden_by_filters} masqué${stats.count_hidden_by_filters > 1 ? 's' : ''})` : ''));
 
     resultAsGeojson.features.map(feature => {
         let found_type2_combo = false;
@@ -501,7 +500,11 @@ function displayPointsFromApi(points, convert_to_osm_json) {
         geojsondata = osmtogeojson(points);
     }
 
-    displayStatsFromGeoJson(geojsondata);
+    let stats = {
+        count_hidden_by_filters: 0
+    };
+
+    displayStatsFromGeoJson(geojsondata, stats);
 
     let resultLayer = L.geoJson(geojsondata, {
         style: function (feature) {
@@ -523,7 +526,9 @@ function displayPointsFromApi(points, convert_to_osm_json) {
             supprimerMarqueurs();
             displayPointsFromApi();
         },
-        onEachFeature: eachFeature,
+        onEachFeature: function(feature, layer) {
+            eachFeature(feature, layer, stats);
+        },
     });
 }
 
@@ -569,7 +574,7 @@ function makePopupOfFeature(feature) {
  * @param feature
  * @param layer
  */
-function eachFeature(feature, layer) {
+function eachFeature(feature, layer, stats) {
     let link_josm = createJOSMEditLink(feature);
 
     let popupContent = makePopupOfFeature(feature);
@@ -581,32 +586,32 @@ function eachFeature(feature, layer) {
 
     // Vérifier les filtres activés
     if (lcm_config.filterCCS && !feature.properties.tags['socket:type2_combo']) {
-        count_hidden_by_filters++;
+        stats.count_hidden_by_filters++;
         return;
     }
 
     if (lcm_config.filterType2 && !feature.properties.tags['socket:type2']) {
-        count_hidden_by_filters++;
+        stats.count_hidden_by_filters++;
         return;
     }
 
     if (lcm_config.filterDomestic && !feature.properties.tags['socket:typee']) {
-        count_hidden_by_filters++;
+        stats.count_hidden_by_filters++;
         return;
     }
 
     if (lcm_config.filterChademo && !feature.properties.tags['socket:chademo']) {
-        count_hidden_by_filters++;
+        stats.count_hidden_by_filters++;
         return;
     }
 
     if (lcm_config.filterType1 && !feature.properties.tags['socket:type1']) {
-        count_hidden_by_filters++;
+        stats.count_hidden_by_filters++;
         return;
     }
 
     if (lcm_config.filterType3 && !feature.properties.tags['socket:type3']) {
-        count_hidden_by_filters++;
+        stats.count_hidden_by_filters++;
         return;
     }
 
@@ -619,7 +624,7 @@ function eachFeature(feature, layer) {
             }
         });
         if (!hasCableAttached) {
-            count_hidden_by_filters++;
+            stats.count_hidden_by_filters++;
             return;
         }
     }
@@ -631,7 +636,7 @@ function eachFeature(feature, layer) {
                             feature.properties.tags['payment:none'] ||
                             feature.properties.tags['opening_hours'];
         if (!hasQualityInfo) {
-            count_hidden_by_filters++;
+            stats.count_hidden_by_filters++;
             return;
         }
     }
@@ -1316,11 +1321,11 @@ function init() {
     };
 
     // Créer deux contrôles de couches séparés
-    const baseLayerControl = L.control.layers(baseLayers, null, {
+    // const baseLayerControl = L.control.layers(baseLayers, null, {
-        collapsed: true,
+    //     collapsed: true,
-        className: 'leaflet-control-layers base-layers',
+    //     className: 'leaflet-control-layers base-layers',
-        id: 'base-layers-control'
+    //     id: 'base-layers-control'
-    }).addTo(map);
+    // }).addTo(map);
 
     const overlayControl = L.control.layers(null, overlayMaps, {
         collapsed: true,

styles/filters.scss

@@ -0,0 +1,123 @@
+// Variables
+$primary-color: #28a745;
+$border-color: #6c757d;
+$hover-bg: #e9ecef;
+$text-color: #495057;
+$disabled-color: #adb5bd;
+
+// Mixins
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+}
+
+@mixin transition($property: all, $duration: 0.3s, $timing: ease) {
+  transition: $property $duration $timing;
+}
+
+// Styles pour le groupe de filtres
+.filter-group {
+  margin: 15px 0;
+  padding: 15px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  h3 {
+    margin-bottom: 10px;
+    color: $text-color;
+    font-size: 16px;
+  }
+
+  label {
+    @include flex-center;
+    padding: 8px 0;
+    cursor: pointer;
+    @include transition;
+    border-radius: 4px;
+    margin: 4px 0;
+
+    &:hover {
+      background: $hover-bg;
+    }
+  }
+
+  input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  .checkbox-custom {
+    position: relative;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: #fff;
+    border: 2px solid $border-color;
+    border-radius: 4px;
+    margin-right: 10px;
+    @include transition;
+
+    label:hover & {
+      border-color: darken($border-color, 10%);
+    }
+  }
+
+  input[type="checkbox"]:checked + .checkbox-custom {
+    background: $primary-color;
+    border-color: $primary-color;
+    animation: checkboxPop 0.3s ease;
+
+    &::after {
+      content: '';
+      position: absolute;
+      left: 6px;
+      top: 2px;
+      width: 5px;
+      height: 10px;
+      border: solid white;
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+  }
+
+  hr {
+    margin: 15px 0;
+    border: 0;
+    height: 1px;
+    background: #dee2e6;
+  }
+
+  span {
+    font-size: 14px;
+    color: $text-color;
+    @include transition(color);
+  }
+
+  label:hover span {
+    color: darken($text-color, 10%);
+  }
+
+  input[type="checkbox"]:disabled {
+    + .checkbox-custom {
+      background: $hover-bg;
+      border-color: $disabled-color;
+      cursor: not-allowed;
+    }
+
+    + .checkbox-custom + span {
+      color: $disabled-color;
+      cursor: not-allowed;
+    }
+  }
+}
+
+// Animation
+@keyframes checkboxPop {
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+} 

styles/main.scss

@@ -400,46 +400,6 @@ button+button {
   margin-left: 1rem;
 }
 
-.filter-group button {
-  padding: 1rem 2rem;
-  border-radius: 0.25rem;
-
-  &:after {
-    position: relative;
-    float: right;
-    left: 1rem;
-    top: 1rem;
-    font-size: 0.9em;
-  }
-
-  &.filter-state-hide:after {
-    content: "cacher";
-    color: grey;
-  }
-
-  &.filter-state-show:after {
-    content: "montrer";
-    color: green;
-  }
-
-  &.filter-state-showOnly:after {
-    content: "montrer uniquement";
-    color: orange;
-  }
-
-  &.filter-state-hide {
-    background: #fff;
-  }
-
-  &.filter-state-show {
-    color: green;
-  }
-
-  &.filter-state-showOnly {
-    color: orange;
-  }
-}
-
 .leaflet-control-layers-toggle {
   background-size: contain;
 }