labswp_2019_sose_geocaching/frontend/src/components/qrscanner.vue

<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 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>
</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;
        }
        this.updateProps()
        console.log("emitted params!")
        return params;
      },

      updateProps() {
        this.$emit('result', this.params)
      },
      updateCameraState() {
        this.$emit('camera', this.activateCamera)
      },

      pauseCamera() {
        this.paused = true
      },

      unPauseCamera() {
        this.paused = false
      },

      toggleCamera(bool) {
        this.activateCamera = bool;
        if (this.askForPermission === false) {
          this.askForPermission = true;
        }
        this.updateCameraState();
      },

      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;
        }
      }
    },
    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>

<style>
</style>