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

216
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: {},
@ -112,16 +145,20 @@
//this.scrollToBottom();
},
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;
// },
editEndStation() {
console.log("editEndStation()");
const station = this.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: `/tempendstation/${index}`}); // add parameter
this.$router.push({path: `/tempendstation/`}); // add parameter
}
},
cacheToStore() {
// push tempCache to Store
console.log("set Cache");
@ -129,20 +166,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 +190,14 @@
// 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('/api/createCache', this.cache)
let cache = this.cache;
cache.stationen.push(this.endStation);
this.$axios.post('/api/createCache', 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 +218,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) {

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

@ -1,17 +1,38 @@
<template>
<div>
<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"
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="q-ma-md">
<p class="text-h4">{{ cacheName }}</p>
<p>{{ instruction }}</p>
<div class="column q-gutter-y-md">
<q-input stack-label filled v-model="code" label="Code eingeben (wird mit Code scannen ersetzt)"/>
<q-btn @click="checkStation()" unelevated color="primary" label="QR-Code scannen (absenden)"/>
<div v-if="askForPermission">
<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>
@ -23,8 +44,19 @@
return { //TODO Lageplan einbinden
cacheID: "",
cacheName: "",
code: "8/6",
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."
//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.",
// 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() {
@ -42,49 +74,118 @@
this.cacheName = cache.name;
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();
console.log(params);
this.$axios.get('/api/checkStation', {params})
.then((response) => {
console.log(response);
console.log("Anfrage erfolgreich");
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);
});
})
},
}) .catch((error) => {
let msg;
let title;
if (error.response) {
// The request was made and the server responded with a status code
title = "Seite konnte nicht gefunden werden!";
msg = error.response;
} else if (error.request) {
// The request was made but no response was received
title = "Problem with request!";
msg = "Error occured due to wrong server request!"
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);
}
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { title: title, message: msg})
})
this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`})
},
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;
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
}
return params;
},
} finally {
this.loading = false;
this.askForPermission = false;
}
}
}
}
</script>

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

48
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/>-->
<!-- <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"/>
@ -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`});
}
}
}

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>-->
<div class="column q-gutter-y-md">
<q-input v-if="false" disabled stack-label filled v-model="code" label="Lösung"/>
<q-btn v-if="false" disabled unelevated color="primary" label="Lösung abschicken"/>
<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)"/>
<div v-if="askForPermission">
<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>
@ -45,13 +64,25 @@
code: 213812,
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 () {
console.log("StationView: ")
console.log("'id' from url: " + this.$route.params.id)
console.log("'cache' from url: " + this.$route.params.cache)
// console.log("'id' from url: " + this.$route.params.id)
// console.log("'cache' from url: " + this.$route.params.cache)
this.fetchData();
},
beforeMount: function () {
@ -129,7 +160,104 @@
console.log(error.config);
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>

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

@ -31,10 +31,20 @@ const routes = [
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"),
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",
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. ");
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,
},
}