diff --git a/package.json b/package.json index 2e975e0..b08e710 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fccd3c2..215a83c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index efc037a..4e768fe 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -1,2 +1,3 @@ onlyBuiltDependencies: - esbuild + - vue-demi diff --git a/src/components/BikeFilters.vue b/src/components/BikeFilters.vue new file mode 100644 index 0000000..222a3e0 --- /dev/null +++ b/src/components/BikeFilters.vue @@ -0,0 +1,49 @@ + + + diff --git a/src/components/BikeMarker.vue b/src/components/BikeMarker.vue index 4e917ac..612efd2 100644 --- a/src/components/BikeMarker.vue +++ b/src/components/BikeMarker.vue @@ -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] - - - - + + + + diff --git a/src/components/Map.vue b/src/components/Map.vue index 3a50671..aec975a 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -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 { 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())