Add warning if backend is offline (implements #416)

src/boot/axios.ts

@@ -27,14 +27,18 @@ export default boot<Store<StateInterface>>(({ Vue, store }) => {
   });
 
   /***
-   * Intercept responses, filter 401 and logout
+   * Intercept responses
+   *   - filter 401 --> logout
+   *   - filter timeout or 502 --> backendOffline
    */
   axios.interceptors.response.use(
     response => response,
     error => {
-      if (error && 'response' in error) {
+      if (error) {
         const e = <AxiosError>error;
-        if (e.response && e.response.status == 401) {
+        if (e.code === 'ECONNABORTED' || e.response && e.response.status === 502) {
+          store.commit('session/setOffline', true);
+        } else if (e.response && e.response.status == 401) {
           return store.dispatch('session/clearup');
         }
       }

src/components/loading/BackendOffline.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-dialog
+      v-model="offline"
+      persistent
+      transition-show="scale"
+      transition-hide="scale"
+    >
+      <q-card style="width: 400px">
+        <q-card-section class="bg-negative text-white">
+          <div class="text-h6 col-12">Backend offline</div>
+        </q-card-section>
+
+        <q-card-section>
+          <span>Es scheint, dass das Backend aktuell offline ist.</span>
+        </q-card-section>
+
+        <q-card-actions align="right" class="bg-white text-negative">
+          <q-btn flat label="Erneut versuchen" v-close-popup @click="reload" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from '@vue/composition-api';
+import { Store } from 'vuex';
+import { StateInterface } from 'src/store';
+
+export default defineComponent({
+  name: 'BackendOffline',
+  setup(_, { root }) {
+    const offline = computed(
+      () => (<Store<StateInterface>>root.$store).state.session.backendOffline
+    );
+
+    const reload = function() {
+      root.$store.commit('session/setOffline', false);
+      root.$router.go(0);
+    };
+
+    return { offline, reload };
+  }
+});
+</script>

src/components/navigation/EssentialLink.vue

@@ -15,8 +15,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from '@vue/composition-api';
-import { Store } from 'vuex';
-import { StateInterface } from 'src/store';
 import { hasPermissions } from 'src/components/permission';
 
 export default defineComponent({

src/components/navigation/ShortCutLink.vue

@@ -4,8 +4,6 @@
 
 <script lang="ts">
 import { computed, defineComponent } from '@vue/composition-api';
-import { Store } from 'vuex';
-import { StateInterface } from 'src/store';
 import { hasPermissions } from 'src/components/permission';
 
 export default defineComponent({

src/layouts/MainLayout.vue

@@ -93,6 +93,8 @@
       />
     </q-drawer>
 
+    <BackendOffline />
+
     <q-page-container>
       <router-view />
     </q-page-container>
@@ -102,6 +104,7 @@
 <script lang="ts">
 import EssentialLink from 'components/navigation/EssentialLink.vue';
 import ShortCutLink from 'components/navigation/ShortCutLink.vue';
+import BackendOffline from 'components/loading/BackendOffline.vue';
 import { Screen } from 'quasar';
 import { defineComponent, ref, computed } from '@vue/composition-api';
 import { Store } from 'vuex';
@@ -140,7 +143,7 @@ declare module 'vue/types/vue' {
 
 export default defineComponent({
   name: 'MainLayout',
-  components: { EssentialLink, ShortCutLink },
+  components: { EssentialLink, ShortCutLink, BackendOffline },
   setup(_, ctx) {
     const leftDrawer = ref(false);
 

src/layouts/OutLayout.vue

@@ -1,8 +1,5 @@
 <template>
   <q-layout view="hHh lpr lFf">
-    <!-- Be sure to play with the Layout demo on docs -->
-
-    <!-- (Optional) The Header -->
     <q-header elevated>
       <q-toolbar>
         <q-toolbar-title>
@@ -40,12 +37,9 @@
       </q-toolbar>
     </q-header>
 
-    <!-- (Optional) The Footer -->
+    <BackendOffline />
-
-    <!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
 
     <q-page-container>
-      <!-- This is where pages get injected -->
       <router-view />
     </q-page-container>
   </q-layout>
@@ -54,8 +48,10 @@
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api';
 import ShortCutLink from 'components/navigation/ShortCutLink.vue';
+import BackendOffline from 'components/loading/BackendOffline.vue';
+
 export default defineComponent({
   name: 'OutLayout',
-  components: { ShortCutLink }
+  components: { ShortCutLink, BackendOffline }
 });
 </script>

src/plugins/user/store/session.ts

@@ -10,6 +10,7 @@ export interface SessionInterface {
   currentSession?: FG.Session;
   sessions: FG.Session[];
   loading: boolean;
+  backendOffline: boolean;
 }
 
 function loadFromLocal() {
@@ -21,7 +22,8 @@ function loadFromLocal() {
 const state: SessionInterface = {
   sessions: [],
   currentSession: loadFromLocal() || undefined,
-  loading: false
+  loading: false,
+  backendOffline: false
 };
 
 const mutations: MutationTree<SessionInterface> = {
@@ -38,6 +40,9 @@ const mutations: MutationTree<SessionInterface> = {
   },
   setLoading(state, value: boolean) {
     state.loading = value;
+  },
+  setOffline(state, value: boolean) {
+    state.backendOffline = value;
   }
 };