implemented dialog

frontend/src/layouts/MyLayout.vue

@@ -105,6 +105,23 @@
     <q-page-container>
       <router-view/>
     </q-page-container>
+
+    <q-dialog v-model="dialogShow" persistent transition-show="scale" transition-hide="scale">
+      <q-card :class="dialogColorBg" style="min-width: 300px">
+        <q-card-section>
+          <div class="text-h6">Fehler</div>
+        </q-card-section>
+
+        <q-card-section>
+          {{ dialogMessage }}
+        </q-card-section>
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn @click="dialogClose" flat label="OK" :color="dialogColorBtn" v-close-popup/>
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+
   </q-layout>
 </template>
 
@@ -115,14 +132,54 @@
     name: "MyLayout",
     data() {
       return {
+        // dialog: {
+        //   color: this,
+        //   show: true,
+        //   message: "Hallo Fehler! Dies ist ein Beispiel Fehler."
+        // },
         leftDrawerOpen: this.$q.platform.is.desktop,
         //menuButtonVisible: !this.$q.platform.is.desktop,
         //leftDrawerOpen: true,
         //miniState: true
       };
     },
+    computed: {
+      dialogShow: {
+        get() {
+          console.log("get dialogShow: "+this.$store.state.dialog.dialog.show)
+          return this.$store.state.dialog.dialog.show;
+        },
+        set(val) {
+          console.log("set dialogShow: "+val)
+          this.$store.state.dialog.dialog.show = val;
+        }
+      },
+      dialogMessage: {
+        get() {
+          console.log("get dialogMessage: "+this.$store.state.dialog.dialog.message)
+          return this.$store.state.dialog.dialog.message;
+        },
+      },
+      dialogColorBg: {
+        get() {
+          console.log("get dialogColorBg: " + this.$store.state.dialog.dialog.colorBackground)
+          return this.$store.state.dialog.dialog.colorBackground;
+        },
+      },
+      dialogColorBtn: {
+        get() {
+          console.log("get dialogColorBtn: "+this.$store.state.dialog.dialog.colorButton)
+          return this.$store.state.dialog.dialog.colorButton;
+        },
+      }
+    },
     methods: {
-      openURL
+      //openURL
+      dialogClose() {
+        console.log("dialogClose(): ")
+        this.$store.commit('dialog/RESET_MESSAGE_DIALOG');
+      },
+
     }
   };
 </script>

frontend/src/pages/Overview.vue

@@ -74,21 +74,6 @@
         </q-tab-panel>
 
       </q-tab-panels>
-      <q-dialog v-model="dialog" persistent transition-show="scale" transition-hide="scale">
-        <q-card class="bg-red-9 text-white" style="">
-          <q-card-section>
-            <div class="text-h6">Fehler</div>
-          </q-card-section>
-
-          <q-card-section>
-            {{ dialogMsg }}
-          </q-card-section>
-
-          <q-card-actions align="right" class="bg-white text-teal">
-            <q-btn flat label="OK" color="red-9" v-close-popup/>
-          </q-card-actions>
-        </q-card>
-      </q-dialog>
 
     </div>
   </q-page>
@@ -107,8 +92,6 @@
       return {
         tab: 'list',
         caches: [],
-        dialog: false,
-        dialogMsg: "",
       }
     },
     mounted: function () {

frontend/src/pages/Profile.vue

@@ -29,7 +29,7 @@
             <q-card class="q-mb-md" v-for="startedCache in startedCaches" :key="startedCache.id">
               <q-expansion-item
                 class=""
-                v-if="startedCache.cacheAccesDefinition.description == 'angefangen'"
+                v-if="startedCache.cacheAccesDefinition.description === 'angefangen'"
                 expand-icon-toggle
                 expand-separator
                 icon="location_on"
@@ -51,7 +51,7 @@
                   </q-item-section>
                 </q-item>
                 <q-item class="q-pr-sm reverse q-gutter-x-sm">
-                  <q-btn @click="startCache(startedCache.id)" unelevated color="positive" stack icon="arrow_forward"
+                  <q-btn @click="continueCache(startedCache.id)" unelevated color="positive" stack icon="arrow_forward"
                          label="Fortfahren" size="sm"/>
                 </q-item>
               </q-expansion-item>
@@ -64,7 +64,7 @@
             <q-card class="q-mb-md" v-for="startedCache in startedCaches" :key="startedCache.id">
               <q-expansion-item
                 class=""
-                v-if="startedCache.cacheAccesDefinition.description == 'abgeschlossen'"
+                v-if="startedCache.cacheAccesDefinition.description === 'abgeschlossen'"
                 expand-icon-toggle
                 expand-separator
                 icon="location_on"
@@ -105,7 +105,7 @@
   export default {
     data() {
       return {
-        tab: 'startedCaches' + 'finishedCaches',
+        tab: 'profile',
         startedCaches: [],
       }
     },

frontend/src/pages/ranking.vue

@@ -9,7 +9,6 @@
         active-bg-color="bg-grey-1"
         active-color="cyan-14"
         indicator-color="cyan-14"
-        narrow-indicator
         switch-indicator
       >
         <q-tab name="solo" label="Solo-Cacher" icon="person"/>
@@ -83,6 +82,8 @@
             console.log("Rankinglist: ");
             console.log(response.data);
             this.rankinglist = response.data;
+          }).catch((error) => {
+            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: error })
           })
       }
     }

