added qr-generator and fixed some bugs

frontend/src/components/qrscanner.vue

@@ -3,7 +3,7 @@
     <div class="q-ma-md" v-if="askForPermission">
 
       <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
-             icon="photo_camera"
+             icon="filter_center_focus"
       label="QR-Code scannen" class="full-width q-mt-sm"/>
       <p class="q-mt-sm"><b>Hinweis:</b> Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
     </div>

frontend/src/layouts/MyLayout.vue

@@ -81,7 +81,7 @@
           to="/mycaches"
         >
           <q-item-section avatar>
-            <q-icon name="map"/>
+            <q-icon name="bookmarks"/>
           </q-item-section>
           <q-item-section>
             <q-item-label>Meine Caches</q-item-label>

frontend/src/pages/Cache.vue

@@ -210,6 +210,7 @@
               this.$store.commit('cacheCollector/RESET_NEW_CACHE');
               this.$router.push({path: '/overview'});
             }).catch((error) => {
+              //TODO: Fehlermeldungen
             // Error
             let msg;
             let title;

frontend/src/pages/CacheStart.vue

@@ -4,59 +4,30 @@
            class="q-mb-md "
            :ratio="16/9"
            src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
+           v-if="!cameraActive"
     ></q-img>
-    <div class="q-ma-md">
+    <div v-if="!cameraActive" class="q-ma-md">
       <p class="text-h4">{{ cacheName }}</p>
       <p>{{ instruction }}</p>
 
-      <div class="column q-gutter-y-md">
-        <div v-if="askForPermission">
-          <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
-
-          <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
-                 icon="photo_camera"
-                 label="QR-Code scannen" class="full-width"/>
-        </div>
-        <div v-if="activateCamera">
-          <qrcode-drop-zone @decode="onDecode" @init="logErrors">
-            <qrcode-stream :paused="paused" @decode="onDecode" @init="onInit">
-              <div v-if="validating">
-                <div class="light-dimmed fit">
-                </div>
-                <q-spinner-oval
-                  class="absolute-center"
-                  color="primary"
-                  size="10em"
-                />
-              </div>
-            </qrcode-stream>
-          </qrcode-drop-zone>
-        </div>
-        <qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
-      </div>
     </div>
+    <qrscanner @result="updateResult($event)" @camera="updateCamera($event)" />
   </div>
 </template>
 
 <script>
+  import qrscanner from "../components/qrscanner";
   export default {
+    name: "CacheStart",
+    components: {qrscanner},
     data() {
       return { //TODO Lageplan einbinden
+        result: null,
+        cameraActive: false,
         cacheID: "",
         cacheName: "",
         //code: "8/7",
         instruction: "Bitte begib Dich zu der auf der Karte angezeigten Position. An dieser Position wirst Du einen QR-Code finden. Wenn du ihn gefunden hast, drücke den Knopf zum Starten des QR-Scanners und gib uns die Berechtigung, Deine Kamera zu öffnen. Nachdem Du den QR-Code gescannt hast, erhältst du ein Rätsel zur Position der nächsten Station. Die Lösung zu dem Rätsel ist also das Versteck des nächsten QR-Codes.",
-        // Following Params belong to QR-Code Scanner
-        askForPermission: true,
-        activateCamera: false,
-        isValid: false,
-        validating: false,
-        loading: false,
-        paused: false,
-        result: null,
-        params: null,
-        noStreamApiSupport: false
-
       }
     },
     created() {
@@ -74,123 +45,17 @@
           })
       },
 
-      checkStation() {
+      updateResult(event) {
-        let params = this.setParams();
+        console.log("updateResult()");
-        console.log(params);
+        console.log(event);
-        this.$axios.get('/api/checkStation', {params})
+        this.result = event;
-          .then((response) => {
-            console.log(response);
-            console.log("Anfrage erfolgreich");
-
-          }).catch((error) => {
-          console.log(error);
-          console.log("Anfrage fehlgeschlagen");
-        })
-        this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`})
       },
 
-      setParams() {
+      updateCamera(event) {
-        console.log("setParams: ");
+        console.log("updateCamera()");
-        let params = {};
+        this.cameraActive = event;
-        params.cacheID = this.result.split('/')[0];
-        params.stationID = this.result.split('/')[1];
-        params.durchgefuehrterCacheID = this.cacheID;
-        console.log("CacheID: " + params.cacheID + " und StationID: " + params.stationID);
-        console.log(params.durchgefuehrterCacheID);
-        if (localStorage.getItem('userToken')) {
-          params.token = JSON.parse(localStorage.getItem('userToken')).token;
-        }
-        return params;
       },
 
-      async onDecode(content) {
-        this.result = content;
-
-        this.pauseCamera();
-
-        this.validating = true;
-        this.isValid = await this.validate();
-        this.validating = false;
-
-        this.unPauseCamera();
-        // window.setTimeout(() => {
-        //   this.unPauseCamera();
-        // }, 2000)
-      },
-
-      validate() {
-        return new Promise(resolve => {
-
-          let params = this.setParams();
-          this.$axios.get('/api/checkStation', {params})
-            .then((response) => {
-              console.log("resolve(true)");
-              console.log("cache access definition");
-              console.log(response.data.cacheAccesDefinition);
-              resolve(true);
-              if (Number(response.data.cacheAccesDefinition.id) === 0) {
-                this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
-              } else if (Number(response.data.cacheAccesDefinition.id) === 1) {
-                this.$router.push({path: `/CacheEnd/${params.cacheID}`});
-              }
-            }).catch((error) => {
-            console.log("resolve(false)");
-            // Error
-            let msg;
-            let title;
-            if (error.response) {
-              // The request was made and the server responded with a status code
-              title = "Problem with response!";
-              msg = error.response.data.message
-                ? error.response.data.message
-                : error.response.data;
-            } else if (error.request) {
-              // The request was made but no response was received
-              title = "Problem with request!";
-              msg = "Der Server antwortet nicht."
-              console.log(error.request);
-            } else {
-              // Something happened in setting up the request that triggered an Error
-              title = "Error";
-              msg = error.message;
-              console.log('Error', error.message.data);
-            }
-            console.log(error.config);
-            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
-            resolve(false);
-          });
-        })
-      },
-
-      pauseCamera() {
-        this.paused = true
-      },
-
-      unPauseCamera() {
-        this.paused = false
-      },
-
-      toggleCamera(bool) {
-        this.activateCamera = bool
-      },
-
-      logErrors(promise) {
-        promise.catch(console.error)
-      },
-
-      async onInit(promise) {
-        this.loading = true;
-        try {
-          await promise
-        } catch (error) {
-          if (error.name === 'StreamApiNotSupportedError') {
-            this.noStreamApiSupport = true
-          }
-        } finally {
-          this.loading = false;
-          this.askForPermission = false;
-        }
-      }
     }
   }
 </script>

frontend/src/pages/MyCaches.vue

@@ -29,7 +29,6 @@
             >
               <q-expansion-item
                 class=""
-                expand-icon-toggle
                 expand-separator
                 icon="location_on"
                 :label="startedCache.cache.name"
@@ -62,7 +61,6 @@
             <q-card class="q-mb-md" v-for="finishedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 1)" :key="finishedCache.id">
               <q-expansion-item
                 class=""
-                expand-icon-toggle
                 expand-separator
                 icon="location_on"
                 :label="finishedCache.cache.name"

frontend/src/pages/Overview.vue

@@ -45,10 +45,12 @@
                 <q-item class="q-pr-sm reverse q-gutter-x-sm">
                   <q-btn @click="startCache(cache.id)" unelevated color="positive" stack icon="arrow_forward"
                          label="Starten" size="sm"/>
-                  <q-btn disable v-if="hasAdminState" @click="editCache(cache.id)" unelevated color="amber" stack
-                         icon="edit" label="Bearbeiten" size="sm"/>
                   <q-btn v-if="hasAdminState" @click="deleteCache(cache.id)" unelevated color="negative" stack
-                         icon="delete" label="Löschen" size="sm"/>
+                  icon="delete" label="Löschen" size="sm"/>
+                  <q-btn disable v-if="hasAdminState" @click="editCache(cache.id)" unelevated color="primary" stack
+                         icon="edit" label="Bearbeiten" size="sm"/>
+                  <q-btn v-if="hasAdminState" @click="generateQrCodes(cache.id)" unelevated color="primary" stack
+                         icon="image" label="QR-Codes" size="sm"/>
                 </q-item>
               </q-expansion-item>
             </q-card>
@@ -174,16 +176,13 @@
       },
       startCache(cacheID) {
         console.log("startCache()");
-        // const userToken = JSON.parse(localStorage.getItem('userToken')).token;
-        // let params = {cacheID: cacheID};
-        // if (userToken != null) {
-        //   params.token = userToken;
-        // }
-        // console.log(params);
         this.$store.state.currentCache.cache = this.caches.find(cache => cache.id === Number(cacheID));
         console.log(this.$store.state.currentCache.cache);
         this.$store.state.currentCache.currentCacheID = Number(cacheID);
         this.$router.push({path: `/CacheStart/${cacheID}`})
+      },
+      generateQrCodes(cacheID) {
+        this.$router.push({path: `/generator/${cacheID}`})
       }
     }
   }

frontend/src/pages/StationView.vue

@@ -9,14 +9,7 @@
     <div class="q-ma-md" v-if="!cameraActive">
       <p class="text-h4">{{ cache.name }}</p>
       <p class="text-h5">Station {{ showCacheProgress }}</p>
-      <!--      <p class="text-h5">Station {{ data.station.position }}</p>-->
       <p>{{ station.description }}</p>
-      <!--<q-input-->
-      <!--v-model="description"-->
-      <!--filled-->
-      <!--type="textarea"-->
-      <!--/>-->
-      <!--<p class="text-h5 q-mt-md">Location</p>-->
       <div class="column q-gutter-y-md">
       </div>
     </div>
@@ -104,9 +97,6 @@
         console.log("updateCamera()");
         this.cameraActive = event;
       },
-
-      setParams() {
-      },
     }
   }
 </script>

frontend/src/pages/qr-generator.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="q-ma-md">
+    <p class="text-h4">QR-Generator</p>
+    <p class="text-h5">Cache: {{ cacheName }}</p>
+    <div class="row q-col-gutter-md">
+      <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 items-start" v-for="(station, index) in stationen" :key="index">
+          <p class="text-h6 q-my-sm">Station {{ index + 1 }}</p>
+        <q-card class="">
+          <img class="full-width q-pa-md bg-white" :src="imgBaseURL + cacheId +'/'+ station.id" alt="">
+        </q-card>
+          <p class="q-my-sm">{{ cacheId }}/{{ station.id }}</p>
+      </div>
+    </div>
+      <q-btn to="/overview" unelevated color="primary" stack
+             label="Schließen" class="full-width"/>
+  </div>
+</template>
+
+<script>
+  export default {
+    // name: 'PageName',
+    data() {
+      return {
+        cacheName: "",
+        cacheId: 0,
+        stationen: [],
+        imgBaseURL: "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data="
+      };
+    },
+
+    created() {
+      this.fetchData();
+    },
+
+    methods: {
+      fetchData() {
+        this.$axios.get('/api/allCaches')
+          .then((response) => {
+            console.log("/api/allCaches");
+            console.log(response.data);
+            const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
+            this.cacheName = cache.name;
+            this.cacheId = cache.id;
+            this.stationen = cache.stationen;
+          })
+      },
+
+    },
+
+    beforeRouteUpdate(to, from, next) {
+      this.fetchData();
+      next()
+    },
+
+  }
+</script>
+
+<style>
+</style>

frontend/src/router/routes.js

@@ -140,6 +140,16 @@ const routes = [
       onlyAdmin: false,
     }
   },
+  {
+    path: "/generator/:cache/",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/qr-generator.vue") }],
+    meta: {
+      public: false,  // Allow access to even if not logged in
+      onlyWhenLoggedOut: false,
+      onlyAdmin: true,
+    }
+  },
   {
    path: "/profile/",
       component: () => import("layouts/MyLayout.vue"),