labswp_2019_sose_geocaching/frontend/src/pages/CacheStart.vue

<template>
  <div>
    <q-img transition="fade"
           class="q-mb-md "
           :ratio="16/9"
           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">
        <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>
  </div>
</template>

<script>
  export default {
    data() {
      return { //TODO Lageplan einbinden
        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() {
      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 = this.$route.params.cache;
          })
      },

      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.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>