labswp_2019_sose_geocaching/frontend/src/pages/CacheEnd.vue
2019-05-10 17:19:38 +02:00

53 lines
1.5 KiB
Vue

<template>
<div>
<div class="q-ma-md">
<p class="text-h4">{{ cacheName }}</p>
<p class="text-h5">Herzlichen Glückwunsch!</p>
<p class="">Du hast alle Stationen gefunden und diesen Cache damit erfolgreich abgeschlossen!</p>
<p class="">Dir wurden <b>{{ rankingPoints }} Punkte</b> gutgeschrieben.</p>
<p class="text-h5">Deine Belohnung:</p>
<p v-html="cache.reward.rewardDescription"></p>
<div class="column q-gutter-y-md">
<q-btn unelevated color="primary" label="Rangliste" to="/ranking"/>
<q-btn unelevated color="primary" label="Zur Übersicht" to="/overview"/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cacheID: "",
cacheName: "",
cache: {
reward: "",
},
rankingPoints: "",
}
},
computed: {
},
created() {
this.fetchData();
},
methods: {
fetchData() {
this.$axios.get('/api/allCaches')
.then((response) => {
console.log("/api/allCaches");
console.log(JSON.stringify(response.data));
console.log(response.data);
const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
this.cache = cache;
this.cacheName = cache.name;
this.rankingPoints = cache.rankingPoints;
this.cacheID = this.$route.params.cache;
})
},
}
}
</script>