Joururi/velo-park
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better filter appearance and performance

Browse Source
This commit is contained in:
Alexis
2026-04-01 22:28:49 +02:00
parent 3b81dea46c
commit 3cb6043859
6 changed files with 106 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/BikeClusterLayer.vue
View File

@@ -17,3 +17,39 @@ defineProps<{
<BikeMarker v-once v-for="park in parkings" :key="park.id_parc_velo" :park :group />
</LMarkerClusterGroup>
</template>
<style lang="scss">
.marker-cluster div {
font-family: var(--default-font-family);
font-size: .9em;
}
.marker-cluster span {
font-weight: var(--font-weight-bold);
opacity: .85;
}
.marker-cluster-small {
background-color: color-mix(in srgb, var(--color-green-500) 12.5%, transparent);
div {
background-color: color-mix(in srgb, var(--color-green-500) 20%, transparent);
}
}
.marker-cluster-medium {
background-color: color-mix(in srgb, var(--color-yellow-400) 12.5%, transparent);
div {
background-color: color-mix(in srgb, var(--color-yellow-400) 20%, transparent);
}
}
.marker-cluster-large {
background-color: color-mix(in srgb, var(--color-rose-400) 12.5%, transparent);
div {
background-color: color-mix(in srgb, var(--color-rose-400) 20%, transparent);
}
}
</style>

21
src/components/BikeFilters.vue
View File

@@ -14,21 +14,22 @@ defineProps<{
</script>
<template>
<aside class="max-w-xs absolute top-5 left-5 z-10 p-2 bg-slate-50 text-slate-950 text-xs rounded-xs">
<form>
<div class="grid grid-cols-2 gap-1.5">
<div class="col-span-2">
<aside class="max-w-xs absolute top-5 left-5 z-10 p-2 bg-slate-50 text-slate-950 rounded-xs">
<form class="grid grid-cols-1 gap-3">
<fieldset>
<legend
class="mb-1.5 text-sm font-medium relative isolate before:contents-[''] before:block before:w-full before:bg-amber-500/15 before:h-2 before:absolute before:bottom-0.5 before:-z-10">
Types d'emplacements
</legend>
<div class="grid grid-cols-1 gap-1.5">
<Checkbox v-model="filterUncovered" :count="nbUncovered">Non-abrités</Checkbox>
</div>
<div class="col-span-2">
<Checkbox v-model="filterCovered" :count="nbCovered">Abrités</Checkbox>
</div>
<div class="col-span-2">
<Checkbox v-model="filterKorrigo" :count="nbKorrigo">Abonnement Korrigo</Checkbox>
</div>
</fieldset>
<ParkingSpaceRange />
</div>
<ParkingSpaceRange />
</form>
</aside>
</template>

24
src/components/BikeMap.vue
View File

@@ -100,28 +100,4 @@ const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
.leaflet-container {
background-color: var(--background);
}
.marker-cluster-small {
background-color: color-mix(in srgb, var(--color-green-500) 25%, transparent);
div {
background-color: color-mix(in srgb, var(--color-green-500) 33%, transparent);
}
}
.marker-cluster-medium {
background-color: color-mix(in srgb, var(--color-yellow-400) 25%, transparent);
div {
background-color: color-mix(in srgb, var(--color-yellow-400) 33%, transparent);
}
}
.marker-cluster-large {
background-color: color-mix(in srgb, var(--color-rose-400) 25%, transparent);
div {
background-color: color-mix(in srgb, var(--color-rose-400) 33%, transparent);
}
}
</style>

32
src/components/BikeMarker.vue
View File

@@ -6,8 +6,10 @@ import { LIcon, LMarker, LPopup } from '@vue-leaflet/vue-leaflet';
import type { PointTuple } from 'leaflet';
import { computed, ref } from 'vue';
import { UNCOVERED_KEY, COVERED_KEY, BOXED_KEY, KORRIGO_KEY } from '@/utils/const';
import { storeToRefs } from 'pinia';
import { useMap } from '@/stores/map';
defineProps<{
const props = defineProps<{
park: BikeParking
group: 'covered' | 'non-covered' | 'premium'
}>()
@@ -17,10 +19,17 @@ const normalIconSize: PointTuple = [30, 30]
const iconSize = ref<PointTuple>(normalIconSize)
const iconAnchor = computed<PointTuple>(() => [iconSize.value[0] / 2, iconSize.value[1]])
const popupOffset = [0, iconSize.value[0] * -0.66]
const { spotsRange } = storeToRefs(useMap())
const isMarkerVisible = computed(() => {
return spotsRange.value[0] <= props.park.nb_total_place && props.park.nb_total_place <= spotsRange.value[1]
})
</script>
<template>
<LMarker :lat-lng="[park.geo_point_2d.lat, park.geo_point_2d.lon]">
{{ spotsRange }}
<LMarker :lat-lng="[park.geo_point_2d.lat, park.geo_point_2d.lon]" :visible="isMarkerVisible">
<LPopup :options="{ offset: popupOffset, maxWidth: 520, minWidth: 240 }">
<div>
<h2 class="font-bold">
@@ -29,6 +38,16 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
<div class="text-xs">
{{ park.type }}, <strong>{{ park.nb_total_place }} places</strong>
<template v-if="park.nb_support_cargo">
<br>
…dont <strong>{{ park.nb_support_cargo }} supports cargo</strong>
</template>
<template v-if="park.nb_support_std">
<br>
…dont <strong>{{ park.nb_support_std }} supports STD</strong>
</template>
</div>
<div v-if="park.condition_acces === 'Abonnement Korrigo'">
@@ -52,8 +71,8 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
{ 'highlight': park.type === BOXED_KEY || park.type === COVERED_KEY },
)">
<PhBicycle v-if="park.type === UNCOVERED_KEY" size="18" />
<PhWarehouse v-else-if="park.type === COVERED_KEY" size="18" />
<PhSquareHalf v-else-if="park.type === BOXED_KEY" size="18" />
<PhWarehouse v-else-if="park.type === COVERED_KEY" size="18" weight="light" />
<PhSquareHalf v-else-if="park.type === BOXED_KEY" size="18" weight="light" />
<PhLockKey v-else-if="park.condition_acces === KORRIGO_KEY" size="18" weight="fill" />
</LIcon>
</LMarker>
@@ -73,9 +92,8 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
}
&.highlight {
color: var(--color-background);
border: 2px solid var(--color-muted-foreground);
background-color: var(--color-foreground);
color: var(--color-amber-400);
border: 2px solid color-mix(in srgb, var(--color-amber-400) 50%, var(--color-background));
}
}

