show missing cable info

index.html

@@ -144,6 +144,19 @@
         <div class="filter-group">
             qualité
             <button id="filterUnkown">❓ kW max inconnu</button>
+            <br>
+            <fieldset class="wip">
+                WIP:
+                <a href="" id="mapCompleteLink" class="external-editor">mapcomplete</a>
+                <a href="" id="josmLink" class="external-editor">JOSM</a>
+                <a href="" id="idLink" class="external-editor">id</a>
+                <br>
+            <button id="cableMissing">sans information de câble</button>
+            <i class="info">
+                <span class="i">i</span>
+                <span class="tooltip">mettre un marqueur aux stations qui n'ont pas d'information de câble</span>
+            </i>
+            </fieldset>
             <!--            <button id="filterChelou">les valeurs chelou</button>-->
         </div>
         <!--        TODO add more filters-->

js/lcm_main.js

@@ -38,6 +38,7 @@ let filters_features = {
 let display_type2_sockets = 'show';
 let display_type2_combo_sockets = 'show';
 let display_unknown_max_power_station = 'show';
+let display_alert_cable_missing = 'show';
 let display_known_max_power_station = 'show';
 let display_type2_combo_sockets_with_cable = 'show';
 let display_lower_than_50kw = 'show';
@@ -75,6 +76,7 @@ function updateURLWithMapCoordinatesAndZoom() {
     const url = `#coords=1&lat=${center.lat}&lng=${center.lng}&zoom=${zoom}`
     // Met à jour l'URL de la page
     history.replaceState(null, null, url)
+    updateExternalEditorsLinks()
 }
 
 
@@ -363,6 +365,11 @@ function makePopupOfFeature(feature) {
     return popupContent;
 }
 
+/**
+ * application des filtres dans la sélection des bornes à afficher
+ * @param feature
+ * @param layer
+ */
 function eachFeature(feature, layer) {
     let link_josm = createJOSMEditLink(feature);
 
@@ -384,6 +391,9 @@ function eachFeature(feature, layer) {
             return;
         }
     }
+    /**
+     * bornes sans informations, suggérer d'ajouter des tags dans OSM
+     */
     if (!popupContent) {
         popupContent = `<span class="no-data"> Aucune information renseignée,
 <a class="edit-button" href="https://www.openstreetmap.org/edit?editor=remote&node=${feature.properties.id}">ajoutez la dans OpenStreetMap!</a></span>`;
@@ -442,6 +452,47 @@ function eachFeature(feature, layer) {
         radius = outPowerGuessed * ratio_circle;
     }
 
+
+    /**
+     * gestion des marqueurs d'alertes
+     */
+    // info de câble manquant
+    if(display_alert_cable_missing){
+        console.log('display_alert_cable_missing', display_alert_cable_missing)
+
+        let keys = Object.keys(feature.properties)
+        console.log('feature.properties', keys)
+        if(keys.indexOf('type2_cable') === -1 ){
+            let circle_alert = L.circle(layer._latlng, {
+                color: 'red',
+                fillColor: 'orange',
+                fillOpacity: 1,
+                colorOpacity: 0.5,
+                radius: 20
+            })
+
+            circle_alert.bindPopup("information de câble manquante");
+            circle_alert.on({
+                mouseover: function () {
+                    this.openPopup();
+                    bindEventsOnJosmRemote();
+                },
+                mouseout: function () {
+                    // setTimeout(() => this.closePopup(), 15000);
+                },
+                click: function () {
+                    this.openPopup();
+                    bindEventsOnJosmRemote();
+                },
+            });
+
+            circle_alert.addTo(all_stations_markers);
+        }
+    }
+
+    /**
+     * affichage des marqueurs de stations de recharge
+     */
     let circle = L.circle(layer._latlng, {
         color: color,
         fillColor: color,
@@ -473,6 +524,7 @@ function eachFeature(feature, layer) {
             bindEventsOnJosmRemote();
         },
     });
+
 }
 
 function makeCssClassFromTags(tags) {
@@ -564,6 +616,7 @@ function onMapMoveEnd() {
     if (!window.lastKnownPosition) {
         window.lastKnownPosition = center;
         updateURLWithMapCoordinatesAndZoom();
+
     } else {
         // Calculer la distance en km entre l'ancienne et la nouvelle position
         const distanceKm = map.distance(center, window.lastKnownPosition) / 1000;
@@ -585,6 +638,10 @@ $(document).ready(function () {
     onMapMoveEnd();
     map.on('moveend', onMapMoveEnd);
     $('#spinning_icon').hide();
+
+    /**
+     * boutons de changement de filtres et de rechargement des bornes à l'affichage
+     */
     $('#removeMarkers').on('click', function () {
         supprimerMarqueurs();
     });
@@ -607,6 +664,14 @@ $(document).ready(function () {
         showActiveFilter(display_unknown_max_power_station, '#filterUnkown');
         refreshDisplay();
     });
+    /**
+     * toggle des alertes de tags décrivant la présence de cable
+     */
+    $('#cableMissing').on('click', function () {
+        display_alert_cable_missing =  ! display_alert_cable_missing;
+        showActiveFilter(display_alert_cable_missing, '#cableMissing');
+        refreshDisplay();
+    });
     showActiveFilter(display_unknown_max_power_station, '#filterUnkown');
 });
 
@@ -614,6 +679,28 @@ function showActiveFilter(filterVariableName, selectorId) {
     $(selectorId).attr('class', 'filter-state-' + filterVariableName)
 }
 
+/**
+ * mettre à jour les liens vers des éditeurs externes
+ */
+function updateExternalEditorsLinks(){
+
+    const center = map.getCenter()
+    const zoom = map.getZoom()
+
+    mapCompleteLink(center.lat,center.lng,zoom)
+    idLink(center.lat,center.lng,zoom)
+
+}
+function mapCompleteLink(lat,lon,zoom){
+   $("mapCompleteLink").attr('href', `https://mapcomplete.org/charging_stations?z=${zoom}&lat=${lat}&lon=${lon}`)
+}
+
+function idLink(lat,lon,zoom){
+    let href= `https://www.openstreetmap.org/edit?editor=id#map=${zoom}/${lat}/${lon}`
+    console.log('idlink', href)
+    $("idLink").attr('href', href)
+}
+
 
 function cycleVariableState(filterVariableName, selectorId) {
     console.log('filterVariableName', filterVariableName, filterStatesAvailable)
@@ -728,6 +815,15 @@ function init() {
                 alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée');
             });
     });
+    $('#josmLink').on('click', () => {
+        sendToJOSM(map, geojsondata)
+            .then(() => {
+                console.log('Données envoyées à JOSM avec succès !');
+            })
+            .catch(() => {
+                alert('Erreur : JOSM doit être ouvert avec l\'option "Contrôle à distance" activée');
+            });
+    });
 
     $('#searchButton').on('click', searchLocation);
     $('#shareUrl').on('click', copyCurrentUrl);

styles/main.scss

@@ -255,9 +255,6 @@ a {
 }
 
 .color-indication {
-  min-width: 1rem;
-  max-width: 5rem;
-  height: 1rem;
   padding: 1rem;
   border-radius: 2rem;
   display: block;
@@ -266,6 +263,10 @@ a {
   color: white;
   text-shadow: 0 0 0.5rem #222;
   clear: right;
+  min-width: 7rem;
+  max-width: 5rem;
+  height: 3rem;
+
 }
 
 .no-data {
@@ -474,6 +475,7 @@ header {
   #map {
     margin-left: 28.8vw;
     top: 5.55rem;
+    width: 71.2vw;
   }
 }
 
@@ -571,6 +573,29 @@ header {
   margin-right: 1rem;
 }
 
+.info {
+
+  .i{
+    border-radius:100%;
+    background: #dedede;
+    padding: 1ch;
+    width: 5ch;
+    margin-left: 1ch;
+    display: inline-block;
+    text-align: center;
+  }
+  .tooltip {
+    opacity: 0
+  }
+
+  &:hover {
+    .tooltip {
+      opacity: 1;
+      transition: opacity 0.3s ease-in-out;
+    }
+  }
+}
+
 /**
 overrides leaflet
  */
@@ -616,6 +641,7 @@ overrides leaflet
     height: 55vh;
   }
 
+
   header {
     position: static;
   }

styles/style.css

@@ -248,9 +248,6 @@ a {
 }
 
 .color-indication {
-  min-width: 1rem;
-  max-width: 5rem;
-  height: 1rem;
   padding: 1rem;
   border-radius: 2rem;
   display: block;
@@ -259,6 +256,9 @@ a {
   color: white;
   text-shadow: 0 0 0.5rem #222;
   clear: right;
+  min-width: 7rem;
+  max-width: 5rem;
+  height: 3rem;
 }
 
 .no-data {
@@ -456,6 +456,7 @@ header {
 .side-panel-open #map {
   margin-left: 28.8vw;
   top: 5.55rem;
+  width: 71.2vw;
 }
 
 #infos_carte {
@@ -548,6 +549,23 @@ header img {
   margin-right: 1rem;
 }
 
+.info .i {
+  border-radius: 100%;
+  background: #dedede;
+  padding: 1ch;
+  width: 5ch;
+  margin-left: 1ch;
+  display: inline-block;
+  text-align: center;
+}
+.info .tooltip {
+  opacity: 0;
+}
+.info:hover .tooltip {
+  opacity: 1;
+  transition: opacity 0.3s ease-in-out;
+}
+
 /**
 overrides leaflet
  */

styles/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EAOE;;AANA;EACE;EACA;EACA;;;AAMJ;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;AAAA;AAAA;AAIA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAIA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;;;AAGF;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;;EAGF;AACE;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["main.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EAOE;;AANA;EACE;EACA;EACA;;;AAMJ;EACE;;;AAGF;EACE;IACE;;EAGF;IACE;;;AAIJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;AAAA;AAAA;AAIA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAIA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;;AAKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;;AAIA;EACE;EACA;;;AAKN;AAAA;AAAA;AAIA;EACE;;;AAGF;AACA;EACE;IACE;IACA;;EAGF;IACE;IACA;;EAGF;AACE;;EAGF;IACE;IACA;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;IACA;IACA;IACA;;EAIF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE","file":"style.css"}