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

updated frontend caching logic

Browse Source
This commit is contained in:
Timo Volkmann 2019-04-24 09:31:12 +02:00
parent 73cd87765f
commit e412d4a797
9 changed files with 186 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/boot/axios.js
View File

@ -1,7 +1,8 @@
import axios from "axios"; import axios from "axios";
const axiosInstance = axios.create({ const axiosInstance = axios.create({
baseURL: process.env.API baseURL: process.env.API,
timeout: 3000
}); });
console.log("process.env.DEV: "+process.env.DEV); console.log("process.env.DEV: "+process.env.DEV);
console.log("process.env.API: "+process.env.API); console.log("process.env.API: "+process.env.API);

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

@ -1,75 +1,108 @@
<template> <template>
<div> <div>
<!-- <div :is="stationComponent" @q-tb="scrollToBottomState" :stationObject="tempStation">STATION</div>--> <!-- <div :is="stationComponent" @q-tb="scrollToBottomState" :stationObject="tempStation">STATION</div>-->
<!-- <div v-show="!stationComponent">--> <!-- <div v-show="!stationComponent">-->
<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="tempCache.name" label="Name" @change="cacheToStore"/>
<q-input <q-input class="col" dense stack-label filled v-model="tempCache.rankingPoints" label="Punktewert"
v-model="tempCache.description" @change="cacheToStore"/>
dense <p class="text-h6">Beschreibung</p>
stack-label <q-editor
filled :toolbar="[
autogrow ['bold', 'italic', 'strike', 'underline'],
type="textarea" ['undo', 'redo'],
label="Beschreibung" ['hr', 'link'],
@change="cacheToStore" ['fullscreen'],
/> ]"
<q-input class="col" dense stack-label filled v-model="tempCache.rankingPoints" label="Punktewert" v-model="tempCache.description"
@change="cacheToStore"/> min-height="5rem"
<q-input max-height="50vh"
disable @change="cacheToStore"
v-model="tempCache.reward" />
dense <p class="text-h6">Belohnung</p>
stack-label <q-editor
filled :toolbar="[
autogrow ['bold', 'italic', 'strike', 'underline'],
type="textarea" ['undo', 'redo'],
label="Belohnung" ['hr', 'link'],
@change="cacheToStore" ['fullscreen'],
/> ]"
<p class="text-h6">Stationen</p> v-model="tempCache.reward"
<q-list bordered separator class="rounded-borders"> min-height="5rem"
max-height="50vh"
@change="cacheToStore"
/>
<p class="text-h6">Stationen</p>
<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 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">
{{ index + 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">ID: {{ station.id ? station.id : "keine" }}</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">{{ station.description }}</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: {{ station.code }} 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 @click="deleteStation(index)" class="" color="" flat dense round icon="delete"/> <q-btn @click="deleteStation(index)" class="" color="" flat dense round icon="delete"/>
<q-btn @click="editStation(index)" 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-list> </q-list>
<div class="row reverse"> <div class="row reverse">
<q-btn @click="addStation" unelevated color="primary" label="Station hinzufügen" icon-right="add"/> <q-btn @click="addStation" unelevated color="primary" label="Station hinzufügen" icon-right="add"/>
</div>
<div class="row q-mt-xl">
<q-btn @click="saveCache" class="full-width" color="primary" unelevated stack label="Cache speichern"
icon="save_alt"/>
</div>
</div> </div>
</form> <p class="text-h6">Endstation</p>
<!-- </div>--> <q-card flat bordered class="rounded-borders">
<q-item>
<q-item-section avatar>
<q-avatar color="primary" text-color="white">
{{ tempCache.stationen.length + 1 }}
</q-avatar>
</q-item-section>
<q-item-section top>
<q-item-label lines="1">
<span class="text-grey-8">ID: {{ endStation.id ? endStation.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: {{ endStation.lattitude }}, {{ endStation.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" color="primary" unelevated stack label="Cache speichern"
icon="save_alt"/>
</div>
</div>
</form>
<!-- </div>-->
</div> </div>
</template> </template>
@ -81,7 +114,7 @@
name: "Cache", name: "Cache",
data() { data() {
return { return {
// stationComponent: null, //endStation: {},
scrolldown: false, scrolldown: false,
isNewCache: this.$route.params.id === undefined, isNewCache: this.$route.params.id === undefined,
tempCache: {}, tempCache: {},
@ -122,6 +155,19 @@
// swapComponent: function (component) { // swapComponent: function (component) {
// this.stationComponent = component; // this.stationComponent = component;
// }, // },
editEndStation() {
console.log("editEndStation()");
const station = this.cache.endStation;
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
}
},
cacheToStore() { cacheToStore() {
// push tempCache to Store // push tempCache to Store
console.log("set Cache"); console.log("set Cache");
@ -129,20 +175,20 @@
// this.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); //this.swapComponent(station);
// create Station and add it to array tempCache.stationen // 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]; const station = this.cache.stationen[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});
} else { } else {
// TODO Stationen bearbeitbar machen bevor sie abgeschickt werden. Am besten Station Objekt als Übergabe Parameter bei Router // 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.$store.commit('cacheCollector/SET_TEMPSTATION', station);
this.$router.push({ path: `/station-l/${index}` }); // add parameter this.$router.push({path: `/tempstation/${index}`}); // add parameter
} }
}, },
deleteStation(index) { deleteStation(index) {
@ -153,12 +199,14 @@
// 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); console.log(this.cache);
console.log(JSON.stringify(this.cache)); let cache = this.cache;
cache.stationen.push(this.endStation);
this.$axios.post('/api/createCache', this.cache) this.$axios.post('/api/createCache', this.cache)
.then((response) => { .then((response) => {
console.log("POST api/createCache: " + response.statusText); console.log("POST api/createCache: " + response.statusText);
this.$store.commit('cacheCollector/RESET_NEW_CACHE'); this.$store.commit('cacheCollector/RESET_NEW_CACHE');
this.$router.push({ path: '/overview' }); this.$router.push({path: '/overview'});
}).catch((error) => { }).catch((error) => {
// Error // Error
let msg; let msg;
@ -179,16 +227,17 @@
console.log('Error', error.message); console.log('Error', 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: msg, title: title,});
}) })
} else { } else {
// TODO update existing Cache // TODO update existing Cache
} }
}, },
}, },
computed: { computed: {
...mapGetters({ ...mapGetters({
cache: 'cacheCollector/GET_CACHE' cache: 'cacheCollector/GET_CACHE',
endStation: 'cacheCollector/GET_ENDSTATION'
}), }),
// computedCache: { // computedCache: {
// set(value) { // set(value) {

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

@ -23,7 +23,7 @@
return { //TODO Lageplan einbinden return { //TODO Lageplan einbinden
cacheID: "", cacheID: "",
cacheName: "", cacheName: "",
code: "8/6", code: "8/7",
instruction: "Bitte begib Dich zu der auf der Karte angezeigten Position. An dieser Position wirst Du einen QR-Code finden. Wenn du ihn gefunden hast, drücke den Knopf zum Starten des QR-Scanners und gib uns die Berechtigung, Deine Kamera zu öffnen. Nachdem Du den QR-Code gescannt hast, erhältst du ein Rätsel zur Position der nächsten Station. Die Lösung zu dem Rätsel ist also das Versteck des nächsten QR-Codes." instruction: "Bitte begib Dich zu der auf der Karte angezeigten Position. An dieser Position wirst Du einen QR-Code finden. Wenn du ihn gefunden hast, drücke den Knopf zum Starten des QR-Scanners und gib uns die Berechtigung, Deine Kamera zu öffnen. Nachdem Du den QR-Code gescannt hast, erhältst du ein Rätsel zur Position der nächsten Station. Die Lösung zu dem Rätsel ist also das Versteck des nächsten QR-Codes."
} }
}, },

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

@ -25,12 +25,18 @@
<q-btn <q-btn
:outline="userAuthenticated" :outline="userAuthenticated"
:disabled="userAuthenticated" :disabled="userAuthenticated"
:loading="loading"
label="Login" label="Login"
color="primary" color="primary"
class="full-width" class="full-width"
type="submit" type="submit"
unelevated unelevated
/> >
<template v-slot:loading>
<q-spinner-oval class="on-left" />
wird eingeloggt...
</template>
</q-btn>
<q-btn <q-btn
:outline="!userAuthenticated" :outline="!userAuthenticated"
:disabled="!userAuthenticated" :disabled="!userAuthenticated"
@ -46,21 +52,6 @@
</div> </div>
</div> </div>
</form> </form>
<q-dialog v-model="credentialsDialog" persistent transition-show="scale" transition-hide="scale">
<q-card class="bg-red-9 text-white" style="">
<q-card-section>
<div class="text-h6">Fehler</div>
</q-card-section>
<q-card-section>
Es konnten keine übereinstimmenden Zugangsdaten in der Datenbank gefunden werden.
</q-card-section>
<q-card-actions align="right" class="bg-white text-teal">
<q-btn flat label="OK" color="red-9" v-close-popup/>
</q-card-actions>
</q-card>
</q-dialog>
</div> </div>
</template> </template>
@ -68,13 +59,13 @@
export default { export default {
data() { data() {
return { return {
loading: false,
user: { user: {
email: "volkmann@geocaching.de", email: "volkmann@geocaching.de",
password: "0123456789", password: "0123456789",
//token: "", //token: "",
// evalAuthentication: false // evalAuthentication: false
}, },
credentialsDialog: false,
}; };
}, },
// beforeMount: { // beforeMount: {
@ -97,7 +88,7 @@
}, },
methods: { methods: {
login: function () { login: function () {
this.loading = true;
const data = { const data = {
email: this.user.email, email: this.user.email,
password: this.user.password password: this.user.password
@ -135,7 +126,9 @@
} }
console.log(error.config); console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, }); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
}) }).finally(() => {
this.loading = false;
})
}, },
evalAuthentication: function () { evalAuthentication: function () {
this.$store.commit('auth/SET_AUTHENTICATED'); this.$store.commit('auth/SET_AUTHENTICATED');

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

@ -3,14 +3,16 @@
<p class="text-h5">Neue Station</p> <p class="text-h5">Neue Station</p>
<q-editor <q-editor
:toolbar="[ :toolbar="[
['bold', 'italic', 'strike', 'underline'], ['bold', 'italic', 'strike', 'underline'],
['undo', 'redo'] ['undo', 'redo'],
]" ['hr', 'link'],
v-model="station.description" min-height="10rem" /> ['fullscreen'],
]"
v-model="station.description" min-height="10rem"/>
<!--<q-input--> <!--<q-input-->
<!--v-model="description"--> <!--v-model="description"-->
<!--filled--> <!--filled-->
<!--type="textarea"--> <!--type="textarea"-->
<!--/>--> <!--/>-->
<p class="text-h6 q-mt-md">Location</p> <p class="text-h6 q-mt-md">Location</p>
<q-img transition="fade" <q-img transition="fade"
@ -19,14 +21,15 @@
src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg" src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
></q-img> ></q-img>
<div class="row q-col-gutter-md"> <div class="row q-col-gutter-md">
<q-input class="col" dense stack-label filled v-model="latlang" @input="separateLatlang" label="Längengrad/Breitengrad" /> <q-input class="col" dense stack-label filled v-model="latlang" @input="separateLatlang"
label="Längengrad/Breitengrad"/>
<div class="col-shrink"> <div class="col-shrink">
<q-btn unelevated color="primary" class="full-height" icon="my_location"/> <q-btn unelevated color="primary" class="full-height" icon="my_location"/>
</div> </div>
</div> </div>
<p class="text-h6 q-mt-md">Lösung</p> <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" 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="saveStation" 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"/>
@ -37,6 +40,7 @@
<script> <script>
import {mapGetters} from 'vuex'; import {mapGetters} from 'vuex';
export default { export default {
name: "Station", name: "Station",
@ -56,20 +60,20 @@
} }
}, },
// props: [ 'stationObject' ], // props: [ 'stationObject' ],
created: function() { created: function () {
this.isNewStation = (this.$route.params.pos === undefined); this.isNewStation = (this.$route.params.pos === undefined);
console.log("neu: "+this.isNewStation); console.log("neu: " + this.isNewStation);
console.log("pos: "+this.$route.params.pos); console.log("pos: " + this.$route.params.pos);
console.log(this.$route); console.log(this.$route);
console.log(this.station); console.log(this.station);
if (!this.isNewStation) { if (!this.isNewStation) {
this.station = JSON.parse(JSON.stringify(this.tempStation)); this.station = JSON.parse(JSON.stringify(this.tempStation));
} }
console.log(this.station); console.log(this.station);
}, },
beforeMount: function() { beforeMount: function () {
}, },
mounted: function() { mounted: function () {
this.concatLatlang(); this.concatLatlang();
}, },
computed: { computed: {
@ -82,13 +86,13 @@
//console.log("separateLatlang()"); //console.log("separateLatlang()");
if (this.latlang.includes(',')) { if (this.latlang.includes(',')) {
this.station.lattitude = this.latlang.substr(0, this.latlang.indexOf(',')).trim(); 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(); this.station.longitude = this.latlang.substr(this.latlang.indexOf(',') + 1, this.latlang.length).trim();
console.log(this.latlang); console.log(this.latlang);
console.log(this.station.lattitude + ", " + this.station.longitude); console.log(this.station.lattitude + ", " + this.station.longitude);
} }
}, },
concatLatlang() { concatLatlang() {
this.latlang = this.station.lattitude+", "+this.station.longitude; this.latlang = this.station.lattitude + ", " + this.station.longitude;
}, },
saveStation() { saveStation() {
console.log("saveStation(): "); console.log("saveStation(): ");
@ -96,15 +100,15 @@
if (this.isNewStation) { if (this.isNewStation) {
this.$store.commit('cacheCollector/ADD_STATION', this.station); this.$store.commit('cacheCollector/ADD_STATION', this.station);
} else { } else {
this.$store.commit('cacheCollector/EDIT_STATION', { index: this.$route.params.pos, station: this.station }); this.$store.commit('cacheCollector/EDIT_STATION', {index: this.$route.params.pos, station: this.station});
this.$store.commit('cacheCollector/SET_TEMPSTATION', null); this.$store.commit('cacheCollector/SET_TEMPSTATION', null);
} }
this.$router.push({ path: `/cache` }); this.$router.push({path: `/cache`});
console.log("station saved.."); console.log("station saved..");
}, },
dismiss() { dismiss() {
this.$store.commit('cacheCollector/SET_TEMPSTATION', null); this.$store.commit('cacheCollector/SET_TEMPSTATION', null);
this.$router.push({ path: `/cache` }); this.$router.push({path: `/cache`});
} }
} }
} }

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

