New store and route for goals

summer2024-frontend/src/stores/goals.js

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { formatRelative } from 'date-fns'
+import { fr } from 'date-fns/locale'
+import { marked } from 'marked'
+import { API_BASE_URL } from '@/config.js'
+import { fromLonLat } from 'ol/proj.js'
+
+export const useGoalsStore = defineStore('goals', () => {
+  const goalsApiPath = API_BASE_URL + '/goals'
+
+  const goals = ref([])
+
+  function fetchGoals() {
+    return fetch(goalsApiPath)
+      .then((response) => {
+        return response.json()
+      })
+      .then(async (data) => {
+        goals.value = data.sort((a, b) => a.id - b.id) // lower ID (older) first
+        for (const goal of goals.value) {
+          const goalDate = new Date(goal.date)
+          goal.formatedDate = formatRelative(goalDate, new Date(), { locale: fr })
+          goal.projectedCoordinates = fromLonLat([goal.longitude, goal.latitude])
+        }
+
+        return goals.value
+      })
+      .catch((error) => {
+        console.log('goal list parsing failed with error: ' + error)
+      })
+  }
+
+  return { goals, fetchGoals }
+})

summer2024-frontend/src/views/MapView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { Map, Layers, Sources, MapControls, Geometries, Styles } from 'vue3-openlayers'
 import { usePostsStore } from '@/stores/posts.js'
+import { useGoalsStore } from '@/stores/goals.js'
 import { computed, onMounted, ref } from 'vue'
 import { Camera, Goal, MapPin } from 'lucide-vue-next'
 import {
@@ -12,6 +13,7 @@ import {
 import { useLocationStore } from '@/stores/location.js'
 import { fromLonLat } from 'ol/proj.js'
 
+const goalStore = useGoalsStore()
 const postStore = usePostsStore()
 const locationStore = useLocationStore()
 
@@ -26,20 +28,20 @@ const postsLinesCoordinates = computed(() => {
   return coords
 })
 
-onMounted(() => {
-  postStore.fetchPosts()
-  locationStore.fetchLocation()
+const goalLocations = computed(() => {
+  const coords = []
+  for (const goal of goalStore.goals) {
+    coords.push({name: goal.name, formatedDate: goal.formatedDate, coords: goal.projectedCoordinates})
+  }
+  return coords
+})
+
+onMounted(() => {
+  goalStore.fetchGoals()
+  locationStore.fetchLocation()
+  postStore.fetchPosts()
 })
 
-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>
@@ -116,7 +118,8 @@ const goalLocations = ref([
               </div>
             </TooltipTrigger>
             <TooltipContent>
-              <p>Objectif : {{ loc.name }}</p>
+              <p>Objectif&nbsp;: {{ loc.name }}</p>
+              <p>Arrivée&nbsp;: {{ loc.formatedDate }}</p>
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>