frontend: add map view

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

summer2024-frontend/src/views/MapView.vue

@@ -0,0 +1,81 @@
+<script setup>
+
+import { usePostsStore } from '@/stores/posts.js'
+import { onMounted } from 'vue'
+import { fromLonLat } from 'ol/proj.js'
+import { Camera } from 'lucide-vue-next'
+import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip/index.js'
+
+const postStore = usePostsStore()
+
+onMounted(() => {
+  postStore.fetchPosts()
+})
+</script>
+
+<template>
+  <div class="fixed h-full w-full">
+    <ol-map
+      :loadTilesWhileAnimating="true"
+      :loadTilesWhileInteracting="true"
+      class="h-full w-full"
+    >
+      <ol-view
+        ref="view"
+        :zoom="3.6"
+        :center="[ 652293.6169027708, 6425265.202945196 ]"
+      />
+
+      <ol-tile-layer>
+        <ol-source-osm />
+      </ol-tile-layer>
+      <ol-scaleline-control />
+      <ol-zoom-control zoomInLabel="+" zoomOutLabel="-" />
+
+      <ol-overlay
+        v-for="post in postStore.posts" :key="post.id"
+        :position="fromLonLat([post.location.lon, post.location.lat])"
+        :autoPan="true"
+      >
+        <TooltipProvider>
+          <Tooltip :default-open="true">
+            <TooltipTrigger as-child>
+              <RouterLink :to="{ name: 'home', hash: '#post-' + post.id}">
+                <div
+                  class="-translate-x-1/2 -translate-y-1/2 p-1 rounded-lg bg-indigo-950 hover:bg-indigo-900 transition-colors duration-200">
+                  <Camera size="16" />
+                </div>
+              </RouterLink>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>{{ post.formatedDate }}</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </ol-overlay>
+
+      <ol-vector-layer>
+        <ol-source-vector>
+          <ol-feature v-for="post in postStore.posts" :key="post.id">
+            <ol-geom-point :coordinates="fromLonLat([post.location.lon, post.location.lat])"></ol-geom-point>
+            <ol-style>
+              <ol-style-circle :radius="5">
+                <ol-style-fill color="black"></ol-style-fill>
+                <ol-style-stroke
+                  color="black"
+                  :width="2"
+                ></ol-style-stroke>
+              </ol-style-circle>
+            </ol-style>
+          </ol-feature>
+        </ol-source-vector>
+      </ol-vector-layer>
+    </ol-map>
+  </div>
+</template>
+
+<style scoped>
+.ol-zoom {
+  top: 70px !important;
+}
+</style>