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

Merge branch 'frontend/timo' into develop

Browse Source
This commit is contained in:
Timo Volkmann 2019-05-07 22:58:24 +02:00
commit 04f5a4d20b
11 changed files with 529 additions and 440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/quasar.conf.js
View File

@ -109,8 +109,8 @@ module.exports = function (ctx) {
},
env: ctx.dev
? { // Base URL for API-Calls: DEV
//API: JSON.stringify('http://localhost:8080')
API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19geocaching'),
API: JSON.stringify('http://localhost:8080'),
// API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19geocaching'),
USER_API: JSON.stringify('https://seserver.se.hs-heilbronn.de:8443/buga19usermanagement')
}
: { // Base URL for API-Calls: PRODUCTION (build)

2
frontend/src/boot/qr-scanner.js
View File

@ -1,5 +1,5 @@
import VueQrcodeReader from "vue-qrcode-reader";
// import qrscanner from "../components/qr-scanner";
// import qrscanner from "../components/qrscanner";
// "async" is optional
export default async ({ Vue }) => {

198
frontend/src/components/qrscanner.vue Normal file
View File

@ -0,0 +1,198 @@
<template>
<div>
<div class="q-ma-md" v-if="askForPermission">
<q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
icon="photo_camera"
label="QR-Code scannen" class="full-width q-mt-sm"/>
<p class="q-mt-sm"><b>Hinweis:</b> Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.</p>
</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 class="q-ma-md">
<q-btn v-if="!askForPermission" @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="primary" stack
label="Schließen" class="full-width"/>
</div>
</div>
<qrcode-capture v-if="noStreamApiSupport" @decode="onDecode"/>
</div>
</template>
<script>
export default {
name: 'qrscanner',
data() {
return {
askForPermission: true,
activateCamera: false,
isValid: false,
validating: false,
loading: false,
paused: false,
result: null,
params: null,
noStreamApiSupport: false,
cacheID: null,
}
},
created() {
this.setCacheId();
},
methods: {
setCacheId() {
console.log("qr-code: 'cache' from url: " + this.$route.params.cache);
this.cacheID = this.$route.params.cache ? this.$route.params.cache : null;
},
async onDecode(content) {
this.result = content;
this.pauseCamera();
this.validating = true;
this.isValid = await this.validate();
window.setTimeout(() => {
this.validating = false;
this.unPauseCamera();
}, 2000)
//this.unPauseCamera();
},
validate() {
return new Promise(resolve => {
let params = this.setParams();
console.log(params);
if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID || !params.token) {
console.log("Parameter konnten nicht erkannt werden.");
resolve(false);
console.log("Parameter konnten nicht erkannt werden.");
} else {
this.$axios.put('/api/checkStation', null, { params })
.then((response) => {
console.log("resolve(true)");
console.log("cache access definition");
console.log(response.data.cacheAccesDefinition);
resolve(true);
if (Number(response.data.cacheAccesDefinition.id) === 0) {
this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
} else if (Number(response.data.cacheAccesDefinition.id) === 1) {
this.$router.push({path: `/CacheEnd/${params.cacheID}`});
}
}).catch((error) => {
console.log("resolve(false)");
let header = "";
let message = "";
if (error.response) {
console.log(error.response);
header = "Falsche Station!";
message = "Diese Station wurde schon gescannt, ist noch nicht an der Reihe oder gehört nicht zum Cache. ";
message += "Bitte das Rätsel nochmal lesen und die richtige Station scannen.";
} else if (error.request) {
console.log(error.request);
header = "Anfrage fehlgeschlagen!";
message = "Die Verbindung zum Server ist gestört. Versuchen Sie es später noch einmal.";
} else {
console.log(error);
console.log('Error', error.message);
header = "Fehler!";
message = error.message;
}
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
resolve(false);
});
}
})
},
setParams() {
console.log("setParams: ");
let params = {};
if (localStorage.getItem('userToken')) {
params.token = JSON.parse(localStorage.getItem('userToken')).token;
}
params.cacheID = this.result.split('/')[0];
params.stationID = this.result.split('/')[1];
params.durchgefuehrterCacheID = this.CacheID ? this.cacheID : params.cacheID;
console.log(params.cacheID + " und " + params.stationID);
this.updateProps();
return params;
},
updateProps() {
console.log("emit result!")
this.$emit('result', this.params)
},
updateCameraState() {
console.log("Camera State:")
console.log(!this.askForPermission)
this.$emit('camera', !this.askForPermission)
},
pauseCamera() {
this.paused = true
},
unPauseCamera() {
this.paused = false
},
toggleCamera(bool) {
this.activateCamera = bool;
if (this.askForPermission === false) {
this.askForPermission = true;
this.updateCameraState();
}
},
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;
this.updateCameraState();
}
}
},
beforeRouteUpdate(to, from, next) {
this.askForPermission = true;
this.activateCamera = false;
this.isValid = false;
this.validating = false;
this.loading = false;
this.paused = false;
this.result = null;
this.params = null;
this.noStreamApiSupport = false;
this.setCacheId();
next()
},
}
</script>
<style>
</style>

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

