wrbapp/frontend/app.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>