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

bugfixes

Browse Source
This commit is contained in:
Timo Volkmann 2019-05-07 22:57:30 +02:00
parent 14fe441e80
commit 21fc559a4b
6 changed files with 96 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

83
frontend/src/components/qrscanner.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div> <div>
<div class="q-ma-md" v-if="askForPermission"> <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 <q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
icon="photo_camera" icon="photo_camera"
label="QR-Code scannen" class="full-width"/> 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>
<div v-if="activateCamera"> <div v-if="activateCamera">
<qrcode-drop-zone @decode="onDecode" @init="logErrors"> <qrcode-drop-zone @decode="onDecode" @init="logErrors">
@ -43,11 +43,20 @@
paused: false, paused: false,
result: null, result: null,
params: null, params: null,
noStreamApiSupport: false noStreamApiSupport: false,
cacheID: null,
} }
}, },
created() {
this.setCacheId();
},
methods: { 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) { async onDecode(content) {
this.result = content; this.result = content;
@ -55,23 +64,24 @@
this.validating = true; this.validating = true;
this.isValid = await this.validate(); this.isValid = await this.validate();
this.validating = false;
window.setTimeout(() => {
this.validating = false;
this.unPauseCamera(); this.unPauseCamera();
// window.setTimeout(() => { }, 2000)
// this.unPauseCamera(); //this.unPauseCamera();
// }, 2000)
}, },
validate() { validate() {
return new Promise(resolve => { return new Promise(resolve => {
let params = this.setParams(); let params = this.setParams();
if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID) {
console.log(params); 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."); console.log("Parameter konnten nicht erkannt werden.");
resolve(false)
} else { } else {
this.$axios.get('/api/checkStation', {params}) this.$axios.put('/api/checkStation', null, { params })
.then((response) => { .then((response) => {
console.log("resolve(true)"); console.log("resolve(true)");
console.log("cache access definition"); console.log("cache access definition");
@ -84,28 +94,24 @@
} }
}).catch((error) => { }).catch((error) => {
console.log("resolve(false)"); console.log("resolve(false)");
// Error let header = "";
let msg; let message = "";
let title;
if (error.response) { if (error.response) {
// The request was made and the server responded with a status code console.log(error.response);
title = "Problem with response!"; header = "Falsche Station!";
msg = error.response.data.message message = "Diese Station wurde schon gescannt, ist noch nicht an der Reihe oder gehört nicht zum Cache. ";
? error.response.data.message message += "Bitte das Rätsel nochmal lesen und die richtige Station scannen.";
: error.response.data;
} else if (error.request) { } 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); console.log(error.request);
header = "Anfrage fehlgeschlagen!";
message = "Die Verbindung zum Server ist gestört. Versuchen Sie es später noch einmal.";
} else { } else {
// Something happened in setting up the request that triggered an Error console.log(error);
title = "Error"; console.log('Error', error.message);
msg = error.message; header = "Fehler!";
console.log('Error', error.message.data); message = error.message;
} }
console.log(error.config); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
resolve(false); resolve(false);
}); });
} }
@ -115,23 +121,25 @@
setParams() { setParams() {
console.log("setParams: "); console.log("setParams: ");
let params = {}; 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')) { if (localStorage.getItem('userToken')) {
params.token = JSON.parse(localStorage.getItem('userToken')).token; params.token = JSON.parse(localStorage.getItem('userToken')).token;
} }
this.updateProps() params.cacheID = this.result.split('/')[0];
console.log("emitted params!") 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; return params;
}, },
updateProps() { updateProps() {
console.log("emit result!")
this.$emit('result', this.params) this.$emit('result', this.params)
}, },
updateCameraState() { updateCameraState() {
this.$emit('camera', this.activateCamera) console.log("Camera State:")
console.log(!this.askForPermission)
this.$emit('camera', !this.askForPermission)
}, },
pauseCamera() { pauseCamera() {
@ -146,8 +154,8 @@
this.activateCamera = bool; this.activateCamera = bool;
if (this.askForPermission === false) { if (this.askForPermission === false) {
this.askForPermission = true; this.askForPermission = true;
}
this.updateCameraState(); this.updateCameraState();
}
}, },
logErrors(promise) { logErrors(promise) {
@ -165,6 +173,8 @@
} finally { } finally {
this.loading = false; this.loading = false;
this.askForPermission = false; this.askForPermission = false;
this.updateCameraState();
} }
} }
}, },
@ -178,6 +188,7 @@
this.result = null; this.result = null;
this.params = null; this.params = null;
this.noStreamApiSupport = false; this.noStreamApiSupport = false;
this.setCacheId();
next() next()
}, },
} }

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

