Added base types filters

This commit is contained in:
Alexis
2026-03-27 22:15:55 +01:00
parent 07feed0355
commit 782162d410
8 changed files with 250 additions and 18 deletions

View File

@@ -22,6 +22,7 @@
"@vueuse/core": "^14.2.1",
"leaflet": "^1.9.4",
"pinia": "^3.0.4",
"reka-ui": "^2.9.2",
"tailwindcss": "^4.2.2",
"vue": "^3.5.30",
"vue-leaflet-markercluster": "^0.6.1",

120
pnpm-lock.yaml generated
View File

@@ -29,6 +29,9 @@ importers:
pinia:
specifier: ^3.0.4
version: 3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))
reka-ui:
specifier: ^2.9.2
version: 2.9.2(vue@3.5.30(typescript@5.9.3))
tailwindcss:
specifier: ^4.2.2
version: 4.2.2
@@ -437,6 +440,18 @@ packages:
resolution: {integrity: sha512-iH1B076HoAshH1mLpHMgwdGeTs0CYwL0SPMkGuSebZrwBp16v415e9NZXg2jtrqPVQjf6IANe2Vtlr5KswtcZQ==}
engines: {node: ^20.19.0 || ^22.13.0 || >=24}
'@floating-ui/core@1.7.5':
resolution: {integrity: sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==}
'@floating-ui/dom@1.7.6':
resolution: {integrity: sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==}
'@floating-ui/utils@0.2.11':
resolution: {integrity: sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==}
'@floating-ui/vue@1.1.11':
resolution: {integrity: sha512-HzHKCNVxnGS35r9fCHBc3+uCnjw9IWIlCPL683cGgM9Kgj2BiAl8x1mS7vtvP6F9S/e/q4O6MApwSHj8hNLGfw==}
'@humanfs/core@0.19.1':
resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
engines: {node: '>=18.18.0'}
@@ -453,6 +468,12 @@ packages:
resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
engines: {node: '>=18.18'}
'@internationalized/date@3.12.0':
resolution: {integrity: sha512-/PyIMzK29jtXaGU23qTvNZxvBXRtKbNnGDFD+PY6CZw/Y8Ex8pFUzkuCJCG9aOqmShjqhS9mPqP6Dk5onQY8rQ==}
'@internationalized/number@3.6.5':
resolution: {integrity: sha512-6hY4Kl4HPBvtfS62asS/R22JzNNy8vi/Ssev7x6EobfCp+9QIB2hKvI2EtbdJ0VSQacxVNtqhE/NmF/NZ0gm6g==}
'@jridgewell/gen-mapping@0.3.13':
resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
@@ -969,6 +990,9 @@ packages:
cpu: [x64]
os: [win32]
'@swc/helpers@0.5.20':
resolution: {integrity: sha512-2egEBHUMasdypIzrprsu8g+OEVd7Vp2MM3a2eVlM/cyFYto0nGz5BX5BTgh/ShZZI9ed+ozEq+Ngt+rgmUs8tw==}
'@tailwindcss/node@4.2.2':
resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
@@ -1063,6 +1087,14 @@ packages:
peerDependencies:
vite: ^5.2.0 || ^6 || ^7 || ^8
'@tanstack/virtual-core@3.13.23':
resolution: {integrity: sha512-zSz2Z2HNyLjCplANTDyl3BcdQJc2k1+yyFoKhNRmCr7V7dY8o8q5m8uFTI1/Pg1kL+Hgrz6u3Xo6eFUB7l66cg==}
'@tanstack/vue-virtual@3.13.23':
resolution: {integrity: sha512-b5jPluAR6U3eOq6GWAYSpj3ugnAIZgGR0e6aGAgyRse0Yu6MVQQ0ZWm9SArSXWtageogn6bkVD8D//c4IjW3xQ==}
peerDependencies:
vue: ^2.7.0 || ^3.0.0
'@tsconfig/node24@24.0.4':
resolution: {integrity: sha512-2A933l5P5oCbv6qSxHs7ckKwobs8BDAe9SJ/Xr2Hy+nDlwmLE1GhFh/g/vXGRZWgxBg9nX/5piDtHR9Dkw/XuA==}
@@ -1310,6 +1342,10 @@ packages:
resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==}
engines: {node: '>=14'}
aria-hidden@1.2.6:
resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
engines: {node: '>=10'}
ast-kit@2.2.0:
resolution: {integrity: sha512-m1Q/RaVOnTp9JxPX+F+Zn7IcLYMzM8kZofDImfsKZd8MbR+ikdOzTeztStWqfrqIxZnYWryyI9ePm3NGjnZgGw==}
engines: {node: '>=20.19.0'}
@@ -1417,6 +1453,9 @@ packages:
resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
engines: {node: '>=12'}
defu@6.1.4:
resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==}
detect-libc@2.1.2:
resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
engines: {node: '>=8'}
@@ -1957,6 +1996,11 @@ packages:
resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
engines: {node: '>= 20.19.0'}
reka-ui@2.9.2:
resolution: {integrity: sha512-/t4e6y1hcG+uDuRfpg6tbMz3uUEvRzNco6NeYTufoJeUghy5Iosxos5YL/p+ieAsid84sdMX9OrgDqpEuCJhBw==}
peerDependencies:
vue: '>= 3.4.0'
reusify@1.1.0:
resolution: {integrity: sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==}
engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
@@ -2307,6 +2351,17 @@ packages:
vscode-uri@3.1.0:
resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
vue-demi@0.14.10:
resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
engines: {node: '>=12'}
hasBin: true
peerDependencies:
'@vue/composition-api': ^1.0.0-rc.1
vue: ^3.0.0-0 || ^2.6.0
peerDependenciesMeta:
'@vue/composition-api':
optional: true
vue-eslint-parser@10.4.0:
resolution: {integrity: sha512-Vxi9pJdbN3ZnVGLODVtZ7y4Y2kzAAE2Cm0CZ3ZDRvydVYxZ6VrnBhLikBsRS+dpwj4Jv4UCv21PTEwF5rQ9WXg==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2687,6 +2742,26 @@ snapshots:
'@eslint/core': 1.1.1
levn: 0.4.1
'@floating-ui/core@1.7.5':
dependencies:
'@floating-ui/utils': 0.2.11
'@floating-ui/dom@1.7.6':
dependencies:
'@floating-ui/core': 1.7.5
'@floating-ui/utils': 0.2.11
'@floating-ui/utils@0.2.11': {}
'@floating-ui/vue@1.1.11(vue@3.5.30(typescript@5.9.3))':
dependencies:
'@floating-ui/dom': 1.7.6
'@floating-ui/utils': 0.2.11
vue-demi: 0.14.10(vue@3.5.30(typescript@5.9.3))
transitivePeerDependencies:
- '@vue/composition-api'
- vue
'@humanfs/core@0.19.1': {}
'@humanfs/node@0.16.7':
@@ -2698,6 +2773,14 @@ snapshots:
'@humanwhocodes/retry@0.4.3': {}
'@internationalized/date@3.12.0':
dependencies:
'@swc/helpers': 0.5.20
'@internationalized/number@3.6.5':
dependencies:
'@swc/helpers': 0.5.20
'@jridgewell/gen-mapping@0.3.13':
dependencies:
'@jridgewell/sourcemap-codec': 1.5.5
@@ -2992,6 +3075,10 @@ snapshots:
'@rollup/rollup-win32-x64-msvc@4.60.0':
optional: true
'@swc/helpers@0.5.20':
dependencies:
tslib: 2.8.1
'@tailwindcss/node@4.2.2':
dependencies:
'@jridgewell/remapping': 2.3.5
@@ -3060,6 +3147,13 @@ snapshots:
tailwindcss: 4.2.2
vite: 7.3.1(@types/node@24.12.0)(jiti@2.6.1)(lightningcss@1.32.0)(sass-embedded@1.98.0)(sass@1.98.0)(yaml@2.8.3)
'@tanstack/virtual-core@3.13.23': {}
'@tanstack/vue-virtual@3.13.23(vue@3.5.30(typescript@5.9.3))':
dependencies:
'@tanstack/virtual-core': 3.13.23
vue: 3.5.30(typescript@5.9.3)
'@tsconfig/node24@24.0.4': {}
'@types/esrecurse@4.3.1': {}
@@ -3388,6 +3482,10 @@ snapshots:
ansis@4.2.0: {}
aria-hidden@1.2.6:
dependencies:
tslib: 2.8.1
ast-kit@2.2.0:
dependencies:
'@babel/parser': 7.29.2
@@ -3476,6 +3574,8 @@ snapshots:
define-lazy-prop@3.0.0: {}
defu@6.1.4: {}
detect-libc@2.1.2: {}
electron-to-chromium@1.5.321: {}
@@ -4002,6 +4102,22 @@ snapshots:
readdirp@5.0.0: {}
reka-ui@2.9.2(vue@3.5.30(typescript@5.9.3)):
dependencies:
'@floating-ui/dom': 1.7.6
'@floating-ui/vue': 1.1.11(vue@3.5.30(typescript@5.9.3))
'@internationalized/date': 3.12.0
'@internationalized/number': 3.6.5
'@tanstack/vue-virtual': 3.13.23(vue@3.5.30(typescript@5.9.3))
'@vueuse/core': 14.2.1(vue@3.5.30(typescript@5.9.3))
'@vueuse/shared': 14.2.1(vue@3.5.30(typescript@5.9.3))
aria-hidden: 1.2.6
defu: 6.1.4
ohash: 2.0.11
vue: 3.5.30(typescript@5.9.3)
transitivePeerDependencies:
- '@vue/composition-api'
reusify@1.1.0: {}
rfdc@1.4.1: {}
@@ -4325,6 +4441,10 @@ snapshots:
vscode-uri@3.1.0: {}
vue-demi@0.14.10(vue@3.5.30(typescript@5.9.3)):
dependencies:
vue: 3.5.30(typescript@5.9.3)
vue-eslint-parser@10.4.0(eslint@10.1.0(jiti@2.6.1)):
dependencies:
debug: 4.4.3

View File

@@ -1,2 +1,3 @@
onlyBuiltDependencies:
- esbuild
- vue-demi

View File

@@ -0,0 +1,49 @@
<script lang="ts" setup>
import { useMap } from '@/stores/map';
import { PhCheck } from '@phosphor-icons/vue';
import { storeToRefs } from 'pinia';
import { CheckboxIndicator, CheckboxRoot } from 'reka-ui'
const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
</script>
<template>
<aside class="absolute top-5 left-5 z-10 p-2 bg-slate-50 text-slate-950 text-xs rounded-xs">
<form>
<div class="grid gap-1.5">
<label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
<CheckboxRoot v-model="filterCovered"
class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
<CheckboxIndicator class="bg-foreground size-full flex items-center justify-center">
<PhCheck :size="10" />
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">Abrités</span>
</label>
<label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
<CheckboxRoot v-model="filterUncovered"
class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
<CheckboxIndicator class="bg-foreground size-full flex items-center justify-center">
<PhCheck :size="10" />
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">Non-abrités</span>
</label>
<label class="flex flex-row gap-1.5 items-center [&>.checkbox]:hover:bg-foreground text-sm cursor-pointer">
<CheckboxRoot v-model="filterKorrigo"
class="hover:bg-stone-50 flex size-4 appearance-none items-center justify-center rounded-xs bg-foreground shadow-sm border focus-within:ring-1 cursor-pointer">
<CheckboxIndicator class="bg-foreground size-full flex items-center justify-center">
<PhCheck :size="10" />
</CheckboxIndicator>
</CheckboxRoot>
<span class="select-none">Abonnement Korrigo</span>
</label>
</div>
</form>
</aside>
</template>

View File

@@ -5,9 +5,11 @@ import { PhBicycle, PhLockKey, PhSquareHalf, PhWarehouse } from '@phosphor-icons
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';
defineProps<{
park: BikeParking
group: 'covered' | 'non-covered' | 'premium'
}>()
const normalIconSize: PointTuple = [30, 30]
@@ -45,13 +47,14 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
</LPopup>
<LIcon :icon-size :icon-anchor :class-name="cn(
{ 'korrigo': park.condition_acces === 'Abonnement Korrigo' },
{ 'highlight': park.type === 'Box individuel' || park.type === 'Abrité' },
`group-${group}`,
{ 'korrigo': park.condition_acces === KORRIGO_KEY },
{ 'highlight': park.type === BOXED_KEY || park.type === COVERED_KEY },
)">
<PhBicycle v-if="park.type === 'Non abrité'" size="18" />
<PhWarehouse v-else-if="park.type === 'Abrité'" size="18" />
<PhSquareHalf v-else-if="park.type === 'Box individuel'" size="18" />
<PhLockKey v-else-if="park.type === 'Collectif sécurisé'" size="18" weight="fill" />
<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" />
<PhLockKey v-else-if="park.condition_acces === KORRIGO_KEY" size="18" weight="fill" />
</LIcon>
</LMarker>
</template>