@ -73,6 +73,7 @@
</q-item-section>
</q-item>
<q-item
v-if="this.$store.state.auth.isAuthenticated"
clickable
class="text-primary"
v-ripple
@ -131,6 +132,23 @@
</q-item-section>
</q-item>
<q-item
v-if="this.$store.state.auth.isAuthenticated"
clickable
class="text-primary"
v-ripple
tag="a"
@click="logout()"
to="/"
>
<q-item-section avatar>
<q-icon name="logout"/>
</q-item-section>
<q-item-section>
<q-item-label>Logout</q-item-label>
</q-item-section>
</q-item>
<q-item
v-if="!this.$store.state.auth.isAuthenticated"
clickable
class="text-primary"
v-ripple
@ -141,7 +159,7 @@
<q-icon name="logout"/>
</q-item-section>
<q-item-section>
<q-item-label>{{ loginText }}</q-item-label>
<q-item-label>Login</q-item-label>
</q-item-section>
</q-item>
</q-list>
@ -177,22 +195,10 @@
name: "MyLayout",
data() {
return {
// dialog: {
// color: this,
// show: true,
// message: "Hallo Fehler! Dies ist ein Beispiel Fehler."
// },
leftDrawerOpen: this.$q.platform.is.desktop,
//menuButtonVisible: !this.$q.platform.is.desktop,
//leftDrawerOpen: true,
//miniState: true
};
},
computed: {
loginText() {
let text = this.$store.state.auth.isAuthenticated ? "Logout" : "Login";
return text;
},
dialogShow: {
get() {
// console.log("get dialogShow: "+this.$store.state.dialog.dialog.show)
@ -228,12 +234,25 @@
},
}
},
created() {
this.evalAuthentication();
},
methods: {
//openURL
dialogClose() {
console.log("dialogClose(): ")
this.$store.commit('dialog/RESET_MESSAGE_DIALOG');
},
evalAuthentication: function () {
this.$store.commit('auth/SET_AUTHENTICATED');
// this.$store.commit('auth/SET_USER');
},
logout: function () {
console.log("logout()");
console.log(JSON.parse(localStorage.getItem('userToken')));
localStorage.removeItem('userToken');
this.evalAuthentication();
},
}
};

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

