frontend: add goal locations

Signed-off-by: Nicolas Froger <nicolas@kektus.xyz>

summer2024-frontend/src/views/MapView.vue

@@ -1,10 +1,11 @@
 <script setup>
 
 import { usePostsStore } from '@/stores/posts.js'
-import { computed, onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
-import { Camera, MapPin } from 'lucide-vue-next'
+import { Camera, Goal, MapPin } from 'lucide-vue-next'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip/index.js'
 import { useLocationStore } from '@/stores/location.js'
+import { fromLonLat } from 'ol/proj.js'
 
 const postStore = usePostsStore()
 const locationStore = useLocationStore()
@@ -24,6 +25,16 @@ onMounted(() => {
   postStore.fetchPosts()
   locationStore.fetchLocation()
 })
+
+const goalLocations = ref([
+  { name: 'Amsterdam', coords: fromLonLat([4.893611, 52.372778]) },
+  { name: 'Berlin', coords: fromLonLat([13.405, 52.52]) },
+  { name: 'Prague', coords: fromLonLat([14.421389, 50.0875]) },
+  { name: 'Varsovie', coords: fromLonLat([21.011111, 52.23]) },
+  { name: 'Vilnius', coords: fromLonLat([25.28, 54.687222]) },
+  { name: 'Riga', coords: fromLonLat([24.106389, 56.948889]) },
+  { name: 'Tallinn', coords: fromLonLat([24.745278, 59.437222]) }
+])
 </script>
 
 <template>
@@ -85,6 +96,26 @@ onMounted(() => {
         </TooltipProvider>
       </ol-overlay>
 
+      <ol-overlay
+        v-for="loc in goalLocations" :key="loc.name"
+        :position="loc.coords"
+        :autoPan="true"
+      >
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <div
+                class="-translate-x-1/2 -translate-y-1/2 p-1 rounded-lg bg-emerald-800 hover:bg-emerald-700 transition-colors duration-200">
+                <Goal size="16" />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Objectif : {{ loc.name }}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </ol-overlay>
+
       <ol-vector-layer v-if="postsLinesCoordinates.length > 1">
         <ol-source-vector>
           <ol-feature ref="profileFeatureRef">