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

reworked cache creation

Browse Source
This commit is contained in:
Timo Volkmann 2019-04-30 02:00:38 +02:00
parent 2536996b16
commit 865d48cd63
9 changed files with 108 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/layouts/MyLayout.vue
View File

@ -101,6 +101,7 @@
</q-item-section> </q-item-section>
</q-item> </q-item>
<q-item <q-item
v-if="!this.$store.state.auth.isAuthenticated"
clickable clickable
class="text-primary" class="text-primary"
v-ripple v-ripple

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

@ -5,9 +5,8 @@
<form> <form>
<div class="q-pa-md q-gutter-y-md"> <div class="q-pa-md q-gutter-y-md">
<p class="text-h5">{{ isNewCache ? "Neuen Cache erstellen" : "Cache bearbeiten"}}</p> <p class="text-h5">{{ isNewCache ? "Neuen Cache erstellen" : "Cache bearbeiten"}}</p>
<q-input class="col" dense stack-label filled v-model="tempCache.name" label="Name" @change="cacheToStore"/> <q-input class="col" dense stack-label filled v-model="computedCache.name" label="Name"/>
<q-input class="col" dense stack-label filled v-model="tempCache.rankingPoints" label="Punktewert" <q-input class="col" dense stack-label filled v-model="computedCache.rankingPoints" label="Punktewert"/>
@change="cacheToStore"/>
<p class="text-h6">Beschreibung</p> <p class="text-h6">Beschreibung</p>
<q-editor <q-editor
:toolbar="[ :toolbar="[
@ -16,10 +15,9 @@
['hr', 'link'], ['hr', 'link'],
['fullscreen'], ['fullscreen'],
]" ]"
v-model="tempCache.description" v-model="computedCache.description"
min-height="5rem" min-height="5rem"
max-height="50vh" max-height="50vh"
@change="cacheToStore"
/> />
<p class="text-h6">Belohnung</p> <p class="text-h6">Belohnung</p>
<q-editor <q-editor
@ -29,15 +27,14 @@
['hr', 'link'], ['hr', 'link'],
['fullscreen'], ['fullscreen'],
]" ]"
v-model="tempCache.reward" v-model="computedCache.reward.rewardDescription"
min-height="5rem" min-height="5rem"
max-height="50vh" max-height="50vh"
@change="cacheToStore"
/> />
<p class="text-h6">Stationen</p> <p class="text-h6">Stationen</p>
<q-list bordered separator class="rounded-borders"> <q-list bordered separator class="rounded-borders">
<q-item v-for="(station, index) in cache.stationen" :key="index"> <q-item v-for="(station, index) in computedCache.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">
{{ index + 1 }} {{ index + 1 }}
@ -73,19 +70,19 @@
<q-item> <q-item>
<q-item-section avatar> <q-item-section avatar>
<q-avatar color="primary" text-color="white"> <q-avatar color="primary" text-color="white">
{{ tempCache.stationen.length + 1 }} {{ computedCache.stationen.length + 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">ID: {{ endStation.id ? endStation.id : "keine" }}</span> <span class="text-grey-8">ID: {{ computedEndstation.id ? computedEndstation.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">Endstation</span> <span class="cursor-pointer">Endstation</span>
</q-item-label> </q-item-label>
<q-item-label caption lines="1"> <q-item-label caption lines="1">
Koordinaten: {{ endStation.lattitude }}, {{ endStation.longitude }} Koordinaten: {{ computedEndstation.lattitude }}, {{ computedEndstation.longitude }}
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
@ -114,6 +111,8 @@
name: "Cache", name: "Cache",
data() { data() {
return { return {
// stations: [],
// endStation: {},
//endStation: {}, //endStation: {},
scrolldown: false, scrolldown: false,
isNewCache: this.$route.params.id === undefined, isNewCache: this.$route.params.id === undefined,
@ -128,7 +127,7 @@
created: function () { created: function () {
console.log("isNewCache: " + this.isNewCache); console.log("isNewCache: " + this.isNewCache);
console.log("fetch Caches from Store"); console.log("fetch Caches from Store");
this.tempCache = JSON.parse(JSON.stringify(this.cache)); //this.tempCache = JSON.parse(JSON.stringify(this.cache));
}, },
beforeMount: function () { beforeMount: function () {
}, },
@ -159,20 +158,32 @@
} }
}, },
cacheToStore() { // getStations() {
// push tempCache to Store // console.log("get Stations");
console.log("set Cache"); // let stations = this.computedStations.get();
this.$store.commit('cacheCollector/SET_CACHE', JSON.parse(JSON.stringify(this.tempCache))); // this.stations = stations.filter(station => station.description !== "Endstation");
// this.SET_CACHE(JSON.parse(JSON.stringify(this.tempCache))); // console.log(this.stations);
}, // this.endStation = stations.filter(station => station.description === "Endstation");
// console.log(this.endStation);
// },
// setStations() {
// let stations = this.stations;
// stations.push(this.endStation);
// this.computedStations.set(stations);
// },
// 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.$router.push({path: '/station'});
//this.swapComponent(station);
// create Station and add it to array tempCache.stationen
}, },
editStation(index) { editStation(index) {
console.log("editStation(" + index + ")"); console.log("editStation(" + index + ")");
const station = this.cache.stationen[index]; console.log(this.$store.getters['cacheCollector/GET_STATIONS']);
const station = this.$store.getters['cacheCollector/GET_STATIONS'][index];
console.log(station); console.log(station);
if (station.hasOwnProperty('id')) { if (station.hasOwnProperty('id')) {
//this.$router.push({ path: '/station/'+station.id}); //this.$router.push({ path: '/station/'+station.id});
@ -189,9 +200,9 @@
saveCache() { saveCache() {
// commit to store, send to api, if success -> reset store // commit to store, send to api, if success -> reset store
if (this.isNewCache) { if (this.isNewCache) {
console.log(this.cache); let cache = JSON.parse(JSON.stringify(this.computedCache));
let cache = this.cache; console.log(cache);
cache.stationen.push(this.endStation); cache.stationen.push(this.computedEndstation);
this.$axios.post('/api/createCache', cache) this.$axios.post('/api/createCache', cache)
.then((response) => { .then((response) => {
@ -227,18 +238,46 @@
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
cache: 'cacheCollector/GET_CACHE', //cache: 'cacheCollector/GET_CACHE',
endStation: 'cacheCollector/GET_ENDSTATION' //endStation: 'cacheCollector/GET_ENDSTATION'
}), }),
// computedCache: { // computedStations: {
// set(value) { // set(value) {
// console.log("set cache") // console.log("set stations");
// this.computedCache.set(value);
// }, // },
// get() { // get() {
// console.log("get cache"); // console.log("get stations");
// return this.$store.getters.cacheCollector.GET_CACHE // let stations = this.computedCache.stationen;
// return stations.filter(station => station.description !== "Endstation");
// } // }
// } // },
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> </script>

2
frontend/src/pages/Login.vue
View File

@ -117,7 +117,7 @@
// The request was made but no response was received // The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js // http.ClientRequest in node.js
message = error.request; message = "Anfrage fehlgeschlagen.";
} else { } else {
// Something happened in setting up the request that triggered an Error // Something happened in setting up the request that triggered an Error
console.log('Error', error.message); console.log('Error', error.message);

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

@ -117,26 +117,26 @@
console.log("Caches: " + this.caches); console.log("Caches: " + this.caches);
this.caches = response.data; this.caches = response.data;
}).catch((error) => { }).catch((error) => {
// Error let message;
let msg; let header = "Fehler: ";
let title;
if (error.response) { if (error.response) {
console.log("ERROR RESPONSE");
// The request was made and the server responded with a status code // The request was made and the server responded with a status code
title = "Problem with response!"; // that falls out of the range of 2xx
msg = error.response; message = error.response.data.error;
header += error.response.status;
} else if (error.request) { } else if (error.request) {
// The request was made but no response was received // The request was made but no response was received
title = "Problem with request!"; // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
msg = "Error occured due to wrong server request!" // http.ClientRequest in node.js
console.log(error.request); message = "Anfrage fehlgeschlagen.";
} else { } else {
// Something happened in setting up the request that triggered an Error // Something happened in setting up the request that triggered an Error
title = "Error";
msg = error.message;
console.log('Error', error.message); console.log('Error', error.message);
message = error.message;
} }
console.log(error.config); console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: msg, title: title, }); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
}) })
}, },
addCache() { addCache() {
@ -150,26 +150,26 @@
.then((response) => { .then((response) => {
this.fetchAllCaches() this.fetchAllCaches()
}).catch((error) => { }).catch((error) => {
// Error let message;
let msg; let header = "Fehler: ";
let title;
if (error.response) { if (error.response) {
console.log("ERROR RESPONSE");
// The request was made and the server responded with a status code // The request was made and the server responded with a status code
title = "Problem with response!"; // that falls out of the range of 2xx
msg = error.response; message = error.response.data.error;
header += error.response.status;
} else if (error.request) { } else if (error.request) {
// The request was made but no response was received // The request was made but no response was received
title = "Problem with request!"; // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
msg = "Error occured due to wrong server request!" // http.ClientRequest in node.js
console.log(error.request); message = "Anfrage fehlgeschlagen.";
} else { } else {
// Something happened in setting up the request that triggered an Error // Something happened in setting up the request that triggered an Error
title = "Error";
msg = error.message;
console.log('Error', error.message); console.log('Error', error.message);
message = error.message;
} }
console.log(error.config); console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: msg, title: title, }); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
}) })
}, },
startCache(cacheID) { startCache(cacheID) {

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

@ -49,7 +49,7 @@
description: "Rätsel, Aufgabe und Informationen zur Station.", description: "Rätsel, Aufgabe und Informationen zur Station.",
latlang: "", latlang: "",
station: { station: {
description: "Beschreibung", description: "Rätsel, Aufgabe und Informationen zur Station.",
lattitude: "0.000", lattitude: "0.000",
longitude: "0.000", longitude: "0.000",
solution: "", solution: "",

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

@ -10,3 +10,7 @@ export const GET_ENDSTATION = (state) => {
console.log("GET_ENDSTATION: retrieve cache from store. "); console.log("GET_ENDSTATION: retrieve cache from store. ");
return state.endStation; return state.endStation;
}; };
export const GET_STATIONS = (state) => {
console.log("GET_STATIONEN: retrieve cache from store. ");
return state.newCache.stationen;
};

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

@ -10,6 +10,10 @@ export const SET_ENDSTATION = (state, station) => {
console.log("SET_ENDSTATION: "+station); console.log("SET_ENDSTATION: "+station);
state.endStation = station; state.endStation = station;
}; };
export const SET_STATIONS = (state, station) => {
console.log("SET_STATIONEN: "+station);
state.newCache.stationen = station;
};
export const ADD_STATION = (state, station) => { export const ADD_STATION = (state, station) => {
console.log("ADD_STATION: add new station to cache: "+station); console.log("ADD_STATION: add new station to cache: "+station);
state.newCache.stationen.push(station); state.newCache.stationen.push(station);

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

@ -3,48 +3,16 @@ export default {
name: "", name: "",
description: "", description: "",
rankingPoints: 0, rankingPoints: 0,
reward: "", reward: {
rewardDescription: "",
},
stationen: [] stationen: []
}, },
// 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: {}, tempStation: {},
endStation: { endStation: {
description: "Endstation", description: "Endstation",
longitude: 9.206628, longitude: 9.206628,
lattitude: 49.147734, lattitude: 49.147734,
solution: "",
}, },
} }

2
src/main/java/hhn/labsw/bugageocaching/entities/Cache.java
View File

@ -20,7 +20,7 @@ public class Cache {
@OneToMany @OneToMany
private List<Station> stationen = new ArrayList<>(); private List<Station> stationen = new ArrayList<>();
@ManyToOne @ManyToOne (cascade = {CascadeType.ALL})
private Reward reward; private Reward reward;
public Cache() { public Cache() {