mirror of
https://forge.chapril.org/tykayn/libre-charge-map
synced 2025-06-20 01:34:43 +02:00
add filters for sockets
This commit is contained in:
Tykayn
tykayn
parent
ebb2c87bcc
commit
edef80c926
5 changed files with 301 additions and 99 deletions
89
index.html
89
index.html
|
|
@ -116,46 +116,55 @@
|
|||
⚙️ Filtres:
|
||||
</h2>
|
||||
<div class="filter-group">
|
||||
|
||||
<div class="filter-group">
|
||||
Montrer:
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" id="filterCableAttached"> Prise avec câble attaché
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<input type="checkbox" id="filterCCS"> Prise CCS
|
||||
</label>
|
||||
<br>
|
||||
<label>
|
||||
<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>
|
||||
<h3>Types de prises</h3>
|
||||
<label>
|
||||
<input type="checkbox" id="filterCableAttached">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span>Prise avec câble attaché</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="filterCCS">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span>Prise CCS</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="filterType2">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span>Prise Type 2</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="filterDomestic">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span>Prise domestique</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="filterChademo">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span>Prise CHAdeMO</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="filterType1">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span>Prise Type 1</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="filterType3">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span>Prise Type 3</span>
|
||||
</label>
|
||||
<hr>
|
||||
<h3>Qualité des données</h3>
|
||||
<label>
|
||||
<input type="checkbox" id="filterQuality">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span>Contrôle qualité</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="checkbox" id="filterUnkown">
|
||||
<span class="checkbox-custom"></span>
|
||||
<span>❓ kW max inconnu</span>
|
||||
</label>
|
||||
</div>
|
||||
<!--
|
||||
<br>
|
||||
<fieldset class="wip">
|
||||
|
|
|
|||
|
|
@ -342,7 +342,7 @@ function calculerPourcentage(partie, total, reduc) {
|
|||
return ((partie / total) * 100 * coef_reduction).toFixed(1)
|
||||
}
|
||||
|
||||
function displayStatsFromGeoJson(resultAsGeojson) {
|
||||
function displayStatsFromGeoJson(resultAsGeojson, stats) {
|
||||
let count = resultAsGeojson.features.length;
|
||||
let count_station_output = 0;
|
||||
let count_ref_eu = 0;
|
||||
|
|
@ -355,7 +355,6 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
|||
let count_estimated_type2combo = 0;
|
||||
let count_found_type2combo = 0;
|
||||
let count_found_type2 = 0;
|
||||
let count_hidden_by_filters = 0;
|
||||
|
||||
// Compter les filtres désactivés
|
||||
let disabledFilters = 0;
|
||||
|
|
@ -363,7 +362,7 @@ function displayStatsFromGeoJson(resultAsGeojson) {
|
|||
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' : ''})` : ''));
|
||||
$('#count_features_fond').html('⚡' + count + ' stations' + (disabledFilters > 0 ? ` (${disabledFilters} filtre${disabledFilters > 1 ? 's' : ''} désactivé${disabledFilters > 1 ? 's' : ''}, ${stats.count_hidden_by_filters} masqué${stats.count_hidden_by_filters > 1 ? 's' : ''})` : ''));
|
||||
|
||||
resultAsGeojson.features.map(feature => {
|
||||
let found_type2_combo = false;
|
||||
|
|
@ -501,7 +500,11 @@ function displayPointsFromApi(points, convert_to_osm_json) {
|
|||
geojsondata = osmtogeojson(points);
|
||||
}
|
||||
|
||||
displayStatsFromGeoJson(geojsondata);
|
||||
let stats = {
|
||||
count_hidden_by_filters: 0
|
||||
};
|
||||
|
||||
displayStatsFromGeoJson(geojsondata, stats);
|
||||
|
||||
let resultLayer = L.geoJson(geojsondata, {
|
||||
style: function (feature) {
|
||||
|
|
@ -523,7 +526,9 @@ function displayPointsFromApi(points, convert_to_osm_json) {
|
|||
supprimerMarqueurs();
|
||||
displayPointsFromApi();
|
||||
},
|
||||
onEachFeature: eachFeature,
|
||||
onEachFeature: function(feature, layer) {
|
||||
eachFeature(feature, layer, stats);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -569,7 +574,7 @@ function makePopupOfFeature(feature) {
|
|||
* @param feature
|
||||
* @param layer
|
||||
*/
|
||||
function eachFeature(feature, layer) {
|
||||
function eachFeature(feature, layer, stats) {
|
||||
let link_josm = createJOSMEditLink(feature);
|
||||
|
||||
let popupContent = makePopupOfFeature(feature);
|
||||
|
|
@ -581,32 +586,32 @@ function eachFeature(feature, layer) {
|
|||
|
||||
// Vérifier les filtres activés
|
||||
if (lcm_config.filterCCS && !feature.properties.tags['socket:type2_combo']) {
|
||||
count_hidden_by_filters++;
|
||||
stats.count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lcm_config.filterType2 && !feature.properties.tags['socket:type2']) {
|
||||
count_hidden_by_filters++;
|
||||
stats.count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lcm_config.filterDomestic && !feature.properties.tags['socket:typee']) {
|
||||
count_hidden_by_filters++;
|
||||
stats.count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lcm_config.filterChademo && !feature.properties.tags['socket:chademo']) {
|
||||
count_hidden_by_filters++;
|
||||
stats.count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lcm_config.filterType1 && !feature.properties.tags['socket:type1']) {
|
||||
count_hidden_by_filters++;
|
||||
stats.count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
if (lcm_config.filterType3 && !feature.properties.tags['socket:type3']) {
|
||||
count_hidden_by_filters++;
|
||||
stats.count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -619,7 +624,7 @@ function eachFeature(feature, layer) {
|
|||
}
|
||||
});
|
||||
if (!hasCableAttached) {
|
||||
count_hidden_by_filters++;
|
||||
stats.count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
@ -631,7 +636,7 @@ function eachFeature(feature, layer) {
|
|||
feature.properties.tags['payment:none'] ||
|
||||
feature.properties.tags['opening_hours'];
|
||||
if (!hasQualityInfo) {
|
||||
count_hidden_by_filters++;
|
||||
stats.count_hidden_by_filters++;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
|
@ -1316,11 +1321,11 @@ function init() {
|
|||
};
|
||||
|
||||
// Créer deux contrôles de couches séparés
|
||||
const baseLayerControl = L.control.layers(baseLayers, null, {
|
||||
collapsed: true,
|
||||
className: 'leaflet-control-layers base-layers',
|
||||
id: 'base-layers-control'
|
||||
}).addTo(map);
|
||||
// const baseLayerControl = 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,
|
||||
|
|
|
|||
123
styles/filters.scss
Normal file
123
styles/filters.scss
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
// Variables
|
||||
$primary-color: #28a745;
|
||||
$border-color: #6c757d;
|
||||
$hover-bg: #e9ecef;
|
||||
$text-color: #495057;
|
||||
$disabled-color: #adb5bd;
|
||||
|
||||
// Mixins
|
||||
@mixin flex-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@mixin transition($property: all, $duration: 0.3s, $timing: ease) {
|
||||
transition: $property $duration $timing;
|
||||
}
|
||||
|
||||
// Styles pour le groupe de filtres
|
||||
.filter-group {
|
||||
margin: 15px 0;
|
||||
padding: 15px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
h3 {
|
||||
margin-bottom: 10px;
|
||||
color: $text-color;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
label {
|
||||
@include flex-center;
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
@include transition;
|
||||
border-radius: 4px;
|
||||
margin: 4px 0;
|
||||
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
height: 0;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.checkbox-custom {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #fff;
|
||||
border: 2px solid $border-color;
|
||||
border-radius: 4px;
|
||||
margin-right: 10px;
|
||||
@include transition;
|
||||
|
||||
label:hover & {
|
||||
border-color: darken($border-color, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked + .checkbox-custom {
|
||||
background: $primary-color;
|
||||
border-color: $primary-color;
|
||||
animation: checkboxPop 0.3s ease;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 6px;
|
||||
top: 2px;
|
||||
width: 5px;
|
||||
height: 10px;
|
||||
border: solid white;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 15px 0;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
background: #dee2e6;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $text-color;
|
||||
@include transition(color);
|
||||
}
|
||||
|
||||
label:hover span {
|
||||
color: darken($text-color, 10%);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:disabled {
|
||||
+ .checkbox-custom {
|
||||
background: $hover-bg;
|
||||
border-color: $disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
+ .checkbox-custom + span {
|
||||
color: $disabled-color;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Animation
|
||||
@keyframes checkboxPop {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
|
@ -400,46 +400,6 @@ button+button {
|
|||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.filter-group button {
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
&:after {
|
||||
position: relative;
|
||||
float: right;
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
&.filter-state-hide:after {
|
||||
content: "cacher";
|
||||
color: grey;
|
||||
}
|
||||
|
||||
&.filter-state-show:after {
|
||||
content: "montrer";
|
||||
color: green;
|
||||
}
|
||||
|
||||
&.filter-state-showOnly:after {
|
||||
content: "montrer uniquement";
|
||||
color: orange;
|
||||
}
|
||||
|
||||
&.filter-state-hide {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&.filter-state-show {
|
||||
color: green;
|
||||
}
|
||||
|
||||
&.filter-state-showOnly {
|
||||
color: orange;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-control-layers-toggle {
|
||||
background-size: contain;
|
||||
}
|
||||
|
|
|
|||
105
styles/style.css
105
styles/style.css
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue