288 lines
6.8 KiB
Vue
288 lines
6.8 KiB
Vue
<script setup>
|
|
import { toast } from 'vue3-toastify';
|
|
import { ref } from 'vue'
|
|
import i18n, { setLang } from './i18n.js'
|
|
import { isLogged } from '@/rest/Users.js'
|
|
import { notifications, fetchNotifications, archiveNotification } from '@/rest/notifications.js'
|
|
|
|
import { appList, currentView } from '@/rest/apps.js'
|
|
var prevURL;
|
|
var currentURL = window.location.hash;
|
|
|
|
window.onhashchange = function() {
|
|
prevURL = currentURL;
|
|
currentURL = window.location.hash;
|
|
}
|
|
const Logged = ref(isLogged());
|
|
|
|
if(Logged.value){
|
|
fetchNotifications();
|
|
}
|
|
|
|
window.addEventListener('hashchange', () => {
|
|
if((location.hash === "#/home" && prevURL === "#/login") || (location.hash === "#/home" && prevURL === "#/profil")){
|
|
window.location.reload();
|
|
}
|
|
});
|
|
const home=ref(i18n("app.home"))
|
|
const settings=ref(i18n("app.settings"))
|
|
const login=ref(i18n("app.login"))
|
|
const active=ref(false)
|
|
const notification = ref(false)
|
|
|
|
const apps = ref([])
|
|
appList().then(e => apps.value = e)
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="topBar">
|
|
<ul class="horizontal">
|
|
<li title=home>
|
|
<a class="icon" href="#home">
|
|
<img class="clyde" src="/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
|
|
</a></li>
|
|
<li title=home>
|
|
<a class="icon" href="#home">
|
|
<div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
|
</a></li>
|
|
<li style="float: right;" title=login>
|
|
<a class="icon" href="#/login">
|
|
<div class="fa-solid fa-user" :style="Logged ? 'color: red' : ''" style="margin-top: 7px; margin-bottom: 3px; "></div>
|
|
</a></li>
|
|
<li style="float: right;" title=notifications @click="notification = !notification">
|
|
<a class="icon">
|
|
<div class="fa-solid fa-bell" :style="notifications.length != 0 ? 'color:orange': '' " style="margin-top: 7px; margin-bottom: 3px;"></div>
|
|
<ul v-if=notification id="notification">
|
|
<li v-for="notif in notifications" @click="archiveNotification(notif.id)"> {{ i18n(notif.subject) }} - {{ notif.body }}</li>
|
|
</ul>
|
|
</a></li>
|
|
<li @click="active=!active" class="option"style="float: right;" title=settings>
|
|
<a class="icon">
|
|
<div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div>
|
|
<div v-if="active" class="dropdown">
|
|
<div class="dropdown-content">{{i18n("app.language")}}</div>
|
|
<ul style="list-style-type:none;">
|
|
<li style=" margin-bottom:10px;margin-right:20px;float:left; font-size:10px; color:black;">
|
|
<button @:click="setLang('en');" href="#home">EN</button>
|
|
|
|
</li>
|
|
<li style="float:left;font-size:10px; color:black;"><button @:click="setLang('fr');" href="#home">FR</button></li>
|
|
</ul>
|
|
<div style='align-items:center;'>
|
|
<a style="cursor:pointer;font-size:20px;" href="#/profil" class="dropdown-content">
|
|
{{i18n("app.manage.profile")}}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="leftBar">
|
|
<ul class="vertical">
|
|
<li v-for="app in apps">
|
|
<a :href="app.path">
|
|
<div class="fa-solid" :class="app.icon" style="font-size: 40px;"></div>
|
|
<div class="text">{{app.text}}</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="page">
|
|
<Suspense>
|
|
<component :is="currentView" />
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.container{
|
|
height: 100%;
|
|
width: 100%;
|
|
display:grid;
|
|
|
|
grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start] auto [endCol];
|
|
grid-template-rows:[firstRow-start] var(--header-size) [firstRow-end secondRow-start] calc(100% - var(--header-size)) [endRow];
|
|
grid-template-areas:
|
|
"topBar topBar"
|
|
"leftBar page";
|
|
|
|
}
|
|
|
|
.page {
|
|
grid-area:page;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.topBar{
|
|
grid-area:topBar;
|
|
}
|
|
|
|
.leftBar{
|
|
grid-area:leftBar;
|
|
}
|
|
.option {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
|
|
.dropdown {
|
|
margin-top:55px;
|
|
width:160px;
|
|
display: inline-block;
|
|
height:110px;
|
|
font-size: 13px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
background-color:white;
|
|
}
|
|
|
|
.dropdown-content {
|
|
min-width: 160px;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
right:0;
|
|
color:rgb(50,50,50);
|
|
text-decoration: none;
|
|
font-size:24px
|
|
}
|
|
|
|
.dropdown-content div{
|
|
display:block;
|
|
}
|
|
|
|
ul.vertical{
|
|
list-style-type: none;
|
|
margin-top: var(--header-size);
|
|
top:0;
|
|
left:0;
|
|
padding: 25px 0;
|
|
width: 70px ;
|
|
background-color: rgb(53, 53, 53);
|
|
border-right:5px;
|
|
border-color:black;
|
|
height: calc( 95% - var(--header-size) ) ;
|
|
position: fixed;
|
|
overflow: scroll;
|
|
transition-duration: .3s;
|
|
}
|
|
|
|
li a{
|
|
display: flex;
|
|
padding: 8px 16px;
|
|
color:rgb(255, 255, 255);
|
|
text-decoration: none;
|
|
}
|
|
|
|
ul.vertical li a:hover:not(.active) {
|
|
background-color: rgb(112, 112, 112);
|
|
border-radius:6px;
|
|
color: white;
|
|
transform: translate(0px ,1px);
|
|
}
|
|
|
|
ul.vertical li a.active {
|
|
background-color: rgb(239, 60, 168);
|
|
border-radius:6px;
|
|
}
|
|
|
|
ul.horizontal li a.active {
|
|
background-color: rgb(57, 57, 57);
|
|
border-radius:6px;
|
|
}
|
|
ul.horizontal {
|
|
z-index: 101;
|
|
box-shadow: 0px 3px 3px rgb(0, 0, 0);
|
|
display: block ;
|
|
list-style-type:none;
|
|
margin:0;
|
|
padding: 0;
|
|
top: 0;
|
|
left:0;
|
|
|
|
position: fixed;
|
|
height:var(--header-size);
|
|
width: 100%;
|
|
background-color: rgb(24, 24, 24);
|
|
}
|
|
|
|
ul.horizontal li {
|
|
font-size: 35px;
|
|
float: left;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
ul.horizontal li a.icon:hover:not(.active){
|
|
background-color: black;
|
|
border-radius:6px;
|
|
color:white;
|
|
}
|
|
|
|
ul.vertical:hover {
|
|
z-index: 100;
|
|
width: 250px;
|
|
border-top-right-radius: 40px;
|
|
box-shadow: 3px 0px 3px rgb(0, 0, 0);
|
|
transition-duration: .3s;
|
|
|
|
}
|
|
|
|
.text {
|
|
right: 0%;
|
|
width: 0%;
|
|
display:none;
|
|
color: white;
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
transition-duration: .3s;
|
|
}
|
|
|
|
ul.vertical:hover .text {
|
|
opacity:1;
|
|
display: inline;
|
|
width: 60%;
|
|
transition-duration: .3s;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.clyde:hover{
|
|
content: url("./assets/angry_clyde.png")
|
|
}
|
|
|
|
#notification{
|
|
position: absolute;
|
|
top: 61px;
|
|
right: 0;
|
|
background-color: white;
|
|
width: 300px;
|
|
height: 600px;
|
|
border-radius: 10px;
|
|
margin: 10px;
|
|
}
|
|
|
|
#notification > li{
|
|
color: black;
|
|
list-style: none;
|
|
font-size: 0.4em;
|
|
display: block;
|
|
background-color: #00FF00A0;
|
|
margin: 1px;
|
|
border-radius: 42px;
|
|
padding: 10px;
|
|
}
|
|
|
|
#notification > li:hover{
|
|
background-color: #00FF0000
|
|
}
|
|
|
|
</style>
|
|
|
|
<!-- vim:set noet sts=0 sw=4 ts=2: -->
|