mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
display details in panel
This commit is contained in:
Tykayn
tykayn
parent
7c80ac4576
commit
d34b753d53
6 changed files with 1220 additions and 56 deletions
113
js/lcm_main.js
113
js/lcm_main.js
|
|
@ -552,9 +552,9 @@ function displayPointsFromApi(points, convert_to_osm_json) {
|
|||
updateFilteredStationsCount();
|
||||
}
|
||||
|
||||
function makePopupOfFeature(feature) {
|
||||
let popupContent = ''
|
||||
function displaySocketsList(feature) {
|
||||
|
||||
let popupContent = '';
|
||||
popupContent += '<div class="sockets-list" >'
|
||||
let type2 = feature.properties.tags['socket:type2']
|
||||
let type2_combo = feature.properties.tags['socket:type2_combo']
|
||||
|
|
@ -572,6 +572,11 @@ function makePopupOfFeature(feature) {
|
|||
}
|
||||
}
|
||||
popupContent += '</div>'
|
||||
return popupContent;
|
||||
}
|
||||
function makePopupOfFeature(feature) {
|
||||
let popupContent = ''
|
||||
|
||||
popupContent += '<div class="key-values" >'
|
||||
// ne montrer que certains champs dans la popup
|
||||
lcm_config.tags_to_display_in_popup.forEach(function (key) {
|
||||
|
|
@ -665,17 +670,6 @@ function eachFeature(feature, layer, stats) {
|
|||
}
|
||||
}
|
||||
|
||||
if (lcm_config.filterQuality) {
|
||||
// Vérifier si les informations minimales de qualité sont présentes
|
||||
let hasQualityInfo = feature.properties.tags['operator'] ||
|
||||
feature.properties.tags['authentication:none'] ||
|
||||
feature.properties.tags['payment:none'] ||
|
||||
feature.properties.tags['opening_hours'];
|
||||
if (!hasQualityInfo) {
|
||||
stats.count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (outPowerGuessed) {
|
||||
displayOutPowerGuessed = outPowerGuessed + ' kW max';
|
||||
if (display_unknown_max_power_station === 'show_only') {
|
||||
|
|
@ -699,16 +693,12 @@ function eachFeature(feature, layer, stats) {
|
|||
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>
|
||||
<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a>
|
||||
<a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a>
|
||||
<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: ${lcm_color_utils.getColor(feature)};">${displayOutPowerGuessed}</span>
|
||||
<button class="edit-button" id="fullDetails" >détails</button>
|
||||
<span class="popup-content">${popupContent}</span>`;
|
||||
// contenu de la popup
|
||||
let html = `<span class="color-indication" style="background-color: ${lcm_color_utils.getColor(feature)};">${displayOutPowerGuessed}</span>
|
||||
|
||||
<span class="popup-content">${popupContent}</span>
|
||||
|
||||
`
|
||||
|
||||
let zoom = map.getZoom();
|
||||
let radius = 20;
|
||||
|
|
@ -827,6 +817,52 @@ function eachFeature(feature, layer, stats) {
|
|||
this.openPopup();
|
||||
bindEventsOnJosmRemote(this.getPopup().getElement());
|
||||
bindFullDetails(feature);
|
||||
|
||||
// Remplir automatiquement #current_station_infos lors du clic
|
||||
|
||||
let content = '';
|
||||
let table_details = '';
|
||||
let count_features_in_table = 0;
|
||||
table_details += '<div class="key-values" >'
|
||||
// ne montrer que certains champs dans la popup
|
||||
lcm_config.tags_to_display_in_popup.forEach(function (key) {
|
||||
if (lcm_config.tags_to_display_in_popup.indexOf(key)) {
|
||||
let value = feature.properties.tags[key]
|
||||
if (value) {
|
||||
if (value.indexOf('http') !== -1) {
|
||||
value = '<a href="' + value + '">' + value + '</a>'
|
||||
}
|
||||
table_details += '<br/><strong class="popup-key">' + key + ' :</strong><span class="popup-value">' + value + '</span>'
|
||||
count_features_in_table++;
|
||||
}
|
||||
}
|
||||
})
|
||||
table_details += '</div>'
|
||||
|
||||
if (!count_features_in_table) {
|
||||
table_details += '<div class="no-feature-in-table">Aucune information renseignée</div>'
|
||||
}
|
||||
content += ` <span class="color-indication" style="background-color: ${lcm_color_utils.getColor(feature)};">${displayOutPowerGuessed}</span>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<a class="edit-button" href="https://www.openstreetmap.org/edit?editor=id&node=${feature.properties.id}">✏️</a>
|
||||
<a class="edit-button josm" data-href="${link_josm}" href="#">JOSM</a>
|
||||
<a href="${panoramaxLink}" target="_blank" class="panoramax-link" title="Voir sur Panoramax">
|
||||
<img src="styles/images/panoramax.ico" alt="icone">
|
||||
</a>
|
||||
|
||||
<div class="socket-list">
|
||||
${displaySocketsList(feature)}
|
||||
</div>
|
||||
<div class="table-details" >
|
||||
${table_details}
|
||||
</div>
|
||||
`
|
||||
$('#current_station_infos').html(`<div class='island irve-details'><h2>Détails</h2>${content}</div>`);
|
||||
},
|
||||
});
|
||||
|
||||
|
|
@ -835,25 +871,12 @@ function eachFeature(feature, layer, stats) {
|
|||
function bindFullDetails(feature) {
|
||||
|
||||
$('#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}`
|
||||
${makePopupOfFeature(feature)}
|
||||
|
||||
`
|
||||
})
|
||||
}
|
||||
let isLoading = false
|
||||
|
|
@ -899,6 +922,7 @@ function onMapMoveEnd() {
|
|||
let zoom = map.getZoom()
|
||||
let infos = `Lat: ${center.lat}, Lon: ${center.lng}, Zoom : ${zoom}`
|
||||
|
||||
updateURLWithMapCoordinatesAndZoom();
|
||||
if (zoom < 10) {
|
||||
$('#zoomMessage').show()
|
||||
} else {
|
||||
|
|
@ -915,7 +939,6 @@ function onMapMoveEnd() {
|
|||
// Stocker les dernières coordonnées connues
|
||||
if (!window.lastKnownPosition) {
|
||||
window.lastKnownPosition = center;
|
||||
updateURLWithMapCoordinatesAndZoom();
|
||||
|
||||
} else {
|
||||
// Calculer la distance en km entre l'ancienne et la nouvelle position
|
||||
|
|
@ -1190,22 +1213,27 @@ function searchOsmoseIssues(map) {
|
|||
proposedTags += `<tr><td>${tag.k}</td><td>${tag.v}</td></tr>`;
|
||||
});
|
||||
proposedTags += '</table>';
|
||||
popupContent += `<div class="proposed-tags-container"><h4>Tags proposés :</h4>${proposedTags}</div>`;
|
||||
// popupContent += `<div class="proposed-tags-container"><h4>Tags proposés :</h4>${proposedTags}</div>`;
|
||||
}
|
||||
|
||||
// Construire le lien JOSM /import
|
||||
const josmFixUrl = `http://localhost:8111/import?url=https://osmose.openstreetmap.fr/api/0.3/issue/${storedIssueId}/fix/0`;
|
||||
|
||||
popupContent += `
|
||||
let josm_buttons = `
|
||||
<div class="action-buttons">
|
||||
<a class="edit-button josm" data-href="${josmFixUrl}" href="#" title="Ouvre JOSM et charge la correction proposée">⚡ Réparer dans JOSM</a>
|
||||
<a href="https://osmose.openstreetmap.fr/fr/issue/${storedIssueId}" target="_blank" title="Voir les détails de l'alerte sur le site Osmose">Voir sur Osmose</a>
|
||||
</div>`;
|
||||
|
||||
popupContent += josm_buttons
|
||||
// Mettre à jour le contenu de la popup et s'assurer qu'elle est ouverte
|
||||
clickedMarker.setPopupContent(popupContent);
|
||||
// clickedMarker.openPopup(); // Rouvrir pour ajuster la taille si nécessaire
|
||||
|
||||
$('#current_station_infos').html(`<div class='island osmose-details'><h2>Analyse Osmose</h2>${josm_buttons}
|
||||
${proposedTags}
|
||||
</div>`);
|
||||
|
||||
// Lier l'événement au bouton JOSM DANS la popup
|
||||
bindEventsOnJosmRemote(clickedMarker.getPopup().getElement());
|
||||
|
||||
|
|
@ -1287,6 +1315,7 @@ function init() {
|
|||
$('#setRandomView').on('click', function () {
|
||||
setRandomView();
|
||||
loadOverpassQuery();
|
||||
geoDataPointsFromApi();
|
||||
});
|
||||
$('#filterUnkown').on('click', function () {
|
||||
display_unknown_max_power_station = cycleVariableState(display_unknown_max_power_station, '#filterUnkown');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue