From 41d0cb028a174920325e79417d8a1368c21a0b8a Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Tue, 7 May 2019 14:19:50 +0200
Subject: [PATCH] improve qr-code-scanner

---
 frontend/src/components/qrscanner.vue | 158 ++++++++++++++++++++++++++
 frontend/src/pages/Login.vue          |   1 +
 frontend/src/pages/qr-scanner.vue     |  82 ++++++-------
 3 files changed, 203 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/components/qrscanner.vue

diff --git a/frontend/src/components/qrscanner.vue b/frontend/src/components/qrscanner.vue
new file mode 100644
index 0000000..07bced0
--- /dev/null
+++ b/frontend/src/components/qrscanner.vue
@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <div class="q-ma-md" 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>
+</template>
+
+<script>
+  export default {
+    name: 'qrscanner',
+    data() {
+      return {
+        askForPermission: true,
+        activateCamera: false,
+        isValid: false,
+        validating: false,
+        loading: false,
+        paused: false,
+        result: null,
+        params: null,
+        noStreamApiSupport: false
+      }
+    },
+
+    methods: {
+      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();
+          if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID) {
+            console.log(params);
+            console.log("Parameter konnten nicht erkannt werden.");
+            resolve(false)
+          } else {
+            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);
+            });
+          }
+        })
+      },
+
+      setParams() {
+        console.log("setParams: ");
+        let params = {};
+        params.cacheID = this.result.split('/')[0];
+        params.stationID = this.result.split('/')[1];
+        params.durchgefuehrterCacheID = params.cacheID;
+        console.log(params.cacheID + " und " + params.stationID);
+        if (localStorage.getItem('userToken')) {
+          params.token = JSON.parse(localStorage.getItem('userToken')).token;
+        }
+        return params;
+      },
+
+      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>
+
+<style>
+</style>
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 814f108..ec2a41d 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -30,6 +30,7 @@
                   color="primary"
                   class="full-width"
                   @click="login"
+                  @keyup.enter="login"
                   unelevated
                 >
                   <template v-slot:loading>
diff --git a/frontend/src/pages/qr-scanner.vue b/frontend/src/pages/qr-scanner.vue
index e111c73..07bced0 100644
--- a/frontend/src/pages/qr-scanner.vue
+++ b/frontend/src/pages/qr-scanner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div >
+  <div>
     <div class="q-ma-md" v-if="askForPermission">
       <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
 
@@ -28,7 +28,7 @@
 
 <script>
   export default {
-    //name: 'qrscanner',
+    name: 'qrscanner',
     data() {
       return {
         askForPermission: true,
@@ -62,43 +62,49 @@
       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}`});
+          if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID) {
+            console.log(params);
+            console.log("Parameter konnten nicht erkannt werden.");
+            resolve(false)
+          } else {
+            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);
               }
-            }).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);
-          });
+              console.log(error.config);
+              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
+              resolve(false);
+            });
+          }
         })
       },