moved QR-Scanner to Component

frontend/src/components/qrscanner.vue

@@ -21,6 +21,10 @@
           </div>
         </qrcode-stream>
       </qrcode-drop-zone>
+      <div class="q-ma-md">
+        <q-btn v-if="!askForPermission" @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="primary" stack
+               label="Schließen" class="full-width"/>
+      </div>
     </div>
     <qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
   </div>
@@ -118,9 +122,18 @@
         if (localStorage.getItem('userToken')) {
           params.token = JSON.parse(localStorage.getItem('userToken')).token;
         }
+        this.updateProps()
+        console.log("emitted params!")
         return params;
       },
 
+      updateProps() {
+        this.$emit('result', this.params)
+      },
+      updateCameraState() {
+        this.$emit('camera', this.activateCamera)
+      },
+
       pauseCamera() {
         this.paused = true
       },
@@ -130,7 +143,11 @@
       },
 
       toggleCamera(bool) {
-        this.activateCamera = bool
+        this.activateCamera = bool;
+        if (this.askForPermission === false) {
+          this.askForPermission = true;
+        }
+        this.updateCameraState();
       },
 
       logErrors(promise) {
@@ -151,6 +168,18 @@
         }
       }
     },
+    beforeRouteUpdate(to, from, next) {
+      this.askForPermission = true;
+      this.activateCamera = false;
+      this.isValid = false;
+      this.validating = false;
+      this.loading = false;
+      this.paused = false;
+      this.result = null;
+      this.params = null;
+      this.noStreamApiSupport = false;
+      next()
+    },
   }
 </script>
 

frontend/src/pages/StationView.vue

@@ -4,11 +4,12 @@
            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 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 class="text-h5">Station {{ data.station.position }}</p>-->
       <p>{{ station.description }}</p>
       <!--<q-input-->
       <!--v-model="description"-->
@@ -17,64 +18,31 @@
       <!--/>-->
       <!--<p class="text-h5 q-mt-md">Location</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: "Station",
-
+    components: {qrscanner},
     data() {
       return {
-        //code: "",
         cacheID: "",
         cacheName: "",
-        //cache: null,
         cache: {
           name: "",
           stationen: [],
         },
         station: {},
-
+        cameraActive: false,
-        // 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
-
       }
     },
-    beforeRouteUpdate (to, from, next) {
+    beforeRouteUpdate(to, from, next) {
       console.log("beforeRouteUpdate: reset data and fetch");
       this.cacheID = "";
       this.cacheName = "";
@@ -83,16 +51,6 @@
         stationen: [],
       };
       this.station = {};
-      this.askForPermission = true;
-      this.activateCamera = false;
-      this.isValid = false;
-      this.validating = false;
-      this.loading = false;
-      this.paused = false;
-      this.result = null;
-      this.params = null;
-      this.noStreamApiSupport = false;
-
       this.fetchData();
       next()
     },
@@ -136,109 +94,18 @@
           })
       },
 
+      updateResult(event) {
+        console.log("updateResult()");
+        this.result = event;
+      },
+
+      updateCamera(event) {
+        console.log("updateCamera()");
+        this.cameraActive = event;
+      },
+
       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.durchgefuehrterCacheID);
-        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)");
-              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>