111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import {RouterLink, RouterView} from 'vue-router'
|
|
import HelloWorld from './components/HelloWorld.vue'
|
|
import LoginPanel from "@/components/LoginPanel.vue";
|
|
import {onMounted, ref} from "vue";
|
|
import {Auth} from "@/services/auth";
|
|
import DialogHost from "@/components/dialog/DialogHost.vue";
|
|
import {LoginService} from "@/services/LoginService";
|
|
|
|
let showPopup = ref(false)
|
|
let loggedIn = ref(false)
|
|
|
|
Auth.loggedInSubject.subscribe((isLoggedIn) => {
|
|
loggedIn.value = isLoggedIn
|
|
})
|
|
|
|
function logout(){
|
|
Auth.logout()
|
|
}
|
|
|
|
function print(){
|
|
window.print()
|
|
}
|
|
|
|
onMounted(() => {
|
|
Auth.checkForToken()
|
|
})
|
|
|
|
LoginService.subject.subscribe(() => {
|
|
showPopup.value = true
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<nav class="no-print">
|
|
<div class="left">
|
|
<img src="./assets/minis_logo.png" style="height: 40px"/>
|
|
Miniplan App
|
|
</div>
|
|
<div class="right">
|
|
<button class="flat" @click="print"><i>print</i>Drucken</button>
|
|
<button v-if="!loggedIn" class="flat" @click="showPopup = true"><i>login</i> Einloggen</button>
|
|
<button v-if="loggedIn" class="flat" @click="logout"><i>logout</i> Abmelden</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<RouterView/>
|
|
<div class="popup-container" :class="{show: showPopup}" @click.self="showPopup = false">
|
|
<LoginPanel :active="showPopup" @success="showPopup = false"/>
|
|
</div>
|
|
|
|
<DialogHost/>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
nav {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 32px;
|
|
border-bottom: 1px solid #d7d5d5;
|
|
font-weight: 700;
|
|
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
gap: 20px;
|
|
}
|
|
|
|
.right {
|
|
flex-shrink: 0;
|
|
}
|
|
@media print{
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.popup-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 100;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
transition: 200ms opacity;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
|
|
* {
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.show {
|
|
pointer-events: auto;
|
|
|
|
* {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|