Connected milestone path to the backend endpoint

src/components/MilestonePath/MilestonePath.vue

@@ -9,7 +9,7 @@ const props = defineProps({
   totalSaved: Number
 });
 
-const totalNodes = ref(props.totalToSave ? Math.ceil(props.totalToSave / 250) : 0);
+const totalNodes = ref(50)
 const remainingNodes = ref(
   totalNodes.value && props.totalSaved && props.totalToSave
     ? Math.ceil(totalNodes.value - (totalNodes.value * (props.totalSaved / props.totalToSave)))
@@ -30,6 +30,9 @@ const nodes = Array.from({ length: totalNodes.value }, (_, index) => ({
 const nodeForegroundColors = ref(['#CCCCCF', '#A4ED45', '#FCBD47'])
 const nodeBackgroundColors = ref(['#A4A4A6', '#6AB40A', '#FFA600'])
 
+console.log("Total to Save: " + props.totalToSave)
+console.log("Total saved: " + props.totalSaved)
+
 </script>
 
 <template>

src/stores/currentMilestone.ts

@@ -2,10 +2,11 @@ import { ref } from 'vue'
 import { defineStore } from 'pinia'
 
 export const useMilestoneStore = defineStore('milestoneId', () => {
-  const milestoneId = ref<number>();
+  const milestoneId = ref<number>(0);
 
   function setMilestoneId(id: number){
     milestoneId.value = id
+    console.log(id)
   }
 
   return { milestoneId, setMilestoneId}

src/utils/MilestonePathUtils.ts

 import axios from 'axios'
+import {useTokenStore} from '@/stores/token'
 
 export async function getMilestoneDetails(id: number){
 
@@ -7,9 +8,9 @@ export async function getMilestoneDetails(id: number){
   const config = {
     headers: {
       'Content-Type': 'Application/json',
-      //'Authorization': 'Bearer ' + TokenStore().getToken()
+      'Authorization': 'Bearer ' + useTokenStore().getJwtToken
     }
   }
 
-  return await axios.post("http://Localhost:8080/milestone/id", id, config);
+  return await axios.get("http://Localhost:8080/milestone/" + id, config);
 }
\ No newline at end of file

src/views/HomePage/MilestonePathView.vue

 <script setup lang="ts">
 
 import MilestoneProgress from '@/components/MilestonePath/MilestoneProgress.vue'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import DirectTransfer from '@/components/MilestonePath/DirectTransfer.vue'
 import MilestoneDescription from '@/components/MilestonePath/MilestoneDescription.vue'
 import MilestonePath from '@/components/MilestonePath/MilestonePath.vue'
 import { getMilestoneDetails } from '@/utils/MilestonePathUtils'
+import { useMilestoneStore } from '@/stores/currentMilestone'
 
 const pathName = ref("PathNameHere")
 const pathDescription = ref("PathDescriptionHere")
 
-const totalToSave = ref(2000)
+const totalToSave = ref(3000)
 const totalSaved = ref(0)
 
 const showPath = ref(true);
@@ -37,12 +38,17 @@ function showPathField(){
 
 checkScreenWidth()
 
-//Re-add when token store is up and running
-//const response = getMilestoneDetails(1)
-//pathName.value = response//data//milestoneTitle
-//pathDescription.value = response//data//milestoneDescription
-//totalToSave.value = response//data//milestoneGoalSum
-//totalSaved.value = response//data//milestoneCurrentSum
+onMounted( async () =>{
+  const milestoneId = useMilestoneStore().milestoneId;
+  console.log(milestoneId)
+  const response = await getMilestoneDetails(milestoneId)
+  pathName.value = response.data.milestoneTitle
+  pathDescription.value = response.data.milestoneDescription
+  totalToSave.value = response.data.milestoneGoalSum
+  totalSaved.value = response.data.milestoneCurrentSum
+  milestonePathKey.value++;
+})
+
 
 function updateTotalSaved(value: number) {
   totalSaved.value += value;