tvolkmann/labswp_2019_sose_geocaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

changes in Cache & Station Editpages, worked on cacheCollector store

Browse Source
This commit is contained in:
Timo Volkmann 2019-04-09 03:41:05 +02:00
parent 57e66dcc45
commit 2723c59056
8 changed files with 307 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

243
frontend/src/pages/Cache.vue
View File

@ -1,111 +1,182 @@
<template> <template>
<div> <div>
<form> <!-- <div :is="stationComponent" @q-tb="scrollToBottomState" :stationObject="tempStation">STATION</div>-->
<div class="q-pa-md q-gutter-y-md"> <!-- <div v-show="!stationComponent">-->
<p class="text-h5">Cache erstellen/bearbeiten</p> <form>
<q-input class="col" dense stack-label filled v-model="text" label="Name"/> <div class="q-pa-md q-gutter-y-md">
<q-input <p class="text-h5">{{ isNewCache ? "Neuen Cache erstellen" : "Cache bearbeiten"}}</p>
v-model="description" <q-input class="col" dense stack-label filled v-model="tempCache.name" label="Name" @change="cacheToStore"/>
dense <q-input
stack-label v-model="tempCache.description"
filled dense
autogrow stack-label
type="textarea" filled
label="Beschreibung" autogrow
/> type="textarea"
<q-input class="col" dense stack-label filled v-model="text" label="Punktewert"/> label="Beschreibung"
<q-input @change="cacheToStore"
v-model="reward" />
dense <q-input class="col" dense stack-label filled v-model="tempCache.rankingPoints" label="Punktewert"
stack-label @change="cacheToStore"/>
filled <q-input
autogrow v-model="tempCache.reward"
type="textarea" dense
label="Belohnung" stack-label
/> filled
<p class="text-h6">Stationen</p> autogrow
<q-list bordered separator class="rounded-borders" > type="textarea"
label="Belohnung"
@change="cacheToStore"
/>
<p class="text-h6">Stationen</p>
<q-list bordered separator class="rounded-borders">
<q-item> <q-item v-for="(station, index) in cache.stationen" :key="index">
<q-item-section avatar> <q-item-section avatar>
<q-avatar color="primary" text-color="white"> <q-avatar color="primary" text-color="white">
1 {{ index + 1 }}
</q-avatar> </q-avatar>
</q-item-section> </q-item-section>
<q-item-section top> <q-item-section top>
<q-item-label lines="1"> <q-item-label lines="1">
<span class="text-grey-8">Beschreibung:</span> <span class="text-grey-8">ID: {{ station.id ? station.id : "keine" }}</span>
</q-item-label> </q-item-label>
<q-item-label lines="1" class="q-mt-xs text-body2"> <q-item-label lines="1" class="q-mt-xs text-body2">
<span class="cursor-pointer">Dies ist der Anfang der Beschreibung...</span> <span class="cursor-pointer">{{ station.description }}</span>
</q-item-label> </q-item-label>
<q-item-label caption lines="1"> <q-item-label caption lines="1">
Code: 123456 Code: {{ station.code }}
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
<q-item-section side> <q-item-section side>
<div class="text-grey-8 q-gutter-xs"> <div class="text-grey-8 q-gutter-xs">
<q-btn class="" color="" flat dense round icon="delete" /> <q-btn disable @click="deleteStation" class="" color="" flat dense round icon="delete"/>
<q-btn class="" color="" flat dense round icon="edit" /> <q-btn @click="editStation(index)" class="" color="" flat dense round icon="edit"/>
</div> </div>
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item>
<q-item-section avatar>
<q-avatar color="primary" text-color="white">
1
</q-avatar>
</q-item-section>
<q-item-section top> </q-list>
<q-item-label lines="1"> <div class="row reverse">
<span class="text-grey-8">Beschreibung:</span> <q-btn @click="addStation" unelevated color="primary" label="Station hinzufügen" icon-right="add"/>
</q-item-label> </div>
<q-item-label lines="1" class="q-mt-xs text-body2"> <div class="row q-mt-xl">
<span class="cursor-pointer">Dies ist der Anfang der Beschreibung...</span> <q-btn @click="saveCache" class="full-width" unelevated stack color="positive" label="Cache speichern"
</q-item-label> icon="save_alt"/>
<q-item-label caption lines="1"> </div>
Code: 123456
</q-item-label>
</q-item-section>
<q-item-section side>
<div class="text-grey-8 q-gutter-xs">
<q-btn class="" color="" flat dense round icon="delete" />
<q-btn 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> </div>
<div class="row q-mt-xl"> </form>
<q-btn @click="saveCache" class="full-width" unelevated stack color="positive" label="Cache speichern" icon="save_alt"/> <!-- </div>-->
</div>
</div>
</form>
</div> </div>
</template> </template>
<script> <script>
// import station from './StationEdit'
import {mapGetters} from 'vuex';
export default { export default {
name: "Cache", name: "Cache",
data() { data() {
return { return {
text: "" // stationComponent: null,
scrolldown: false,
isNewCache: this.$route.params.id === undefined,
tempCache: {},
} }
}, },
// components: {
// station
// },
beforeCreate: function () {
},
created: function () {
console.log("isNewCache: " + this.isNewCache);
console.log("fetch Caches from Store");
this.tempCache = JSON.parse(JSON.stringify(this.cache))
},
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: { methods: {
// ...mapMutations([
// 'cacheCollector/SET_CACHE',
// 'cacheCollector/ADD_STATION',
// 'cacheCollector/REMOVE_STATION',
// 'cacheCollector/RESET_NEW_CACHE',
// 'cacheCollector/LOAD_REMOTE_CACHE'
// ]),
// swapComponent: function (component) {
// this.stationComponent = component;
// },
cacheToStore() {
// push tempCache to Store
console.log("set Cache");
this.$store.commit('cacheCollector/SET_CACHE', JSON.parse(JSON.stringify(this.tempCache)));
// this.SET_CACHE(JSON.parse(JSON.stringify(this.tempCache)));
},
addStation() { addStation() {
this.$router.push({ path: '/station' });
//this.swapComponent(station);
// create Station and add it to array tempCache.stationen
},
editStation(index) {
console.log("editStation("+index+")");
const station = this.cache.stationen[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: `/station?local=${index}` }); // add parameter
}
},
deleteStation() {
}, },
saveCache() { saveCache() {
// commit to store, send to api, if success -> reset store
} if (this.isNewCache) {
console.log(this.cache);
console.log(JSON.stringify(this.cache));
this.$axios.post('http://localhost:8080/api/createCache', this.cache)
.then((response) => {
console.log("POST api/createCache: " + response.statusText);
this.$router.push({ path: '/overview' });
})
.catch((error) => {
});
} else {
// TODO update existing Cache
}
},
},
computed: {
...mapGetters({
cache: 'cacheCollector/GET_CACHE'
}),
// computedCache: {
// set(value) {
// console.log("set cache")
// },
// get() {
// console.log("get cache");
// return this.$store.getters.cacheCollector.GET_CACHE
// }
// }
} }
} }
</script> </script>

