Skip to content
Snippets Groups Projects
Commit 765d1cac authored by Anders Høvik's avatar Anders Høvik
Browse files

Added button to remove and add friend

parent c2d59c58
No related branches found
No related tags found
1 merge request!40Feature/userprofile for foreign users
Hide whitespace changes
Inline Side-by-side
src/components/UserProfile/UserProfileForeignLayout.vue
+ 140
− 104
View file @ 765d1cac
......@@ -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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment