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

Added temporarly routing to foreignUserProfile

parent da2022bd
No related branches found
No related tags found
1 merge request!40Feature/userprofile for foreign users
Pipeline #276870 failed
Stage: install_dependencies
Stage: lint
Stage: build_project
Hide whitespace changes
Inline Side-by-side
src/components/UserProfile/UserProfileForeignLayout.vue 0 → 100644
+ 264
− 0
View file @ 92787593
<script setup lang="ts">
// A more limited view of a users profile
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";
let numberOfHistory = 6;
let cardTitles = ["Spain tour", "Food waste", "Coffee", "Concert", "New book", "Pretty clothes"]
let points = 0;
let streak = 0;
let username = ref()
let id = ref()
//Get the id from the url. viktor har eksempel
let user = useRoute()
id.value = user.params
console.log(id.value.id)
let route = useRouter()
function toRoadmap(){
route.push('/roadmap')
}
//todo Make a store of a friend-instance
onMounted(async () => {
try {
let response = await UserControllerService.getProfile({
userId: id.value.id
})
username.value = response.firstName
console.log(username)
} catch (error) {
console.error("Something went wrong getting the profile: ", error)
}
})
function toUpdateUserSettings(){
route.push('/update-user')
}
</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>
</div>
<div class="col-5">
<div class="card badges-block card-9"></div>
</div>
<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>
</template>
<style scoped>
.scrolling-wrapper-badges{
overflow-x: auto;
}
.scrolling-wrapper-history{
max-height: 300px;
overflow: auto;
}
.badges-text{
font-weight: 500;
font-size: 2.0em;
}
.history-text{
font-weight: 500;
font-size: 2.0em;
}
.badges-block{
height: 200px;
background-color: #fff;
border: none;
background-position: center;
background-size: cover;
transition: all 0.2s ease-in-out !important;
border-radius: 24px;
&:hover{
transform: translateY(-5px);
box-shadow: none;
opacity: 0.9;
}
}
.history-block{
height: 200px;
background-color: #fff;
border: none;
background-position: center;
background-size: cover;
transition: all 0.2s ease-in-out !important;
border-radius: 24px;
margin: 20px;
&:hover{
transform: translateY(-5px);
box-shadow: none;
opacity: 0.9;
}
}
.card-1{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
.card-2{
background-color: #0093E9;
background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}
.card-3{
background-color: #00DBDE;
background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
}
.card-4{
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}
.card-5{
background-color: #85FFBD;
background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%);
}
.card-6{
background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}
.card-7{
background-color: #FA8BFF;
background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 90%);
}
.card-8{
background-color: #FBDA61;
background-image: linear-gradient(45deg, #FBDA61 0%, #FF5ACD 100%);
}
.card-9{
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
.card-10{
background-color: #FF3CAC;
background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
}
</style>
\ No newline at end of file
src/router/index.ts
+ 5
− 0
View file @ 92787593
......@@ -64,6 +64,11 @@ const routes = [
name: 'profile',
component: UserProfileView
},
{
path: '/profile/:id',
name: 'friend-profile',
component: () => import('@/views/User/UserProfileForeignView.vue'),
},
{
path: 'friends',
name: 'friends',
......
src/views/User/UserFriendsView.vue
+ 4
− 2
View file @ 92787593
<template>
<!-- Refactor with a for-loop -->
<div class="container">
<h1>Your Friends</h1>
<button class="btn btn-primary pull-right my-3" @click="addFriend">+ Add Friend</button>
......@@ -11,6 +12,7 @@
</div>
</div>
<h3>Amillie Price</h3>
<a href="#" @click="navigateToFriend(46)" class="btn stretched-link"></a>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit et cupiditate deleniti.
</div>
......@@ -358,8 +360,8 @@ function addFriend() {
}
// Define the navigateToQuiz method
const navigateToFriend = (frinedID) => {
const navigateToFriend = (friendID :string) => {
router.push('/profile/' + friendID)
};
const removeFriend = (friendID) => {
......
src/views/User/UserProfileForeignView.vue 0 → 100644
+ 12
− 0
View file @ 92787593
<script setup lang="ts">
import UserProfileForeignLayout from "@/components/UserProfile/UserProfileForeignLayout.vue";
</script>
<!-- The path to a foreign user is /{userId} || /profile/{userId}-->
<template>
<UserProfileForeignLayout></UserProfileForeignLayout>
</template>
<style scoped>
</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