labswp_2019_sose_geocaching/frontend/src/pages/CacheStart.vue

75 lines
2.7 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">{{ cacheName }}</p>
<p>{{ instruction }}</p>
<div class="column q-gutter-y-md">
<q-input stack-label filled v-model="code" label="Code eingeben (wird mit Code scannen ersetzt)"/>
<q-btn @click="checkStation()" unelevated color="primary" label="QR-Code scannen (absenden)"/>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return { //TODO Lageplan einbinden
cacheID: "",
cacheName: "",
code: "8/6",
instruction: "Bitte begib Dich zu der auf der Karte angezeigten Position. An dieser Position wirst Du einen QR-Code finden. Wenn du ihn gefunden hast, drücke den Knopf zum Starten des QR-Scanners und gib uns die Berechtigung, Deine Kamera zu öffnen. Nachdem Du den QR-Code gescannt hast, erhältst du ein Rätsel zur Position der nächsten Station. Die Lösung zu dem Rätsel ist also das Versteck des nächsten QR-Codes."
}
},
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.cacheID = this.$route.params.cache;
})
},
checkStation() {
let params = this.setParams();
console.log(params);
this.$axios.get('/api/checkStation', {params})
.then((response) => {
console.log(response);
console.log("Anfrage erfolgreich");
}) .catch((error) => {
console.log(error);
console.log("Anfrage fehlgeschlagen");
})
this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`})
},
setParams() {
console.log("setParams: ");
let params = {};
params.cacheID = this.code.split('/')[0];
params.stationID = this.code.split('/')[1];
params.durchgefuehrterCacheID = this.cacheID;
console.log(params.cacheID + " und " + params.stationID);
if (localStorage.getItem('userToken')) {
params.token = JSON.parse(localStorage.getItem('userToken')).token;
}
return params;
},
}
}
</script>