54
src/components/filters/ParkingSpaceRange.vue
View File

@@ -1,43 +1,43 @@
<script lang="ts" setup>
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from 'reka-ui'
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useMap, SPOTS_MIN, SPOTS_MAX } from '@/stores/map'
import { ref } from 'vue'
import { useDebounceFn } from '@vueuse/core'
const MIN = 0
const MAX = 100
const { spotsRange } = storeToRefs(useMap())
const minSpots = ref(MIN)
const maxSpots = ref(MAX)
const spotsRange = ref([minSpots.value, maxSpots.value])
const MIN = SPOTS_MIN
const MAX = SPOTS_MAX
watch(spotsRange, ([newMin, newMax]) => {
if (newMin === undefined || newMax === undefined) return
minSpots.value = newMin
maxSpots.value = newMax
})
const localRange = ref<[number, number]>([...spotsRange.value] as [number, number])
watch(minSpots, (val) => {
if (val !== spotsRange.value[0])
spotsRange.value = [Math.min(val, spotsRange.value[1]!), spotsRange.value[1]!]
})
const commitToStore = useDebounceFn((val: [number, number]) => {
spotsRange.value = val
}, 500)
watch(maxSpots, (val) => {
if (val !== spotsRange.value[1])
spotsRange.value = [spotsRange.value[0]!, Math.max(val, spotsRange.value[0]!)]
})
function onRangeUpdate(val: number[] | undefined) {
if (!val) return
localRange.value = val as [number, number]
commitToStore(val as [number, number])
}
</script>
<template>
<div class="mt-1 col-span-2">
<label class="flex justify-between">
<span>Nombre de places</span>
<span class="text-muted-foreground">
{{ spotsRange[0] }} – {{ spotsRange[1] }}<template v-if="spotsRange[1] === MAX">+</template>
<div>
<div class="flex items-center justify-between">
<span
class="text-sm font-medium relative isolate before:contents-[''] before:block before:w-full before:bg-amber-500/15 before:h-2 before:absolute before:bottom-0.5 before:-z-10">Places
totales</span>
<span class="text-xs text-muted-foreground">
{{ localRange[0] }} – {{ localRange[1] }}<template v-if="localRange[1] === MAX">+</template>
</span>
</label>
</div>
<div class="mt-1">
<SliderRoot v-model="spotsRange" class="relative flex items-center select-none touch-none w-full py-2" :min="MIN"
:max="MAX" :step="5">
<SliderRoot :model-value="localRange" @update:model-value="onRangeUpdate"
class="relative flex items-center select-none touch-none w-full py-2" :min="MIN" :max="MAX" :step="5">
<SliderTrack class="bg-muted/10 relative grow rounded-full h-1.5">
<SliderRange class="absolute bg-primary rounded-full h-full" />
</SliderTrack>

8
src/stores/map.ts
View File

@@ -2,18 +2,23 @@ import type { PointTuple } from 'leaflet'
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const SPOTS_MIN = 1
export const SPOTS_MAX = 99
export const useMap = defineStore('map', () => {
const zoom = ref(10)
const minZoom = 6
const center = ref<PointTuple>([48.11180645878813, -1.6637869497745246])
const maxClusterRadius = 30
const maxClusterRadius = 28
const disableClusteringAtZoom = 17
const filterUncovered = ref(true)
const filterCovered = ref(true)
const filterKorrigo = ref(true)
const spotsRange = ref<[number, number]>([SPOTS_MIN, SPOTS_MAX])
return {
zoom,
minZoom,
@@ -23,5 +28,6 @@ export const useMap = defineStore('map', () => {
filterUncovered,
filterCovered,
filterKorrigo,
spotsRange,
}
})