up style detail

js/lcm_color_utils.js

@@ -22,7 +22,7 @@ const lcm_color_utils = {
 	getColor: (feature) => {
 
 		let outputPower = lcm_utils.guessOutputPowerFromFeature(feature)
-		feature.properties.tags.has_output_of_irve_specified = outputPower
+		// feature.properties.tags.has_output_of_irve_specified = outputPower
 		if (outputPower) {
 
 			if (outputPower > max_out_legit_power) {

js/lcm_main.js

@@ -8,6 +8,7 @@ import lcm_config from './lcm_config.js'
 import lcm_utils from './lcm_utils.js'
 import lcm_color_utils from './lcm_color_utils.js'
 import {sendToJOSM, createJOSMEditLink} from './lcm_editor.js'
+
 let geojsondata;
 let lastLatLng;
 
@@ -144,7 +145,6 @@ function buildOverpassApiUrl(map, overpassQuery) {
 }
 
 
-
 function supprimerMarqueurs() {
     all_stations_markers.clearLayers();
 
@@ -384,8 +384,7 @@ function eachFeature(feature, layer) {
         if (display_unknown_max_power_station === 'show_only') {
             return;
         }
-    }
-    else{
+    } else {
         // on cache cette station si on ne veut pas voir les stations à la puissance inconnue
         if (display_unknown_max_power_station === 'hide') {
             return;
@@ -403,7 +402,6 @@ function eachFeature(feature, layer) {
     const panoramaxLink = `https://api.panoramax.xyz/#focus=map&map=16.7/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}&speed=250`;
 
 
-
     let html = ` <a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_car#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en voiture vers cette station"> 🚗</a>
 <a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_bike#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire en vélo vers cette station">🚴‍♀️</a>
 <a href="https://www.openstreetmap.org/directions?from=&to=${feature.geometry.coordinates[1]},${feature.geometry.coordinates[0]}&engine=fossgis_osrm_foot#map=14/${feature.geometry.coordinates[1]}/${feature.geometry.coordinates[0]}" class="navigation-link by-car" title="itinéraire à pied vers cette station">👠</a>
@@ -412,7 +410,7 @@ function eachFeature(feature, layer) {
 <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>
-<button id="fullDetails" >détails</button>
+<button class="edit-button" id="fullDetails" >détails</button>
 <span class="popup-content">${popupContent}</span>`;
 
     let zoom = map.getZoom();
@@ -459,10 +457,8 @@ function eachFeature(feature, layer) {
      */
     // 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)
         /**
          * on considère l'information de câble manquante uniquement dans le cas où une info de socket de type 2 est présente mais pas le tag socket:type2_cable.
          */
@@ -524,6 +520,7 @@ function eachFeature(feature, layer) {
         mouseover: function () {
             this.openPopup();
             bindEventsOnJosmRemote();
+            bindFullDetails(feature);
         },
         mouseout: function () {
             // setTimeout(() => this.closePopup(), 15000);
@@ -531,17 +528,37 @@ function eachFeature(feature, layer) {
         click: function () {
             this.openPopup();
             bindEventsOnJosmRemote();
+            bindFullDetails(feature);
         },
     });
 
 }
+
 function bindFullDetails(feature) {
 
-    $('#fullDetails'.on('click', ()=>{
+    $('#fullDetails').on('click', () => {
+        console.log('details', feature)
+        console.log("$('#current_station_infos')", $('#current_station_infos')[0])
 
-    $('#current_station_infos').html('<pre>'+feature.properties+'</pre>')
-    }))
+        let content = '<table>' +
+            '<tbody>' + ''
+
+        let ii=0
+        let keys = Object.keys(feature.properties.tags)
+            keys.forEach( (elem, val) => {
+                console.log('elem, val', elem, val)
+            content += '<tr><td>'+elem+'</td><td>'+feature.properties.tags[elem]+'</td></tr>';
+                ii++;
+        })
+        content += '</tbody>' +
+            '</table>'
+
+        console.log('content', content)
+        $('#current_station_infos')[0].innerHTML = `<h2>Détails</h2>
+${content}`
+    })
 }
+
 function makeCssClassFromTags(tags) {
     let tagKeys = Object.keys(tags)
     if (!tags) {
@@ -706,6 +723,7 @@ function updateExternalEditorsLinks(){
     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}`)
 }
@@ -820,7 +838,6 @@ function init() {
     L.control.layers(null, overlayMaps).addTo(map);
 
 
-
     $('#sendToJOSM').on('click', () => {
         sendToJOSM(map, geojsondata)
             .then(() => {

styles/main.scss

@@ -56,6 +56,21 @@ p {
   border: solid 2px;
 }
 
+
+table {
+  tr {
+    td {
+      border-bottom: #ccc 1px solid;
+
+    }
+  }
+
+  tr:nth-of-type(odd) {
+    background: #dedede;
+  }
+}
+
+
 .padded {
   padding: 1rem;
 }
@@ -584,6 +599,7 @@ header {
     display: inline-block;
     text-align: center;
   }
+
   .tooltip {
     opacity: 0
   }