labswp_2019_sose_geocaching/frontend/src/pages/StationView.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">{{ cache.name }}</p>
      <p class="text-h5">Station {{ showCacheProgress }}</p>
<!--      <p class="text-h5">Station {{ data.station.position }}</p>-->
      <p>{{ station.description }}</p>
      <!--<q-input-->
      <!--v-model="description"-->
      <!--filled-->
      <!--type="textarea"-->
      <!--/>-->
      <!--<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>
  </div>
</template>

<script>
  export default {
    name: "Station",

    data() {
      return {
        //code: "",
        cacheID: "",
        cacheName: "",
        //cache: null,
        cache: {
          name: "",
          stationen: [],
        },
        station: {},

        // 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("'cache' from url: " + this.$route.params.cache)
      this.fetchData();
    },
    beforeMount: function () {
    },
    mounted: function () {
    },
    computed: {
      showCacheProgress() {
        if (this.cache !== null) {
          let stationCount = this.cache.stationen.length;
          let stationPos = 1 + this.cache.stationen.findIndex(station => station.id === Number(this.$route.params.id));
          return `${stationPos} von ${stationCount}`;
        } else {
          return "";
        }
      }
    },
    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.cache = cache;
            this.station = cache.stationen.find(station => station.id === Number(this.$route.params.id));
            this.cacheName = cache.name;
            this.cacheID = this.$route.params.cache;
            console.log(JSON.stringify(this.cache));
            console.log(JSON.stringify(this.station));
            console.log(this.cache);
          })
      },

      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>

<style scoped>

</style>