13
frontend/src/pages/Overview.vue
View File

@ -45,8 +45,8 @@
</q-item> </q-item>
<q-item class="q-pr-sm reverse q-gutter-x-sm"> <q-item class="q-pr-sm reverse q-gutter-x-sm">
<q-btn @click="startCache(cache.id)" unelevated color="positive" stack icon="arrow_forward" label="Starten" size="sm"/> <q-btn @click="startCache(cache.id)" unelevated color="positive" stack icon="arrow_forward" label="Starten" size="sm"/>
<q-btn v-if="hasAdminState" @click="startCache(cache.id)" unelevated color="amber" stack icon="edit" label="Bearbeiten" size="sm"/> <q-btn v-if="hasAdminState" @click="editCache(cache.id)" unelevated color="amber" stack icon="edit" label="Bearbeiten" size="sm"/>
<q-btn v-if="hasAdminState" @click="startCache(cache.id)" unelevated color="negative" stack icon="delete" label="Löschen" size="sm"/> <q-btn v-if="hasAdminState" @click="deleteCache(cache.id)" unelevated color="negative" stack icon="delete" label="Löschen" size="sm"/>
</q-item> </q-item>
</q-expansion-item> </q-expansion-item>
</q-card> </q-card>
@ -114,6 +114,10 @@
addCache() { addCache() {
this.$router.push({ path: `/cache` }) this.$router.push({ path: `/cache` })
}, },
editCache() {
},
removeCache() {
},
startCache(cacheID) { startCache(cacheID) {
const userToken = JSON.parse(localStorage.getItem('userToken')); const userToken = JSON.parse(localStorage.getItem('userToken'));
let params = { cacheID: cacheID }; let params = { cacheID: cacheID };
@ -124,8 +128,9 @@
this.$axios.get('http://localhost:8080/api/startCache', { params }) this.$axios.get('http://localhost:8080/api/startCache', { params })
.then((response) => { .then((response) => {
console.log("Angefangen: " + response.data); console.log(response.data);
let stationID = response.data.aktuelleStation.id; // let stationID = response.data.stationen[0].id;
let stationID = this.caches.find(x => x.id === cacheID).stationen[0].id;
console.log(stationID); console.log(stationID);
this.$router.push({ path: `/station/${stationID}` }) this.$router.push({ path: `/station/${stationID}` })
}) })

36
frontend/src/pages/StationEdit.vue
View File

@ -28,7 +28,7 @@
<q-input class="col" dense stack-label filled v-model="station.solution" label="Lösung" /> <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/> <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"> <div class="row reverse q-mt-md q-gutter-x-md">
<q-btn @click="addStation" unelevated color="primary" label="Speichern" icon-right="add"/> <q-btn @click="saveStation" unelevated color="primary" label="Speichern" icon-right="add"/>
<q-btn @click="dismiss" unelevated color="negative" label="verwerfen" icon-right="delete"/> <q-btn @click="dismiss" unelevated color="negative" label="verwerfen" icon-right="delete"/>
</div> </div>
@ -36,13 +36,13 @@
</template> </template>
<script> <script>
import {mapGetters} from 'vuex';
export default { export default {
name: "Station", name: "Station",
data() { data() {
return { return {
description: "Rätsel, Aufgabe und Informationen zur Station.", description: "Rätsel, Aufgabe und Informationen zur Station.",
text:"v-model !!",
latlang: "", latlang: "",
station: { station: {
description: "description", description: "description",
@ -51,20 +51,27 @@
solution: "solution", solution: "solution",
code: 357547 code: 357547
}, },
isNewStation: true,
// stationObject: null,
} }
}, },
// props: [ 'stationObject' ],
created: function() { created: function() {
this.station = this.tempStation;
console.log(this.station);
}, },
beforeMount: function() { beforeMount: function() {
}, },
mounted: function() { mounted: function() {
console.log("'id' from url: "+this.$route.params.id); this.isNewStation = this.$route.params.pos === undefined;
console.log("neu: "+this.isNewStation);
console.log("pos: "+this.$route.params.pos);
this.concatLatlang(); this.concatLatlang();
}, },
computed: { computed: {
// concatLatlang() { ...mapGetters({
// return this.station.lattitude+", "+this.station.longitude tempStation: 'cacheCollector/GET_TEMPSTATION'
// } }),
}, },
methods: { methods: {
separateLatlang() { separateLatlang() {
@ -79,11 +86,22 @@
concatLatlang() { concatLatlang() {
this.latlang = this.station.lattitude+", "+this.station.longitude; this.latlang = this.station.lattitude+", "+this.station.longitude;
}, },
addStation() { 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() { dismiss() {
this.$emit('q-tb');
this.$router.push({ path: `/cache` });
} }
} }
} }

18
frontend/src/router/routes.js
View File

@ -15,7 +15,12 @@ const routes = [
children: [{ path: "", component: () => import("pages/Cache.vue") }] children: [{ path: "", component: () => import("pages/Cache.vue") }]
}, },
{ {
path: "/station/", path: "/cache/:id",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Cache.vue") }]
},
{
path: "/station?local=:pos",
component: () => import("layouts/MyLayout.vue"), component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/StationEdit.vue") }] children: [{ path: "", component: () => import("pages/StationEdit.vue") }]
}, },
@ -24,6 +29,17 @@ const routes = [
component: () => import("layouts/MyLayout.vue"), component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/StationView.vue") }] children: [{ path: "", component: () => import("pages/StationView.vue") }]
}, },
{
path: "/station/",
component: () => import("layouts/MyLayout.vue"),
// props: true,
children: [{
path: "",
component: () => import("pages/StationEdit.vue"),
// props: true
//props: ['stationObject']
}]
},
{ {
path: "/login/", path: "/login/",
component: () => import("layouts/MyLayout.vue"), component: () => import("layouts/MyLayout.vue"),

1
frontend/src/store/auth/mutations.js
View File

@ -1,4 +1,3 @@
import axios from 'axios'
export const SET_AUTHENTICATED = (state) => { export const SET_AUTHENTICATED = (state) => {
console.log("SET_AUTHENTICATED()"); console.log("SET_AUTHENTICATED()");
console.log(JSON.parse(localStorage.getItem('userToken'))); console.log(JSON.parse(localStorage.getItem('userToken')));

12
frontend/src/store/cacheCollector/getters.js
View File

@ -1,4 +1,8 @@
/* export const GET_CACHE = (state) => {
export function someGetter (state) { console.log("GET_CACHE: retrieve cache from store. ");
} return state.newCache;
*/ };
export const GET_TEMPSTATION = (state) => {
console.log("GET_TEMPSTATION: retrieve cache from store. ");
return state.tempStation;
};

57
frontend/src/store/cacheCollector/mutations.js
View File

@ -1,4 +1,53 @@
/* export const SET_CACHE = (state, cache) => {
export function someMutation (state) { console.log("SET_CACHE: save cache to store. ")
} state.newCache = cache;
*/ };
export const SET_TEMPSTATION = (state, station) => {
console.log("SET_TEMPSTATION: add new station to cache: "+station);
state.tempStation = station;
};
export const ADD_STATION = (state, station) => {
console.log("ADD_STATION: add new station to cache: "+station);
state.newCache.stationen.push(station);
};
export const EDIT_STATION = (state, index, station) => {
console.log("ADD_STATION: add new station to cache: "+station);
state.newCache.stationen[index] = station;
};
export const REMOVE_STATION = (state, index) => {
console.log("ADD_STATION: add new station to cache: "+station);
state.newCache.stationen.splice(index,1);
};
export const RESET_NEW_CACHE = (state) => {
state.newCache = {
id: null,
name: "",
description: "",
rankingPoints: 0,
stationen: []
};
console.log("resetted new Cache");
};
export const LOAD_REMOTE_CACHE = (state, id) => {
console.log("LOAD_REMOTE_CACHE: get caches from remote");
this.$axios.get('http://localhost:8080/api/allCaches')
.then((response) => {
const allCaches = JSON.parse(response.data);
console.log("Caches: " + allCaches.length);
if (response.data === undefined || allCaches.length === 0) {
console.log("aborted processing data.");
return;
}
let cacheToSet = null;
for (let cache in allCaches) {
console.log("Cachedata: ");
console.log(cache.id);
console.log(cache.name);
if (cache.id === id) {
cacheToSet = cache;
console.log("found matching ID: setted cache to store.");
break;
}
}
});
};

37
frontend/src/store/cacheCollector/state.js
View File

@ -1,3 +1,38 @@
export default { export default {
// newCache: {
name: "Blumencache",
description: "Dieser Cache umfasst 4 Stationen mit Rätseln rund um das Thema Blumen",
rankingPoints: 100,
stationen: [
{
description: "Ein kleines winterliches Schlaginstrument. Welche Blume ist damit gemeint?",
longitude: 9.206628,
lattitude: 49.147734,
code: 213812,
solution: "Schneeglöckchen"
},
{
description: "Ein blühendes Federvieh. Welche Blume ist damit gemeint?",
longitude: 9.206806,
lattitude: 49.147318,
code: 237823,
solution: "Gänseblümchen"
},
{
description: "Eine wertvolle Farbe. Welche Blume ist damit gemeint?",
longitude: 9.207844,
lattitude: 49.148032,
code: 899423,
solution: "Edelweiß"
},
{
description: "Ein Zerkleinerungsgerät in der Brüllöffnung eines Raubtieres. Welche Blume ist damit gemeint?",
longitude: 9.207649,
lattitude: 49.150142,
code: 347923,
solution: "Löwenzahn"
}
]
},
tempStation: {},
} }