Better filter appearance and performance

src/components/BikeClusterLayer.vue

@@ -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>

src/components/BikeFilters.vue

@@ -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">
+  <aside class="max-w-xs absolute top-5 left-5 z-10 p-2 bg-slate-50 text-slate-950 rounded-xs">
-    <form>
+    <form class="grid grid-cols-1 gap-3">
-      <div class="grid grid-cols-2 gap-1.5">
+      <fieldset>
-        <div class="col-span-2">
+        <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>
     </form>
   </aside>
 </template>

src/components/BikeMap.vue

@@ -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>

src/components/BikeMarker.vue

@@ -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" />
+      <PhWarehouse v-else-if="park.type === COVERED_KEY" size="18" weight="light" />
-      <PhSquareHalf v-else-if="park.type === BOXED_KEY" size="18" />
+      <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);
+    color: var(--color-amber-400);
-    border: 2px solid var(--color-muted-foreground);
+    border: 2px solid color-mix(in srgb, var(--color-amber-400) 50%, var(--color-background));
-    background-color: var(--color-foreground);
   }
 }
 

src/components/filters/ParkingSpaceRange.vue

@@ -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 { spotsRange } = storeToRefs(useMap())
-const MAX = 100
 
-const minSpots = ref(MIN)
+const MIN = SPOTS_MIN
-const maxSpots = ref(MAX)
+const MAX = SPOTS_MAX
-const spotsRange = ref([minSpots.value, maxSpots.value])
 
-watch(spotsRange, ([newMin, newMax]) => {
+const localRange = ref<[number, number]>([...spotsRange.value] as [number, number])
-  if (newMin === undefined || newMax === undefined) return
-  minSpots.value = newMin
-  maxSpots.value = newMax
-})
 
-watch(minSpots, (val) => {
+const commitToStore = useDebounceFn((val: [number, number]) => {
-  if (val !== spotsRange.value[0])
+  spotsRange.value = val
-    spotsRange.value = [Math.min(val, spotsRange.value[1]!), spotsRange.value[1]!]
+}, 500)
-})
 
-watch(maxSpots, (val) => {
+function onRangeUpdate(val: number[] | undefined) {
-  if (val !== spotsRange.value[1])
+  if (!val) return
-    spotsRange.value = [spotsRange.value[0]!, Math.max(val, spotsRange.value[0]!)]
+
-})
+  localRange.value = val as [number, number]
+  commitToStore(val as [number, number])
+}
 </script>
 
 <template>
-  <div class="mt-1 col-span-2">
+  <div>
-    <label class="flex justify-between">
+    <div class="flex items-center justify-between">
-      <span>Nombre de places</span>
+      <span
-      <span class="text-muted-foreground">
+        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
-        {{ spotsRange[0] }} – {{ spotsRange[1] }}<template v-if="spotsRange[1] === MAX">+</template>
+        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"
+      <SliderRoot :model-value="localRange" @update:model-value="onRangeUpdate"
-        :max="MAX" :step="5">
+        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>

src/stores/map.ts

@@ -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,
   }
 })