Added food trucks and some data

2025-12-20 14:59:10 +01:00
parent 3eb63462d0
commit 8dcc385078
8 changed files with 103 additions and 19 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -33,7 +33,6 @@ const center = ref<PointTuple>([47.809376, -0.637207])
      <LTileLayer
        url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png"
        layer-type="base"
-        name="Stadia Maps Basemap"
      />

      <LMarkerClusterGroup :max-cluster-radius="18" :disable-clustering-at-zoom="14">
--- a/src/components/ReviewMarker.vue
+++ b/src/components/ReviewMarker.vue
@@ -3,6 +3,7 @@ import type { ReviewMarker } from '@/models/Markers';
 import { LMarker, LPopup, LIcon } from '@vue-leaflet/vue-leaflet'
 import type { PointTuple } from 'leaflet';
 import { computed, ref } from 'vue';
+import { cn } from '@/lib/cn';

 defineProps<{
  marker: ReviewMarker
@@ -25,12 +26,19 @@ const popupOffset = [0, iconSize.value[0] * -0.66]
      </div>
    </LPopup>

-    <LIcon :icon-size :icon-anchor :class-name="marker.closed ? 'grayscale' : ''">
+    <LIcon
+      :icon-size
+      :icon-anchor
+      :class-name="cn(
+        { 'grayscale': marker.closed }
+      )"
+    >
      <img v-if="marker.type === 'bar'" src="/map/icons/bar.svg" />
      <img v-if="marker.type === 'bakery'" src="/map/icons/bakery.svg" />
      <img v-if="marker.type === 'tea-shop'" src="/map/icons/tea-shop.svg" />
      <img v-if="marker.type === 'coffee-shop'" src="/map/icons/coffee-shop.svg" />
      <img v-if="marker.type === 'ice-cream'" src="/map/icons/ice-cream.svg" />
+      <img v-if="marker.type === 'food-truck'" src="/map/icons/truck.svg" />

      <template v-else-if="marker.type === 'restaurant'">
        <img v-if="marker.food === 'asian'" src="/map/icons/asian.svg" />
@@ -47,23 +55,46 @@ const popupOffset = [0, iconSize.value[0] * -0.66]

      <div
        class="absolute -top-2 -right-2 size-5 text-center grid place-items-center rounded-full text-[0.65rem] font-bold tracking-[-0.075em]"
-        :class="{
-          'text-white bg-red-500': marker.reviews?.[0]!.grade! <= 1.5,
-          'text-black bg-amber-400': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
-          'text-black bg-lime-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
-          'text-black bg-green-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.7,
-          'text-black bg-sky-400': marker.reviews?.[0]!.grade! >= 4.7
-        }">
+        :class="cn(
+          {
+            'text-white bg-red-500': marker.reviews?.[0]!.grade! <= 1.5,
+            'text-black bg-amber-400': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
+            'text-black bg-lime-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
+            'text-black bg-green-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
+            'text-black bg-sky-400': marker.reviews?.[0]!.grade! >= 4.5,
+          },
+          marker.type === 'food-truck' && {
+            'bg-red-600': marker.reviews?.[0]!.grade! <= 1.5,
+            'bg-amber-500': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
+            'bg-lime-500': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
+            'bg-green-500': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
+            'bg-sky-400': marker.reviews?.[0]!.grade! >= 4.5,
+          }
+        )"
+      >
        {{ marker.reviews?.[0]!.grade }}
      </div>

