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

Merge branch 'develop' into frontend/kathy

Browse Source
This commit is contained in:
Katharina Will 2019-04-25 12:12:56 +02:00
commit 91dd4301a5
11 changed files with 576 additions and 183 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);

216
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: {},
@ -112,16 +145,20 @@
//this.scrollToBottom(); //this.scrollToBottom();
}, },
methods: { methods: {
// ...mapMutations([ editEndStation() {
// 'cacheCollector/SET_CACHE', console.log("editEndStation()");
// 'cacheCollector/ADD_STATION', const station = this.endStation;
// 'cacheCollector/REMOVE_STATION', console.log(station);
// 'cacheCollector/RESET_NEW_CACHE', if (station.hasOwnProperty('id')) {
// 'cacheCollector/LOAD_REMOTE_CACHE' //this.$router.push({ path: '/station/'+station.id});
// ]), } else {
// swapComponent: function (component) { // TODO Stationen bearbeitbar machen bevor sie abgeschickt werden. Am besten Station Objekt als Übergabe Parameter bei Router
// this.stationComponent = component; this.$store.commit('cacheCollector/SET_TEMPSTATION', station);
// }, //this.$router.push({path: `/tempendstation/${index}`}); // add parameter
this.$router.push({path: `/tempendstation/`}); // add parameter
}
},
cacheToStore() { cacheToStore() {
// push tempCache to Store // push tempCache to Store
console.log("set Cache"); console.log("set Cache");
@ -129,20 +166,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 +190,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;
this.$axios.post('/api/createCache', this.cache) cache.stationen.push(this.endStation);
this.$axios.post('/api/createCache', 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 +218,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) {

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

@ -1,17 +1,38 @@
<template> <template>
<div> <div>
<q-img transition="fade" <q-img transition="fade"
class="q-mb-md " class="q-mb-md "
:ratio="16/9" :ratio="16/9"
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="q-ma-md"> <div class="q-ma-md">
<p class="text-h4">{{ cacheName }}</p> <p class="text-h4">{{ cacheName }}</p>
<p>{{ instruction }}</p> <p>{{ instruction }}</p>
<div class="column q-gutter-y-md"> <div class="column q-gutter-y-md">
<q-input stack-label filled v-model="code" label="Code eingeben (wird mit Code scannen ersetzt)"/> <div v-if="askForPermission">
<q-btn @click="checkStation()" unelevated color="primary" label="QR-Code scannen (absenden)"/> <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
<q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
icon="photo_camera"
label="QR-Code scannen" class="full-width"/>
</div>
<div v-if="activateCamera">
<qrcode-drop-zone @decode="onDecode" @init="logErrors">
<qrcode-stream :paused="paused" @decode="onDecode" @init="onInit">
<div v-if="validating">
<div class="light-dimmed fit">
</div>
<q-spinner-oval
class="absolute-center"
color="primary"
size="10em"
/>
</div>
</qrcode-stream>
</qrcode-drop-zone>
</div>
<qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
</div> </div>
</div> </div>
</div> </div>
@ -23,8 +44,19 @@
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.",
// Following Params belong to QR-Code Scanner
askForPermission: true,
activateCamera: false,
isValid: false,
validating: false,
loading: false,
paused: false,
result: null,
params: null,
noStreamApiSupport: false
} }
}, },
created() { created() {
@ -42,49 +74,118 @@
this.cacheName = cache.name; this.cacheName = cache.name;
this.cacheID = this.$route.params.cache; this.cacheID = this.$route.params.cache;
}) })
}, },
checkStation() {
checkStation() {
let params = this.setParams();
console.log(params);
this.$axios.get('/api/checkStation', {params})
.then((response) => {
console.log(response);
console.log("Anfrage erfolgreich");
}).catch((error) => {
console.log(error);
console.log("Anfrage fehlgeschlagen");
})
this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`})
},
setParams() {
console.log("setParams: ");
let params = {};
params.cacheID = this.result.split('/')[0];
params.stationID = this.result.split('/')[1];
params.durchgefuehrterCacheID = this.cacheID;
console.log(params.cacheID + " und " + params.stationID);
if (localStorage.getItem('userToken')) {
params.token = JSON.parse(localStorage.getItem('userToken')).token;
}
return params;
},
async onDecode(content) {
this.result = content;
this.pauseCamera();
this.validating = true;
this.isValid = await this.validate();
this.validating = false;
this.unPauseCamera();
// window.setTimeout(() => {
// this.unPauseCamera();
// }, 2000)
},
validate() {
return new Promise(resolve => {
let params = this.setParams(); let params = this.setParams();
console.log(params);
this.$axios.get('/api/checkStation', {params}) this.$axios.get('/api/checkStation', {params})
.then((response) => { .then((response) => {
console.log(response); console.log("resolve(true)");
console.log("Anfrage erfolgreich"); resolve(true);
this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
}).catch((error) => {
console.log("resolve(false)");
// 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.data.message
? error.response.data.message
: error.response.data;
} else if (error.request) {
// The request was made but no response was received
title = "Problem with request!";
msg = "Der Server antwortet nicht."
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.data);
}
console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
resolve(false);
});
})
},
}) .catch((error) => { pauseCamera() {
let msg; this.paused = true
let title; },
if (error.response) {
// The request was made and the server responded with a status code unPauseCamera() {
title = "Seite konnte nicht gefunden werden!"; this.paused = false
msg = error.response; },
} else if (error.request) {
// The request was made but no response was received toggleCamera(bool) {
title = "Problem with request!"; this.activateCamera = bool
msg = "Error occured due to wrong server request!" },
console.log(error.request);
} else { logErrors(promise) {
// Something happened in setting up the request that triggered an Error promise.catch(console.error)
title = "Error"; },
msg = error.message;
console.log('Error', error.message); async onInit(promise) {
} this.loading = true;
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { title: title, message: msg}) try {
}) await promise
this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`}) } catch (error) {
}, if (error.name === 'StreamApiNotSupportedError') {
setParams() { this.noStreamApiSupport = true
console.log("setParams: ");
let params = {};
params.cacheID = this.code.split('/')[0];
params.stationID = this.code.split('/')[1];
params.durchgefuehrterCacheID = this.cacheID;
console.log(params.cacheID + " und " + params.stationID);
if (localStorage.getItem('userToken')) {
params.token = JSON.parse(localStorage.getItem('userToken')).token;
} }
return params; } finally {
}, this.loading = false;
this.askForPermission = false;
}
} }
} }
}
</script> </script>

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');

