Skip to content
Snippets Groups Projects
Commit 2999ede5 authored by Jens Christian Aanestad's avatar Jens Christian Aanestad
Browse files

Merge branch 'feature/inbox' into 'main' 

Feature/inbox

See merge request !59
parents 68d2a7d7 0b806f84
No related branches found
No related tags found
1 merge request!59Feature/inbox
Pipeline #281751 passed with warnings
Stage: install
Stage: build
Stage: test
Stage: lint
Hide whitespace changes
Inline Side-by-side
src/assets/icons/bell-white.svg 0 → 100644
+ 7
− 0
View file @ 2999ede5
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg fill="white" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 459.334 459.334" xml:space="preserve" stroke="white">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <g> <g> <g> <path d="M175.216,404.514c-0.001,0.12-0.009,0.239-0.009,0.359c0,30.078,24.383,54.461,54.461,54.461 s54.461-24.383,54.461-54.461c0-0.12-0.008-0.239-0.009-0.359H175.216z"/> <path d="M403.549,336.438l-49.015-72.002c0-22.041,0-75.898,0-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485 C254.152,10.963,243.19,0,229.667,0s-24.485,10.963-24.485,24.485v27.663c-57.237,11.381-100.381,61.879-100.381,122.459 c0,23.716,0,76.084,0,89.83l-49.015,72.002c-5.163,7.584-5.709,17.401-1.419,25.511c4.29,8.11,12.712,13.182,21.887,13.182 H383.08c9.175,0,17.597-5.073,21.887-13.182C409.258,353.839,408.711,344.022,403.549,336.438z"/> </g> </g> </g> </g>
</svg>
\ No newline at end of file
src/assets/icons/bell.svg 0 → 100644
+ 17
− 0
View file @ 2999ede5
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 459.334 459.334" xml:space="preserve">
<g>
<g>
<g>
<path d="M175.216,404.514c-0.001,0.12-0.009,0.239-0.009,0.359c0,30.078,24.383,54.461,54.461,54.461
s54.461-24.383,54.461-54.461c0-0.12-0.008-0.239-0.009-0.359H175.216z"/>
<path d="M403.549,336.438l-49.015-72.002c0-22.041,0-75.898,0-89.83c0-60.581-43.144-111.079-100.381-122.459V24.485
C254.152,10.963,243.19,0,229.667,0s-24.485,10.963-24.485,24.485v27.663c-57.237,11.381-100.381,61.879-100.381,122.459
c0,23.716,0,76.084,0,89.83l-49.015,72.002c-5.163,7.584-5.709,17.401-1.419,25.511c4.29,8.11,12.712,13.182,21.887,13.182
H383.08c9.175,0,17.597-5.073,21.887-13.182C409.258,353.839,408.711,344.022,403.549,336.438z"/>
</g>
</g>
</g>
</svg>
\ No newline at end of file
src/assets/icons/medal.png 0 → 100644
+ 0
− 0
View file @ 2999ede5
src/assets/icons/medal.png

28.1 KiB

src/components/BaseComponents/Menu.vue
+ 110
− 2
View file @ 2999ede5
......@@ -30,6 +30,33 @@
<router-link data-cy="store" class="nav-link text-white" :to="toStore()"><img
src="@/assets/icons/storefront.svg">Store</router-link>
</li>
<li class="nav-item dropdown">
<a data-mdb-dropdown-init class=" nav-link me-3 dropdown-toggle hidden-arrow notification" href="#" id="navbarDropdownMenuLink"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-bell text-white"></i>
<span class="badge rounded-pill badge-notification bg-danger">{{counter}}</span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li v-for="(array,key) in notifMap" :key="key" >
<div class="d-flex align-items-center">
<div v-if="array[1][0] === '1'" class="flex-shrink-0">
<img src="/src/assets/icons/medal.png" alt="Notification Icon" class="notification-icon" style="height: 20px; width: 20px">
</div>
<div v-if="array[1][0] === '2'" class="flex-shrink-0">
<img src="/src/assets/userprofile.png" alt="Notification Icon" class="notification-icon" style="height: 20px; width: 20px">
</div>
<div v-if="array[1][0] === '3'" class="flex-shrink-0">
<img src="/src/assets/icons/piggybank.svg" alt="Notification Icon" class="notification-icon" style="height: 20px; width: 20px">
</div>
<div class="flex-grow-1 ms-3">
<router-link class="not-item dropdown-item text-white" :to="getPath(array[1][0])">{{array[1][1]}}</router-link>
</div>
</div>
</li>
</ul>
</li>
<li v-if="userStore.isLoggedIn" class="nav-item dropdown">
<a data-cy="user"
class="nav-link dropdown-toggle username-text text-white "
......@@ -70,9 +97,11 @@
</nav>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from "vue-router";
import { useUserInfoStore } from '@/stores/UserStore';
import {onMounted, ref} from "vue";
const router = useRouter();
......@@ -86,6 +115,65 @@ if (useUserInfoStore().profileImage !== 0) {
profileImage = 'src/assets/userprofile.png';
}
//Hashmap that contains the path to the Badges, The Friend, The dashboard etc.
//The key value pair is the message of the notification and the path of the route
let notifMap = ref (new Map<number, any[]>);
let notifId = ref(0);
let path = ref('#');
let counter = ref(0)
/* id: 0 -> /roadmap
id: 1 -> /profile
id: 2 -> /friend
*/
function getNotification(){
//axios call
let response: any = ref( ['1', 'You have recived a award for getting 200 points'])
let response2: any = ref( ['2', 'You have recived a friend request from Jens Aanestad'])
let response3: any = ref( ['3', 'You have lost your streak. Come back to try again'])
notifMap.value.set(notifId.value,response.value)
notifId.value++
notifMap.value.set(notifId.value,response2.value)
notifId.value++
notifMap.value.set(notifId.value,response3.value)
notifId.value++
counter.value = notifMap.value.size
}
function toBadges(){
}
function getPath(id : string){
if(id === '1'){
return path.value = '/profile'
}
if(id === '2'){
return path.value = '/friends'
}
if(id === '3'){
return path.value = '/roadmap'
}
return '#';
}
function updateNotification(){
//Axios get request to the getFunction
}
function removeNotification() {
}
function toHome() {
return '/'
}
......@@ -130,7 +218,9 @@ function toLogout() {
userStore.clearUserInfo();
router.push('login')
}
onMounted(() => {
getNotification()
})
</script>
<style scoped>
......@@ -151,6 +241,9 @@ function toLogout() {
.nav-item:hover {
background-color: #2b6ac7;
}
.not-item:hover {
background-color: #2b6ac7;
}
.nav-item .dropdown {
display: flex;
......@@ -174,6 +267,16 @@ function toLogout() {
right: -0.5rem;
}
#notifyBtn {
background-color: #0A58CA;
border: #0A58CA;
}
#notifyBtn:hover {
background-color: #2b6ac7;
border: #2b6ac7;
}
.dropdown-menu[data-bs-popper] {
left: auto;
}
......@@ -216,4 +319,9 @@ function toLogout() {
height: auto;
aspect-ratio: 1.3/1;
}
.notification.hidden-arrow::after{
display: none;
}
</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