wrbapp/frontend/app.vue
Xeovalyte 6fb439a754
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
large backend recreation
2023-03-20 11:23:46 +01:00

55 lines
1.4 KiB
Vue

<template>
<div v-if="!userStore.userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex justify-center items-center">
<div>
<Icon size="4em" name="ion:load-c" class="animate-spin" />
<h2 class="mt-2 font-bold">Loading...</h2>
</div>
</div>
<div v-else class="">
<div v-if="userStore.isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
<LayoutTopbar />
<div class="overflow-y-auto pt-3">
<NuxtPage />
</div>
<LayoutNavbar class="mt-auto" />
</div>
<div v-else class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
<Login />
</div>
</div>
</template>
<script setup>
import { Device } from '@capacitor/device';
const userStore = useUserStore()
onMounted(async () => {
userStore.init()
Device.getInfo().then(info => {
if (info.platform === 'ios') document.getElementsByClassName('top-right')[0].classList.add('toastios')
});
if (process.client) {
if ('serviceWorker' in navigator && window.isSecureContext) {
Device.getInfo().then(info => {
if (info.platform === 'web') registerServiceWorker()
else document.getElementsByClassName('top-right')[0].classList.add('toastios')
});
}
}
})
</script>
<style>
.body {
padding-top: 10px;
margin-bottom: env(safe-area-inset-bottom);
}
.toastios {
padding-top: 20px;
}
</style>