Skip to content
Snippets Groups Projects
Commit 9ef74cd3 authored by Viktor Gunnar Grevskott's avatar Viktor Gunnar Grevskott
Browse files

Merge branch 'LeaderboardView' into 'main' 

feat: Adding endpoints in leaderboard

See merge request !26
parents 13445f3c 876bcc81
No related branches found
No related tags found
1 merge request!26feat: Adding endpoints in leaderboard
Pipeline #275817 failed
Stage: install_dependencies
Stage: lint
Stage: build_project
Hide whitespace changes
Inline Side-by-side
Showing
with 167 additions and 65 deletions
src/assets/401-error.png 0 → 100644
+ 0
− 0
View file @ 9ef74cd3
src/assets/401-error.png

327 KiB

src/assets/friends.png 0 → 100644
+ 0
− 0
View file @ 9ef74cd3
src/assets/friends.png

7.76 KiB

src/assets/globe.png 0 → 100644
+ 0
− 0
View file @ 9ef74cd3
src/assets/globe.png

38.8 KiB

src/assets/items/adfree.png 0 → 100644
+ 0
− 0
View file @ 9ef74cd3
src/assets/items/adfree.png

3.89 KiB

src/assets/items/coffee.jpg 0 → 100644
+ 0
− 0
View file @ 9ef74cd3
src/assets/items/coffee.jpg

8.4 KiB

src/assets/items/piggybank.webp 0 → 100644
+ 0
− 0
View file @ 9ef74cd3
src/assets/items/piggybank.webp

244 KiB

src/assets/items/pirbad.png 0 → 100644
+ 0
− 0
View file @ 9ef74cd3
src/assets/items/pirbad.png

27.6 KiB

src/assets/items/pirbadet.png 0 → 100644
+ 0
− 0
View file @ 9ef74cd3
src/assets/items/pirbadet.png

68.6 KiB

src/assets/items/viaplay.jpg 0 → 100644
+ 0
− 0
View file @ 9ef74cd3
src/assets/items/viaplay.jpg

5.4 KiB

src/components/LeaderboardComponents/Leaderboard.vue
+ 3
− 3
View file @ 9ef74cd3
......@@ -4,7 +4,7 @@
<table>
<tr v-for="(entry, index) in leaderboard" :key="entry.user.id">
<td class="number">{{ index + 1 }}</td>
<td class="name" @click="navigateToUserProfile(entry.user.id)">{{ entry.user.username }}</td>
<td class="name" @click="navigateToUserProfile(entry.user.id)">{{ entry.user.firstName }}</td>
<td class="points" v-if="index === 0">
{{ entry.score }}
<div class = "medal">
......@@ -55,7 +55,7 @@
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
height: 4rem;
}
tr:not(:first-child):hover {
......@@ -126,7 +126,7 @@
}
.ribbon {
width: 100%;
width: 106%;
height: 4.5rem;
top: -0.5rem;
background-color: #0A58CA;
......
src/views/LeaderboardView.vue
+ 92
− 20
View file @ 9ef74cd3
<template>
<br>
<div id="dropdownContainer">
<Button class="btn btn-primary text-white leaderBoardButton">Global</Button>
<Button class="btn btn-primary text-white leaderBoardButton">Friends</Button>
<h1 class="box">Leaderboard</h1>
</div>
<div id = "content">
<div id="dropdownContainer">
<div class="box">
<div class="btn-group-vertical" id="radioContainer" role="group"
aria-label="Vertical radio toggle button group">
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="vbtn-radio1" @click="global"><img src="@/assets/globe.png" style="width: 60px"> Global</label>
<input type="radio" class="btn-check" name="vbtn-radio" id="vbtn-radio2" autocomplete="off">
<label class="btn btn-outline-primary" for="vbtn-radio2" @click="friends"><img src="@/assets/friends.png" style="width: 60px"> Friends</label>
</div>
</div>
</div>
<main>
<div id="leaderboard">
<h1><img src="@/assets/items/v-buck.png" style="width: 2rem"> Total points</h1>
<Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
<Leaderboard :leaderboard="pointsLeaderboardData" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
<h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Current streak</h1>
<Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
<Leaderboard :leaderboard="currentLeaderboardData" @navigateToUserProfile="navigateToUserProfile" />
</div>
<div id="leaderboard">
<h1><img src="@/assets/icons/fire.png" style="width: 2rem"> Highest streak</h1>
<Leaderboard :leaderboard="leaderboardData" @navigateToUserProfile="navigateToUserProfile" />
<Leaderboard :leaderboard="streakLeaderboardData" @navigateToUserProfile="navigateToUserProfile" />
</div>
</main>
<div id = "communityContainer">
</div>
<div id="communityContainer">
<h1>Total points earned as a community</h1>
<h2>1000000 <img src="@/assets/items/v-buck.png" style="width: 2rem"></h2>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import Leaderboard from '@/components/LeaderboardComponents/Leaderboard.vue';
import { on } from 'events';
import { LeaderboardService } from '@/api';
let leaderboardData = ref([]);
let streakLeaderboardData = ref([]);
let currentLeaderboardData = ref([]);
let pointsLeaderboardData = ref([]);
const router = useRouter();
async function fetchQuizData() {
/*leaderboard(quizId).then((response) => {
leaderboardData.value = response.data.slice(0, 10);
}).catch((error) => {
console.error("Failed to fetch leaderboard data:", error);
});*/
global();
}
onMounted(() => {
fetchQuizData();
});
async function global() {
let globalPoints = await LeaderboardService.getLeaderboard({
type: "TOTAL_POINTS",
filter: "GLOBAL",
});
let globalStreak = await LeaderboardService.getLeaderboard({
type: "TOP_STREAK",
filter: "GLOBAL",
});
let globalCurrentStreak = await LeaderboardService.getLeaderboard({
type: "CURRENT_STREAK",
filter: "GLOBAL",
});
pointsLeaderboardData.value = globalPoints.entries;
currentLeaderboardData.value = globalCurrentStreak.entries;
streakLeaderboardData.value = globalStreak.entries;
}
async function friends() {
let friendsPoints = await LeaderboardService.getLeaderboard({
type: "TOTAL_POINTS",
filter: "FRIENDS",
});
let friendsStreak = await LeaderboardService.getLeaderboard({
type: "TOP_STREAK",
filter: "FRIENDS",
});
let friendsCurrentStreak = await LeaderboardService.getLeaderboard({
type: "CURRENT_STREAK",
filter: "FRIENDS",
});
pointsLeaderboardData.value = friendsPoints.entries;
currentLeaderboardData.value = friendsCurrentStreak.entries;
streakLeaderboardData.value = friendsStreak.entries;
}
const navigateToUserProfile = (userId: number) => {
......@@ -47,9 +100,8 @@ const navigateToUserProfile = (userId: number) => {
<style scoped>
main {
margin-top: 2rem;
margin-bottom: 4rem;
width: 100%;
width: 80%;
display: flex;
justify-content: space-around;
align-items: center;
......@@ -66,6 +118,18 @@ main {
margin-bottom: 3rem;
}
#content {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.box {
width: 90%;
}
h1 {
font-weight: 500;
margin-bottom: 1rem;
......@@ -75,7 +139,15 @@ h1 {
display: flex;
justify-content: center;
margin-bottom: 2rem;
margin-top: 3rem;
}
#radioContainer {
display: flex;
justify-content: center;
margin-bottom: 2rem;
width: 100%;
margin-top: 3.6rem;
}
#communityContainer {
......@@ -87,9 +159,9 @@ h1 {
}
.leaderBoardButton {
padding: 1rem 4rem;
font-weight: 700;
border-radius: 2rem;
margin: 1rem;
padding: 1rem 4rem;
font-weight: 700;
border-radius: 2rem;
margin: 1rem;
}
</style>
\ No newline at end of file
src/views/NotFoundView.vue
+ 20
− 18
View file @ 9ef74cd3
<template>
<div class="container-fluid"> <!-- Changed from 'container' to 'container-fluid' -->
<div class="row">
<div class="col-md-12">
<div class="error-template text-center"> <!-- 'text-center' for centering text content -->
<h1>
Oops!</h1>
<h2>
404 Not Found</h2>
<div class="error-details">
Sorry, an error has occurred, Requested page not found!
</div>
<div class="error-actions">
<Button1 button-text="Take Me Home" @click="home" />
<div class="row">
<div class="col-md-12">
<div class="error-template text-center"> <!-- 'text-center' for centering text content -->
<h1>
Oops!</h1>
<h2>
404 Not Found</h2>
<div class="error-details">
Sorry, an error has occurred, Requested page not found!
</div>
<div class="error-actions">
<Button1 button-text="Take Me Home" @click="home" />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
......@@ -32,13 +32,15 @@ const home = () => {
<style scoped>
.error-template {
text-align: center; /* Ensures all text and inline elements within are centered */
.error-template {
text-align: center;
/* Ensures all text and inline elements within are centered */
display: flex;
flex-direction: column;
align-items: center; /* Aligns child elements (which are block-level) centrally */
justify-content: center; /* Optional: if you want vertical centering */
align-items: center;
/* Aligns child elements (which are block-level) centrally */
justify-content: center;
/* Optional: if you want vertical centering */
margin: 2rem;
}
</style>
\ No newline at end of file
src/views/ShopView.vue
+ 45
− 24
View file @ 9ef74cd3
<template>
<br>
<div id="dropdownContainer">
<h1 class="box">Shop</h1>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>League</h1>
<h1>Fantacy</h1>
<div class="category row justify-content-between mb-5 m-2">
<!--<div class="col-md-4" v-for="product in products" :key="product.id">-->
<div class="card text-center" style="width: 16rem; border: none">
......@@ -33,48 +37,55 @@
<ShopButton button-text="100"></ShopButton>
</div>
</div>
<!--</div>-->
</div>
</div>
<div class="col-md-12">
<h1>Fantacy</h1>
<h1>Stash</h1>
<div class="category row justify-content-between mb-5 m-2">
<!--<div class="col-md-4" v-for="product in products" :key="product.id">-->
<div class="card text-center" style="width: 16rem; border: none">
<img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
<img src="@/assets/items/coffee.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">The panda</h5>
<ShopButton button-text="100"></ShopButton>
<h5 class="card-title">Free Coffee</h5>
<ShopButton button-text="500"></ShopButton>
</div>
</div>
</div>
<div class="card text-center" style="width: 16rem; border: none">
<img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
<img src="@/assets/items/viaplay.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">The panda</h5>
<ShopButton button-text="100"></ShopButton>
<h5 class="card-title">1 Month Viaplay</h5>
<ShopButton button-text="10000"></ShopButton>
</div>
</div>
</div>
<div class="card text-center" style="width: 16rem; border: none">
<img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
<img src="@/assets/items/pirbad.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">The panda</h5>
<ShopButton button-text="100"></ShopButton>
<h5 class="card-title">-10% rabatt</h5>
<ShopButton button-text="1000"></ShopButton>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<h1>Stash</h1>
<div class="category row justify-content-between mb-5 m-2">
<div class="card text-center" style="width: 16rem; border: none">
<img src="@/assets/items/galaxy.jpg" class="card-img-top" alt="...">
<img src="@/assets/items/adfree.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">The panda</h5>
<ShopButton button-text="100"></ShopButton>
<h5 class="card-title">Adfree</h5>
<ShopButton button-text="35kr"></ShopButton>
</div>
</div>
<!--</div>-->
</div>
<div class="card text-center" style="width: 16rem; border: none">
<img src="@/assets/items/piggybank.webp" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Premium</h5>
<ShopButton button-text="50kr"></ShopButton>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -93,6 +104,10 @@ import ShopButton from '@/components/Buttons/ShopButton.vue';
/* Rounded corners */
}
.box {
width:90%;
}
.card:hover {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
......@@ -105,4 +120,10 @@ import ShopButton from '@/components/Buttons/ShopButton.vue';
.col-md-12 {
border-bottom: 2px solid #000000;
}
#dropdownContainer {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
</style>
\ No newline at end of file
src/views/UnauthorizedView.vue
+ 7
− 0
View file @ 9ef74cd3
......@@ -26,3 +26,10 @@ const home = () => {
router.push('/');
};
</script>
<style scoped>
body {
background-image: url('@/assets/401-error.jpg');
}
</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