feat: Connected title and deadline in SavingPathView to backend

src/views/SavingPathView.vue

@@ -17,18 +17,29 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from "@/components/ui/tooltip/index.js";
-import { ref, onMounted, onUnmounted, nextTick } from "vue";
+import {ref, onMounted, onUnmounted, nextTick, computed} from "vue";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger
 } from "@/components/ui/popover/index.js";
+import {useSavingGoalsStore} from "@/stores/savingGoals.js";
+
+const savingGoalStore = useSavingGoalsStore();
 
 /**
  * Tracks the window width.
  */
 const windowWidth = ref(window.innerWidth);
 
+
+/**
+ * Gets the current saving goal.
+ */
+const currentSavingGoal = computed(() => savingGoalStore.currentSavingGoal)
+const loading = computed(() => savingGoalStore.loading)
+
+
 /**
  * Handles click outside the popover.
  */
@@ -39,6 +50,9 @@ let handlingClickOutside = null;
  * If the click is outside the popover, the popover is closed.
  */
 onMounted(() => {
+  if (savingGoalStore.currentSavingGoal === null) {
+    savingGoalStore.fetchSavingGoals();
+  }
   nextTick(() => {
     handlingClickOutside = event => {
       if (!event.target.closest('.popover')) {
@@ -76,7 +90,10 @@ const numChallenges = ref(4);
 </script>
 
 <template>
-  <div class="flex flex-col justify-between items-center max-h-screen p-8">
+  <div v-if="loading" class="flex flex-col justify-center items-center h-screen">
+      <p>Loading...</p>'
+  </div>
+  <div v-else class="flex flex-col justify-between items-center max-h-screen p-8">
     <div class="flex flex-row justify-between">
       <h3 class="text-2xl font-semibold leading-none tracking-tight">
         Min sparesti:
@@ -106,7 +123,8 @@ const numChallenges = ref(4);
         </TooltipProvider>
       </div>
     </div>
-    <h1 class="text-4xl">SPAREMÅL</h1>
+    <h1 class="text-4xl">{{ currentSavingGoal.title }}</h1>
+    <p class="text-lg">{{ currentSavingGoal.deadline }}</p>
     <img :src="VueLogo" alt="Vue logo" class="w-60 h-auto pb-8"/>
     <Card class="w-full max-w-screen-sm md:max-w-xl lg:max-w-2xl xl:max-w-3xl mx-auto">
       <div class="flex flex-col md:flex-row items-start md:space-x-4 p-4">