labswp_2019_sose_geocaching/frontend/src/pages/MyCaches.vue

<template>
  <q-page class="column no-wrap">
    <div class="bg-red col col-shrink" style="">
      <q-tabs
        v-model="tab"
        class="bg-grey-2"
        inline-label
        align="justify"
        active-bg-color="bg-grey-1"
        active-color="cyan-14"
        indicator-color="cyan-14"
        switch-indicator
      >
        <q-tab name="startedCaches" label="Angefangene Caches" icon="playlist_play"/>
        <q-tab name="finishedCaches" label="Beendete Caches" icon="playlist_add_check"/>
      </q-tabs>
      <q-separator color="grey-4"/>
    </div>

    <div class="col flex column">
      <q-tab-panels v-model="tab" animated swipeable class="col">

        <q-tab-panel name="startedCaches" class=" fit">
          <q-list>
            <q-card
              class="q-mb-md"
              v-for="startedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 0)"
              :key="startedCache.id"
            >
              <q-expansion-item
                class=""
                expand-separator
                icon="location_on"
                :label="startedCache.cache.name"
                :caption=" startedCache.cache.description"
              >
                <q-item>
                  <q-item-section top avatar class="self-center">
                  </q-item-section>
                  <q-item-section>
                    <q-item-label caption>{{'Nächste Aufgabe: ' + startedCache.aktuelleStation.description }}
                    </q-item-label>
                    <q-item-label caption>{{'Ranglistenpunkte für diesen Cache: ' + startedCache.cache.rankingPoints}}
                    </q-item-label>
                  </q-item-section>

                  <q-item-section side top class="self-center">
                  </q-item-section>
                </q-item>
                <q-item class="q-pr-sm reverse q-gutter-x-sm">
                  <q-btn @click="continueCache(startedCache.cache.id)" unelevated color="positive" stack icon="arrow_forward"
                         label="Fortfahren" size="sm"/>
                </q-item>
              </q-expansion-item>
            </q-card>
          </q-list>
        </q-tab-panel>

        <q-tab-panel name="finishedCaches" class="fit">
          <q-list>
            <q-card class="q-mb-md" v-for="finishedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 1)" :key="finishedCache.id">
              <q-expansion-item
                class=""
                expand-separator
                icon="location_on"
                :label="finishedCache.cache.name"
                :caption=" finishedCache.cache.description"
              >
                <q-item>
                  <q-item-section top avatar class="self-center">
                    <!--<q-icon rounded color="cyan-14" name="location_on" size="3rem"/>-->
                  </q-item-section>
                  <q-item-section>
                    <q-item-label caption>{{'Erhaltene Punkte für diesen Cache: ' + finishedCache.cache.rankingPoints
                      }}
                    </q-item-label>
                  </q-item-section>

                  <q-item-section side top class="self-center">
                  </q-item-section>
                </q-item>
                <q-item class="q-pr-sm reverse q-gutter-x-sm">
                  <q-btn @click="goToReward(finishedCache.cache.id)" unelevated color="primary" stack icon="arrow_forward"
                         label="Belohnung ansehen" size="sm"/>
                </q-item>
              </q-expansion-item>
            </q-card>
          </q-list>
        </q-tab-panel>

      </q-tab-panels>
    </div>
  </q-page>

</template>

<style>
</style>
<script>
  //import {dom} from 'quasar'
  //const {height, width} = dom
  export default {
    data() {
      return {
        tab: 'startedCaches',
        startedCaches: [],
      }
    },
    mounted: function () {
    },
    computed: {
      hasAdminState() {
        return this.$store.getters['auth/GET_ADMINSTATE'];
      },
    },
    created: function () {
      this.fetchUserCaches();
      this.$store.commit('auth/SET_AUTHENTICATED');
      this.$store.commit('auth/SET_USER');
    },
    methods: {
      fetchUserCaches: function () {
        let token;
        if (localStorage.getItem('userToken')) {
          token = JSON.parse(localStorage.getItem('userToken')).token;
        } else {
          return;
        }
        this.$axios.get('/api/getMyCaches', {params: {token}})
          .then((response) => {
            console.log(response.data)
            this.startedCaches = response.data;
          }).catch((error) => {
          // 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;
          } else if (error.request) {
            // The request was made but no response was received
            title = "Problem with request!";
            msg = "Error occured due to wrong server request!"
            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);
          }
          console.log(error.config);
          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
        })
      },
      continueCache(cacheID) {
        console.log("cacheID");
        console.log(cacheID);
        let currentStationID;
        if (localStorage.getItem('userToken')) {
          let params = {cacheID: cacheID};
          params.token = JSON.parse(localStorage.getItem('userToken')).token;
          this.$axios.get('/api/getCurrentStation', {params})
            .then((response) => {
              console.log(response.data);
              currentStationID = response.data.aktuelleStation.id;
              this.$router.push({path: `/station/${cacheID}/${currentStationID}`});
            })
            .catch((error) => {
            });
        }
      },
      goToReward(cacheID) {
        console.log("cacheID");
        console.log(cacheID);
        let currentStationID;
        if (localStorage.getItem('userToken')) {
          let params = {cacheID: cacheID};
          params.token = JSON.parse(localStorage.getItem('userToken')).token;
          this.$axios.get('/api/getCurrentStation', {params})
            .then((response) => {
              console.log(response.data);
              currentStationID = response.data.aktuelleStation.id;
              this.$router.push({path: `/CacheEnd/${params.cacheID}`});
            })
            .catch((error) => {
            });
        }
      },
    }
  }
</script>