113 lines
3.6 KiB
Vue
113 lines
3.6 KiB
Vue
<template>
|
|
<div class="q-ma-md">
|
|
<p class="text-h5">Neue Station</p>
|
|
<q-editor
|
|
:toolbar="[
|
|
['bold', 'italic', 'strike', 'underline'],
|
|
['undo', 'redo']
|
|
]"
|
|
v-model="station.description" min-height="10rem" />
|
|
<!--<q-input-->
|
|
<!--v-model="description"-->
|
|
<!--filled-->
|
|
<!--type="textarea"-->
|
|
<!--/>-->
|
|
<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: "description",
|
|
lattitude: 0.06470,
|
|
longitude: 0.05551,
|
|
solution: "solution",
|
|
code: 357547
|
|
},
|
|
isNewStation: true,
|
|
// stationObject: null,
|
|
}
|
|
},
|
|
// props: [ 'stationObject' ],
|
|
created: function() {
|
|
this.station = this.tempStation;
|
|
console.log(this.station);
|
|
},
|
|
beforeMount: function() {
|
|
},
|
|
mounted: function() {
|
|
this.isNewStation = this.$route.params.pos === undefined;
|
|
console.log("neu: "+this.isNewStation);
|
|
console.log("pos: "+this.$route.params.pos);
|
|
this.concatLatlang();
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
tempStation: 'cacheCollector/GET_TEMPSTATION'
|
|
}),
|
|
},
|
|
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() {
|
|
//this.$parent.swapComponent(null);
|
|
// this.$emit('q-tb');
|
|
console.log("saveStation(): ");
|
|
if (isNewStation) {
|
|
this.$store.commit('cacheCollector/ADD_STATION', this.station);
|
|
} else {
|
|
this.$store.commit('cacheCollector/EDIT_STATION', this.$route.params.pos, this.station);
|
|
this.$store.commit('cacheCollector/SET_TEMPSTATION', null);
|
|
}
|
|
this.$router.push({ path: `/cache` });
|
|
console.log("station saved..");
|
|
},
|
|
dismiss() {
|
|
this.$emit('q-tb');
|
|
this.$router.push({ path: `/cache` });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|