48
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`});
} }
} }
} }

97
frontend/src/pages/StationEndEdit.vue Normal file
View File

@ -0,0 +1,97 @@
<template>
<div class="q-ma-md">
<p class="text-h5">Endstation</p>
<p class="text-h6 q-mt-md">Location</p>
<q-img transition="fade"
class="q-mb-md "
:ratio="16/9"
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"/>
<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/>-->
<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"/>
</div>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
name: "Station",
data() {
return {
description: "Rätsel, Aufgabe und Informationen zur Station.",
latlang: "",
station: {
description: "Beschreibung",
lattitude: "0.000",
longitude: "0.000",
solution: "",
code: ""
},
// stationObject: null,
}
},
// props: [ 'stationObject' ],
created: function () {
//this.isNewStation = (this.$route.params.pos === undefined);
console.log("pos: " + this.$route.params.pos);
console.log(this.$route);
console.log(this.station);
this.station = JSON.parse(JSON.stringify(this.tempStation));
console.log(this.station);
},
beforeMount: function () {
},
mounted: function () {
this.concatLatlang();
},
computed: {
...mapGetters({
tempStation: 'cacheCollector/GET_ENDSTATION'
}),
},
methods: {
separateLatlang() {
//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();
console.log(this.latlang);
console.log(this.station.lattitude + ", " + this.station.longitude);
}
},
concatLatlang() {
this.latlang = this.station.lattitude + ", " + this.station.longitude;
},
saveStation() {
console.log("saveStation(): ");
console.log(this.station);
this.$store.commit('cacheCollector/SET_ENDSTATION', this.station);
this.$router.push({path: `/cache`});
console.log("station saved..");
},
dismiss() {
//this.$store.commit('cacheCollector/SET_ENDSTATION', null);
this.$router.push({path: `/cache`});
}
}
}
</script>
<style scoped>
</style>

142
frontend/src/pages/StationView.vue
View File

@ -17,10 +17,29 @@
<!--/>--> <!--/>-->
<!--<p class="text-h5 q-mt-md">Location</p>--> <!--<p class="text-h5 q-mt-md">Location</p>-->
<div class="column q-gutter-y-md"> <div class="column q-gutter-y-md">
<q-input v-if="false" disabled stack-label filled v-model="code" label="Lösung"/> <div v-if="askForPermission">
<q-btn v-if="false" disabled unelevated color="primary" label="Lösung abschicken"/> <p>Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
<q-input stack-label filled v-model="code" label="Code eingeben (wird mit Code scannen ersetzt)"/>
<q-btn unelevated color="primary" label="Code scannen (absenden)"/> <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
icon="photo_camera"
label="QR-Code scannen" class="full-width"/>
</div>
<div v-if="activateCamera">
<qrcode-drop-zone @decode="onDecode" @init="logErrors">
<qrcode-stream :paused="paused" @decode="onDecode" @init="onInit">
<div v-if="validating">
<div class="light-dimmed fit">
</div>
<q-spinner-oval
class="absolute-center"
color="primary"
size="10em"
/>
</div>
</qrcode-stream>
</qrcode-drop-zone>
</div>
<qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
</div> </div>
</div> </div>
</div> </div>
@ -45,13 +64,25 @@
code: 213812, code: 213812,
solution: "Schneeglöckchen" solution: "Schneeglöckchen"
} }
} },
// Following Params belong to QR-Code Scanner
askForPermission: true,
activateCamera: false,
isValid: false,
validating: false,
loading: false,
paused: false,
result: null,
params: null,
noStreamApiSupport: false
} }
}, },
created: function () { created: function () {
console.log("StationView: ") console.log("StationView: ")
console.log("'id' from url: " + this.$route.params.id) // console.log("'id' from url: " + this.$route.params.id)
console.log("'cache' from url: " + this.$route.params.cache) // console.log("'cache' from url: " + this.$route.params.cache)
this.fetchData(); this.fetchData();
}, },
beforeMount: function () { beforeMount: function () {
@ -129,7 +160,104 @@
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, });
}) })
},
setParams() {
console.log("setParams: ");
let params = {};
params.cacheID = this.code.split('/')[0];
params.stationID = this.code.split('/')[1];
params.durchgefuehrterCacheID = this.cacheID;
console.log(params.cacheID + " und " + params.stationID);
if (localStorage.getItem('userToken')) {
params.token = JSON.parse(localStorage.getItem('userToken')).token;
}
return params;
},
async onDecode(content) {
this.result = content;
this.pauseCamera();
this.validating = true;
this.isValid = await this.validate();
this.validating = false;
this.unPauseCamera();
// window.setTimeout(() => {
// this.unPauseCamera();
// }, 2000)
},
validate() {
return new Promise(resolve => {
let params = this.setParams();
this.$axios.get('/api/checkStation', {params})
.then((response) => {
console.log("resolve(true)");
resolve(true);
this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
}).catch((error) => {
console.log("resolve(false)");
// 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.data.message
? error.response.data.message
: error.response.data;
} else if (error.request) {
// The request was made but no response was received
title = "Problem with request!";
msg = "Der Server antwortet nicht."
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.data);
}
console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
resolve(false);
});
})
},
pauseCamera() {
this.paused = true
},
unPauseCamera() {
this.paused = false
},
toggleCamera(bool) {
this.activateCamera = bool
},
logErrors(promise) {
promise.catch(console.error)
},
async onInit(promise) {
this.loading = true;
try {
await promise
} catch (error) {
if (error.name === 'StreamApiNotSupportedError') {
this.noStreamApiSupport = true
}
} finally {
this.loading = false;
this.askForPermission = false;
}
} }
} }
} }
</script> </script>

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

@ -31,10 +31,20 @@ const routes = [
children: [{ path: "", component: () => import("pages/StationEdit.vue") }] children: [{ path: "", component: () => import("pages/StationEdit.vue") }]
}, },
{ {
path: "/station-l/:pos", path: "/endstation/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/StationEndEdit.vue") }]
},
{
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")}]
}, },
{
path: "/tempendstation/",
component: () => import("layouts/MyLayout.vue"),
children: [{path: "", component: () => import("pages/StationEndEdit.vue")}]
},
{ {
path: "/station/:cache/:id", path: "/station/:cache/:id",
component: () => import("layouts/MyLayout.vue"), component: () => import("layouts/MyLayout.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,
},
} }