224 lines
8.0 KiB
Vue
224 lines
8.0 KiB
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.rankingPoints+' Punkte, '+startedCache.cache.stationen.length+' Stationen'"
|
|
>
|
|
<q-item class="q-pr-sm">
|
|
<q-item-section top avatar class="self-center"/>
|
|
<q-item-section class="">
|
|
<q-linear-progress rounded style="height: 15px" :value="startedCache.progress" color="primary" class=""/>
|
|
<q-item-label class="q-pt-xs" caption>
|
|
{{ startedCache.progress * 100 }}% bereits geschafft
|
|
</q-item-label>
|
|
</q-item-section>
|
|
|
|
</q-item>
|
|
<q-item class="q-pr-sm reverse">
|
|
<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: [],
|
|
|
|
//progress: 0.4
|
|
}
|
|
},
|
|
mounted: function () {
|
|
},
|
|
computed: {
|
|
hasAdminState() {
|
|
return this.$store.getters['auth/GET_ADMINSTATE'];
|
|
},
|
|
},
|
|
created: function () {
|
|
this.$store.commit('auth/SET_AUTHENTICATED');
|
|
//this.$store.commit('auth/SET_USER');
|
|
this.fetchUserCaches();
|
|
|
|
},
|
|
methods: {
|
|
calculateProgress() {
|
|
console.log("calcProgress...")
|
|
console.log("this.startedCaches: ")
|
|
console.log(this.startedCaches)
|
|
// for (let startedCache of this.startedCaches) {
|
|
// console.log(startedCache)
|
|
// let stationCount = startedCache.cache.stationen.length;
|
|
// let stationPos = 1 + startedCache.cache.stationen.findIndex(station => station.id === startedCache.aktuelleStation.id);
|
|
// startedCache.progress = stationPos / stationCount;
|
|
// console.log(startedCache.progress)
|
|
// }
|
|
this.startedCaches.forEach(startedCache => {
|
|
console.log(startedCache)
|
|
let stationCount = startedCache.cache.stationen.length;
|
|
let stationPos = 1 + startedCache.cache.stationen.findIndex(station => station.id === startedCache.aktuelleStation.id);
|
|
startedCache.progress = stationPos / stationCount;
|
|
console.log(startedCache.progress)
|
|
})
|
|
console.log("calcProgress finished.")
|
|
console.log(this.startedCaches)
|
|
},
|
|
fetchUserCaches() {
|
|
console.log("fetchCaches...")
|
|
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,});
|
|
}).finally(() => {
|
|
console.log("fetchCaches... finally")
|
|
this.calculateProgress();
|
|
});
|
|
console.log("fetchCaches... outside")
|
|
},
|
|
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>
|