Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
F
frontend
Manage
Activity
Members
Labels
Plan
Issues
1
Issue boards
Milestones
Wiki
Code
Merge requests
0
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package Registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
idatt2106-2024-07
frontend
Merge requests
!90
Profile stats
Code
Review changes
Check out branch
Download
Patches
Plain diff
Merged
Profile stats
ProfileStats
into
main
Overview
0
Commits
2
Pipelines
1
Changes
3
Merged
Viktor Gunnar Grevskott
requested to merge
ProfileStats
into
main
10 months ago
Overview
0
Commits
2
Pipelines
1
Changes
3
Expand
0
0
Merge request reports
Compare
main
main (base)
and
latest version
latest version
d0e618d6
2 commits,
10 months ago
3 files
+
262
−
139
Inline
Compare changes
Side-by-side
Inline
Show whitespace changes
Show one file at a time
Files
3
Search (e.g. *.vue) (Ctrl+P)
src/components/UserProfile/ExternalProfile.vue
+
162
−
122
Options
<
script
setup
lang=
"ts"
>
import
{
useRoute
,
useRouter
}
from
"
vue-router
"
;
import
{
onMounted
,
ref
}
from
"
vue
"
;
import
{
UserService
,
type
ProfileDTO
}
from
"
@/api
"
;
import
{
ref
,
onMounted
}
from
"
vue
"
;
import
{
useRoute
,
useRouter
}
from
"
vue-router
"
;
import
{
useUserInfoStore
}
from
"
@/stores/UserStore
"
;
import
{
UserService
,
BadgeService
,
GoalService
,
type
GoalDTO
,
type
BadgeDTO
,
FriendService
}
from
"
@/api
"
;
import
{
ItemService
}
from
"
@/api
"
;
import
handleUnknownError
from
'
@/components/Exceptions/unkownErrorHandler
'
let
numberOfHistory
=
6
;
let
cardTitles
=
[
"
Spain tour
"
,
"
Food waste
"
,
"
Coffee
"
,
"
Concert
"
,
"
New book
"
,
"
Pretty clothes
"
]
let
username
=
ref
()
let
friend
=
ref
(
false
)
let
profile
:
ProfileDTO
;;
let
firstname
=
ref
();
let
lastname
=
ref
();
const
imageUrl
=
ref
(
`../src/assets/userprofile.png`
);
let
hasHistory
=
ref
(
true
)
let
hasBadges
=
ref
(
false
)
let
hasInventory
=
ref
(
false
)
let
id
=
ref
()
//Get the id from the url. viktor har eksempel
let
user
=
useRoute
()
id
.
value
=
user
.
params
cons
ole
.
log
(
id
.
value
.
id
)
const
router
=
useRouter
()
;
const
route
=
useRoute
();
const
inventory
=
ref
([]
as
any
);
const
badges
=
ref
<
BadgeDTO
[]
>
([]);
const
backgroundName
=
ref
(
""
);
const
points
=
ref
(
0
as
any
);
cons
t
streak
=
ref
(
0
as
any
);
let
route
=
useRouter
()
let
goalName
=
ref
(
''
);
let
goalDescription
=
ref
(
''
);
let
targetAmount
=
ref
(
''
);
let
targetDate
=
ref
(
''
);
let
createdAt
=
ref
(
''
);
let
goals
=
ref
<
GoalDTO
[]
>
([])
function
toRoadmap
(){
route
.
push
(
'
/roadmap
'
)
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
){
handleUnknownError
(
error
)
console
.
error
(
"
Something went wrong
"
,
error
)
}
}
//todo Make a store of a friend-instance
onMounted
(
async
()
=>
{
async
function
setupForm
()
{
try
{
let
id
=
route
.
params
.
id
as
any
;
let
response
=
await
UserService
.
getProfile
({
userId
:
id
.
value
.
id
userId
:
id
})
profile
=
response
;
console
.
log
(
profile
)
username
.
value
=
profile
.
firstName
if
(
profile
.
profileImage
){
imageUrl
.
value
=
`http://localhost:8080/api/images/
${
profile
.
profileImage
}
`
firstname
.
value
=
response
.
firstName
;
lastname
.
value
=
response
.
lastName
;
if
(
response
.
point
?.
currentPoints
)
{
points
.
value
=
response
.
point
?.
currentPoints
;
}
if
(
response
.
streak
?.
currentStreak
)
{
streak
.
value
=
response
.
streak
?.
currentStreak
;
}
if
(
response
.
profileImage
)
{
imageUrl
.
value
=
"
http://localhost:8080/api/images/
"
+
response
.
profileImage
;
}
getInventory
();
getBadges
();
}
catch
(
err
)
{
handleUnknownError
(
err
)
console
.
error
(
err
)
}
}
const
getInventory
=
async
()
=>
{
try
{
const
response
=
await
ItemService
.
getInventory
();
inventory
.
value
=
response
;
if
(
inventory
.
value
.
length
>
0
)
{
hasInventory
.
value
=
true
}
else
{
hasInventory
.
value
=
false
console
.
log
(
'
No history
'
)
}
console
.
log
(
username
)
}
catch
(
error
)
{
console
.
error
(
"
Something went wrong getting the profile:
"
,
error
)
handleUnknownError
(
error
)
console
.
log
(
error
);
}
}
)
}
function
addFriend
(){
friend
.
value
=
true
console
.
log
(
"
Added friend
"
)
const
getBadges
=
async
()
=>
{
try
{
const
responseBadge
=
await
BadgeService
.
getBadgesUnlockedByUser
();
badges
.
value
=
responseBadge
;
if
(
badges
.
value
.
length
>
0
)
{
hasBadges
.
value
=
true
}
else
{
hasBadges
.
value
=
false
console
.
log
(
'
No history
'
)
}
}
catch
(
error
)
{
handleUnknownError
(
error
)
console
.
log
(
error
);
}
}
//todo Send POST to backend when endpoints is made and add friend
const
selectItem
=
(
item
:
any
)
=>
{
backgroundName
.
value
=
item
.
itemName
;
useUserInfoStore
().
setUserInfo
({
roadBackground
:
item
.
imageId
,
})
}
function
removeFriend
(){
friend
.
value
=
false
console
.
log
(
"
Removed friend
"
)
onMounted
(()
=>
{
setupForm
()
getGoals
()
})
//todo Send POST to backend when endpoints is made and remove friend
const
toRoadmap
=
()
=>
{
router
.
push
(
'
/
'
);
};
}
const
addFriend
=
()
=>
{
let
id
=
route
.
params
.
id
as
any
;
const
response
=
FriendService
.
addFriendRequest
({
userId
:
id
});
};
const
removeFriend
=
()
=>
{
let
id
=
route
.
params
.
id
as
any
;
const
response
=
FriendService
.
deleteFriendOrFriendRequest
({
friendId
:
id
});
};
function
toUpdateUserSettings
(){
route
.
push
(
'
/update-user
'
)
}
</
script
>
</
script
>
<
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=
"imageUrl"
alt=
"Generisk plassholderbilde"
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"
>
Legg til venn
</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"
>
Fjern venn
</button>
</div>
<div
class=
"ms-3"
style=
"margin-top: 130px;"
>
<h1>
{{
username
}}
</h1>
<div
class=
"rounded-top text-white d-flex flex-row bg-primary"
style=
"height:200px;"
id=
"banner"
>
<div
class=
" d-flex flex-column align-items-center justify-content-center"
>
<img
:src=
"imageUrl"
alt=
"Generisk plassholderbilde"
class=
"img-fluid img-thumbnail"
style=
"width: 150px; height:150px; margin-left: 25px; margin-right: 15px;"
>
</div>
<h1
data-cy=
"firstname"
style=
"display: flex; align-items: end; margin-bottom: 20px;"
>
{{
firstname
}}
{{
lastname
}}
</h1>
</div>
<div
class=
"p-
4
text-black"
style=
"background-color: #f8f9fa;"
>
<div
class=
"p-
3
text-black"
style=
"background-color: #f8f9fa;"
>
<div
class=
"d-flex justify-content-end text-center py-1"
>
<div
style=
"width: 100%; display: flex; justify-content: start"
>
<button
data-cy=
"toUpdate"
type=
"button"
data-mdb-button-init
data-mdb-ripple-init
class=
"btn btn-outline-primary"
data-mdb-ripple-color=
"dark"
style=
"z-index: 1; height: 40px; margin-left: 17px"
id=
"toUpdate"
@
click=
"addFriend"
>
Rediger profil
</button>
</div>
<div>
<p
class=
"mb-1 h2"
>
253
<img
src=
"@/assets/items/pigcoin.png"
style=
"width: 4rem"
></p>
<p
class=
"mb-1 h2"
data-cy=
"points"
>
{{
points
}}
<img
src=
"@/assets/items/pigcoin.png"
style=
"width: 4rem"
></p>
<p
class=
"small text-muted mb-0"
>
Poeng
</p>
</div>
<div
class=
"px-3"
>
<p
class=
"mb-1 h2"
>
1026
<img
src=
"@/assets/icons/fire.png"
style=
"width: 4rem"
></p>
<p
class=
"mb-1 h2"
data-cy=
"streak"
>
{{
streak
}}
<img
src=
"@/assets/icons/fire.png"
style=
"width: 4rem"
></p>
<p
class=
"small text-muted mb-0"
>
Streak
</p>
</div>
</div>
</div>
<hr>
<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"
>
Merker
</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>
<h1
class=
"mt-1 text-start badges-text"
>
Lageret ditt
</h1>
<div
v-if=
"hasInventory"
class=
"scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2"
>
<div
v-for=
"product in inventory"
:key=
"product.id"
class=
"card text-center"
style=
"width: 12rem; border: none; cursor: pointer; margin: 1rem; border: 2px solid black"
@
click=
"selectItem(product)"
>
<img
:src=
"`http://localhost:8080/api/images/$
{product.imageId}`" class="card-img-top"
alt="..." />
<div
class=
"card-body"
>
<h5
class=
"card-title"
>
{{
product
.
itemName
}}
</h5>
</div>
</div>
</div>
<div
v-else
>
Du har ingen ting på lageret ditt, gå til butikken for å kjøpe!
</div>
<div
v-if=
"backgroundName"
class=
"text-success"
>
You selected the background:
<strong>
{{
backgroundName
}}
!
</strong></div>
</div>
</div>
</div>
</div>
<hr>
<div
class=
"card-body p-1 text-black"
>
<div
class=
"row"
>
<div
class=
"col"
>
<!-- 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"
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"
>
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>
<a
href=
"#"
class=
"btn stretched-link"
@
click=
"toRoadmap"
></a>
</div>
</div>
</div>
<div
class=
"container-fluid"
>
<h1
class=
"mt-1 text-start badges-text"
>
Merker
</h1>
<div
v-if=
"hasBadges"
class=
"scrolling-wrapper-badges row flex-row flex-nowrap mt-2 pb-2 pt-2"
>
<div
v-for=
"badge in badges"
:key=
"badge.id"
class=
"card text-center"
style=
"width: 12rem; border: none; cursor: pointer; margin: 1rem;
border: 2px solid black"
data-bs-toggle=
"tooltip"
data-bs-placement=
"top"
data-bs-custom-class=
"custom-tooltip"
:data-bs-title=
"badge.criteria"
>
<img
:src=
"`http://localhost:8080/api/images/$
{badge.imageId}`" class="card-img-top"
alt="..." />
<div
class=
"card-body"
>
<h5
class=
"card-title"
>
{{
badge
.
badgeName
}}
</h5>
</div>
</div>
</div>
</div>
</div>
<div
v-else
>
Ingen merker
</div>
</div>
</div>
</div>
@@ -196,8 +234,6 @@ function toUpdateUserSettings(){
overflow
:
auto
;
}
.badges-text
{
font-weight
:
500
;
font-size
:
2.0em
;
@@ -242,6 +278,10 @@ function toUpdateUserSettings(){
}
}
#banner
{
background-image
:
url('/src/assets/banners/stacked.svg')
;
}
.card-1
{
background-color
:
#4158D0
;
background-image
:
linear-gradient
(
43deg
,
#4158D0
0%
,
#C850C0
46%
,
#FFCC70
100%
);
Loading