mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
add filters checkboxes
This commit is contained in:
Tykayn
tykayn
parent
b44fa95a09
commit
ebb2c87bcc
3 changed files with 171 additions and 58 deletions
25
index.html
25
index.html
|
|
@ -116,9 +116,10 @@
|
|||
⚙️ Filtres:
|
||||
</h2>
|
||||
<div class="filter-group">
|
||||
qualité
|
||||
<button id="filterUnkown">❓ kW max inconnu</button>
|
||||
|
||||
<div class="filter-group">
|
||||
Montrer:
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" id="filterCableAttached"> Prise avec câble attaché
|
||||
</label>
|
||||
|
|
@ -131,9 +132,29 @@
|
|||
<input type="checkbox" id="filterType2"> Prise Type 2
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" id="filterDomestic"> Prise domestique
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" id="filterChademo"> Prise CHAdeMO
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" id="filterType1"> Prise Type 1
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" id="filterType3"> Prise Type 3
|
||||
</label>
|
||||
<hr>
|
||||
<label>
|
||||
<input type="checkbox" id="filterQuality"> Contrôle qualité
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" id="filterUnkown"> ❓ kW max inconnu
|
||||
</label>
|
||||
</div>
|
||||
<!--
|
||||
<br>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,21 @@ const lcm_config = {
|
|||
filterCCS: false,
|
||||
filterType2: false,
|
||||
filterQuality: false,
|
||||
filterDomestic: false,
|
||||
filterChademo: false,
|
||||
filterType1: false,
|
||||
filterType3: false,
|
||||
// Configuration des filtres
|
||||
filterConfigs: {
|
||||
'filterCableAttached': false,
|
||||
'filterCCS': false,
|
||||
'filterType2': false,
|
||||
'filterQuality': false
|
||||
'filterUnknownOutput': true,
|
||||
'filterCableAttached': true,
|
||||
'filterCCS': true,
|
||||
'filterType2': true,
|
||||
'filterQuality': true,
|
||||
'filterDomestic': true,
|
||||
'filterChademo': true,
|
||||
'filterType1': true,
|
||||
'filterType3': true
|
||||
},
|
||||
tileServers: {
|
||||
osm: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
|
|
|
|||
187
js/lcm_main.js
187
js/lcm_main.js
|
|
@ -12,6 +12,7 @@ import { sendToJOSM, createJOSMEditLink } from './lcm_editor.js'
|
|||
let geojsondata;
|
||||
let lastLatLng;
|
||||
let searchLocationMarker = null;
|
||||
let count_hidden_by_filters = 0;
|
||||
|
||||
|
||||
|
||||
|
|
@ -354,8 +355,15 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
|||
let count_estimated_type2combo = 0;
|
||||
let count_found_type2combo = 0;
|
||||
let count_found_type2 = 0;
|
||||
let count_hidden_by_filters = 0;
|
||||
|
||||
$('#count_features_fond').html('⚡' + count + ' stations');
|
||||
// Compter les filtres désactivés
|
||||
let disabledFilters = 0;
|
||||
Object.keys(lcm_config.filterConfigs).forEach(filterId => {
|
||||
if (!lcm_config.filterConfigs[filterId]) disabledFilters++;
|
||||
});
|
||||
|
||||
$('#count_features_fond').html('⚡' + count + ' stations' + (disabledFilters > 0 ? ` (${disabledFilters} filtre${disabledFilters > 1 ? 's' : ''} désactivé${disabledFilters > 1 ? 's' : ''}, ${count_hidden_by_filters} masqué${count_hidden_by_filters > 1 ? 's' : ''})` : ''));
|
||||
|
||||
resultAsGeojson.features.map(feature => {
|
||||
let found_type2_combo = false;
|
||||
|
|
@ -570,6 +578,63 @@ function eachFeature(feature, layer) {
|
|||
let outPowerGuessed = lcm_utils.guessOutputPowerFromFeature(feature);
|
||||
let color = lcm_color_utils.getColor(feature);
|
||||
let displayOutPowerGuessed = '? kW';
|
||||
|
||||
// Vérifier les filtres activés
|
||||
if (lcm_config.filterCCS && !feature.properties.tags['socket:type2_combo']) {
|
||||
count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lcm_config.filterType2 && !feature.properties.tags['socket:type2']) {
|
||||
count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lcm_config.filterDomestic && !feature.properties.tags['socket:typee']) {
|
||||
count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lcm_config.filterChademo && !feature.properties.tags['socket:chademo']) {
|
||||
count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lcm_config.filterType1 && !feature.properties.tags['socket:type1']) {
|
||||
count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lcm_config.filterType3 && !feature.properties.tags['socket:type3']) {
|
||||
count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lcm_config.filterCableAttached) {
|
||||
let hasCableAttached = false;
|
||||
// Vérifier si une des prises a un câble attaché
|
||||
['socket:type2:cable', 'socket:type2_combo:cable', 'socket:chademo:cable', 'socket:typee:cable', 'socket:type1:cable', 'socket:type3:cable'].forEach(tag => {
|
||||
if (feature.properties.tags[tag] === 'yes') {
|
||||
hasCableAttached = true;
|
||||
}
|
||||
});
|
||||
if (!hasCableAttached) {
|
||||
count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (outPowerGuessed) {
|
||||
displayOutPowerGuessed = outPowerGuessed + ' kW max';
|
||||
if (display_unknown_max_power_station === 'show_only') {
|
||||
|
|
@ -704,7 +769,10 @@ function eachFeature(feature, layer) {
|
|||
}).addTo(all_stations_markers);
|
||||
}
|
||||
|
||||
circle.bindPopup(html);
|
||||
circle.bindPopup(html, {
|
||||
autoPan: false,
|
||||
closeOnClick: false
|
||||
});
|
||||
circle.on({
|
||||
mouseover: function () {
|
||||
this.openPopup();
|
||||
|
|
@ -811,7 +879,15 @@ function loadOverpassQuery() {
|
|||
|
||||
function refreshDisplay(convert_points_to_osm = false) {
|
||||
supprimerMarqueurs();
|
||||
count_hidden_by_filters = 0; // Réinitialiser le compteur
|
||||
displayPointsFromApi(geojsondata, convert_points_to_osm);
|
||||
// Mettre à jour le compteur dans la popup
|
||||
let count = geojsondata.features.length;
|
||||
let disabledFilters = 0;
|
||||
Object.keys(lcm_config.filterConfigs).forEach(filterId => {
|
||||
if (!lcm_config.filterConfigs[filterId]) disabledFilters++;
|
||||
});
|
||||
$('#count_features_fond').html('⚡' + count + ' stations' + (disabledFilters > 0 ? ` (${disabledFilters} filtre${disabledFilters > 1 ? 's' : ''} désactivé${disabledFilters > 1 ? 's' : ''}, ${count_hidden_by_filters} masqué${count_hidden_by_filters > 1 ? 's' : ''})` : ''));
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -866,55 +942,7 @@ setCoordinatesOfLeafletMapFromQueryParameters()
|
|||
|
||||
|
||||
$(document).ready(function () {
|
||||
bindEventsOnJosmRemote();
|
||||
onMapMoveEnd();
|
||||
map.on('moveend', onMapMoveEnd);
|
||||
$('#spinning_icon').hide();
|
||||
|
||||
/**
|
||||
* boutons de changement de filtres et de rechargement des bornes à l'affichage
|
||||
*/
|
||||
$('#removeMarkers').on('click', function () {
|
||||
supprimerMarqueurs();
|
||||
});
|
||||
$('#load').on('click', function () {
|
||||
loadOverpassQuery();
|
||||
});
|
||||
$('#toggleSidePanel').on('click', function () {
|
||||
$('body').toggleClass('side-panel-open');
|
||||
});
|
||||
$('#chercherButton').on('click', function () {
|
||||
supprimerMarqueurs();
|
||||
loadOverpassQuery();
|
||||
});
|
||||
$('#setRandomView').on('click', function () {
|
||||
setRandomView();
|
||||
loadOverpassQuery();
|
||||
});
|
||||
$('#filterUnkown').on('click', function () {
|
||||
display_unknown_max_power_station = cycleVariableState(display_unknown_max_power_station, '#filterUnkown');
|
||||
showActiveFilter(display_unknown_max_power_station, '#filterUnkown');
|
||||
refreshDisplay();
|
||||
});
|
||||
/**
|
||||
* toggle des alertes de tags décrivant la présence de cable
|
||||
*/
|
||||
$('#cableMissing').on('click', function () {
|
||||
display_alert_cable_missing = !display_alert_cable_missing;
|
||||
showActiveFilter(display_alert_cable_missing, '#cableMissing');
|
||||
refreshDisplay();
|
||||
});
|
||||
showActiveFilter(display_unknown_max_power_station, '#filterUnkown');
|
||||
|
||||
$('#shareUrl').on('click', copyCurrentUrl);
|
||||
|
||||
// Écouteurs pour les nouveaux filtres
|
||||
Object.keys(lcm_config.filterConfigs).forEach(filterId => {
|
||||
$(`#${filterId}`).on('change', function() {
|
||||
lcm_config[lcm_config.filterConfigs[filterId]] = this.checked;
|
||||
refreshDisplay();
|
||||
});
|
||||
});
|
||||
init()
|
||||
});
|
||||
|
||||
function showActiveFilter(filterVariableName, selectorId) {
|
||||
|
|
@ -1105,7 +1133,7 @@ function searchOsmoseIssues(map) {
|
|||
});
|
||||
|
||||
if (tooClose) {
|
||||
console.log(`Marqueur Osmose ignoré car trop proche d'une station existante: ${lat},${lon}`);
|
||||
// console.log(`Marqueur Osmose ignoré car trop proche d'une station existante: ${lat},${lon}`);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
@ -1222,6 +1250,61 @@ function handleMarkerClick(marker, map) {
|
|||
|
||||
// Ajouter un écouteur d'événements pour le changement de visibilité des calques
|
||||
function init() {
|
||||
bindEventsOnJosmRemote();
|
||||
onMapMoveEnd();
|
||||
map.on('moveend', onMapMoveEnd);
|
||||
$('#spinning_icon').hide();
|
||||
|
||||
/**
|
||||
* boutons de changement de filtres et de rechargement des bornes à l'affichage
|
||||
*/
|
||||
$('#removeMarkers').on('click', function () {
|
||||
supprimerMarqueurs();
|
||||
});
|
||||
$('#load').on('click', function () {
|
||||
loadOverpassQuery();
|
||||
});
|
||||
$('#toggleSidePanel').on('click', function () {
|
||||
$('body').toggleClass('side-panel-open');
|
||||
});
|
||||
$('#chercherButton').on('click', function () {
|
||||
supprimerMarqueurs();
|
||||
loadOverpassQuery();
|
||||
});
|
||||
$('#setRandomView').on('click', function () {
|
||||
setRandomView();
|
||||
loadOverpassQuery();
|
||||
});
|
||||
$('#filterUnkown').on('click', function () {
|
||||
display_unknown_max_power_station = cycleVariableState(display_unknown_max_power_station, '#filterUnkown');
|
||||
showActiveFilter(display_unknown_max_power_station, '#filterUnkown');
|
||||
refreshDisplay();
|
||||
});
|
||||
/**
|
||||
* toggle des alertes de tags décrivant la présence de cable
|
||||
*/
|
||||
$('#cableMissing').on('click', function () {
|
||||
display_alert_cable_missing = !display_alert_cable_missing;
|
||||
showActiveFilter(display_alert_cable_missing, '#cableMissing');
|
||||
refreshDisplay();
|
||||
});
|
||||
showActiveFilter(display_unknown_max_power_station, '#filterUnkown');
|
||||
|
||||
$('#shareUrl').on('click', copyCurrentUrl);
|
||||
|
||||
// Initialisation des états des checkboxes des filtres selon les valeurs de configuration
|
||||
Object.keys(lcm_config.filterConfigs).forEach(filterId => {
|
||||
console.log("checbox ", $(`#${filterId}`) , lcm_config.filterConfigs[filterId] , lcm_config)
|
||||
$(`#${filterId}`).prop('checked', lcm_config.filterConfigs[filterId]);
|
||||
});
|
||||
// Écouteurs pour les filtres
|
||||
Object.keys(lcm_config.filterConfigs).forEach(filterId => {
|
||||
$(`#${filterId}`).on('change', function() {
|
||||
lcm_config[lcm_config.filterConfigs[filterId]] = this.checked;
|
||||
refreshDisplay();
|
||||
});
|
||||
});
|
||||
|
||||
food_places_markers.addTo(map);
|
||||
$('#found_charging_stations').hide();
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue