feat: Adding endpoints in leaderboard

src/components/LeaderboardComponents/Leaderboard.vue

@@ -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

 <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

 <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

 <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

@@ -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