98 lines
3.2 KiB
Vue
98 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<q-img transition="fade"
|
|
class="q-mb-md "
|
|
:ratio="16/9"
|
|
src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
|
|
></q-img>
|
|
<div class="q-ma-md">
|
|
<p class="text-h4">{{ data.cacheName }}</p>
|
|
<p class="text-h5">Station {{ showCacheProgress }}</p>
|
|
<!-- <p class="text-h5">Station {{ data.station.position }}</p>-->
|
|
<p>{{ data.station.description }}</p>
|
|
<!--<q-input-->
|
|
<!--v-model="description"-->
|
|
<!--filled-->
|
|
<!--type="textarea"-->
|
|
<!--/>-->
|
|
<!--<p class="text-h5 q-mt-md">Location</p>-->
|
|
<div class="column q-gutter-y-md">
|
|
<q-input v-if="false" disabled stack-label filled v-model="code" label="Lösung"/>
|
|
<q-btn v-if="false" disabled unelevated color="primary" label="Lösung abschicken"/>
|
|
<q-input stack-label filled v-model="code" label="Code eingeben (wird mit Code scannen ersetzt)"/>
|
|
<q-btn unelevated color="primary" label="Code scannen (absenden)"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "Station",
|
|
|
|
data() {
|
|
return {
|
|
code: "",
|
|
cache: null,
|
|
data: {
|
|
cacheId: 22,
|
|
cacheName: "Wasserfall Cache",
|
|
station: {
|
|
id: 22,
|
|
description: "Ein kleines winterliches Schlaginstrument. Welche Blume ist damit gemeint?",
|
|
longitude: 9.206628,
|
|
lattitude: 49.147734,
|
|
code: 213812,
|
|
solution: "Schneeglöckchen"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
created: function () {
|
|
console.log("StationView: ")
|
|
console.log("'id' from url: " + this.$route.params.id)
|
|
console.log("'cache' from url: " + this.$route.params.cache)
|
|
this.fetchData();
|
|
},
|
|
beforeMount: function () {
|
|
},
|
|
mounted: function () {
|
|
},
|
|
computed: {
|
|
showCacheProgress() {
|
|
let stationCount = this.cache.stationen.length;
|
|
let stationPos = 1 + this.cache.stationen.findIndex(station => station.id === Number(this.$route.params.id));
|
|
return `${stationPos} von ${stationCount}`;
|
|
}
|
|
},
|
|
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.data.cacheId = cache.id;
|
|
this.data.cacheName = cache.name;
|
|
this.cache = cache;
|
|
console.log(JSON.stringify(this.data));
|
|
this.$axios.get('/api/getAllStations')
|
|
.then((response) => {
|
|
console.log("/api/getAllStations");
|
|
console.log(response.data);
|
|
const stationView = response.data.find(station => station.id === Number(this.$route.params.id));
|
|
console.log(JSON.stringify(stationView));
|
|
this.data.station = stationView;
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|