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";
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.API: "+process.env.API);

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

@ -1,75 +1,108 @@
<template>
<div>
<!-- <div :is="stationComponent" @q-tb="scrollToBottomState" :stationObject="tempStation">STATION</div>-->
<!-- <div v-show="!stationComponent">-->
<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="tempCache.name" label="Name" @change="cacheToStore"/>
<q-input
v-model="tempCache.description"
dense
stack-label
filled
autogrow
type="textarea"
label="Beschreibung"
@change="cacheToStore"
/>
<q-input class="col" dense stack-label filled v-model="tempCache.rankingPoints" label="Punktewert"
@change="cacheToStore"/>
<q-input
disable
v-model="tempCache.reward"
dense
stack-label
filled
autogrow
type="textarea"
label="Belohnung"
@change="cacheToStore"
/>
<p class="text-h6">Stationen</p>
<q-list bordered separator class="rounded-borders">
<!-- <div :is="stationComponent" @q-tb="scrollToBottomState" :stationObject="tempStation">STATION</div>-->
<!-- <div v-show="!stationComponent">-->
<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="tempCache.name" label="Name" @change="cacheToStore"/>
<q-input class="col" dense stack-label filled v-model="tempCache.rankingPoints" label="Punktewert"
@change="cacheToStore"/>
<p class="text-h6">Beschreibung</p>
<q-editor
:toolbar="[
['bold', 'italic', 'strike', 'underline'],
['undo', 'redo'],
['hr', 'link'],
['fullscreen'],
]"
v-model="tempCache.description"
min-height="5rem"
max-height="50vh"
@change="cacheToStore"
/>
<p class="text-h6">Belohnung</p>
<q-editor
:toolbar="[
['bold', 'italic', 'strike', 'underline'],
['undo', 'redo'],
['hr', 'link'],
['fullscreen'],
]"
v-model="tempCache.reward"
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-section avatar>
<q-avatar color="primary" text-color="white">
{{ index + 1 }}
</q-avatar>
</q-item-section>
<q-item v-for="(station, index) in cache.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 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-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>
<div class="row q-mt-xl">
<q-btn @click="saveCache" class="full-width" color="primary" unelevated stack label="Cache speichern"
icon="save_alt"/>
</div>
</q-list>
<div class="row reverse">
<q-btn @click="addStation" unelevated color="primary" label="Station hinzufügen" icon-right="add"/>
</div>
</form>
<!-- </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">
{{ 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>
</template>
@ -81,7 +114,7 @@
name: "Cache",
data() {
return {
// stationComponent: null,
//endStation: {},
scrolldown: false,
isNewCache: this.$route.params.id === undefined,
tempCache: {},
@ -122,6 +155,19 @@
// swapComponent: function (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() {
// push tempCache to Store
console.log("set Cache");
@ -129,20 +175,20 @@
// this.SET_CACHE(JSON.parse(JSON.stringify(this.tempCache)));
},
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) {
console.log("editStation("+index+")");
console.log("editStation(" + index + ")");
const station = this.cache.stationen[index];
console.log(station)
if (station.hasOwnProperty('id') ) {
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-l/${index}` }); // add parameter
this.$router.push({path: `/tempstation/${index}`}); // add parameter
}
},
deleteStation(index) {
@ -153,12 +199,14 @@
// commit to store, send to api, if success -> reset store
if (this.isNewCache) {
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)
.then((response) => {
console.log("POST api/createCache: " + response.statusText);
this.$store.commit('cacheCollector/RESET_NEW_CACHE');
this.$router.push({ path: '/overview' });
this.$router.push({path: '/overview'});
}).catch((error) => {
// Error
let msg;
@ -179,16 +227,17 @@
console.log('Error', error.message);
}
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
}
},
},
},
computed: {
...mapGetters({
cache: 'cacheCollector/GET_CACHE'
cache: 'cacheCollector/GET_CACHE',
endStation: 'cacheCollector/GET_ENDSTATION'
}),
// computedCache: {
// set(value) {

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

@ -23,7 +23,7 @@
return { //TODO Lageplan einbinden
cacheID: "",
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."
}
},

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

@ -25,12 +25,18 @@
<q-btn
:outline="userAuthenticated"
:disabled="userAuthenticated"
:loading="loading"
label="Login"
color="primary"
class="full-width"
type="submit"
unelevated
/>
>
<template v-slot:loading>
<q-spinner-oval class="on-left" />
wird eingeloggt...
</template>
</q-btn>
<q-btn
:outline="!userAuthenticated"
:disabled="!userAuthenticated"
@ -46,21 +52,6 @@
</div>
</div>
</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>
</template>
@ -68,13 +59,13 @@
export default {
data() {
return {
loading: false,
user: {
email: "volkmann@geocaching.de",
password: "0123456789",
//token: "",
// evalAuthentication: false
},
credentialsDialog: false,
};
},
// beforeMount: {
@ -97,7 +88,7 @@
},
methods: {
login: function () {
this.loading = true;
const data = {
email: this.user.email,
password: this.user.password
@ -135,7 +126,9 @@
}
console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
})
}).finally(() => {
this.loading = false;
})
},
evalAuthentication: function () {
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>
<q-editor
:toolbar="[
['bold', 'italic', 'strike', 'underline'],
['undo', 'redo']
]"
v-model="station.description" min-height="10rem" />
['bold', 'italic', 'strike', 'underline'],
['undo', 'redo'],
['hr', 'link'],
['fullscreen'],
]"
v-model="station.description" min-height="10rem"/>
<!--<q-input-->
<!--v-model="description"-->
<!--filled-->
<!--type="textarea"-->
<!--v-model="description"-->
<!--filled-->
<!--type="textarea"-->
<!--/>-->
<p class="text-h6 q-mt-md">Location</p>
<q-img transition="fade"
@ -19,14 +21,15 @@
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" />
<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/>-->
<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"/>
@ -37,6 +40,7 @@
<script>
import {mapGetters} from 'vuex';
export default {
name: "Station",
@ -56,20 +60,20 @@
}
},
// props: [ 'stationObject' ],
created: function() {
created: function () {
this.isNewStation = (this.$route.params.pos === undefined);
console.log("neu: "+this.isNewStation);
console.log("pos: "+this.$route.params.pos);
console.log("neu: " + this.isNewStation);
console.log("pos: " + this.$route.params.pos);
console.log(this.$route);
console.log(this.station);
if (!this.isNewStation) {
this.station = JSON.parse(JSON.stringify(this.tempStation));
this.station = JSON.parse(JSON.stringify(this.tempStation));
}
console.log(this.station);
},
beforeMount: function() {
beforeMount: function () {
},
mounted: function() {
mounted: function () {
this.concatLatlang();
},
computed: {
@ -82,13 +86,13 @@
//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();
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;
this.latlang = this.station.lattitude + ", " + this.station.longitude;
},
saveStation() {
console.log("saveStation(): ");
@ -96,15 +100,15 @@
if (this.isNewStation) {
this.$store.commit('cacheCollector/ADD_STATION', this.station);
} 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.$router.push({ path: `/cache` });
this.$router.push({path: `/cache`});
console.log("station saved..");
},
dismiss() {
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") }]
},
{
path: "/station-l/:pos",
path: "/tempstation/:pos",
component: () => import("layouts/MyLayout.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. ");
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);
state.tempStation = station;
};
export const SET_ENDSTATION = (state, station) => {
console.log("SET_ENDSTATION: "+station);
state.endStation = station;
};
export const ADD_STATION = (state, station) => {
console.log("ADD_STATION: add new station to cache: "+station);
state.newCache.stationen.push(station);
@ -29,6 +33,11 @@ export const RESET_NEW_CACHE = (state) => {
rankingPoints: 0,
stationen: []
};
state.endStation = {
description: "Endstation",
longitude: 0.0001,
lattitude: 0.0001,
};
console.log("resetted new Cache");
};
export const LOAD_REMOTE_CACHE = (state, id) => {

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

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