added qr-generator and fixed some bugs
This commit is contained in:
Timo Volkmann
parent
b8ecb2a93b
commit
b6a9cdcb07
@ -3,7 +3,7 @@
|
||||
<div class="q-ma-md" v-if="askForPermission">
|
||||
|
||||
<q-btn @click="toggleCamera(!activateCamera)" :loading="loading" unelevated color="positive" stack
|
||||
icon="photo_camera"
|
||||
icon="filter_center_focus"
|
||||
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>
|
||||
|
||||
@ -81,7 +81,7 @@
|
||||
to="/mycaches"
|
||||
>
|
||||
<q-item-section avatar>
|
||||
<q-icon name="map"/>
|
||||
<q-icon name="bookmarks"/>
|
||||
</q-item-section>
|
||||
<q-item-section>
|
||||
<q-item-label>Meine Caches</q-item-label>
|
||||
|
||||
@ -210,6 +210,7 @@
|
||||
this.$store.commit('cacheCollector/RESET_NEW_CACHE');
|
||||
this.$router.push({path: '/overview'});
|
||||
}).catch((error) => {
|
||||
//TODO: Fehlermeldungen
|
||||
// Error
|
||||
let msg;
|
||||
let title;
|
||||
|
||||
@ -4,59 +4,30 @@
|
||||
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 v-if="!cameraActive" class="q-ma-md">
|
||||
<p class="text-h4">{{ cacheName }}</p>
|
||||
<p>{{ instruction }}</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: "CacheStart",
|
||||
components: {qrscanner},
|
||||
data() {
|
||||
return { //TODO Lageplan einbinden
|
||||
result: null,
|
||||
cameraActive: false,
|
||||
cacheID: "",
|
||||
cacheName: "",
|
||||
//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() {
|
||||
@ -74,123 +45,17 @@
|
||||
})
|
||||
},
|
||||
|
||||
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}`})
|
||||
updateResult(event) {
|
||||
console.log("updateResult()");
|
||||
console.log(event);
|
||||
this.result = event;
|
||||
},
|
||||
|
||||
setParams() {
|
||||
console.log("setParams: ");
|
||||
let params = {};
|
||||
params.cacheID = this.result.split('/')[0];
|
||||
params.stationID = this.result.split('/')[1];
|
||||
params.durchgefuehrterCacheID = this.cacheID;
|
||||
console.log("CacheID: " + params.cacheID + " und StationID: " + params.stationID);
|
||||
console.log(params.durchgefuehrterCacheID);
|
||||
if (localStorage.getItem('userToken')) {
|
||||
params.token = JSON.parse(localStorage.getItem('userToken')).token;
|
||||
}
|
||||
return params;
|
||||
updateCamera(event) {
|
||||
console.log("updateCamera()");
|
||||
this.cameraActive = event;
|
||||
},
|
||||
|
||||
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>
|
||||
|
||||
@ -29,7 +29,6 @@
|
||||
>
|
||||
<q-expansion-item
|
||||
class=""
|
||||
expand-icon-toggle
|
||||
expand-separator
|
||||
icon="location_on"
|
||||
:label="startedCache.cache.name"
|
||||
@ -62,7 +61,6 @@
|
||||
<q-card class="q-mb-md" v-for="finishedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 1)" :key="finishedCache.id">
|
||||
<q-expansion-item
|
||||
class=""
|
||||
expand-icon-toggle
|
||||
expand-separator
|
||||
icon="location_on"
|
||||
:label="finishedCache.cache.name"
|
||||
|
||||
@ -45,10 +45,12 @@
|
||||
<q-item class="q-pr-sm reverse q-gutter-x-sm">
|
||||
<q-btn @click="startCache(cache.id)" unelevated color="positive" stack icon="arrow_forward"
|
||||
label="Starten" size="sm"/>
|
||||
<q-btn disable v-if="hasAdminState" @click="editCache(cache.id)" unelevated color="amber" stack
|
||||
icon="edit" label="Bearbeiten" size="sm"/>
|
||||
<q-btn v-if="hasAdminState" @click="deleteCache(cache.id)" unelevated color="negative" stack
|
||||
icon="delete" label="Löschen" size="sm"/>
|
||||
<q-btn disable v-if="hasAdminState" @click="editCache(cache.id)" unelevated color="primary" stack
|
||||
icon="edit" label="Bearbeiten" size="sm"/>
|
||||
<q-btn v-if="hasAdminState" @click="generateQrCodes(cache.id)" unelevated color="primary" stack
|
||||
icon="image" label="QR-Codes" size="sm"/>
|
||||
</q-item>
|
||||
</q-expansion-item>
|
||||
</q-card>
|
||||
@ -174,16 +176,13 @@
|
||||
},
|
||||
startCache(cacheID) {
|
||||
console.log("startCache()");
|
||||
// const userToken = JSON.parse(localStorage.getItem('userToken')).token;
|
||||
// let params = {cacheID: cacheID};
|
||||
// if (userToken != null) {
|
||||
// params.token = userToken;
|
||||
// }
|
||||
// console.log(params);
|
||||
this.$store.state.currentCache.cache = this.caches.find(cache => cache.id === Number(cacheID));
|
||||
console.log(this.$store.state.currentCache.cache);
|
||||
this.$store.state.currentCache.currentCacheID = Number(cacheID);
|
||||
this.$router.push({path: `/CacheStart/${cacheID}`})
|
||||
},
|
||||
generateQrCodes(cacheID) {
|
||||
this.$router.push({path: `/generator/${cacheID}`})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,14 +9,7 @@
|
||||
<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>{{ station.description }}</p>
|
||||
<!--<q-input-->
|
||||
<!--v-model="description"-->
|
||||
<!--filled-->
|
||||
<!--type="textarea"-->
|
||||
<!--/>-->
|
||||
<!--<p class="text-h5 q-mt-md">Location</p>-->
|
||||
<div class="column q-gutter-y-md">
|
||||
</div>
|
||||
</div>
|
||||
@ -104,9 +97,6 @@
|
||||
console.log("updateCamera()");
|
||||
this.cameraActive = event;
|
||||
},
|
||||
|
||||
setParams() {
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
59
frontend/src/pages/qr-generator.vue
Normal file
59
frontend/src/pages/qr-generator.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div class="q-ma-md">
|
||||
<p class="text-h4">QR-Generator</p>
|
||||
<p class="text-h5">Cache: {{ cacheName }}</p>
|
||||
<div class="row q-col-gutter-md">
|
||||
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 items-start" v-for="(station, index) in stationen" :key="index">
|
||||
<p class="text-h6 q-my-sm">Station {{ index + 1 }}</p>
|
||||
<q-card class="">
|
||||
<img class="full-width q-pa-md bg-white" :src="imgBaseURL + cacheId +'/'+ station.id" alt="">
|
||||
</q-card>
|
||||
<p class="q-my-sm">{{ cacheId }}/{{ station.id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<q-btn to="/overview" unelevated color="primary" stack
|
||||
label="Schließen" class="full-width"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
// name: 'PageName',
|
||||
data() {
|
||||
return {
|
||||
cacheName: "",
|
||||
cacheId: 0,
|
||||
stationen: [],
|
||||
imgBaseURL: "https://api.qrserver.com/v1/create-qr-code/?size=500x500&data="
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.fetchData();
|
||||
},
|
||||
|
||||
methods: {
|
||||
fetchData() {
|
||||
this.$axios.get('/api/allCaches')
|
||||
.then((response) => {
|
||||
console.log("/api/allCaches");
|
||||
console.log(response.data);
|
||||
const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
|
||||
this.cacheName = cache.name;
|
||||
this.cacheId = cache.id;
|
||||
this.stationen = cache.stationen;
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
beforeRouteUpdate(to, from, next) {
|
||||
this.fetchData();
|
||||
next()
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -140,6 +140,16 @@ const routes = [
|
||||
onlyAdmin: false,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/generator/:cache/",
|
||||
component: () => import("layouts/MyLayout.vue"),
|
||||
children: [{ path: "", component: () => import("pages/qr-generator.vue") }],
|
||||
meta: {
|
||||
public: false, // Allow access to even if not logged in
|
||||
onlyWhenLoggedOut: false,
|
||||
onlyAdmin: true,
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/profile/",
|
||||
component: () => import("layouts/MyLayout.vue"),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user