qr-code scanner working
This commit is contained in:
Timo Volkmann
parent
f244cf408b
commit
0ec3dbb0b1
@ -62,6 +62,7 @@ module.exports = function (ctx) {
|
||||
'QPageSticky',
|
||||
'QAvatar',
|
||||
'QSpinnerPuff',
|
||||
'QSpinnerOval',
|
||||
'QExpansionItem',
|
||||
'QParallax',
|
||||
'QEditor',
|
||||
@ -107,7 +108,6 @@ module.exports = function (ctx) {
|
||||
API: JSON.stringify('http://localhost:8080')
|
||||
}
|
||||
: { // Base URL for API-Calls: PRODUCTION (build)
|
||||
//API: JSON.stringify('http://se.hs-heilbronn.de:8090')
|
||||
//API: JSON.stringify('http://seserver.se.hs-heilbronn.de:8090/buga19geocaching')
|
||||
API: JSON.stringify('http://localhost:8080')
|
||||
}
|
||||
|
||||
@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<qrcode-drop-zone @decode="onDecode" @init="logErrors">
|
||||
<qrcode-stream @decode="onDecode" @init="onInit" />
|
||||
</qrcode-drop-zone>
|
||||
|
||||
<qrcode-capture v-if="noStreamApiSupport" @decode="onDecode" />
|
||||
<p class="decode-result">Last result: <b>{{ result }}</b></p>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
//import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
|
||||
|
||||
export default {
|
||||
name: 'qrscanner',
|
||||
data () {
|
||||
return {
|
||||
result: '',
|
||||
noStreamApiSupport: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
onDecode (result) {
|
||||
this.result = result
|
||||
},
|
||||
|
||||
logErrors (promise) {
|
||||
promise.catch(console.error)
|
||||
},
|
||||
|
||||
async onInit (promise) {
|
||||
try {
|
||||
await promise
|
||||
} catch (error) {
|
||||
if (error.name === 'StreamApiNotSupportedError') {
|
||||
this.noStreamApiSupport = true
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// components: {
|
||||
// QrcodeStream,
|
||||
// QrcodeDropZone,
|
||||
// QrcodeCapture
|
||||
// }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -1,17 +1,151 @@
|
||||
<template>
|
||||
<!-- <q-page padding>-->
|
||||
<qrscanner />
|
||||
<!-- </q-page>-->
|
||||
<div>
|
||||
<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"/>
|
||||
<p class="decode-result">Last result: <b>{{ result }}</b></p>
|
||||
<p class="validating">Validating: <b>{{ validating }}</b></p>
|
||||
<p class="validating">is Valid: <b>{{ isValid }}</b></p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import qrscanner from '../components/qr-scanner'
|
||||
export default {
|
||||
// name: 'PageName',
|
||||
components: {
|
||||
qrscanner
|
||||
export default {
|
||||
//name: '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 => {
|
||||
this.setParams(0);
|
||||
let params = this.params;
|
||||
this.$axios.get('/api/checkStation', {params})
|
||||
.then((response) => {
|
||||
console.log("resolve(true)");
|
||||
resolve(true)
|
||||
}).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(cacheID) {
|
||||
console.log("setParams: ");
|
||||
let resCacheID = this.result.split('/')[0];
|
||||
let resStationID = this.result.split('/')[1];
|
||||
console.log(resCacheID + " und " + resStationID);
|
||||
this.params = {
|
||||
token: null,
|
||||
cacheID: resCacheID,
|
||||
stationID: resStationID,
|
||||
durchgefuehrterCacheID: cacheID
|
||||
};
|
||||
if (localStorage.getItem('userToken')) {
|
||||
this.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
|
||||
}
|
||||
} finally {
|
||||
this.loading = false;
|
||||
this.askForPermission = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -81,7 +81,7 @@ public class CacheConstructionUtil {
|
||||
|
||||
public static ResponseEntity createStationUtil(Station station) {
|
||||
|
||||
if (station.getDescription().length() == 0 || station.getLattitude() == 0.0 || station.getLongitude() == 0.0 || station.getSolution().length() == 0) {
|
||||
if (station.getDescription().length() == 0 || station.getLattitude() == 0.0 || station.getLongitude() == 0.0 /*|| station.getSolution().length() == 0*/) {
|
||||
return ResponseEntity.status(400).body("station fields can´t be empty");
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user