108 lines
4.9 KiB
Vue
108 lines
4.9 KiB
Vue
<script setup lang="ts">
|
|
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';
|
|
|
|
const props = defineProps<{
|
|
marker: ReviewMarker
|
|
}>()
|
|
|
|
const normalIconSize: PointTuple = [30, 30]
|
|
const tinyIconSize: PointTuple = [25, 25]
|
|
|
|
const iconSize = ref<PointTuple>(props.marker.closed ? tinyIconSize : normalIconSize)
|
|
const iconAnchor = computed<PointTuple>(() => [iconSize.value[0] / 2, iconSize.value[1]])
|
|
const popupOffset = [0, iconSize.value[0] * -0.66]
|
|
</script>
|
|
|
|
<template>
|
|
<LMarker :lat-lng="marker.coords">
|
|
<LPopup :options="{ offset: popupOffset, maxWidth: 380, minWidth: 180 }">
|
|
<div class="spacing">
|
|
<h2 class="font-bold text-[1.2em] leading-5">
|
|
{{ marker.title }}
|
|
</h2>
|
|
|
|
<p v-html="marker.reviews?.[0]!!.text" />
|
|
</div>
|
|
</LPopup>
|
|
|
|
<LIcon
|
|
:icon-size
|
|
:icon-anchor
|
|
:class-name="cn(
|
|
{ 'grayscale': marker.closed }
|
|
)"
|
|
>
|
|
<img v-if="marker.closed" src="/map/icons/ghost.svg" />
|
|
|
|
<template v-else>
|
|
<img v-if="marker.type === 'bar'" src="/map/icons/bar.svg" />
|
|
<img v-else-if="marker.type === 'bakery'" src="/map/icons/bakery.svg" />
|
|
<img v-else-if="marker.type === 'tea-shop'" src="/map/icons/tea-shop.svg" />
|
|
<img v-else-if="marker.type === 'coffee-shop'" src="/map/icons/coffee-shop.svg" />
|
|
<img v-else-if="marker.type === 'ice-cream'" src="/map/icons/ice-cream.svg" />
|
|
<img v-else-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" />
|
|
<img v-else-if="marker.food === 'burgers'" src="/map/icons/burgers.svg" />
|
|
<!-- <img v-else-if="marker.food === 'creperie'" src="/map/icons/creperie.svg" /> -->
|
|
<!-- <img v-else-if="marker.food === 'eastern'" src="/map/icons/eastern.svg" /> -->
|
|
<img v-else-if="marker.food === 'fast-food'" src="/map/icons/fast-food.svg" />
|
|
<img v-else-if="marker.food === 'italian'" src="/map/icons/italian.svg" />
|
|
<img v-else-if="marker.food === 'seafood'" src="/map/icons/seafood.svg" />
|
|
<!-- <img v-else-if="marker.food === 'street-food'" src="/map/icons/street-food.svg" /> -->
|
|
<img v-else-if="marker.food === 'vegetarian'" src="/map/icons/vegetarian.svg" />
|
|
<img v-else src="/map/icons/restaurant.svg" />
|
|
</template>
|
|
</template>
|
|
|
|
<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="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="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>
|