mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
filter min power slider, display count of hidden stations
This commit is contained in:
Tykayn
tykayn
parent
33c4bd0668
commit
a114635fce
10 changed files with 177 additions and 51 deletions
11
index.html
11
index.html
|
|
@ -139,8 +139,6 @@
|
|||
<br>
|
||||
<!-- TODO filtrer les bornes selon la puissance -->
|
||||
|
||||
|
||||
</div>
|
||||
<div id="statsChargingStation">
|
||||
|
||||
<h2 id="toggle-stats" style="cursor: pointer;">
|
||||
|
|
@ -168,7 +166,6 @@
|
|||
</p>
|
||||
<p>
|
||||
|
||||
<br>
|
||||
Fait par <a href="https://mastodon.cipherbliss.com/@tykayn">Tykayn</a> - <a
|
||||
href="https://www.cipherbliss.com">www.cipherbliss.com</a>.
|
||||
<a href="https://forge.chapril.org/tykayn/">Sources disponibles sur la forge du Chapril.</a>
|
||||
|
|
@ -181,11 +178,17 @@
|
|||
<img class="icon-img" src="img/chademo.svg" alt="prise">
|
||||
</div>
|
||||
<br>
|
||||
<span class="small">
|
||||
|
||||
icones
|
||||
câble électrique <a href="https://www.flaticon.com/fr/icones-gratuites/energie" title="energie icônes">Energie
|
||||
câble électrique <a href="https://www.flaticon.com/fr/icones-gratuites/energie"
|
||||
title="energie icônes">Energie
|
||||
icônes créées par rukanicon - Flaticon</a>
|
||||
</span>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ const lcm_config = {
|
|||
hide_osmose_markers_if_close_to_existing_charging_stations_distance: 10, // meters
|
||||
|
||||
filter_max_output: true,
|
||||
filter_max_output_min: 1,
|
||||
filter_max_output_max: 401,
|
||||
filter_max_output_min: 0,
|
||||
filter_max_output_max: 499,
|
||||
filter_max_output_default_value: 1,
|
||||
filter_unknown_output: true,
|
||||
|
||||
max_possible_station_output: 400,
|
||||
max_possible_station_output: 499,
|
||||
tileServers: {
|
||||
osm: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||
cycle: 'https://{s}.tile.thunderforest.org/cycle/{z}/{x}/{y}.png',
|
||||
|
|
|
|||
|
|
@ -344,6 +344,9 @@ function calculerPourcentage(partie, total, reduc) {
|
|||
// Ajouter une variable globale pour stocker le nombre d'issues Osmose
|
||||
let osmoseIssuesCount = 0;
|
||||
|
||||
// Ajouter une variable globale pour stocker le nombre de stations affichées
|
||||
let displayedStationsCount = 0;
|
||||
|
||||
function displayStatsFromGeoJson(resultAsGeojson) {
|
||||
let count = resultAsGeojson.features.length;
|
||||
let count_station_output = 0;
|
||||
|
|
@ -463,6 +466,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
|||
|
||||
// Remplacer la ligne existante par un appel à updateCounters
|
||||
updateCounters();
|
||||
|
||||
}
|
||||
|
||||
// Ajouter une fonction pour mettre à jour les compteurs
|
||||
|
|
@ -506,6 +510,9 @@ function displayPointsFromApi(points, convert_to_osm_json) {
|
|||
geojsondata = osmtogeojson(points);
|
||||
}
|
||||
|
||||
// Réinitialiser le compteur avant d'afficher les points
|
||||
displayedStationsCount = 0;
|
||||
|
||||
displayStatsFromGeoJson(geojsondata);
|
||||
|
||||
let resultLayer = L.geoJson(geojsondata, {
|
||||
|
|
@ -530,6 +537,9 @@ function displayPointsFromApi(points, convert_to_osm_json) {
|
|||
},
|
||||
onEachFeature: eachFeature,
|
||||
});
|
||||
|
||||
// Mettre à jour le compteur de stations filtrées
|
||||
updateFilteredStationsCount();
|
||||
}
|
||||
|
||||
function makePopupOfFeature(feature) {
|
||||
|
|
@ -580,7 +590,6 @@ function eachFeature(feature, layer) {
|
|||
|
||||
// Filtrage par puissance
|
||||
if (outPowerGuessed === 0 || outPowerGuessed === null) {
|
||||
// Gestion des stations à puissance inconnue
|
||||
if (display_unknown_max_power_station === 'hide') {
|
||||
return;
|
||||
}
|
||||
|
|
@ -591,6 +600,9 @@ function eachFeature(feature, layer) {
|
|||
}
|
||||
}
|
||||
|
||||
// Incrémenter le compteur de stations affichées
|
||||
displayedStationsCount++;
|
||||
|
||||
let link_josm = createJOSMEditLink(feature);
|
||||
|
||||
let popupContent = makePopupOfFeature(feature);
|
||||
|
|
@ -840,7 +852,8 @@ function refreshDisplay(convert_points_to_osm = false) {
|
|||
supprimerMarqueurs();
|
||||
if (geojsondata) {
|
||||
displayPointsFromApi(geojsondata, convert_points_to_osm);
|
||||
updateCounters(); // Mettre à jour les compteurs après le filtrage
|
||||
updateCounters();
|
||||
updateFilteredStationsCount();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1260,6 +1273,12 @@ function init() {
|
|||
"Bornes potentielles (Osmose)": osmose_markers
|
||||
};
|
||||
|
||||
// const baseLayersControl = L.control.layers(baseLayers, null, {
|
||||
// collapsed: true,
|
||||
// className: 'leaflet-control-layers base-layers',
|
||||
// id: 'base-layers-control'
|
||||
// }).addTo(map);
|
||||
|
||||
const overlayControl = L.control.layers(null, overlayMaps, {
|
||||
collapsed: true,
|
||||
className: 'leaflet-control-layers overlay-layers',
|
||||
|
|
@ -1334,3 +1353,17 @@ init()
|
|||
// Créer un nouveau pane pour les marqueurs Osmose avec un zIndex plus élevé
|
||||
map.createPane('osmosePane');
|
||||
map.getPane('osmosePane').style.zIndex = 1000;
|
||||
|
||||
// Ajouter une nouvelle fonction pour mettre à jour le compteur de stations filtrées
|
||||
function updateFilteredStationsCount() {
|
||||
const totalStations = geojsondata ? geojsondata.features.length : 0;
|
||||
const filterStats = `<div class="filter-stats">${displayedStationsCount} stations sur ${totalStations} trouvées</div>`;
|
||||
|
||||
// Mettre à jour ou créer l'élément après le slider
|
||||
let existingStats = $('.filter-stats');
|
||||
if (existingStats.length) {
|
||||
existingStats.replaceWith(filterStats);
|
||||
} else {
|
||||
$('#filter_max_output_display').after(filterStats);
|
||||
}
|
||||
}
|
||||
|
|
@ -4,3 +4,8 @@
|
|||
background: #ccc;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.filter-stats {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
}
|
||||
|
|
@ -1,10 +1,14 @@
|
|||
/* Style pour mobile ---------------------------------- */
|
||||
@media (max-width: 1200px) {
|
||||
@media (max-width: 700px) {
|
||||
header h1 {
|
||||
width: 100vw;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#searchButton {
|
||||
margin-top: 0rem;
|
||||
}
|
||||
|
||||
#bars_power {
|
||||
position: absolute;
|
||||
top: 59.1vh;
|
||||
|
|
|
|||
|
|
@ -10,6 +10,12 @@ overrides leaflet
|
|||
border: solid 3px white;
|
||||
}
|
||||
|
||||
.leaflet-control-layers {
|
||||
&.leaflet-control-layers-toggle {
|
||||
background: url('img/burger.png');
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles pour les contrôles de couches */
|
||||
.leaflet-control-layers {
|
||||
&.base-layers {
|
||||
|
|
@ -52,3 +58,35 @@ overrides leaflet
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Styles pour les contrôles de calques
|
||||
.leaflet-control-layers {
|
||||
&.base-layers {
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url('../img/burger.png') !important;
|
||||
background-size: 20px 20px !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.overlay-layers {
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url('../img/pizza.png') !important;
|
||||
background-size: 20px 20px !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-color: #3f74aa !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Style commun pour le conteneur
|
||||
background: white;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
|
@ -19,7 +19,10 @@
|
|||
|
||||
#searchButton {
|
||||
margin-right: 0rem;
|
||||
margin-top: -4.8rem;
|
||||
margin-top: -3.2rem;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
background: var(--link-color);
|
||||
}
|
||||
|
||||
#count_features_fond {
|
||||
|
|
|
|||
|
|
@ -650,6 +650,9 @@ header {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
@import '_osmose.scss';
|
||||
@import '_recherche.scss';
|
||||
|
|
|
|||
|
|
@ -508,6 +508,9 @@ header {
|
|||
height: 0.4rem;
|
||||
overflow: hidden; }
|
||||
|
||||
.small {
|
||||
font-size: 0.8rem; }
|
||||
|
||||
.osmose-marker-drop:hover .osmose-marker-inner {
|
||||
animation: bounce 0.5s ease infinite;
|
||||
background-color: #9F2BFF; }
|
||||
|
|
@ -569,7 +572,10 @@ header {
|
|||
|
||||
#searchButton {
|
||||
margin-right: 0rem;
|
||||
margin-top: -4.8rem; }
|
||||
margin-top: -3.2rem;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
background: var(--link-color); }
|
||||
|
||||
#count_features_fond {
|
||||
position: fixed;
|
||||
|
|
@ -600,12 +606,19 @@ header {
|
|||
background: #ccc;
|
||||
border-radius: 5px; }
|
||||
|
||||
.filter-stats {
|
||||
font-size: 0.8rem;
|
||||
color: #666; }
|
||||
|
||||
/* Style pour mobile ---------------------------------- */
|
||||
@media (max-width: 1200px) {
|
||||
@media (max-width: 700px) {
|
||||
header h1 {
|
||||
width: 100vw;
|
||||
font-size: 1.5rem; }
|
||||
|
||||
#searchButton {
|
||||
margin-top: 0rem; }
|
||||
|
||||
#bars_power {
|
||||
position: absolute;
|
||||
top: 59.1vh;
|
||||
|
|
@ -672,6 +685,9 @@ overrides leaflet
|
|||
.leaflet-interactive {
|
||||
border: solid 3px white; }
|
||||
|
||||
.leaflet-control-layers.leaflet-control-layers-toggle {
|
||||
background: url("img/burger.png"); }
|
||||
|
||||
/* Styles pour les contrôles de couches */
|
||||
.leaflet-control-layers.base-layers {
|
||||
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 9l10-5 10 5-10 5-10-5zm0 6l10 5 10-5M2 12l10 5 10-5"/></svg>');
|
||||
|
|
@ -702,6 +718,27 @@ overrides leaflet
|
|||
margin-left: 5px;
|
||||
font-size: 12px; }
|
||||
|
||||
.leaflet-control-layers {
|
||||
background: white;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4); }
|
||||
.leaflet-control-layers.base-layers .leaflet-control-layers-toggle {
|
||||
background-image: url("../img/burger.png") !important;
|
||||
background-size: 20px 20px !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important; }
|
||||
.leaflet-control-layers.overlay-layers .leaflet-control-layers-toggle {
|
||||
background-image: url("../img/pizza.png") !important;
|
||||
background-size: 20px 20px !important;
|
||||
background-position: center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-color: #3f74aa !important;
|
||||
width: 30px !important;
|
||||
height: 30px !important; }
|
||||
|
||||
@keyframes rainbow-border {
|
||||
0% {
|
||||
border-left-color: #ff0000; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue