Joururi/echoes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added food trucks and some data

Browse Source
This commit is contained in:
Alexis
2025-12-20 14:59:10 +01:00
parent 3eb63462d0
commit 8dcc385078
8 changed files with 103 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -36,6 +36,7 @@
"@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.6.0",
"@vue/tsconfig": "^0.8.1",
"clsx": "^2.1.1",
"eslint": "^9.39.2",
"eslint-plugin-oxlint": "~1.33.0",
"eslint-plugin-vue": "~10.6.2",
@@ -44,6 +45,7 @@
"oxlint": "~1.33.0",
"prettier": "3.7.4",
"sass-embedded": "^1.97.0",
"tailwind-merge": "^3.4.0",
"typescript": "~5.9.3",
"vite": "npm:rolldown-vite@^7.2.11",
"vite-plugin-vue-devtools": "^8.0.5",

17
pnpm-lock.yaml generated
View File

@@ -57,6 +57,9 @@ importers:
'@vue/tsconfig':
specifier: ^0.8.1
version: 0.8.1(typescript@5.9.3)(vue@3.5.25(typescript@5.9.3))
clsx:
specifier: ^2.1.1
version: 2.1.1
eslint:
specifier: ^9.39.2
version: 9.39.2(jiti@2.6.1)
@@ -81,6 +84,9 @@ importers:
sass-embedded:
specifier: ^1.97.0
version: 1.97.0
tailwind-merge:
specifier: ^3.4.0
version: 3.4.0
typescript:
specifier: ~5.9.3
version: 5.9.3
@@ -1025,6 +1031,10 @@ packages:
resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
engines: {node: '>= 14.16.0'}
clsx@2.1.1:
resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
engines: {node: '>=6'}
color-convert@2.0.1:
resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
engines: {node: '>=7.0.0'}
@@ -1883,6 +1893,9 @@ packages:
resolution: {integrity: sha512-MeQTA1r0litLUf0Rp/iisCaL8761lKAZHaimlbGK4j0HysC4PLfqygQj9srcs0m2RdtDYnF8UuYyKpbjHYp7Jw==}
engines: {node: ^14.18.0 || >=16.0.0}
tailwind-merge@3.4.0:
resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==}
tailwindcss@4.1.18:
resolution: {integrity: sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==}
@@ -2986,6 +2999,8 @@ snapshots:
readdirp: 4.1.2
optional: true
clsx@2.1.1: {}
color-convert@2.0.1:
dependencies:
color-name: 1.1.4
@@ -3713,6 +3728,8 @@ snapshots:
dependencies:
'@pkgr/core': 0.2.9
tailwind-merge@3.4.0: {}
tailwindcss@4.1.18: {}
tapable@2.3.0: {}

3
public/map/icons/truck.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<path fill="#fff" transform="scale(0.6)" transform-origin="center" d="M254.07,106.79,208.53,53.73A16,16,0,0,0,196.26,48H32A16,16,0,0,0,16,64V176a16,16,0,0,0,16,16H49a32,32,0,0,0,62,0h50a32,32,0,0,0,62,0h17a16,16,0,0,0,16-16V112A8,8,0,0,0,254.07,106.79ZM32,104V64H88v40Zm48,96a16,16,0,1,1,16-16A16,16,0,0,1,80,200Zm80-96H104V64h56Zm32,96a16,16,0,1,1,16-16A16,16,0,0,1,192,200Zm-16-96V64h20.26l34.33,40Z"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 485 B

1
src/App.vue
View File

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

61
src/components/ReviewMarker.vue
View File

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

4
src/lib/cn.ts Normal file
View File

@@ -0,0 +1,4 @@
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))

5
src/models/Markers.ts
View File

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

29
src/stores/reviews.ts
View File

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