Added extra filters for cargo / std

src/components/BikeFilters.vue

@@ -4,7 +4,7 @@ import { storeToRefs } from 'pinia'
 import Checkbox from './forms/Checkbox.vue'
 import ParkingSpaceRange from './filters/ParkingSpaceRange.vue';
 
-const { filterCovered, filterUncovered, filterKorrigo } = storeToRefs(useMap())
+const { filterCovered, filterUncovered, filterKorrigo, filterCargoOnly, filterStdOnly } = storeToRefs(useMap())
 
 defineProps<{
   nbUncovered?: number
@@ -30,6 +30,18 @@ defineProps<{
       </fieldset>
 
       <ParkingSpaceRange />
+
+      <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">
+          Équipements
+        </legend>
+
+        <div class="grid grid-cols-1 gap-1.5">
+          <Checkbox v-model="filterCargoOnly">Cargos</Checkbox>
+          <Checkbox v-model="filterStdOnly">STD</Checkbox>
+        </div>
+      </fieldset>
     </form>
   </aside>
 </template>

src/components/BikeMarker.vue

@@ -7,7 +7,7 @@ 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';
+import { SPOTS_MAX, useMap } from '@/stores/map';
 
 const props = defineProps<{
   park: BikeParking
@@ -20,15 +20,29 @@ 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 { spotsRange, filterCargoOnly, filterStdOnly } = storeToRefs(useMap())
 
-const isMarkerVisible = computed(() => {
-  return spotsRange.value[0] <= props.park.nb_total_place && props.park.nb_total_place <= spotsRange.value[1]
+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)
 </script>
 
 <template>
-  {{ 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>
@@ -41,12 +55,12 @@ const isMarkerVisible = computed(() => {
 
           <template v-if="park.nb_support_cargo">
             <br>
-            …dont <strong>{{ park.nb_support_cargo }} supports cargo</strong>
+            …dont <strong>{{ park.nb_support_cargo }} cargo</strong>
           </template>
 
           <template v-if="park.nb_support_std">
             <br>
-            …dont <strong>{{ park.nb_support_std }} supports STD</strong>
+            …dont <strong>{{ park.nb_support_std }} STD</strong>
           </template>
         </div>
 

src/components/filters/ParkingSpaceRange.vue

@@ -37,7 +37,7 @@ function onRangeUpdate(val: number[] | undefined) {
 
     <div class="mt-1">
       <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">
+        class="relative flex items-center select-none touch-none w-full pt-2 pb-1" :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

@@ -17,6 +17,9 @@ export const useMap = defineStore('map', () => {
   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 {
@@ -28,6 +31,8 @@ export const useMap = defineStore('map', () => {
     filterUncovered,
     filterCovered,
     filterKorrigo,
+    filterCargoOnly,
+    filterStdOnly,
     spotsRange,
   }
 })