flaschengeist-frontend/src/pages/Offline.vue

<template>
  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
    <div>
      <div>
        <svg
          style="max-width: 400px"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 292.761 292.761"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          enable-background="new 0 0 292.761 292.761"
          fill="white"
        >
          <g>
            <circle cx="87.493" cy="25.907" r="25.907" />
            <path
              d="m194.386,209.531l-42.802-36.895c-1.825-1.573-4.001-2.683-6.345-3.237l-72.533-17.136 47.755,.703v-34.439l-46.525-26.18 50.36,14.829c4.016,1.182 8.356,0.276 11.564-2.414l38.264-32.093c1.1-0.923 2.001-1.994 2.698-3.161 2.656-4.442 2.36-10.26-1.154-14.449-4.437-5.29-12.32-5.981-17.61-1.544l-33.127,27.785-45.605-13.428 41.402,1.292 16.027-13.442-6.021-2.955-3.631,3.945-18.134,2.86h-37.216c-9.665,0-17.501,7.835-17.501,17.501v90.395l.029-.024c0.252,6.569 4.819,12.433 11.527,14.019l68.966,16.292 40.024,34.501c2.834,2.442 6.318,3.639 9.787,3.639 4.213,0 8.402-1.765 11.368-5.206 5.41-6.278 4.708-15.75-1.567-21.158z"
            />
            <path
              d="m233.888,50.21l-43.49-21.349c-2.17-1.065-4.545-1.612-6.94-1.612-0.861,0-1.724,0.071-2.581,0.213l-13.243,2.2-24.213-11.886c-6.197-3.043-13.688-0.485-16.728,5.713-3.042,6.197-0.484,13.687 5.713,16.729l14.402,7.069 3.539-2.969c4.405-3.694 9.994-5.729 15.738-5.729 7.266,0 14.11,3.192 18.777,8.756 6.702,7.991 7.61,19.371 2.258,28.32-0.529,0.884-1.127,1.717-1.759,2.523l28.035,13.762c0.916,0.45 1.914,0.664 2.967,0.664 5.79,0 13.263-6.495 18.05-16.247 5.66-11.524 5.424-23.236-0.525-26.157z"
            />
            <path
              d="m102.363,202.426l2.531,6.9-13.835,65.324c-1.716,8.105 3.463,16.065 11.567,17.782 1.048,0.222 2.092,0.328 3.122,0.328 6.936-0.001 13.165-4.839 14.66-11.896l14.265-67.357-5.513-4.752-26.797-6.329z"
            />
          </g>
        </svg>
      </div>
      <div class="text-h2">Der Admin is über's Kabel gestolpert!</div>
      <div>
        Aktuell kann der Backend Server nicht erreicht werden, wir versuchen es in
        {{ reload }} Sekunden erneut.
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onUnmounted } from '@vue/composition-api';

export default defineComponent({
  name: 'Offline',
  setup(_, { root }) {
    const reload = ref(10);
    const ival = setInterval(() => {
      reload.value -= 1;
      if (reload.value === 0) {
        const path = <string | null>root.$route.query.redirect || '/login';
        void root.$router.replace({ path: path });
      }
    }, 1000);
    onUnmounted(() => clearInterval(ival));
    return { reload };
  },
});
</script>