268 lines
9.7 KiB
Vue
268 lines
9.7 KiB
Vue
<template>
|
|
<div>
|
|
<form>
|
|
<div class="q-pa-md q-gutter-y-md">
|
|
<p class="text-h5">{{ isNewCache ? "Neuen Cache erstellen" : "Cache bearbeiten"}}</p>
|
|
<q-input class="col" dense stack-label filled v-model="computedCache.name" label="Name"/>
|
|
<q-input class="col" dense stack-label filled v-model="computedCache.rankingPoints" label="Punktewert"/>
|
|
<p class="text-h6">Beschreibung</p>
|
|
<q-editor
|
|
:toolbar="[
|
|
['bold', 'italic', 'strike', 'underline'],
|
|
['undo', 'redo'],
|
|
['hr', 'link'],
|
|
['fullscreen'],
|
|
]"
|
|
v-model="computedCache.description"
|
|
min-height="5rem"
|
|
max-height="50vh"
|
|
/>
|
|
<p class="text-h6">Belohnung</p>
|
|
<q-editor
|
|
:toolbar="[
|
|
['bold', 'italic', 'strike', 'underline'],
|
|
['undo', 'redo'],
|
|
['hr', 'link'],
|
|
['fullscreen'],
|
|
]"
|
|
v-model="computedCache.reward.rewardDescription"
|
|
min-height="5rem"
|
|
max-height="50vh"
|
|
/>
|
|
<p class="text-h6">Stationen</p>
|
|
<q-list bordered separator class="rounded-borders">
|
|
|
|
<q-item v-for="(station, index) in computedCache.stationen" :key="index">
|
|
<q-item-section avatar>
|
|
<q-avatar color="primary" text-color="white">
|
|
{{ index + 1 }}
|
|
</q-avatar>
|
|
</q-item-section>
|
|
|
|
<q-item-section top>
|
|
<q-item-label lines="1">
|
|
<span class="text-grey-8">ID: {{ station.id ? station.id : "keine" }}</span>
|
|
</q-item-label>
|
|
<q-item-label lines="1" class="q-mt-xs text-body2">
|
|
<span class="cursor-pointer">{{ station.description }}</span>
|
|
</q-item-label>
|
|
<q-item-label caption lines="1">
|
|
Code: {{ station.code }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
|
|
<q-item-section side>
|
|
<div class="text-grey-8 q-gutter-xs">
|
|
<q-btn @click="deleteStation(index)" class="" color="" flat dense round icon="delete"/>
|
|
<q-btn @click="editStation(index)" class="" color="" flat dense round icon="edit"/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
</q-list>
|
|
<div class="row reverse">
|
|
<q-btn @click="addStation" unelevated color="primary" label="Station hinzufügen" icon-right="add"/>
|
|
</div>
|
|
<p class="text-h6">Endstation</p>
|
|
<q-card flat bordered class="rounded-borders">
|
|
<q-item>
|
|
<q-item-section avatar>
|
|
<q-avatar color="primary" text-color="white">
|
|
{{ computedCache.stationen.length + 1 }}
|
|
</q-avatar>
|
|
</q-item-section>
|
|
|
|
<q-item-section top>
|
|
<q-item-label lines="1">
|
|
<span class="text-grey-8">ID: {{ computedEndstation.id ? computedEndstation.id : "keine" }}</span>
|
|
</q-item-label>
|
|
<q-item-label lines="1" class="q-mt-xs text-body2">
|
|
<span class="cursor-pointer">Endstation</span>
|
|
</q-item-label>
|
|
<q-item-label caption lines="1">
|
|
Koordinaten: {{ computedEndstation.lattitude }}, {{ computedEndstation.longitude }}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
|
|
<q-item-section side>
|
|
<div class="text-grey-8 q-gutter-xs">
|
|
<q-btn @click="editEndStation" class="" color="" flat dense round icon="edit"/>
|
|
</div>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-card>
|
|
<div class="row q-mt-xl">
|
|
<q-btn @click="saveCache" class="full-width q-mb-md" color="primary" unelevated stack label="Cache speichern"
|
|
icon="save_alt"/>
|
|
<q-btn to="/overview" class="full-width" color="negative" unelevated stack label="Abbrechen" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapGetters} from 'vuex';
|
|
|
|
export default {
|
|
name: "Cache",
|
|
data() {
|
|
return {
|
|
scrolldown: false,
|
|
isNewCache: this.$route.params.id === undefined,
|
|
//tempCache: {},
|
|
}
|
|
},
|
|
beforeRouteUpdate(to, from, next) {
|
|
console.log("beforeRouteUpdate: reset data and fetch");
|
|
this.$store.commit('cacheCollector/RESET_NEW_CACHE');
|
|
next()
|
|
},
|
|
|
|
beforeCreate: function () {
|
|
},
|
|
created: function () {
|
|
console.log("isNewCache: " + this.isNewCache);
|
|
console.log("Route Params: " + this.$route.params.id);
|
|
if (!this.isNewCache) {
|
|
this.$axios.get('/api/allCaches')
|
|
.then((response) => {
|
|
console.log("/api/allCaches");
|
|
//console.log(JSON.stringify(response.data));
|
|
console.log(response.data);
|
|
let cache = response.data.find(cache => Number(cache.id) === Number(this.$route.params.id));
|
|
console.log(cache);
|
|
let stations = cache.stationen.filter(station => station.description !== "Endstation");
|
|
let endstation = cache.stationen.find(station => station.description === "Endstation");
|
|
console.log(stations);
|
|
console.log(endstation);
|
|
this.$store.commit('cacheCollector/SET_CACHE', cache);
|
|
this.$store.commit('cacheCollector/SET_STATIONS', stations);
|
|
this.$store.commit('cacheCollector/SET_ENDSTATION', endstation);
|
|
})
|
|
|
|
}
|
|
},
|
|
beforeMount: function () {
|
|
},
|
|
mounted: function () {
|
|
console.log("Scrolldown: " + this.scrolldown)
|
|
},
|
|
updated: function () {
|
|
if (this.scrolldown) {
|
|
console.log("scroll down...");
|
|
window.scrollTo(0, document.body.scrollHeight);
|
|
this.scrolldown = false
|
|
}
|
|
//this.SET_CACHE(this.tempCache);
|
|
//this.scrollToBottom();
|
|
},
|
|
methods: {
|
|
editEndStation() {
|
|
console.log("editEndStation()");
|
|
const station = this.$store.getters['cacheCollector/GET_ENDSTATION'];
|
|
console.log(station);
|
|
this.$store.commit('cacheCollector/SET_TEMPSTATION', station);
|
|
this.$router.push({path: `/tempendstation/`}); // add parameter
|
|
|
|
},
|
|
addStation() {
|
|
this.$router.push({path: '/station'});
|
|
},
|
|
editStation(index) {
|
|
console.log("editStation(" + index + ")");
|
|
console.log(this.$store.getters['cacheCollector/GET_STATIONS']);
|
|
const station = this.$store.getters['cacheCollector/GET_STATIONS'][index];
|
|
console.log(station);
|
|
if (station.hasOwnProperty('id')) {
|
|
//this.$router.push({ path: '/station/'+station.id});
|
|
} else {
|
|
// TODO Stationen bearbeitbar machen bevor sie abgeschickt werden. Am besten Station Objekt als Übergabe Parameter bei Router
|
|
this.$store.commit('cacheCollector/SET_TEMPSTATION', station);
|
|
this.$router.push({path: `/tempstation/${index}`}); // add parameter
|
|
}
|
|
},
|
|
deleteStation(index) {
|
|
// TODO wenn Station id hat, mit Backend abgleichen
|
|
this.$store.commit('cacheCollector/REMOVE_STATION', index);
|
|
},
|
|
saveCache() {
|
|
// commit to store, send to api, if success -> reset store
|
|
let cache = JSON.parse(JSON.stringify(this.computedCache));
|
|
console.log(cache);
|
|
cache.stationen.push(this.computedEndstation);
|
|
if (this.isNewCache) {
|
|
|
|
this.$axios.post('/api/createCache', cache)
|
|
.then((response) => {
|
|
console.log("POST api/createCache: " + response.statusText);
|
|
this.$store.commit('cacheCollector/RESET_NEW_CACHE');
|
|
this.$router.push({path: '/overview'});
|
|
}).catch((error) => {
|
|
//TODO: Fehlermeldungen
|
|
// Error
|
|
let msg;
|
|
let title;
|
|
if (error.response) {
|
|
// The request was made and the server responded with a status code
|
|
title = "Problem with response!";
|
|
msg = error.response;
|
|
} else if (error.request) {
|
|
// The request was made but no response was received
|
|
title = "Problem with request!";
|
|
msg = "Error occured due to wrong server request!"
|
|
console.log(error.request);
|
|
} else {
|
|
// Something happened in setting up the request that triggered an Error
|
|
title = "Error";
|
|
msg = error.message;
|
|
console.log('Error', error.message);
|
|
}
|
|
console.log(error.config);
|
|
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
|
|
})
|
|
} else {
|
|
this.$axios.put('/api/editCache', cache)
|
|
.then((response) => {
|
|
console.log("POST api/editCache: " + response.statusText);
|
|
this.$store.commit('cacheCollector/RESET_NEW_CACHE');
|
|
this.$router.push({path: '/overview'});
|
|
})
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computedCache: {
|
|
set(value) {
|
|
console.log("set cache");
|
|
this.$store.commit('cacheCollector/SET_CACHE', value);
|
|
},
|
|
get() {
|
|
console.log("get cache");
|
|
return this.$store.getters['cacheCollector/GET_CACHE'];
|
|
}
|
|
},
|
|
computedStations: {
|
|
set(value) {
|
|
this.$store.commit('cacheCollector/SET_STATIONS', value);
|
|
},
|
|
get() {
|
|
return this.$store.getters['cacheCollector/GET_STATIONS'];
|
|
}
|
|
},
|
|
computedEndstation: {
|
|
set(value) {
|
|
this.$store.commit('cacheCollector/SET_ENDSTATION', value);
|
|
},
|
|
get() {
|
|
return this.$store.getters['cacheCollector/GET_ENDSTATION'];
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|