implemented qr-code scanner in caching process

frontend/src/pages/Cache.vue

@@ -145,16 +145,6 @@
       //this.scrollToBottom();
     },
     methods: {
-      // ...mapMutations([
-      //   'cacheCollector/SET_CACHE',
-      //   'cacheCollector/ADD_STATION',
-      //   'cacheCollector/REMOVE_STATION',
-      //   'cacheCollector/RESET_NEW_CACHE',
-      //   'cacheCollector/LOAD_REMOTE_CACHE'
-      // ]),
-      // swapComponent: function (component) {
-      //   this.stationComponent = component;
-      // },
       editEndStation() {
         console.log("editEndStation()");
         const station = this.cache.endStation;
@@ -202,7 +192,7 @@
           let cache = this.cache;
           cache.stationen.push(this.endStation);
 
-          this.$axios.post('/api/createCache', this.cache)
+          this.$axios.post('/api/createCache', cache)
             .then((response) => {
               console.log("POST api/createCache: " + response.statusText);
               this.$store.commit('cacheCollector/RESET_NEW_CACHE');

frontend/src/pages/CacheStart.vue

@@ -1,17 +1,38 @@
 <template>
   <div>
     <q-img transition="fade"
-         class="q-mb-md "
+           class="q-mb-md "
-         :ratio="16/9"
+           :ratio="16/9"
-         src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
+           src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
     ></q-img>
     <div class="q-ma-md">
       <p class="text-h4">{{ cacheName }}</p>
       <p>{{ instruction }}</p>
 
       <div class="column q-gutter-y-md">
-        <q-input stack-label filled v-model="code" label="Code eingeben (wird mit Code scannen ersetzt)"/>
+        <div v-if="askForPermission">
-        <q-btn @click="checkStation()" unelevated color="primary" label="QR-Code scannen (absenden)"/>
+          <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>
   </div>
@@ -23,8 +44,19 @@
       return { //TODO Lageplan einbinden
         cacheID: "",
         cacheName: "",
-        code: "8/7",
+        //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."
+        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() {
@@ -42,33 +74,118 @@
             this.cacheName = cache.name;
             this.cacheID = this.$route.params.cache;
           })
-        },
+      },
-        checkStation() {
+
+      checkStation() {
+        let params = this.setParams();
+        console.log(params);
+        this.$axios.get('/api/checkStation', {params})
+          .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() {
+        console.log("setParams: ");
+        let params = {};
+        params.cacheID = this.code.split('/')[0];
+        params.stationID = this.code.split('/')[1];
+        params.durchgefuehrterCacheID = this.cacheID;
+        console.log(params.cacheID + " und " + params.stationID);
+        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();
-          console.log(params);
           this.$axios.get('/api/checkStation', {params})
             .then((response) => {
-              console.log(response);
+              console.log("resolve(true)");
-              console.log("Anfrage erfolgreich");
+              resolve(true);
+              this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
+            }).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);
+          });
+        })
+      },
 
-            }) .catch((error) => {
+      pauseCamera() {
-              console.log(error);
+        this.paused = true
-              console.log("Anfrage fehlgeschlagen");
+      },
-            })
+
-            this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`})
+      unPauseCamera() {
-        },
+        this.paused = false
-        setParams() {
+      },
-          console.log("setParams: ");
+
-          let params = {};
+      toggleCamera(bool) {
-          params.cacheID = this.code.split('/')[0];
+        this.activateCamera = bool
-          params.stationID = this.code.split('/')[1];
+      },
-          params.durchgefuehrterCacheID = this.cacheID;
+
-          console.log(params.cacheID + " und " + params.stationID);
+      logErrors(promise) {
-          if (localStorage.getItem('userToken')) {
+        promise.catch(console.error)
-            params.token = JSON.parse(localStorage.getItem('userToken')).token;
+      },
+
+      async onInit(promise) {
+        this.loading = true;
+        try {
+          await promise
+        } catch (error) {
+          if (error.name === 'StreamApiNotSupportedError') {
+            this.noStreamApiSupport = true
           }
-          return params;
+        } finally {
-        },
+          this.loading = false;
+          this.askForPermission = false;
+        }
       }
     }
+  }
 </script>

frontend/src/pages/StationView.vue

@@ -17,10 +17,29 @@
       <!--/>-->
       <!--<p class="text-h5 q-mt-md">Location</p>-->
       <div class="column q-gutter-y-md">
-        <q-input v-if="false" disabled stack-label filled v-model="code" label="Lösung"/>
+        <div v-if="askForPermission">
-        <q-btn v-if="false" disabled unelevated color="primary" label="Lösung abschicken"/>
+          <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
-        <q-input stack-label filled v-model="code" label="Code eingeben (wird mit Code scannen ersetzt)"/>
+
-        <q-btn unelevated color="primary" label="Code scannen (absenden)"/>
+          <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>
   </div>
@@ -45,13 +64,25 @@
             code: 213812,
             solution: "Schneeglöckchen"
           }
-        }
+        },
+
+        // 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: function () {
       console.log("StationView: ")
-      console.log("'id' from url: " + this.$route.params.id)
+      // console.log("'id' from url: " + this.$route.params.id)
-      console.log("'cache' from url: " + this.$route.params.cache)
+      // console.log("'cache' from url: " + this.$route.params.cache)
       this.fetchData();
     },
     beforeMount: function () {
@@ -129,7 +160,104 @@
           console.log(error.config);
           this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: msg, title: title, });
         })
+      },
+
+      setParams() {
+        console.log("setParams: ");
+        let params = {};
+        params.cacheID = this.code.split('/')[0];
+        params.stationID = this.code.split('/')[1];
+        params.durchgefuehrterCacheID = this.cacheID;
+        console.log(params.cacheID + " und " + params.stationID);
+        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)");
+              resolve(true);
+              this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
+            }).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>