@ -234,6 +234,9 @@
}, },
} }
}, },
created() {
this.evalAuthentication();
},
methods: { methods: {
//openURL //openURL
dialogClose() { dialogClose() {
@ -242,7 +245,7 @@
}, },
evalAuthentication: function () { evalAuthentication: function () {
this.$store.commit('auth/SET_AUTHENTICATED'); this.$store.commit('auth/SET_AUTHENTICATED');
this.$store.commit('auth/SET_USER'); // this.$store.commit('auth/SET_USER');
}, },
logout: function () { logout: function () {
console.log("logout()"); console.log("logout()");
@ -251,7 +254,6 @@
this.evalAuthentication(); this.evalAuthentication();
}, },
} }
}; };
</script> </script>

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

@ -115,35 +115,29 @@
console.log(response.data); console.log(response.data);
if (response.status === 201) { if (response.status === 201) {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
message: "Deine Registrierung war erfolgreich! Du kannst dich jetzt einloggen.", message: "Deine Registrierung war erfolgreich!",
title: "Registrierungsprozess", title: "Registrierungsprozess",
color: "blue" color: "blue"
}); });
this.$router.push("/login") this.autoLogin();
} }
}) })
.catch((error) => { .catch((error) => {
let message; let message;
let header = "Fehler: "; let header = "Unbekannter Fehler...";
if (error.response) { if (error.response) {
console.log("ERROR RESPONSE") console.log(error.response)
// The request was made and the server responded with a status code if (error.response.status === 409) {
// that falls out of the range of 2xx message= "Die E-Mail-Adresse wird bereits verwendet!";
message = error.response.data.error; header= "Anmeldedaten überprüfen!";
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); } else if (error.request) {
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,}); console.log(error.request);
}) header = "Anfrage fehlgeschlagen!";
message = "Die Verbindung zum Server ist gestört. Versuchen Sie es später noch einmal.";
}
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header});
});
} else { } else {
if (this.user.email != this.user.checkemail) { if (this.user.email != this.user.checkemail) {
@ -160,40 +154,37 @@
} }
}, },
login() { login() {
console.log("MasterUser()")
const logindata = { const logindata = {
email: "register@bugageocaching.de", email: "register@bugageocaching.de",
password: "reguser2019" 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) => { .then((response) => {
localStorage.setItem('registerToken', JSON.stringify(response.data)); 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) => { .catch((error) => {
let message; this.$router.push("/login");
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,});
}) })
.finally(() => {
});
}, },
}, },
}; };

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

@ -96,6 +96,7 @@
updateResult(event) { updateResult(event) {
console.log("updateResult()"); console.log("updateResult()");
console.log(event);
this.result = event; this.result = event;
}, },

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

@ -1,155 +1,21 @@
<template> <template>
<div> <div>
<div class="q-ma-md" v-if="askForPermission"> <qrscanner />
<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>
</template> </template>
<script> <script>
import qrscanner from "../components/qrscanner";
export default { export default {
name: 'qrscanner', name: 'Scanner',
components: {qrscanner},
data() { data() {
return { return {
askForPermission: true,
activateCamera: false,
isValid: false,
validating: false,
loading: false,
paused: false,
result: null,
params: null,
noStreamApiSupport: false
} }
}, },
methods: { 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();
if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID) {
console.log(params);
console.log("Parameter konnten nicht erkannt werden.");
resolve(false)
} else {
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> </script>