98 lines
3.2 KiB
Vue
98 lines
3.2 KiB
Vue
<template>
|
|
<div class="q-ma-md">
|
|
<p class="text-h5">Endstation</p>
|
|
<p class="text-h6 q-mt-md">Location</p>
|
|
<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="row q-col-gutter-md">
|
|
<q-input class="col" dense stack-label filled v-model="latlang" @input="separateLatlang"
|
|
label="Längengrad/Breitengrad"/>
|
|
<div class="col-shrink">
|
|
<q-btn unelevated color="primary" class="full-height" icon="my_location"/>
|
|
</div>
|
|
</div>
|
|
<!-- <p class="text-h6 q-mt-md">Lösung</p>-->
|
|
<!-- <q-input class="col" dense stack-label filled v-model="station.solution" label="Lösung"/>-->
|
|
<!-- <q-input class="col q-mt-md" dense stack-label filled v-model="station.code" label="Code" readonly/>-->
|
|
<div class="row reverse q-mt-md q-gutter-x-md">
|
|
<q-btn @click="saveStation" unelevated color="primary" label="Speichern" icon-right="add"/>
|
|
<q-btn @click="dismiss" unelevated color="negative" label="verwerfen" icon-right="delete"/>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters} from 'vuex';
|
|
|
|
export default {
|
|
name: "Station",
|
|
|
|
data() {
|
|
return {
|
|
description: "Rätsel, Aufgabe und Informationen zur Station.",
|
|
latlang: "",
|
|
station: {
|
|
description: "Beschreibung",
|
|
lattitude: "0.000",
|
|
longitude: "0.000",
|
|
solution: "",
|
|
code: ""
|
|
},
|
|
// stationObject: null,
|
|
}
|
|
},
|
|
// props: [ 'stationObject' ],
|
|
created: function () {
|
|
//this.isNewStation = (this.$route.params.pos === undefined);
|
|
console.log("pos: " + this.$route.params.pos);
|
|
console.log(this.$route);
|
|
console.log(this.station);
|
|
this.station = JSON.parse(JSON.stringify(this.tempStation));
|
|
console.log(this.station);
|
|
},
|
|
beforeMount: function () {
|
|
},
|
|
mounted: function () {
|
|
this.concatLatlang();
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
tempStation: 'cacheCollector/GET_ENDSTATION'
|
|
}),
|
|
},
|
|
methods: {
|
|
separateLatlang() {
|
|
//console.log("separateLatlang()");
|
|
if (this.latlang.includes(',')) {
|
|
this.station.lattitude = this.latlang.substr(0, this.latlang.indexOf(',')).trim();
|
|
this.station.longitude = this.latlang.substr(this.latlang.indexOf(',') + 1, this.latlang.length).trim();
|
|
console.log(this.latlang);
|
|
console.log(this.station.lattitude + ", " + this.station.longitude);
|
|
}
|
|
},
|
|
concatLatlang() {
|
|
this.latlang = this.station.lattitude + ", " + this.station.longitude;
|
|
},
|
|
saveStation() {
|
|
console.log("saveStation(): ");
|
|
console.log(this.station);
|
|
this.$store.commit('cacheCollector/SET_ENDSTATION', this.station);
|
|
this.$router.push({path: `/cache`});
|
|
console.log("station saved..");
|
|
},
|
|
dismiss() {
|
|
//this.$store.commit('cacheCollector/SET_ENDSTATION', null);
|
|
this.$router.push({path: `/cache`});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|