diff --git a/src/components/UserProfile/ExternalProfile.vue b/src/components/UserProfile/ExternalProfile.vue
index fbfb68c77bcc940033d6087d5195807e798b4808..c42d7595f43df28865db4a71db611e3bc38f1399 100644
--- a/src/components/UserProfile/ExternalProfile.vue
+++ b/src/components/UserProfile/ExternalProfile.vue
@@ -1,18 +1,25 @@
<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
-import {onMounted, ref} from "vue";
-import {UserService, type ProfileDTO} from "@/api";
+import {onMounted, type Ref, ref, type UnwrapRef} from "vue";
+import {UserService, type ProfileDTO, GoalService, type GoalDTO} from "@/api";
let numberOfHistory = 6;
let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "Pretty clothes"]
+
+let hasHistory = ref(true)
+let firstname = ref();
+let lastname = ref();
+let goals = ref<GoalDTO[]>([]);
+
let username = ref()
let friend = ref(false)
-let profile: ProfileDTO;;
+let profile: ProfileDTO;
+
const imageUrl = ref(`../src/assets/userprofile.png`);
@@ -49,12 +56,33 @@ onMounted(async () => {
}
})
-function addFriend(){
+function addFriend() {
friend.value = true
console.log("Added friend")
- //todo Send POST to backend when endpoints is made and add friend
}
+async function getGoals() {
+ try {
+ goals.value = await GoalService.getGoals();
+ console.log("number of goals: ", goals.value.length)
+ if (goals.value.length > 0) {
+ hasHistory.value = true
+ } else {
+ hasHistory.value = false
+ console.log('No history')
+ }
+ }catch (error){
+ console.error("Something went wrong getting the goals: " , error)
+ }
+}
+
+
+
+// Function to navigate to update user settings
+
+
+ //todo Send POST to backend when endpoints is made and add friend
+
function removeFriend(){
friend.value = false
@@ -64,10 +92,10 @@ function removeFriend(){
}
+onMounted(() =>{
+ getGoals()
+})
-function toUpdateUserSettings(){
- route.push('/update-user')
-}
</script>
@@ -151,8 +179,8 @@ function toUpdateUserSettings(){
<!-- Her er historikken over lagrede mål -->
<div class="container-fluid mb-5">
<h1 class="mt-5 text-start history-text">Historie</h1>
- <div class="row scrolling-wrapper-history">
- <div v-for="index in numberOfHistory" :key="index"
+ <div v-if="hasHistory" class="row scrolling-wrapper-history">
+ <div v-for="(item, index) in goals" :key="index"
class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
<div class="card history-block">
<div class="card mb-3" style="max-width: 540px;">
@@ -163,9 +191,9 @@ function toUpdateUserSettings(){
</div>
<div class="col-md-8">
<div class="card-body">
- <h5 class="card-title">{{ cardTitles[index - 1] }}</h5>
- <p class="card-text">Penger spart: 200 <br />Du har fullført en utfordring: 21</p>
- <p class="card-text"><small class="text-muted">Sist oppdatert for 3 minutter siden</small></p>
+ <h5 class="card-title">{{ goals[index]['name'] }}</h5>
+ <p class="card-text">{{goals[index]['description']}}</p>
+ <p class="card-text"><small class="text-muted">{{goals[index]['targetAmount']}}</small></p>
<a href="#" class="btn stretched-link" @click="toRoadmap"></a>
</div>
</div>
@@ -174,6 +202,7 @@ function toUpdateUserSettings(){
</div>
</div>
</div>
+ <div v-if="!hasHistory">No History!</div>
</div>
</div>
diff --git a/src/components/UserProfile/MyProfile.vue b/src/components/UserProfile/MyProfile.vue
index 7a10b3eab7904de7f0e12eb5b5fcaab5113f2929..e28506e35b46a43c93b1d7b1025ddeafedafe631 100644
--- a/src/components/UserProfile/MyProfile.vue
+++ b/src/components/UserProfile/MyProfile.vue
@@ -1,8 +1,8 @@
<script setup lang="ts">
-import { ref, onMounted } from "vue";
+import {ref, onMounted} from "vue";
import { useRouter } from "vue-router";
-import { useUserInfoStore } from "../../stores/UserStore";
-import { UserService, BadgeService } from "@/api";
+import { useUserInfoStore } from "@/stores/UserStore";
+import {UserService, BadgeService, GoalService, type GoalDTO, type BadgeDTO} from "@/api";
import { ItemService } from "@/api";
let numberOfHistory = 6;
@@ -11,11 +11,37 @@ let firstname = ref();
let lastname = ref();
const imageUrl = ref(`../src/assets/userprofile.png`);
+let hasHistory = ref(true)
+
const router = useRouter();
const inventory = ref([] as any);
-const badges = ref([] as any);
+const badges = ref<BadgeDTO[]>([]);
const backgroundName = ref("");
+
+let goalName = ref('');
+let goalDescription = ref('');
+let targetAmount = ref('');
+let targetDate = ref('');
+let createdAt = ref('');
+let goals = ref<GoalDTO[]>([])
+
+async function getGoals() {
+ try {
+ goals.value = await GoalService.getGoals();
+ console.log("number of goals: ", goals.value.length)
+ console.log('The id of a goal: ', goals.value[0])
+ if (goals.value.length > 0) {
+ hasHistory.value = true
+ } else {
+ hasHistory.value = false
+ console.log('No history')
+ }
+ }catch (error){
+ console.error("Something went wrong", error)
+ }
+}
+
async function setupForm() {
try {
const response = await UserService.getUser();
@@ -60,6 +86,7 @@ const selectItem = (item: any) => {
onMounted(() => {
setupForm()
+ getGoals()
})
const toRoadmap = () => {
@@ -72,6 +99,9 @@ const toRoadmap = () => {
const toUpdateUserSettings = () => {
router.push('/settings/profile');
};
+
+
+
</script>
<template>
@@ -155,9 +185,9 @@ const toUpdateUserSettings = () => {
<!-- Her er historikken over lagrede mål -->
<div class="container-fluid mb-5">
<h1 class="mt-1 text-start history-text">Historie</h1>
- <div class="row scrolling-wrapper-history">
- <div v-for="index in numberOfHistory" :key="index"
- class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
+ <div v-if="hasHistory" class="row scrolling-wrapper-history">
+ <div v-for="(item, index) in goals" :key="index"
+ class="col-md-4 col-sm-4 col-lg-4 col-xs-4 col-xl-4 control-label">
<div class="card history-block">
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
@@ -167,10 +197,9 @@ const toUpdateUserSettings = () => {
</div>
<div class="col-md-8">
<div class="card-body">
- <h5 class="card-title">{{ cardTitles[index - 1] }}</h5>
- <p class="card-text">Penger spart: 200 <br />Du har fullført en utfordring: 21</p>
- <p class="card-text"><small class="text-muted">Sist oppdatert for 3 minutter
- siden</small></p>
+ <h5 class="card-title">{{ goals[index]['name'] }}</h5>
+ <p class="card-text">{{goals[index]['description']}}</p>
+ <p class="card-text"><small class="text-muted">{{goals[index]['targetAmount']}}</small></p>
<a href="#" class="btn stretched-link" @click="toRoadmap"></a>
</div>
</div>
@@ -179,6 +208,9 @@ const toUpdateUserSettings = () => {
</div>
</div>
</div>
+ <div v-if="!hasHistory">
+ No History!
+ </div>
</div>
</div>
@@ -246,7 +278,7 @@ const toUpdateUserSettings = () => {
}
#banner {
- background-image: url('../src/assets/banners/stacked.svg');
+ background-image: url('/src/assets/banners/stacked.svg');
}
.card-1 {