From 765d1cacf55ea76bc7cfe74cb4dc16046b8b3277 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20H=C3=B8vik?= <andehovi@stud.ntnu.no>
Date: Tue, 23 Apr 2024 11:17:29 +0200
Subject: [PATCH] Added button to remove and add friend
---
.../UserProfile/UserProfileForeignLayout.vue | 244 ++++++++++--------
1 file changed, 140 insertions(+), 104 deletions(-)
diff --git a/src/components/UserProfile/UserProfileForeignLayout.vue b/src/components/UserProfile/UserProfileForeignLayout.vue
index 1f1b997..153d88d 100644
--- a/src/components/UserProfile/UserProfileForeignLayout.vue
+++ b/src/components/UserProfile/UserProfileForeignLayout.vue
@@ -4,8 +4,9 @@ import Menu from "@/components/BaseComponents/Menu.vue";
import Footer from "@/components/BaseComponents/Footer.vue";
import {useRoute, useRouter} from "vue-router";
import {useUserInfoStore} from "../../stores/UserStore";
-import {UserControllerService} from "@/api";
+
import {onMounted, ref} from "vue";
+import {UserService} from "@/api";
let numberOfHistory = 6;
@@ -18,6 +19,8 @@ let streak = 0;
let username = ref()
+let friend = ref(false)
+
let id = ref()
@@ -36,7 +39,7 @@ function toRoadmap(){
//todo Make a store of a friend-instance
onMounted(async () => {
try {
- let response = await UserControllerService.getProfile({
+ let response = await UserService.getProfile({
userId: id.value.id
})
username.value = response.firstName
@@ -46,7 +49,20 @@ onMounted(async () => {
}
})
+function addFriend(){
+ friend.value = true
+ console.log("Added friend")
+
+ //todo Send POST to backend when endpoints is made and add friend
+}
+function removeFriend(){
+ friend.value = false
+ console.log("Removed friend")
+
+ //todo Send POST to backend when endpoints is made and remove friend
+
+}
function toUpdateUserSettings(){
@@ -54,103 +70,115 @@ function toUpdateUserSettings(){
}
</script>
-<template>
- <div class="container text-center">
- <div class="row">
- <div class="col">
- <img src="/src/assets/userprofile.png" class="img-fluid">
- <p class="h2">{{username}}</p>
- </div>
- </div>
- <div class="row">
- <div class="col">
- <img src="/src/assets/icons/fire.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar">
- <p>Streak: 10</p>
- </div>
- </div>
- <div class="row">
- <div class="col-12">
- <img src="/src/assets/icons/dollar.png" class="img-fluid" style="width: 30px; height: 30px" alt="dollar">
- <p class="">Points: 2000 </p>
- </div>
- </div>
- <div class="row">
- <div class="col">
- total points earned
- </div>
- <div class="col">
- total badges earned
- </div>
- </div>
- <div class="row">
- <div class="col">
- <!-- Here is the badges of the user -->
- <div class="container-fluid">
- <h1 class="mt-5 text-start badges-text">Badges</h1>
- <div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">
-
- <div class="col-5">
- <div class="card badges-block card-1"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-2"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-3"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-4"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-5"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-6"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-7"></div>
- </div>
- <div class="col-5">
- <div class="card badges-block card-8"></div>
+<template>
+ <div class="container py-5 h-100">
+ <div class="row d-flex justify-content-center align-items-center h-100">
+ <div class="col 12">
+ <div class="card">
+ <div class="rounded-top text-white d-flex flex-row bg-primary" style="height:200px;">
+ <div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
+ <img src="https://bootdey.com/img/Content/avatar/avatar3.png" alt="Generic placeholder image"
+ class="img-fluid img-thumbnail mt-4 mb-2" style="width: 150px; z-index: 1">
+ <button v-if="!friend" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-primary"
+ data-mdb-ripple-color="dark" style="z-index: 1;" @click="addFriend">
+ Add Friend
+ </button>
+ <button v-if="friend" type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-danger"
+ data-mdb-ripple-color="dark" style="z-index: 1;" @click="removeFriend">
+ Remove Friend
+ </button>
</div>
- <div class="col-5">
- <div class="card badges-block card-9"></div>
+ <div class="ms-3" style="margin-top: 130px;">
+ <h1>{{username}}</h1>
</div>
- <div class="col-5">
- <div class="card badges-block card-10"></div>
+ </div>
+ <div class="p-4 text-black" style="background-color: #f8f9fa;">
+ <div class="d-flex justify-content-end text-center py-1">
+ <div>
+ <p class="mb-1 h2">253 <img src="@/assets/items/pigcoin.png" style="width: 4rem"></p>
+ <p class="small text-muted mb-0">Points</p>
+ </div>
+ <div class="px-3">
+ <p class="mb-1 h2">1026 <img src="@/assets/icons/fire.png" style="width: 4rem"></p>
+ <p class="small text-muted mb-0">Streak</p>
+ </div>
</div>
</div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col">
- <!-- Here is the history of saving target -->
- <div class="container-fluid mb-5">
- <h1 class="mt-5 text-start history-text">History</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 class="card history-block" >
- <div class="card mb-3" style="max-width: 540px;">
- <div class="row g-0">
- <div class="col-md-4">
- <img src="/src/assets/icons/piggybank.svg" class="img-fluid rounded-start h-40 mx-auto d-none d-md-block" alt="...">
+ <div class="card-body p-1 text-black">
+ <div class="row">
+ <div class="col">
+ <div class="container-fluid">
+ <h1 class="mt-5 text-start badges-text">Badges</h1>
+ <div class="scrolling-wrapper-badges row flex-row flex-nowrap mt-4 pb-4 pt-2">
+
+ <div class="col-5">
+ <div class="card badges-block card-1"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-2"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-3"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-4"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-5"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-6"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-7"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-8"></div>
+ </div>
+ <div class="col-5">
+ <div class="card badges-block card-9"></div>
</div>
- <div class="col-md-8">
- <div class="card-body">
- <h5 class="card-title">{{cardTitles[index-1]}}</h5>
- <p class="card-text">Money saved: 200 <br/>You are one challenge: 21</p>
- <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
- <a href="#" class="btn stretched-link" @click="toRoadmap"></a>
+ <div class="col-5">
+ <div class="card badges-block card-10"></div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col">
+ <!-- Here is the history of saving target -->
+ <div class="container-fluid mb-5">
+ <h1 class="mt-5 text-start history-text">History</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 class="card history-block">
+ <div class="card mb-3" style="max-width: 540px;">
+ <div class="row g-0">
+ <div class="col-md-4">
+ <img src="/src/assets/icons/piggybank.svg"
+ class="img-fluid rounded-start h-40 mx-auto d-none d-md-block" alt="...">
+ </div>
+ <div class="col-md-8">
+ <div class="card-body">
+ <h5 class="card-title">{{ cardTitles[index - 1] }}</h5>
+ <p class="card-text">Money saved: 200 <br />You are one challenge: 21</p>
+ <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
+ <a href="#" class="btn stretched-link" @click="toRoadmap"></a>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
+
</div>
</div>
</div>
</div>
-
</div>
</div>
</div>
@@ -158,28 +186,28 @@ function toUpdateUserSettings(){
</template>
<style scoped>
-.scrolling-wrapper-badges{
+.scrolling-wrapper-badges {
overflow-x: auto;
}
-.scrolling-wrapper-history{
+.scrolling-wrapper-history {
max-height: 300px;
overflow: auto;
}
-.badges-text{
+.badges-text {
font-weight: 500;
font-size: 2.0em;
}
-.history-text{
+.history-text {
font-weight: 500;
font-size: 2.0em;
}
-.badges-block{
+.badges-block {
height: 200px;
background-color: #fff;
border: none;
@@ -187,14 +215,15 @@ function toUpdateUserSettings(){
background-size: cover;
transition: all 0.2s ease-in-out !important;
border-radius: 24px;
- &:hover{
+
+ &:hover {
transform: translateY(-5px);
box-shadow: none;
opacity: 0.9;
}
}
-.history-block{
+.history-block {
height: 200px;
background-color: #fff;
@@ -204,61 +233,68 @@ function toUpdateUserSettings(){
transition: all 0.2s ease-in-out !important;
border-radius: 24px;
margin: 20px;
- &:hover{
+
+ &:hover {
transform: translateY(-5px);
box-shadow: none;
opacity: 0.9;
}
}
-.card-1{
+.card-1 {
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
-.card-2{
+.card-2 {
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
-.card-3{
+.card-3 {
background-color: #00DBDE;
background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}
-.card-4{
+.card-4 {
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
-.card-5{
+.card-5 {
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}
-.card-6{
+.card-6 {
background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}
-.card-7{
+.card-7 {
background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}
-.card-8{
+.card-8 {
background-color: #FBDA61;
background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
}
-.card-9{
+.card-9 {
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
-.card-10{
+.card-10 {
background-color: #FF3CAC;
background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
}
+
+
+/*-------*/
+.rounded-top {
+ background-color: #00DBDE;
+}
</style>
\ No newline at end of file
--
GitLab