diff --git a/js/lcm_color_utils.js b/js/lcm_color_utils.js index b5099c7..d05874e 100644 --- a/js/lcm_color_utils.js +++ b/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) { diff --git a/js/lcm_main.js b/js/lcm_main.js index e6e72ee..d26d418 100644 --- a/js/lcm_main.js +++ b/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 = ` 🚗 🚴‍♀️ 👠 @@ -412,7 +410,7 @@ function eachFeature(feature, layer) { icone ${displayOutPowerGuessed} - + ${popupContent}`; 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 ){ - console.error("valeur suspecte outPowerGuessed",outPowerGuessed, feature) - outPowerGuessed = lcm_config.max_possible_station_output +1 + if (outPowerGuessed > lcm_config.max_possible_station_output) { + console.error("valeur suspecte outPowerGuessed", outPowerGuessed, feature) + 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){ - console.log('display_alert_cable_missing', display_alert_cable_missing) + if (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('
'+feature.properties+'
') - })) + $('#fullDetails').on('click', () => { + console.log('details', feature) + console.log("$('#current_station_infos')", $('#current_station_infos')[0]) + + let content = '' + + '' + '' + + let ii=0 + let keys = Object.keys(feature.properties.tags) + keys.forEach( (elem, val) => { + console.log('elem, val', elem, val) + content += ''; + ii++; + }) + content += '' + + '
'+elem+''+feature.properties.tags[elem]+'
' + + console.log('content', content) + $('#current_station_infos')[0].innerHTML = `

Détails

+${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) - idLink(center.lat,center.lng,zoom) + 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 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}` +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) } @@ -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(` ${name}
Type: ${type}
${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(data => { - if (data.length > 0) { - const place = data[0]; - const lat = parseFloat(place.lat); - const lon = parseFloat(place.lon); - map.setView([lat, lon], 13); // Ajustez le niveau de zoom selon vos besoins + .then(response => response.json()) + .then(data => { + if (data.length > 0) { + const place = data[0]; + const lat = parseFloat(place.lat); + const lon = parseFloat(place.lon); + 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() \ No newline at end of file +} + +init() \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss index 94556cf..3bc8e5a 100644 --- a/styles/main.scss +++ b/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{ - border-radius:100%; + .i { + border-radius: 100%; background: #dedede; padding: 1ch; width: 5ch; @@ -584,6 +599,7 @@ header { display: inline-block; text-align: center; } + .tooltip { opacity: 0 }