Added userTotalSaving component to HomePage

src/components/HomeComponents/TotalSavings.vue

+<script setup lang="ts">
+
+import {getUserTotalSavings} from '@/utils/HomePageUtils'
+import { ref } from 'vue'
+
+const saved = ref(0)
+
+async function userSavings(){
+  saved.value = await getUserTotalSavings()
+}
+
+userSavings()
+
+</script>
+
+<template>
+  <div id = TotalSavings>
+    <img src="../../assets/png/pig_394778.png" alt = "logo" id = "logo"/>
+    <div id = SavingsText>
+      <h3 id = SavedInfo>Du har spart totalt: </h3>
+      <h3 id = Saved>{{ saved }} nok</h3>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+#TotalSavings{
+  margin-right: 5%;
+  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.6);
+  border-radius: 20px;
+  padding: 1% 3% 1% 3%;
+  display: flex;
+}
+
+#logo{
+  max-width: 7vh;
+  max-height: 7vh;
+  margin-right: 5%;
+}
+
+#SavingsText{
+  display: flex;
+  flex-direction: column;
+}
+
+#SavedInfo{
+  white-space: nowrap;
+}
+
+#Saved{
+  font-weight: bold;
+}
+
+@media only screen and (max-width: 1000px) {
+  #TotalSavings{
+    margin-right: 0;
+  }
+}
+</style>
\ No newline at end of file

src/utils/HomePageUtils.ts

+import axios from 'axios'
+import {useTokenStore} from '@/stores/token'
+
+export async function getUserTotalSavings(){
+
+  const config = {
+    headers: {
+      'Content-Type': 'Application/json',
+      'Authorization': 'Bearer ' + useTokenStore().getJwtToken
+    }
+  }
+
+  const response = await axios.get("http://Localhost:8080/users/get/savings", config);
+  const result = response.data
+
+  return result
+}
\ 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'
+import TotalSavings from '@/components/HomeComponents/TotalSavings.vue'
+import { ref } from 'vue'
 
 console.log(getAllMilestones(useTokenStore().getJwtToken));
 console.log(getActiveChallenges(useTokenStore().getJwtToken, 0, 5))
 
+const showMilestones = ref(true)
+const showChallenges = ref(false)
+
+function checkScreenWidth() {
+  if(window.innerWidth >= 1000){
+    showMilestones.value = true;
+    showChallenges.value = true;
+  }
+}
+
+function showMilestonesView(){
+  showMilestones.value = true
+  showChallenges.value = false
+}
+
+function showChallengesView(){
+  showChallenges.value = true
+  showMilestones.value = false
+}
+
+checkScreenWidth()
 </script>
 
 <template>
   <div id = TopInfo>
-    <h2>Velkommen!</h2>
-    <div id = TotalSavings>
-      <h3>TotalSavingsDiv</h3>
-    </div>
+    <h2 id ="Welcome">Velkommen!</h2>
+    <TotalSavings id = TotalSavings />
+  </div>
+  <div id = MobileButtons>
+    <button class = mobileButton @click="showMilestonesView()">Sparemål</button>
+    <button class = mobileButton @click="showChallengesView()">Utfordringer</button>
   </div>
   <div id = HomeViewComponents>
-    <div class = ActiveMilestones>
+    <div class = ActiveMilestones v-show="showMilestones">
       <ActiveMilestonesList/>
     </div>
-    <div class = ActiveChallenges>
+    <div class = ActiveChallenges v-show="showChallenges">
+      <h3>Placeholder</h3>
     </div>
   </div>
 </template>
@@ -35,14 +60,27 @@ console.log(getActiveChallenges(useTokenStore().getJwtToken, 0, 5))
     align-items: center;
   }
 
-  #TotalSavings{
-    margin-right: 5%;
-  }
 
   #HomeViewComponents{
     display: flex;
   }
 
+  #MobileButtons{
+    width: 100%;
+    display: none;
+    justify-content: space-evenly;
+    height: 10%;
+  }
+
+  .mobileButton{
+    width: 45%;
+    background-color: var(--color-confirm-button);
+    color: var(--color-buttonText);
+    border: 0;
+    font-size: 2em;
+    border-radius: 20px;
+  }
+
   .ActiveMilestones, .ActiveChallenges{
     margin: 2%;
     border-radius: 20px;
@@ -58,4 +96,30 @@ console.log(getActiveChallenges(useTokenStore().getJwtToken, 0, 5))
 
   }
 
+  @media only screen and (max-width: 1000px) {
+    #TopInfo{
+      flex-direction: column;
+    }
+
+    #TotalSavings{
+      width: 100%;
+    }
+
+    #TotalSavings{
+      margin: 3%;
+    }
+
+    .ActiveMilestones{
+      width: 100%;
+    }
+
+    .ActiveChallenges{
+      width: 100%;
+    }
+
+    #MobileButtons{
+      display: flex;
+    }
+  }
+
 </style>
\ No newline at end of file