View File

@@ -8,11 +8,14 @@ globalThis.L = L
import { useMap } from '@/stores/map'
import type { ApiResponse } from '@/types/Api'
import type { BikeParking } from '@/types/Bikes'
import { API_BASE_URL, API_LIMIT } from '@/utils/const'
import { API_BASE_URL, API_LIMIT, MAP_TILELAYER_URL, SpotAccess, SpotType } from '@/utils/const'
import { useQuery } from '@pinia/colada'
import { LControlZoom, LMap, LTileLayer } from '@vue-leaflet/vue-leaflet'
import { LMarkerClusterGroup } from 'vue-leaflet-markercluster'
import BikeMarker from './BikeMarker.vue'
import BikeFilters from './BikeFilters.vue'
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
async function fetchAllBikeParkings(): Promise<BikeParking[]> {
const firstPage = await fetch(`${API_BASE_URL}?limit=${API_LIMIT}`).then(r => r.json()) as ApiResponse
@@ -36,17 +39,29 @@ const { state } = useQuery({
query: fetchAllBikeParkings,
})
const { zoom, minZoom, center } = useMap()
// Groups different parking spot by types
const coveredTypes = new Set([SpotType.Covered, SpotType.Boxed])
const coveredParkings = computed(() =>
state.value.data?.filter(p => coveredTypes.has(p.type as SpotType)) ?? []
)
const nonCoveredParkings = computed(() =>
state.value.data?.filter(p => p.type === SpotType.Uncovered) ?? []
)
const premiumParkings = computed(() =>
state.value.data?.filter(p => p.condition_acces === SpotAccess.Korrigo) ?? []
)
const { zoom, minZoom, center, maxClusterRadius, disableClusteringAtZoom } = useMap()
const { filterUncovered, filterCovered, filterKorrigo } = storeToRefs(useMap())
</script>
<template>
<header class="sr-only">
<h1>
Carte interactive des parkings vélo de Rennes Métropole
</h1>
</header>
<BikeFilters />
<main class="h-screen w-screen grid place-items-center">
<main class="relative z-0 h-screen w-screen grid place-items-center">
<div v-if="state.status === 'pending'">Loading...</div>
<div v-else-if="state.status === 'error'">Error: {{ state.error.message }}</div>
<template v-else>
@@ -54,11 +69,24 @@ const { zoom, minZoom, center } = useMap()
:useGlobalLeaflet="true">
<LControlZoom position="bottomright" />
<LTileLayer url="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png" layer-type="base" />
<LTileLayer v-once :url="MAP_TILELAYER_URL" layer-type="base" />
<!-- Review CSGroup -->
<LMarkerClusterGroup v-if="state.data.length > 0" :max-cluster-radius="30" :disable-clustering-at-zoom="17">
<BikeMarker v-once v-for="park in state.data" :key="park.code_insee" :park />
<!-- Covered parkings: Abrité, Box individuel -->
<LMarkerClusterGroup :visible="filterUncovered" v-if="coveredParkings.length > 0" :max-cluster-radius
:disable-clustering-at-zoom>
<BikeMarker v-once v-for="park in coveredParkings" :key="park.id_parc_velo" :park group="covered" />
</LMarkerClusterGroup>
<!-- Non-covered parkings: Non abrité -->
<LMarkerClusterGroup :visible="filterCovered" v-if="nonCoveredParkings.length > 0" :max-cluster-radius
:disable-clustering-at-zoom>
<BikeMarker v-once v-for="park in nonCoveredParkings" :key="park.id_parc_velo" :park group="non-covered" />
</LMarkerClusterGroup>
<!-- Premium parkings: Abonnement Korrigo -->
<LMarkerClusterGroup :visible="filterKorrigo" v-if="premiumParkings.length > 0" :max-cluster-radius
:disable-clustering-at-zoom>
<BikeMarker v-once v-for="park in premiumParkings" :key="park.id_parc_velo" :park group="premium" />
</LMarkerClusterGroup>
</LMap>
</template>

View File

@@ -7,9 +7,21 @@ export const useMap = defineStore('map', () => {
const minZoom = 6
const center = ref<PointTuple>([48.11180645878813, -1.6637869497745246])
const maxClusterRadius = 30
const disableClusteringAtZoom = 17
const filterUncovered = ref(true)
const filterCovered = ref(true)
const filterKorrigo = ref(true)
return {
zoom,
minZoom,
center,
maxClusterRadius,
disableClusteringAtZoom,
filterUncovered,
filterCovered,
filterKorrigo,
}
})

View File

@@ -1,3 +1,21 @@
export const MAP_TILELAYER_URL =
'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'
export const API_BASE_URL =
'https://data.rennesmetropole.fr/api/explore/v2.1/catalog/datasets/parkings_velos_sur_rennes_metropole/records'
export const API_LIMIT = 100
export const UNCOVERED_KEY = 'Non abrité'
export const COVERED_KEY = 'Abrité'
export const BOXED_KEY = 'Box individuel'
export const KORRIGO_KEY = 'Abonnement Korrigo'
export enum SpotType {
Uncovered = UNCOVERED_KEY,
Covered = COVERED_KEY,
Boxed = BOXED_KEY,
}
export enum SpotAccess {
Korrigo = KORRIGO_KEY,
}