frontend/src/router/routes.js

@@ -25,22 +25,21 @@ const routes = [
     component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/StationEdit.vue") }]
   },
+  {
+    path: "/station-l/:pos",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{path: "", component: () => import("pages/StationEdit.vue")}]
+  },
   {
     path: "/station/:cache/:id",
     component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/StationView.vue") }]
   },
   {
-    path: "/station-l/:pos",
     path: "/ranking/",
       component: () => import("layouts/MyLayout.vue"),
     children: [{path: "", component: () => import("pages/ranking.vue")}]
   },
-{
-  path: "/station/",
-    component: () => import("layouts/MyLayout.vue"),
-    children: [{ path: "", component: () => import("pages/StationEdit.vue") }]
-  },
   {
     path: "/login/",
     component: () => import("layouts/MyLayout.vue"),

frontend/src/store/dialog/actions.js

@@ -0,0 +1,4 @@
+/*
+export function someAction (context) {
+}
+*/

frontend/src/store/dialog/getters.js

@@ -0,0 +1,4 @@
+/*
+export function someGetter (state) {
+}
+*/

frontend/src/store/dialog/index.js

@@ -0,0 +1,12 @@
+import state from './state'
+import * as getters from './getters'
+import * as mutations from './mutations'
+import * as actions from './actions'
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}

frontend/src/store/dialog/mutations.js

@@ -0,0 +1,47 @@
+
+export function NEW_MESSAGE_DIALOG (state, messageObject) {
+  console.log("NEW_MESSAGE_DIALOG");
+  if (messageObject == null) {
+    state.dialog.show = true;
+    return;
+  }
+  console.log(messageObject);
+
+  if (messageObject.hasOwnProperty('color')) {
+    switch (messageObject.color) {
+      case "red": {
+        let color = "red-9";
+        state.dialog.colorBackground = "bg-"+color+" text-white";
+        state.dialog.colorButton = color;
+      }
+      case "amber": {
+        let color = "amber";
+        state.dialog.colorBackground = "bg-"+color+" text-white";
+        state.dialog.colorButton = color;
+      }
+      case "blue": {
+        let color = "primary";
+        state.dialog.colorBackground = "bg-"+color+" text-white";
+        state.dialog.colorButton = color;
+      }
+    }
+  }
+
+  if (messageObject.hasOwnProperty('title')) {
+    state.dialog.title = messageObject.title;
+  }
+
+  if (messageObject.hasOwnProperty('message')) {
+    state.dialog.message = messageObject.message;
+  }
+
+  state.dialog.show = true;
+}
+export function RESET_MESSAGE_DIALOG (state) {
+  console.log("RESET_MESSAGE_DIALOG");
+  state.dialog.colorBackground = "bg-red-9 text-white";
+  state.dialog.colorButton = "red-9";
+  state.dialog.message = "Ein unbekannter Fehler ist aufgetreten. Bitte versuchen Sie es noch einmal.";
+  state.dialog.title = "Fehler";
+  state.dialog.show = false;
+}

frontend/src/store/dialog/state.js

@@ -0,0 +1,9 @@
+export default {
+  dialog: {
+    colorBackground: "bg-red-9 text-white",
+    colorButton: "red-9",
+    show: false,
+    title: "Fehler",
+    message: "Ein unbekannter Fehler ist aufgetreten. Bitte versuchen Sie es noch einmal."
+  },
+}

frontend/src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from "vuex";
 import Axios from "axios";
 import auth from "./auth"
 import cacheCollector from "./cacheCollector"
+import dialog from "./dialog"
 
 // import example from './module-example'
 
@@ -17,7 +18,8 @@ export default function (/* { ssrContext } */) {
   const Store = new Vuex.Store({
     modules: {
       auth,
-      cacheCollector
+      cacheCollector,
+      dialog
     },
 
     // enable strict mode (adds overhead!)
@@ -41,6 +43,10 @@ export default function (/* { ssrContext } */) {
       const cacheCollector = require('./cacheCollector').default;
       store.hotUpdate({ modules: { cacheCollector: newCacheCollector } })
     })
+    module.hot.accept(['./dialog'], () => {
+      const dialog = require('./dialog').default;
+      store.hotUpdate({ modules: { dialog: newDialog } })
+    })
   }
 
   return Store