labswp_2019_sose_geocaching/frontend/src/pages/Overview.vue

<template>
  <q-page class="column">
    <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="list" label="Liste" icon="list"/>
        <q-tab name="map" label="Karte" icon="map"/>
      </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="list" class=" fit">

          <q-list>
            <q-card class="q-mb-md" v-for="cache in caches" :key="cache.id">
              <q-expansion-item
                class=""
                expand-icon-toggle
                expand-separator
                icon="location_on"
                :label="cache.name"
                :caption="cache.rankingPoints+' Punkte / Size '+cache.stationen.length"
              >
                <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>{{ cache.description }}</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="startCache(cache.id)" unelevated color="positive" stack icon="arrow_forward"
                         label="Starten" size="sm"/>
                  <q-btn disable v-if="hasAdminState" @click="editCache(cache.id)" unelevated color="amber" stack
                         icon="edit" label="Bearbeiten" size="sm"/>
                  <q-btn v-if="hasAdminState" @click="deleteCache(cache.id)" unelevated color="negative" stack
                         icon="delete" label="Löschen" size="sm"/>
                </q-item>
              </q-expansion-item>
            </q-card>
          </q-list>
          <div v-if="hasAdminState" class="row">
            <q-btn @click="addCache" unelevated color="primary" stack icon="add" label="Neuer Cache"
                   class="full-width"/>
          </div>
        </q-tab-panel>


        <q-tab-panel name="map" class="q-pa-none fit">
          <!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
          <!--</div>-->
          <q-img
            src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
            transition="fade" class="absolute-full">
            <template v-slot:loading>
              <q-spinner-puff color="cyan-14" size="4em"/>
            </template>
          </q-img>
        </q-tab-panel>

      </q-tab-panels>

    </div>
  </q-page>

</template>

<style>
  /*
    .my-list-card-item
      padding-left: 8px
  */
</style>
<script>
  export default {
    data() {
      return {
        tab: 'list',
        caches: [],
      }
    },
    mounted: function () {
    },
    computed: {
      // ...mapGetters([
      //   'auth/GET_ADMINSTATE'
      // ]),

      hasAdminState() {
        return this.$store.getters['auth/GET_ADMINSTATE'];
      }
    },
    created: function () {
      console.log("created(): " + this.caches);
      this.fetchAllCaches();
      this.$store.commit('auth/SET_AUTHENTICATED');
      this.$store.commit('auth/SET_USER');
    },
    methods: {
      fetchAllCaches() {
        this.$axios.get('http://localhost:8080/api/allCaches')
          .then((response) => {
            console.log("Caches: " + this.caches);
            this.caches = response.data;
          })
      },
      addCache() {
        this.$router.push({path: `/cache`})
      },
      editCache() {
      },
      deleteCache(id) {
        console.log('delete cache: ' + id)
        this.$axios.delete('http://localhost:8080/api/deleteCache', {params: {cacheID: id}})
          .then((response) => {
            this.fetchAllCaches()
          })
      },
      startCache(cacheID) {
        const userToken = JSON.parse(localStorage.getItem('userToken'));
        let params = {cacheID: cacheID};
        if (userToken != null) {
          params.token = userToken;
        }
        console.log(params);

        this.$axios.get('http://localhost:8080/api/startCache', {params})
          .then((response) => {
            console.log(response.data);
            // TODO wenn cache angefangen, dann suche die letzte gefundene Station
            let stationID = this.caches.find(x => x.id === cacheID).stationen[0].id;
            console.log(stationID);
            //this.$router.push({path: `/station/${stationID}`})
            this.$router.push({path: `/station/${cacheID}/${stationID}`})
          })
      }
    }
  }
</script>