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';
@@ -141,8 +142,7 @@ function buildOverpassApiUrl(map, overpassQuery) {
     }
     resultUrl = baseUrl + query;
     return resultUrl;
-} 
+}
-
 
 
 function supprimerMarqueurs() {
@@ -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);
 }
 
 
@@ -635,7 +652,7 @@ function onMapMoveEnd() {
     } else {
         // Calculer la distance en km entre l'ancienne et la nouvelle position
         const distanceKm = map.distance(center, window.lastKnownPosition) / 1000;
-        
+
         // Ne mettre à jour que si on s'est déplacé de plus de 2km
         if (distanceKm > 2) {
             window.lastKnownPosition = center;
@@ -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){
+
-   $("mapCompleteLink").attr('href', `https://mapcomplete.org/charging_stations?z=${zoom}&lat=${lat}&lon=${lon}`)
+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,15 +755,15 @@ 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('🔼', '🔽')); 
+        $(this).text(text.replace('🔼', '🔽'));
     }
 });
 
@@ -762,7 +780,7 @@ const foodIcon = L.divIcon({
 function searchFoodPlaces(map) {
     const bounds = map.getBounds();
     const bbox = bounds.getSouth() + ',' + bounds.getWest() + ',' + bounds.getNorth() + ',' + bounds.getEast();
-    
+
     const query = `
     [out:json][timeout:25];
     (
@@ -786,17 +804,17 @@ function searchFoodPlaces(map) {
                 const properties = feature.properties;
                 const name = properties.tags.name || 'Sans nom';
                 const type = properties.tags.amenity;
-                
+
                 const marker = L.marker([coords[1], coords[0]], {
                     icon: foodIcon
                 });
-                
+
                 marker.bindPopup(`
                     <strong>${name}</strong><br>
                     Type: ${type}<br>
                     ${properties.tags.cuisine ? 'Cuisine: ' + properties.tags.cuisine : ''}
                 `);
-                
+
                 food_places_markers.addLayer(marker);
             });
         })
@@ -816,10 +834,9 @@ function init() {
         "Stations de recharge": all_stations_markers,
         "Restaurants et cafés": food_places_markers
     };
-    
+
     L.control.layers(null, overlayMaps).addTo(map);
 
-     
 
     $('#sendToJOSM').on('click', () => {
         sendToJOSM(map, geojsondata)
@@ -848,10 +865,10 @@ function init() {
 
 
 function copyCurrentUrl() {
-    const url = window.location.href; 
+    const url = window.location.href;
     var dummy = document.createElement('input'),
-    text = window.location.href;
+        text = window.location.href;
-    
+
     document.body.appendChild(dummy);
     dummy.value = text;
     dummy.select();
@@ -862,7 +879,7 @@ function copyCurrentUrl() {
 function searchLocation(event) {
     event.preventDefault();
     event.stopPropagation();
-    
+
     const location = document.getElementById('searchLocation').value;
     if (!location) {
         alert('Veuillez entrer un lieu à rechercher.');
@@ -872,13 +889,13 @@ function searchLocation(event) {
     const url = `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`;
 
     fetch(url)
-    .then(response => response.json())
+        .then(response => response.json())
-    .then(data => {
+        .then(data => {
-        if (data.length > 0) {
+            if (data.length > 0) {
-            const place = data[0];
+                const place = data[0];
-            const lat = parseFloat(place.lat);
+                const lat = parseFloat(place.lat);
-            const lon = parseFloat(place.lon);
+                const lon = parseFloat(place.lon);
-            map.setView([lat, lon], 13); // Ajustez le niveau de zoom selon vos besoins
+                map.setView([lat, lon], 13); // Ajustez le niveau de zoom selon vos besoins
             } else {
                 alert('Lieu non trouvé. Veuillez essayer un autre terme de recherche.');
             }
@@ -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
   }