Merge branch 'homePage' into 'master'

Home page milestone display

See merge request !48

src/components/milestone/ActiveMilestonesList.vue

+<script setup lang="ts">
+
+import ActiveMilestoneDisplay from '@/components/milestone/ActiveMilestoneDisplay.vue'
+import { onMounted, ref } from 'vue'
+import { useTokenStore } from '@/stores/token'
+import { getAllMilestones } from '@/utils/MilestoneUtils'
+import router from '@/router'
+
+interface Milestone{
+  milestoneId: number;
+  milestoneTitle: string;
+  milestoneDescription: string
+  milestoneGoalSum: number;
+  milestoneCurrentSum: number;
+  deadlineDate: Date;
+  startDate: Date;
+  milestoneImage: string;
+  username: string;
+}
+
+const activeMilestones = ref(<Milestone[]>[])
+
+onMounted(async () => {
+  const token = useTokenStore().$state.jwtToken
+  activeMilestones.value = await getAllMilestones(token);
+})
+
+</script>
+
+<template>
+  <div class="active-milestones">
+    <template v-if="activeMilestones.length === 0">
+      <h4>Opps, her var det tomt.<br>Lag ditt første sparemål for å komme i gang!</h4>
+    </template>
+    <template v-else>
+      <ActiveMilestoneDisplay
+        class="active-milestone"
+        v-for="(activeMilestone, index) in activeMilestones"
+        :key="index"
+        :id="activeMilestone.milestoneId"
+        :title="activeMilestone.milestoneTitle"
+        :description="activeMilestone.milestoneDescription"
+        :goalSum="activeMilestone.milestoneGoalSum"
+        :currentSum="activeMilestone.milestoneCurrentSum"
+        :deadline="activeMilestone.deadlineDate"
+        :startDate="activeMilestone.startDate"
+        :image="activeMilestone.milestoneImage"
+      ></ActiveMilestoneDisplay>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.active-milestones{
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+
+  height: 100%;
+  width: 100%;
+  gap: 2.5%;
+}
+
+.active-milestone{
+  border-radius: 20px;
+  border: 2px solid var(--color-border);
+  box-shadow: 0 4px 4px var(--color-shadow);
+
+  min-height: 30%;
+  width: 100%;
+}
+
+.active-milestone:hover{
+  transform: scale(1.02);
+  transition: 0.3s;
+}
+
+</style>
\ No newline at end of file

src/views/HomePage/HomeView.vue

 <script setup lang="ts">
 
+import ActiveChallengeDisplay from '@/components/challenge/ActiveChallengeDisplay.vue'
+import { getAllMilestones } from '@/utils/MilestoneUtils'
+import { useTokenStore } from '@/stores/token'
+import { getActiveChallenges } from '@/utils/challengeutils'
+import ActiveMilestonesList from '@/components/milestone/ActiveMilestonesList.vue'
+
+console.log(getAllMilestones(useTokenStore().getJwtToken));
+console.log(getActiveChallenges(useTokenStore().getJwtToken, 0, 5))
+
 </script>
 
 <template>
-  <h1>HomeView</h1>
+  <div id = TopInfo>
+    <h2>Velkommen!</h2>
+    <div id = TotalSavings>
+      <h3>TotalSavingsDiv</h3>
+    </div>
+  </div>
+  <div id = HomeViewComponents>
+    <div class = ActiveMilestones>
+      <ActiveMilestonesList/>
+    </div>
+    <div class = ActiveChallenges>
+    </div>
+  </div>
 </template>
 
 <style scoped>
 
+  #TopInfo{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  #TotalSavings{
+    margin-right: 5%;
+  }
+
+  #HomeViewComponents{
+    display: flex;
+  }
+
+  .ActiveMilestones, .ActiveChallenges{
+    margin: 2%;
+    border-radius: 20px;
+  }
+
+  .ActiveMilestones{
+    width: 60%;
+  }
+
+  .ActiveChallenges{
+    width: 40%;
+    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
+
+  }
+
 </style>
\ No newline at end of file

src/views/HomePage/MilestoneView.vue

@@ -6,6 +6,7 @@ import CompletedMilestoneDisplay from '@/components/milestone/CompletedMilestone
 import ActiveMilestoneDisplay from '@/components/milestone/ActiveMilestoneDisplay.vue'
 import {getAllMilestoneLogs, getAllMilestones} from "@/utils/MilestoneUtils";
 import {useTokenStore} from "@/stores/token";
+import ActiveMilestonesList from '@/components/milestone/ActiveMilestonesList.vue'
 
 const activeMilestones = ref(<Milestone[]>[])
 const completedMilestones = ref<Milestone[]>([])
@@ -49,26 +50,7 @@ interface Milestone{
         <button class="create-milestone-button" @click="navigateTo('/homepage/create-milestone')">
           <h2 class="create-milestone-button-title">Lag nytt sparemål + </h2>
         </button>
-        <div class="active-milestones">
-          <template v-if="activeMilestones.length === 0">
-            <h4>Opps, her var det tomt.<br>Lag ditt første sparemål for å komme i gang!</h4>
-          </template>
-          <template v-else>
-          <ActiveMilestoneDisplay
-            class="active-milestone"
-            v-for="(activeMilestone, index) in activeMilestones"
-            :key="index"
-            :id="activeMilestone.milestoneId"
-            :title="activeMilestone.milestoneTitle"
-            :description="activeMilestone.milestoneDescription"
-            :goalSum="activeMilestone.milestoneGoalSum"
-            :currentSum="activeMilestone.milestoneCurrentSum"
-            :deadline="activeMilestone.deadlineDate"
-            :startDate="activeMilestone.startDate"
-            :image="activeMilestone.milestoneImage"
-          ></ActiveMilestoneDisplay>
-          </template>
-        </div>
+        <ActiveMilestonesList/>
       </div>
 
       <div class="right">
@@ -161,30 +143,6 @@ flex-direction: column;
   font-weight: bold;
 }
 
-.active-milestones{
-  display: flex;
-  flex-direction: column;
-  text-align: center;
-
-  height: 100%;
-  width: 100%;
-  gap: 2.5%;
-}
-
-.active-milestone{
-  border-radius: 20px;
-  border: 2px solid var(--color-border);
-  box-shadow: 0 4px 4px var(--color-shadow);
-
-  min-height: 30%;
-  width: 100%;
-}
-
-.active-milestone:hover{
-  transform: scale(1.02);
-  transition: 0.3s;
-}
-
 .right{
   display: flex;
   flex-direction: column;