60 lines
1.9 KiB
Vue
60 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="q-ma-md">
|
|
<p class="text-h4">{{ cacheName }}</p>
|
|
<p class="text-h5">{{ end1 + rankingPoints + end2 }}</p>
|
|
|
|
<div class="column q-gutter-y-md">
|
|
<q-btn unelevated v-if="isLoggedIn" color="primary" label="Zur Rangliste" to="/ranking/"/>
|
|
<q-btn unelevated v-if="isLoggedIn" color="primary" label="Zur Belohnung" @click="reward = true" />
|
|
<q-dialog v-model="reward">
|
|
<q-card>
|
|
<q-card-section>
|
|
<div>Jetzt ist eine gute Zeit, etwas Neues zu beginnen.</div>
|
|
</q-card-section>
|
|
</q-card>
|
|
</q-dialog>
|
|
<q-btn unelevated color="primary" label="Zur Startseite" to="/"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
reward: false,
|
|
cacheID: "",
|
|
cacheName: "",
|
|
rankingPoints: "",
|
|
end1: "Gut gemacht, Du hast alle Stationen dieses Cache gefunden. Dir wurden ",
|
|
end2: " Punkte gutgeschrieben." //TODO Punkte wirklich gutschreiben, ggf. Cache auf erledigt setzen
|
|
}
|
|
},
|
|
computed: {
|
|
isLoggedIn() {
|
|
return localStorage.getItem('userToken'); //TODO Methode umschreiben --> funktioniert das?
|
|
}
|
|
},
|
|
created() {
|
|
this.fetchData();
|
|
},
|
|
methods: {
|
|
fetchData() {
|
|
this.$axios.get('/api/allCaches')
|
|
.then((response) => {
|
|
console.log("/api/allCaches");
|
|
console.log(JSON.stringify(this.data));
|
|
console.log(this.data);
|
|
console.log(response.data);
|
|
const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
|
|
this.cacheName = cache.name;
|
|
this.rankingPoints = cache.rankingPoints;
|
|
this.cacheID = this.$route.params.cache;
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|