-      <div class="absolute -z-10 -inset-0.5 rounded-full" :class="{
-        'bg-red-500': marker.reviews?.[0]!.grade! <= 1.5,
-        'bg-amber-400': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
-        'bg-lime-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
-        'bg-green-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.7,
-        'bg-sky-400': marker.reviews?.[0]!.grade! >= 4.7
-      }" />
+      <div
+        class="absolute -z-10 -inset-0.5 rounded-full"
+        :class="cn(
+          {
+            'bg-red-500': marker.reviews?.[0]!.grade! <= 1.5,
+            'bg-amber-400': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
+            'bg-lime-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
+            'bg-green-400': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
+            'bg-sky-400': marker.reviews?.[0]!.grade! >= 4.5,
+            'bg-slate-800': marker.type === 'food-truck'
+          },
+          marker.type === 'food-truck' && {
+            'border-2 border-red-700': marker.reviews?.[0]!.grade! <= 1.5,
+            'border-2 border-amber-600': marker.reviews?.[0]!.grade! > 1.5 && marker.reviews?.[0]!.grade! <= 2.5,
+            'border-2 border-lime-600': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.0,
+            'border-2 border-green-600': marker.reviews?.[0]!.grade! > 2.5 && marker.reviews?.[0]!.grade! < 4.5,
+            'border-2 border-sky-500': marker.reviews?.[0]!.grade! >= 4.5,
+          }
+        )"
+        />
    </LIcon>
  </LMarker>
 </template>
--- a/src/lib/cn.ts
+++ b/src/lib/cn.ts
@@ -0,0 +1,4 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
--- a/src/models/Markers.ts
+++ b/src/models/Markers.ts
@@ -1,7 +1,7 @@
 import type { PointTuple } from "leaflet"

-export type ReviewType = "restaurant" | "bar" | "bakery" | "tea-shop" | "coffee-shop" | "ice-cream"
-export type FoodType = "mixed" | "asian" | "creole" | "vegetarian" | "italian" | "fast-food" | "street-food" | "burgers" | "seafood" | "creperie" | "eastern"
+export type ReviewType = "restaurant" | "bar" | "bakery" | "tea-shop" | "coffee-shop" | "ice-cream" | "food-truck"
+export type FoodType = "mixed" | "asian" | "creole" | "vegetarian" | "italian" | "fast-food" | "street-food" | "burgers" | "seafood" | "creperie" | "eastern" | "south-american"

 export interface DefaultMarker {
  coords: PointTuple
@@ -13,6 +13,7 @@ export interface ReviewMarker extends DefaultMarker {
  food?: FoodType
  reviews?: Review[]
  closed?: boolean
+  url?: string
 }

 export interface Review {
--- a/src/stores/reviews.ts
+++ b/src/stores/reviews.ts
@@ -486,6 +486,18 @@ const markers: ReviewMarker[] = [
        }
      ]
    },
+    {
+      title: "Saveurs Afghanes",
+      coords: [48.110418451272935, -1.6586173600574508],
+      type: "restaurant",
+      food: "eastern",
+      reviews: [
+        {
+          grade: 5.0,
+          text: "Choquant rapport qualité-prix, cuisine extrêmement bien épicée, saveurs impeccables. Un restaurant à ne rater sous aucun prétexte à Rennes."
+        }
+      ]
+    },
    {
      title: "Fox and Friends",
      coords: [48.11215429073604, -1.6830048833083207],
@@ -1231,7 +1243,8 @@ const markers: ReviewMarker[] = [
      food: "eastern",
      reviews: [
        {
-          grade: 4.4
+          grade: 4.5,
+          text: "Un des meilleurs restaurant de street-food à Rennes, la qualité de la viande de poulet est incroyable. Le personnel est également très gentil."
        }
      ]
    },
@@ -1401,6 +1414,20 @@ const markers: ReviewMarker[] = [
        }
      ]
    },
+    // Food trucks
+    {
+      title: "Saveurs d'Argentine",
+      coords: [48.11820894564772, -1.6038506613892152],
+      type: "food-truck",
+      food: "south-american",
+      url: "https://www.instagram.com/saveursdargentine/",
+      reviews: [
+        {
+          grade: 4.0,
+          text: "Les empanadas ont un excellent rapport qualité prix et c'est fait maison."
+        }
+      ]
+    }
  ]

  return { markers }