@ -31,7 +31,7 @@ const routes = [
children: [{ path: "", component: () => import("pages/StationEdit.vue") }] children: [{ path: "", component: () => import("pages/StationEdit.vue") }]
}, },
{ {
path: "/station-l/:pos", path: "/tempstation/: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")}]
}, },

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

@ -6,3 +6,7 @@ export const GET_TEMPSTATION = (state) => {
console.log("GET_TEMPSTATION: retrieve cache from store. "); console.log("GET_TEMPSTATION: retrieve cache from store. ");
return state.tempStation; return state.tempStation;
}; };
export const GET_ENDSTATION = (state) => {
console.log("GET_ENDSTATION: retrieve cache from store. ");
return state.endStation;
};

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

@ -6,6 +6,10 @@ export const SET_TEMPSTATION = (state, station) => {
console.log("SET_TEMPSTATION: add new station to cache: "+station); console.log("SET_TEMPSTATION: add new station to cache: "+station);
state.tempStation = station; state.tempStation = station;
}; };
export const SET_ENDSTATION = (state, station) => {
console.log("SET_ENDSTATION: "+station);
state.endStation = 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);
@ -29,6 +33,11 @@ export const RESET_NEW_CACHE = (state) => {
rankingPoints: 0, rankingPoints: 0,
stationen: [] stationen: []
}; };
state.endStation = {
description: "Endstation",
longitude: 0.0001,
lattitude: 0.0001,
};
console.log("resetted new Cache"); console.log("resetted new Cache");
}; };
export const LOAD_REMOTE_CACHE = (state, id) => { export const LOAD_REMOTE_CACHE = (state, id) => {

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

@ -3,6 +3,7 @@ export default {
name: "", name: "",
description: "", description: "",
rankingPoints: 0, rankingPoints: 0,
reward: "",
stationen: [] stationen: []
}, },
// newCache: { // newCache: {
@ -41,4 +42,9 @@ export default {
// ] // ]
// }, // },
tempStation: {}, tempStation: {},
endStation: {
description: "Endstation",
longitude: 9.206628,
lattitude: 49.147734,
},
} }