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

@@ -7,7 +7,8 @@
 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'
+import {sendToJOSM, createJOSMEditLink} from './lcm_editor.js'
+
 let geojsondata;
 let lastLatLng;
 
@@ -33,7 +34,7 @@ L.control.scale().addTo(map)
 let filterStatesAvailable = ['hide', 'show', 'showOnly']
 
 let filters_features = {
-    display_unknown_max_power_station : filterStatesAvailable[1]
+    display_unknown_max_power_station: filterStatesAvailable[1]
 }
 let display_type2_sockets = 'show';
 let display_type2_combo_sockets = 'show';
@@ -144,7 +145,6 @@ function buildOverpassApiUrl(map, overpassQuery) {
 }
 
 
-
 function supprimerMarqueurs() {
     all_stations_markers.clearLayers();
 
@@ -182,7 +182,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
     let count_found_type2combo = 0;
     let count_found_type2 = 0;
 
-    $('#count_features_fond').html('⚡'+count+' stations');
+    $('#count_features_fond').html('⚡' + count + ' stations');
 
     resultAsGeojson.features.map(feature => {
         let found_type2_combo = false;
@@ -381,13 +381,12 @@ function eachFeature(feature, layer) {
     let displayOutPowerGuessed = '? kW';
     if (outPowerGuessed) {
         displayOutPowerGuessed = outPowerGuessed + ' kW max';
-        if(display_unknown_max_power_station === 'show_only'){
+        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'){
+        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();
@@ -445,9 +443,9 @@ function eachFeature(feature, layer) {
          * limiter la taille du cercle pour les valeurs aberrantes
          * les mettre en valeur en les plafonnant à 1 de plus que le maximum attendu en lcm_config
          */
-        if(outPowerGuessed> lcm_config.max_possible_station_output ){
+        if (outPowerGuessed > lcm_config.max_possible_station_output) {
-            console.error("valeur suspecte outPowerGuessed",outPowerGuessed, feature)
+            console.error("valeur suspecte outPowerGuessed", outPowerGuessed, feature)
-            outPowerGuessed =  lcm_config.max_possible_station_output +1
+            outPowerGuessed = lcm_config.max_possible_station_output + 1
         }
 
         radius = outPowerGuessed * ratio_circle;
@@ -458,15 +456,13 @@ function eachFeature(feature, layer) {
      * gestion des marqueurs d'alertes
      */
     // info de câble manquant
-    if(display_alert_cable_missing){
+    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.
          */
-        if(keys.indexOf('socket:type2') !==-1 && keys.indexOf('socket:type2_cable') === -1 ){
+        if (keys.indexOf('socket:type2') !== -1 && keys.indexOf('socket:type2_cable') === -1) {
             let circle_alert = L.circle(layer._latlng, {
                 color: 'red',
                 fillColor: 'orange',
@@ -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', ()=>{
+function bindFullDetails(feature) {
 
-    $('#current_station_infos').html('<pre>'+feature.properties+'</pre>')
+    $('#fullDetails').on('click', () => {
-    }))
+        console.log('details', feature)
+        console.log("$('#current_station_infos')", $('#current_station_infos')[0])
+
+        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) {
@@ -603,9 +620,9 @@ function loadOverpassQuery() {
     }
 }
 
-function refreshDisplay(convert_points_to_osm=false) {
+function refreshDisplay(convert_points_to_osm = false) {
     supprimerMarqueurs();
-    displayPointsFromApi(geojsondata,convert_points_to_osm);
+    displayPointsFromApi(geojsondata, convert_points_to_osm);
 }
 
 
@@ -683,7 +700,7 @@ $(document).ready(function () {
      * toggle des alertes de tags décrivant la présence de cable
      */
     $('#cableMissing').on('click', function () {
-        display_alert_cable_missing =  ! display_alert_cable_missing;
+        display_alert_cable_missing = !display_alert_cable_missing;
         showActiveFilter(display_alert_cable_missing, '#cableMissing');
         refreshDisplay();
     });
@@ -697,21 +714,22 @@ function showActiveFilter(filterVariableName, selectorId) {
 /**
  * mettre à jour les liens vers des éditeurs externes
  */
-function updateExternalEditorsLinks(){
+function updateExternalEditorsLinks() {
 
     const center = map.getCenter()
     const zoom = map.getZoom()
 
-    mapCompleteLink(center.lat,center.lng,zoom)
+    mapCompleteLink(center.lat, center.lng, zoom)
-    idLink(center.lat,center.lng,zoom)
+    idLink(center.lat, center.lng, zoom)
 
 }
-function mapCompleteLink(lat,lon,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){
+function idLink(lat, lon, zoom) {
-    let href= `https://www.openstreetmap.org/edit?editor=id#map=${zoom}/${lat}/${lon}`
+    let href = `https://www.openstreetmap.org/edit?editor=id#map=${zoom}/${lat}/${lon}`
     console.log('idlink', href)
     $("idLink").attr('href', href)
 }
@@ -737,12 +755,12 @@ function cycleVariableState(filterVariableName, selectorId) {
 }
 
 // toggle des stats
-$('#toggle-stats').on('click', function() {
+$('#toggle-stats').on('click', function () {
     $('#found_charging_stations').slideToggle();
 
     // Change le symbole de la flèche
     let text = $(this).text();
-    if(text.includes('🔽')) {
+    if (text.includes('🔽')) {
         $(this).text(text.replace('🔽', '🔼'));
     } else {
         $(this).text(text.replace('🔼', '🔽'));
@@ -820,7 +838,6 @@ function init() {
     L.control.layers(null, overlayMaps).addTo(map);
 
 
-
     $('#sendToJOSM').on('click', () => {
         sendToJOSM(map, geojsondata)
             .then(() => {
@@ -887,6 +904,6 @@ function searchLocation(event) {
             console.error('Erreur lors de la recherche du lieu :', error);
             alert('Erreur lors de la recherche du lieu.');
         });
-    }
+}
 
-    init()
+init()

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;
 }
@@ -575,8 +590,8 @@ header {
 
 .info {
 
-  .i{
+  .i {
-    border-radius:100%;
+    border-radius: 100%;
     background: #dedede;
     padding: 1ch;
     width: 5ch;
@@ -584,6 +599,7 @@ header {
     display: inline-block;
     text-align: center;
   }
+
   .tooltip {
     opacity: 0
   }