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/assets/css/main.css b/src/assets/css/main.css index f8f444b..d74ccc4 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -9,8 +9,8 @@ --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); + --primary: oklch(87.173% 0.17182 90.995); + --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); @@ -45,7 +45,7 @@ --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.985 0 0); + --primary: oklch(87.173% 0.17182 90.995); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); diff --git a/src/components/BikeClusterLayer.vue b/src/components/BikeClusterLayer.vue new file mode 100644 index 0000000..f20c533 --- /dev/null +++ b/src/components/BikeClusterLayer.vue @@ -0,0 +1,55 @@ + + + + + diff --git a/src/components/BikeFilters.vue b/src/components/BikeFilters.vue new file mode 100644 index 0000000..6c97629 --- /dev/null +++ b/src/components/BikeFilters.vue @@ -0,0 +1,47 @@ + + + diff --git a/src/components/BikeMap.vue b/src/components/BikeMap.vue new file mode 100644 index 0000000..e0db556 --- /dev/null +++ b/src/components/BikeMap.vue @@ -0,0 +1,103 @@ + + + + + diff --git a/src/components/BikeMarker.vue b/src/components/BikeMarker.vue index 4e917ac..10a428b 100644 --- a/src/components/BikeMarker.vue +++ b/src/components/BikeMarker.vue @@ -5,9 +5,13 @@ 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'; +import { storeToRefs } from 'pinia'; +import { SPOTS_MAX, useMap } from '@/stores/map'; -defineProps<{ +const props = defineProps<{ park: BikeParking + group: 'covered' | 'non-covered' | 'premium' }>() const normalIconSize: PointTuple = [30, 30] @@ -15,10 +19,31 @@ const normalIconSize: PointTuple = [30, 30] const iconSize = ref(normalIconSize) const iconAnchor = computed(() => [iconSize.value[0] / 2, iconSize.value[1]]) const popupOffset = [0, iconSize.value[0] * -0.66] + +const { spotsRange, filterCargoOnly, filterStdOnly } = storeToRefs(useMap()) + +const isMarkerVisibleLayers = computed(() => { + const [min, max] = spotsRange.value + const spots = props.park.nb_total_place + + if (max >= SPOTS_MAX) return spots >= min + return spots >= min && spots <= max +}) + +const isMarkerVisibleEquipments = computed(() => { + const checks = [ + [filterCargoOnly.value, (props.park.nb_support_cargo ?? 0) > 0], + [filterStdOnly.value, (props.park.nb_support_std ?? 0) > 0], + ] as const + + return checks.every(([active, passes]) => !active || passes) +}) + +const isMarkerVisible = computed(() => isMarkerVisibleLayers.value && isMarkerVisibleEquipments.value) @@ -70,9 +106,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)); } } diff --git a/src/components/Map.vue b/src/components/Map.vue deleted file mode 100644 index 3a50671..0000000 --- a/src/components/Map.vue +++ /dev/null @@ -1,92 +0,0 @@ - - - - - diff --git a/src/components/filters/ParkingSpaceRange.vue b/src/components/filters/ParkingSpaceRange.vue new file mode 100644 index 0000000..f4b01cb --- /dev/null +++ b/src/components/filters/ParkingSpaceRange.vue @@ -0,0 +1,51 @@ + + + diff --git a/src/components/forms/Checkbox.vue b/src/components/forms/Checkbox.vue new file mode 100644 index 0000000..54daa5e --- /dev/null +++ b/src/components/forms/Checkbox.vue @@ -0,0 +1,29 @@ + + + diff --git a/src/pages/Home.vue b/src/pages/Home.vue index a1a5109..5f13c15 100644 --- a/src/pages/Home.vue +++ b/src/pages/Home.vue @@ -1,5 +1,5 @@ diff --git a/src/stores/map.ts b/src/stores/map.ts index a246b64..c3c14a7 100644 --- a/src/stores/map.ts +++ b/src/stores/map.ts @@ -2,14 +2,48 @@ 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 minZoom = 8 const center = ref([48.11180645878813, -1.6637869497745246]) + const topLeftCorner: PointTuple = [48.88261491330733, -3.437430524894775] + const bottomRightCorner: PointTuple = [47.31027605502938, 0.6437600778583776] + const maxBounds: PointTuple[] = [topLeftCorner, bottomRightCorner] + const maxBoundsViscosity = 0.9 + + const extraOptions: Record = { + zoomControl: false, + } + + const maxClusterRadius = 28 + const disableClusteringAtZoom = 17 + + const filterUncovered = ref(true) + const filterCovered = ref(true) + const filterKorrigo = ref(true) + + const filterCargoOnly = ref(false) + const filterStdOnly = ref(false) + + const spotsRange = ref<[number, number]>([SPOTS_MIN, SPOTS_MAX]) return { zoom, minZoom, center, + maxBounds, + maxBoundsViscosity, + maxClusterRadius, + disableClusteringAtZoom, + extraOptions, + filterUncovered, + filterCovered, + filterKorrigo, + filterCargoOnly, + filterStdOnly, + spotsRange, } }) diff --git a/src/utils/const.ts b/src/utils/const.ts index b2c8b8e..70dcd30 100644 --- a/src/utils/const.ts +++ b/src/utils/const.ts @@ -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, +}