Xeovalyte
0bad662565
All checks were successful
Build and Deploy / Deploy (push) Successful in 2m16s
73 lines
2.5 KiB
Vue
73 lines
2.5 KiB
Vue
<template>
|
|
<div v-if="showInstallGuide !== null && showInstallGuide && host != 'localhost'" class="bg-neutral-1100 dark:bg-neutral-900 h-screen flex flex-col px-5 text-center text-black dark:text-gray-200">
|
|
<h1 class="font-bold text-3xl text-center mb-10 mt-20 text-primary">Reddingsbrigade Waddinxveen</h1>
|
|
<p class="mb-10">Om gebruik te maken van de WRB App moet je deze installeren</p>
|
|
<h2 class="font-bold">Op een iPhone:</h2>
|
|
<p class="mb-10">
|
|
Ga naar <a href="https://apps.apple.com/us/app/waddinxveense-reddingsbrigade/id6443636255" class="underline">deze link</a> en download de app via de App Store
|
|
</p>
|
|
<h2 class="font-bold">Op een Android:</h2>
|
|
<ol class="list-decimal list-inside mb-3">
|
|
<li>Druk op het opties icoon:<Icon size="1.7em" name="ion:md-more" /></li>
|
|
<li>En kies voor "Toevoegen aan startscherm" of "App installeren"</li>
|
|
</ol>
|
|
<i>Als deze optie er niet is, gebruik dan de chrome browser</i>
|
|
</div>
|
|
<div v-else-if="userStore.userLoaded">
|
|
<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>
|
|
<div v-else 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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Device } from '@capacitor/device';
|
|
|
|
const userStore = useUserStore()
|
|
const showInstallGuide = ref(null)
|
|
|
|
const host = ref(null)
|
|
|
|
onMounted(async () => {
|
|
host.value = window.location.hostname
|
|
userStore.init()
|
|
|
|
Device.getInfo().then(info => {
|
|
if (info.platform === 'ios') {
|
|
showInstallGuide.value = false;
|
|
document.getElementsByClassName('top-right')[0].classList.add('toastios')
|
|
} else if (info.platform === 'web' && process.client && 'serviceWorker' in navigator && window.isSecureContext) {
|
|
if (window.matchMedia('(display-mode: standalone)').matches) showInstallGuide.value = false
|
|
else showInstallGuide.value = true
|
|
|
|
registerServiceWorker()
|
|
} else {
|
|
showInstallGuide.value = true
|
|
}
|
|
});
|
|
})
|
|
</script>
|
|
|
|
<style>
|
|
.body {
|
|
margin-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.toastios {
|
|
padding-top: env(safe-area-inset-top);
|
|
}
|
|
</style>
|