@ -30,6 +30,7 @@
color="primary"
class="full-width"
@click="login"
@keyup.enter="login"
unelevated
>
<template v-slot:loading>
@ -46,6 +47,16 @@
unelevated
@click="logout"
/>
<div class="q-pt-md">
<q-btn
:disabled="userAuthenticated"
label="Registrieren"
color="primary"
class="full-width q-mt-md"
unelevated
to="/register"
/>
</div>
</div>
</div>
</div>
@ -63,17 +74,9 @@
user: {
email: "",
password: "",
//token: "",
// evalAuthentication: false
},
};
},
// beforeMount: {
// init: function () {
// this.evalAuthentication();
// console.log("initiated");
// }
// },
created() {
this.evalAuthentication();
console.log("created: initiated");
@ -140,16 +143,6 @@
logout: function () {
console.log("logout()");
console.log(JSON.parse(localStorage.getItem('userToken')));
// this.$axios.get('/api/logout', {
// params: {
// token: JSON.parse(localStorage.getItem('userToken'))
// }
// })
// .then((response) => {
// console.log("GET/POST /api/logout/ - response: " + response.data);
// })
// .catch((error) => {
// });
localStorage.removeItem('userToken');
this.evalAuthentication();
},

194
frontend/src/pages/Register.vue
View File

@ -1,63 +1,59 @@
<template>
<div class="q-pa-md">
<form class="register">
<form class="register" autocomplete="off">
<div class="q-pa-md">
<div class="column q-gutter-lg" style="">
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.name" type="text"
label="Nutzername eingeben" :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/>
<q-input lazy-rules outlined filled stack-label v-model="user.email" type="text" label="E-Mail"
:rules="[val=>validateEmail(val)||'Bitte gültige E-Mail angeben!']"/>
</div>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.email" type="text" label="Email eingeben" :rules="[val=>validateEmail(val)||'Email muss valide sein']"/>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input lazy-rules outlined filled stack-label v-model="user.checkemail" type="text"
label="E-Mail erneut eingeben" placeholer="Email"
:rules="[val=>val===user.email||'E-Mail stimmt nicht überein!']"/>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.checkemail" type="text"
label="Email erneut eingeben" placeholer="Email" :rules="[val=>val===user.email||'Email stimmt nicht überein']"/>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input lazy-rules outlined filled stack-label v-model="user.password" type="password"
label="Passwort"
:rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.password" type="password"
label="Passwort eingeben" :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input lazy-rules outlined filled stack-label v-model="user.checkpassword" type="password"
label="Passwort erneut eingeben"
:rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-input outlined filled stack-label v-model="user.checkpassword" type="password"
label="Passwort erneut eingeben" :rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
</div>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-btn
:disabled="!validationSuccesful"
label="Registrieren"
color="primary"
class="full-width"
@click="register()"
unelevated
/>
</div>
</div>
<div class="col">
<div class="">
<div class="" style="max-width: 440px">
<q-btn
:disabled="!validationSuccesful"
label="Registrieren"
color="primary"
class="full-width"
@click="register()"
unelevated
/>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</template>
@ -65,23 +61,21 @@
<script>
export default {
data() {
return{
return {
user: {
name:"",
email:"",
checkemail:"",
email: "",
checkemail: "",
password: "",
checkpassword: "",
},
}
},
computed: {
validationSuccesful(){
if(this.user.name.length>=2
&&this.validateEmail(this.user.email)
&&this.user.email===this.user.checkemail
&&this.user.password.length>=8
&&this.user.password===this.user.checkpassword){
validationSuccesful() {
if (this.validateEmail(this.user.email)
&& this.user.email === this.user.checkemail
&& this.user.password.length >= 8
&& this.user.password === this.user.checkpassword) {
return true;
}
return false;
@ -97,9 +91,9 @@
},
register: function () {
if(this.user.email===this.user.checkemail&&this.user.password===this.user.checkpassword){
if (this.user.email === this.user.checkemail && this.user.password === this.user.checkpassword) {
const data = {
name: this.user.name,
name: this.user.email,
password: this.user.password,
email: this.user.email,
roles: [
@ -112,47 +106,46 @@
console.log("POST /api/register/ - json: " + JSON.stringify(data));
const token = JSON.parse(localStorage.getItem('registerToken')).token;
this.$axios.post(process.env.USER_API+'/account/register', data,{
this.$axios.post(process.env.USER_API + '/account/register', data, {
headers: {
'Authorization': 'Bearer ' + token,
}
})
.then((response) => {
.then((response) => {
console.log(response.data);
if(response.status === 201){
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: "Deine Registrierung war erfolgreich!", title: "Registrierungsprozess", color: "blue"});
if (response.status === 201) {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Deine Registrierung war erfolgreich!",
title: "Registrierungsprozess",
color: "blue"
});
this.autoLogin();
}
})
.catch((error) => {
})
.catch((error) => {
let message;
let header = "Fehler: ";
let header = "Unbekannter Fehler...";
if (error.response) {
console.log("ERROR RESPONSE")
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
message = error.response.data.error;
header += error.response.status;
console.log(error.response)
if (error.response.status === 409) {
message= "Die E-Mail-Adresse wird bereits verwendet!";
header= "Anmeldedaten überprüfen!";
}
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
message = error.request;
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
message = error.message;
console.log(error.request);
header = "Anfrage fehlgeschlagen!";
message = "Die Verbindung zum Server ist gestört. Versuchen Sie es später noch einmal.";
}
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});
});
} else {
if(this.user.email!=this.user.checkemail) {
if (this.user.email != this.user.checkemail) {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Email stimmt nicht überein",
title: "Fehler",
});
} else if (this.user.password!=this.user.checkpassword){
} else if (this.user.password != this.user.checkpassword) {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Passwort stimmt nicht überein",
title: "Fehler",
@ -161,40 +154,37 @@
}
},
login() {
console.log("MasterUser()")
const logindata = {
email: "register@bugageocaching.de",
password: "reguser2019"
};
console.log("GET /api/login/ - json: " + JSON.stringify(logindata));
this.$axios.post(process.env.USER_API+'/account/login', logindata)
this.$axios.post(process.env.USER_API + '/account/login', logindata)
.then((response) => {
localStorage.setItem('registerToken', JSON.stringify(response.data));
});
},
autoLogin() {
console.log("autoLogin()");
const data = {
email: this.user.email,
password: this.user.password,
};
console.log(data);
this.$axios.post(process.env.USER_API + '/account/login', data)
.then((response) => {
localStorage.setItem('userToken', JSON.stringify(response.data));
localStorage.setItem('userMail', JSON.stringify(data.email));
this.$store.commit('auth/SET_AUTHENTICATED');
this.$store.commit('auth/SET_USER');
this.$router.push({path: `/overview`});
})
.catch((error) => {
let message;
let header = "Fehler: ";
if (error.response) {
console.log("ERROR RESPONSE")
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
message = error.response.data.error;
header += error.response.status;
} else if (error.request) {
// The request was made but no response was received
// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
message = error.request;
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
message = error.message;
}
console.log(error.config);
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
this.$router.push("/login");
})
.finally(() => {
});
},
},
};

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

@ -4,11 +4,12 @@
class="q-mb-md "
:ratio="16/9"
src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
v-if="!cameraActive"
></q-img>
<div class="q-ma-md">
<div class="q-ma-md" v-if="!cameraActive">
<p class="text-h4">{{ cache.name }}</p>
<p class="text-h5">Station {{ showCacheProgress }}</p>
<!-- <p class="text-h5">Station {{ data.station.position }}</p>-->
<!-- <p class="text-h5">Station {{ data.station.position }}</p>-->
<p>{{ station.description }}</p>
<!--<q-input-->
<!--v-model="description"-->
@ -17,64 +18,31 @@
<!--/>-->
<!--<p class="text-h5 q-mt-md">Location</p>-->
<div class="column q-gutter-y-md">
<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>
<qrscanner @result="updateResult($event)" @camera="updateCamera($event)" />
</div>
</template>
<script>
import qrscanner from "../components/qrscanner";
export default {
name: "Station",
components: {qrscanner},
data() {
return {
//code: "",
cacheID: "",
cacheName: "",
//cache: null,
cache: {
name: "",
stationen: [],
},
station: {},
// Following Params belong to QR-Code Scanner
askForPermission: true,
activateCamera: false,
isValid: false,
validating: false,
loading: false,
paused: false,
cameraActive: false,
result: null,
params: null,
noStreamApiSupport: false
}
},
beforeRouteUpdate (to, from, next) {
beforeRouteUpdate(to, from, next) {
console.log("beforeRouteUpdate: reset data and fetch");
this.cacheID = "";
this.cacheName = "";
@ -83,16 +51,6 @@
stationen: [],
};
this.station = {};
this.askForPermission = true;
this.activateCamera = false;
this.isValid = false;
this.validating = false;
this.loading = false;
this.paused = false;
this.result = null;
this.params = null;
this.noStreamApiSupport = false;
this.fetchData();
next()
},
@ -136,109 +94,19 @@
})
},
updateResult(event) {
console.log("updateResult()");
console.log(event);
this.result = event;
},
updateCamera(event) {
console.log("updateCamera()");
this.cameraActive = event;
},
setParams() {
console.log("setParams: ");
let params = {};
params.cacheID = this.result.split('/')[0];
params.stationID = this.result.split('/')[1];
params.durchgefuehrterCacheID = params.cacheID;
console.log(params.durchgefuehrterCacheID);
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)");
console.log("cache access definition");
console.log(response.data.cacheAccesDefinition);
resolve(true);
if (Number(response.data.cacheAccesDefinition.id) === 0) {
this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
} else if (Number(response.data.cacheAccesDefinition.id) === 1) {
this.$router.push({path: `/CacheEnd/${params.cacheID}`});
}
}).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>

138
frontend/src/pages/qr-scanner.vue
View File

@ -1,149 +1,21 @@
<template>
<div >
<div class="q-ma-md" 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>
<qrscanner />
</div>
</template>
<script>
import qrscanner from "../components/qrscanner";
export default {
//name: 'qrscanner',
name: 'Scanner',
components: {qrscanner},
data() {
return {
askForPermission: true,
activateCamera: false,
isValid: false,
validating: false,
loading: false,
paused: false,
result: null,
params: null,
noStreamApiSupport: false
}
},
methods: {
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)");
console.log("cache access definition");
console.log(response.data.cacheAccesDefinition);
resolve(true);
if (Number(response.data.cacheAccesDefinition.id) === 0) {
this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`});
} else if (Number(response.data.cacheAccesDefinition.id) === 1) {
this.$router.push({path: `/CacheEnd/${params.cacheID}`});
}
}).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);
});
})
},
setParams() {
console.log("setParams: ");
let params = {};
params.cacheID = this.result.split('/')[0];
params.stationID = this.result.split('/')[1];
params.durchgefuehrterCacheID = params.cacheID;
console.log(params.cacheID + " und " + params.stationID);
if (localStorage.getItem('userToken')) {
params.token = JSON.parse(localStorage.getItem('userToken')).token;
}
return params;
},
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>

67
frontend/src/router/index.js
View File

@ -2,25 +2,86 @@ import Vue from "vue";
import VueRouter from "vue-router";
import routes from "./routes";
import {axiosInstance} from "../boot/axios";
Vue.use(VueRouter);
//import store from "../store/index";
/*
* If not building with SSR mode, you can
* directly export the Router instantiation
*/
export default function(/* { store, ssrContext } */) {
export default function({ store }/* { store, ssrContext } */) {
const Router = new VueRouter({
scrollBehavior: () => ({ x: 0, y: 0 }),
routes,
store,
// Leave these as is and change from quasar.conf.js instead!
// quasar.conf.js -> build -> vueRouterMode
// quasar.conf.js -> build -> publicPath
mode: process.env.VUE_ROUTER_MODE,
base: process.env.VUE_ROUTER_BASE
});
Router.beforeEach((to, from, next) => {
console.log("before Routing...");
const isPublic = to.matched.some(record => record.meta.public);
const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
const onlyAdmin = to.matched.some(record => record.meta.onlyAdmin);
const loggedIn = localStorage.getItem('userToken')
? JSON.parse(localStorage.getItem('userToken'))
: false;
console.log(`isPublic: ${isPublic} \nonlyWhenLoggedOut: ${onlyWhenLoggedOut} \nonlyAdmin: ${onlyAdmin}`);
console.log("loggedIn");
console.log(loggedIn);
const isAdmin = loggedIn ? loggedIn.roles.find(x => x.role === "ADMIN" && x.domain === "geocaching.de") : false;
//const isAdmin = true;
if (!isPublic && !loggedIn) {
return next({
path:'/login',
query: {redirect: to.fullPath} // Store the full path to redirect the user to after login
});
}
if ((loggedIn && onlyWhenLoggedOut) || (loggedIn && onlyAdmin && !isAdmin)) {
return next('/')
}
if (isPublic) {
return next()
}
if (!isPublic && loggedIn) {
axiosInstance.get('/api/getUser', {
params: {
token: loggedIn.token
}
})
.then((response) => {
console.log("Token valid!");
return next();
})
.catch((error) => {
console.log("Catch Block: ");
console.log("Token invalid!");
if (error.response) {
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
//store.commit('auth/SET_LOGOUT');
store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Ihr Token ist nicht mehr gültig. Bitte loggen Sie sich erneut ein.",
title: "Bitte erneut anmelden.",
color: "blue", });
localStorage.removeItem('userToken');
return next('/Login');
} else {
console.log("unexpected behaviour");
console.log(error);
return next();
}
});
}
console.log(`isPublic: ${isPublic} \nonlyWhenLoggedOut: ${onlyWhenLoggedOut} \nonlyAdmin: ${onlyAdmin}`);
//return next();
});
return Router;
}

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

@ -2,88 +2,173 @@ const routes = [
{
path: "/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Index.vue") }]
children: [{ path: "", component: () => import("pages/Index.vue") }],
meta: {
public: true, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: false,
}
},
{
path: "/overview/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Overview.vue") }]
children: [{ path: "", component: () => import("pages/Overview.vue") }],
meta: {
public: true, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: false,
}
},
{
path: "/cache/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Cache.vue") }]
children: [{ path: "", component: () => import("pages/Cache.vue") }],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: true,
}
},
{
path: "/qr-scanner/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/qr-scanner.vue") }]
children: [{ path: "", component: () => import("pages/qr-scanner.vue") }],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: false,
}
},
{
path: "/cache/:id",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Cache.vue") }]
children: [{ path: "", component: () => import("pages/Cache.vue") }],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: true,
}
},
{
path: "/station/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/StationEdit.vue") }]
children: [{ path: "", component: () => import("pages/StationEdit.vue") }],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: true,
}
},
{
path: "/endstation/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/StationEndEdit.vue") }]
children: [{ path: "", component: () => import("pages/StationEndEdit.vue") }],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: true,
}
},
{
path: "/tempstation/:pos",
component: () => import("layouts/MyLayout.vue"),
children: [{path: "", component: () => import("pages/StationEdit.vue")}]
children: [{path: "", component: () => import("pages/StationEdit.vue")}],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: true,
}
},
{
path: "/tempendstation/",
component: () => import("layouts/MyLayout.vue"),
children: [{path: "", component: () => import("pages/StationEndEdit.vue")}]
children: [{path: "", component: () => import("pages/StationEndEdit.vue")}],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: true,
}
},
{
path: "/station/:cache/:id",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/StationView.vue") }]
children: [{ path: "", component: () => import("pages/StationView.vue") }],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: false,
}
},
{
path: "/ranking/",
component: () => import("layouts/MyLayout.vue"),
children: [{path: "", component: () => import("pages/ranking.vue")}]
children: [{path: "", component: () => import("pages/ranking.vue")}],
meta: {
public: true, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: false,
}
},
{
path: "/login/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Login.vue") }]
children: [{ path: "", component: () => import("pages/Login.vue") }],
meta: {
public: true, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: false,
}
},
{
path: "/CacheStart/:cache/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/CacheStart.vue") }]
children: [{ path: "", component: () => import("pages/CacheStart.vue") }],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: false,
}
},
{
path: "/CacheEnd/:cache/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/CacheEnd.vue") }]
children: [{ path: "", component: () => import("pages/CacheEnd.vue") }],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: false,
}
},
{
path: "/profile/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Profile.vue") }]
children: [{ path: "", component: () => import("pages/Profile.vue") }],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: false,
}
},
{
path: "/mycaches/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/MyCaches.vue") }]
children: [{ path: "", component: () => import("pages/MyCaches.vue") }],
meta: {
public: false, // Allow access to even if not logged in
onlyWhenLoggedOut: false,
onlyAdmin: false,
}
},
{
path: "/register/",
component: () => import("layouts/MyLayout.vue"),
children: [{ path: "", component: () => import("pages/Register.vue") }]
children: [{ path: "", component: () => import("pages/Register.vue") }],
meta: {
public: true, // Allow access to even if not logged in
onlyWhenLoggedOut: true,
onlyAdmin: false,
}
}
];

3
frontend/src/store/dialog/mutations.js
View File

@ -14,16 +14,19 @@ export function NEW_MESSAGE_DIALOG (state, messageObject) {
let color = "red-9";
state.dialog.colorBackground = "bg-"+color+" text-white";
state.dialog.colorButton = color;
break;
}
case "amber": {
let color = "amber";
state.dialog.colorBackground = "bg-"+color+" text-white";
state.dialog.colorButton = color;
break;
}
case "blue": {
let color = "primary";
state.dialog.colorBackground = "bg-"+color+" text-white";
state.dialog.colorButton = color;
break;
}
}
}