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

improvements: profile, qr-scanner, layout

Browse Source
This commit is contained in:
Timo Volkmann 2019-05-08 12:17:47 +02:00
parent b6a9cdcb07
commit b5ba5230ab
6 changed files with 63 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,11 +65,11 @@
this.validating = true; this.validating = true;
this.isValid = await this.validate(); this.isValid = await this.validate();
window.setTimeout(() => { this.validating = false;
this.validating = false; this.unPauseCamera();
this.unPauseCamera(); // window.setTimeout(() => {
}, 2000) // }, 2000)
//this.unPauseCamera(); // //this.unPauseCamera();
}, },
validate() { validate() {
@ -77,9 +77,11 @@
let params = this.setParams(); let params = this.setParams();
console.log(params); console.log(params);
if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID || !params.token) { if (!params.cacheID || !params.stationID || !params.durchgefuehrterCacheID || !params.token) {
console.log("Parameter konnten nicht erkannt werden."); console.log("Mindestens 1 Parameter konnte nicht erkannt werden!");
resolve(false);
} else if (isNaN(params.cacheID) || isNaN(params.stationID) || isNaN(params.durchgefuehrterCacheID)) {
console.log("Mindestens 1 Parameter ist fehlerhaft!");
resolve(false); resolve(false);
console.log("Parameter konnten nicht erkannt werden.");
} else { } else {
this.$axios.put('/api/checkStation', null, { params }) this.$axios.put('/api/checkStation', null, { params })
.then((response) => { .then((response) => {
@ -98,12 +100,20 @@
let message = ""; let message = "";
if (error.response) { if (error.response) {
console.log(error.response); console.log(error.response);
header = "Falsche Station!"; if (this.$route.path === "/qr-scanner") {
message = "Diese Station wurde schon gescannt, ist noch nicht an der Reihe oder gehört nicht zum Cache. "; console.log(this.$route);
message += "Bitte das Rätsel nochmal lesen und die richtige Station scannen."; header = "Falsche Station!";
message = "Bitte setze einen bereits angefangenen Cache " +
"an der richtigen Station fort oder beginne einen neuen Cache indem du eine der " +
"Startstationen einscannst. Du findest die Startstationen über die Karte.";
} else {
header = "Falsche Station!";
message = "Du hast diese Station schon gescannt oder sie ist nicht die korrekte Folgestation.";
message += "Prüfe ob du das Rätsel korrekt gelöst hast und finde die richtige Station.";
}
} else if (error.request) { } else if (error.request) {
console.log(error.request); console.log(error.request);
header = "Anfrage fehlgeschlagen!"; header = "Server nicht erreichbar!";
message = "Die Verbindung zum Server ist gestört. Versuchen Sie es später noch einmal."; message = "Die Verbindung zum Server ist gestört. Versuchen Sie es später noch einmal.";
} else { } else {
console.log(error); console.log(error);
@ -114,6 +124,8 @@
this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, }); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
resolve(false); resolve(false);
}); });
window.setTimeout(() => {
}, 2000)
} }
}) })
}, },

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

@ -52,7 +52,7 @@
to="/qr-scanner" to="/qr-scanner"
> >
<q-item-section avatar> <q-item-section avatar>
<q-icon name="camera"/> <q-icon name="filter_center_focus"/>
</q-item-section> </q-item-section>
<q-item-section> <q-item-section>
<q-item-label>QR-Code Scanner</q-item-label> <q-item-label>QR-Code Scanner</q-item-label>

28
frontend/src/pages/CacheEnd.vue
View File

@ -2,23 +2,15 @@
<div> <div>
<div class="q-ma-md"> <div class="q-ma-md">
<p class="text-h4">{{ cacheName }}</p> <p class="text-h4">{{ cacheName }}</p>
<p class="text-h5">{{ end1 + rankingPoints + end2 }}</p> <p class="text-h5">Herzlichen Glückwunsch!</p>
<p class="">Du hast alle Stationen gefunden und diesen Cache damit erfolgreich abgeschlossen!</p>
<p class="">Dir wurden <b>{{ rankingPoints }} Punkte</b> gutgeschrieben.</p>
<p class="text-h5">Deine Belohnung:</p>
<p v-html="cache.reward.rewardDescription"></p>
<div class="column q-gutter-y-md"> <div class="column q-gutter-y-md">
<q-btn unelevated v-if="isLoggedIn" color="primary" label="Zur Rangliste" to="/ranking/"/> <q-btn unelevated color="primary" label="Rangliste" to="/ranking/"/>
<q-btn unelevated v-if="isLoggedIn" color="primary" label="Zur Belohnung" @click="reward = true" /> <q-btn unelevated color="primary" label="Startseite" to="/"/>
<q-dialog v-model="reward">
<q-card>
<q-card-section>
<div class="text-h6">Deine Belohnung: </div>
</q-card-section>
<q-card-section>
<div>{{ cache.reward.rewardDescription }}</div>
</q-card-section>
</q-card>
</q-dialog>
<q-btn unelevated color="primary" label="Zur Startseite" to="/"/>
</div> </div>
</div> </div>
</div> </div>
@ -28,21 +20,15 @@
export default { export default {
data() { data() {
return { return {
reward: false,
cacheID: "", cacheID: "",
cacheName: "", cacheName: "",
cache: { cache: {
reward: "", reward: "",
}, },
rankingPoints: "", rankingPoints: "",
end1: "Gut gemacht, Du hast alle Stationen dieses Cache gefunden. Dir wurden ",
end2: " Punkte gutgeschrieben." //TODO Punkte wirklich gutschreiben, ggf. Cache auf erledigt setzen
} }
}, },
computed: { computed: {
isLoggedIn() {
return localStorage.getItem('userToken'); //TODO Methode umschreiben --> funktioniert das?
}
}, },
created() { created() {
this.fetchData(); this.fetchData();

8
frontend/src/pages/Overview.vue
View File

@ -44,13 +44,13 @@
</q-item> </q-item>
<q-item class="q-pr-sm reverse q-gutter-x-sm"> <q-item class="q-pr-sm reverse q-gutter-x-sm">
<q-btn @click="startCache(cache.id)" unelevated color="positive" stack icon="arrow_forward" <q-btn @click="startCache(cache.id)" unelevated color="positive" stack icon="arrow_forward"
label="Starten" size="sm"/> label="Starten" size="xs"/>
<q-btn v-if="hasAdminState" @click="deleteCache(cache.id)" unelevated color="negative" stack <q-btn v-if="hasAdminState" @click="deleteCache(cache.id)" unelevated color="negative" stack
icon="delete" label="Löschen" size="sm"/> icon="delete" label="Löschen" size="xs"/>
<q-btn disable v-if="hasAdminState" @click="editCache(cache.id)" unelevated color="primary" stack <q-btn disable v-if="hasAdminState" @click="editCache(cache.id)" unelevated color="primary" stack
icon="edit" label="Bearbeiten" size="sm"/> icon="edit" label="Bearbeiten" size="xs"/>
<q-btn v-if="hasAdminState" @click="generateQrCodes(cache.id)" unelevated color="primary" stack <q-btn v-if="hasAdminState" @click="generateQrCodes(cache.id)" unelevated color="primary" stack
icon="image" label="QR-Codes" size="sm"/> icon="image" label="QR-Codes" size="xs"/>
</q-item> </q-item>
</q-expansion-item> </q-expansion-item>
</q-card> </q-card>

41
frontend/src/pages/Profile.vue
View File

@ -100,17 +100,17 @@
</template> </template>
<style> <style>
.my-custom th { /*.my-custom th {*/
color: #027BE3 !important; /* color: #027BE3 !important;*/
} /*}*/
.my-custom tr { /*.my-custom tr {*/
color: #027BE3 !important; /* color: #027BE3 !important;*/
} /*}*/
.my-custom td { /*.my-custom td {*/
color: #027BE3 !important; /* color: #027BE3 !important;*/
} /*}*/
</style> </style>
<script> <script>
//import {dom} from 'quasar' //import {dom} from 'quasar'
@ -123,7 +123,6 @@
inviteMail: "", inviteMail: "",
currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache", currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
teamStatus: "", teamStatus: "",
userName: null,
email: null, email: null,
userRanking: null, userRanking: null,
teamName: null, teamName: null,
@ -146,23 +145,19 @@
], ],
data: [ data: [
{ {
name: 'Mein Nutzername', name: 'E-Mail',
userData: this.userName,
},
{
name: 'Meine Email',
userData: this.email, userData: this.email,
}, },
{ {
name: 'Meine Ranglistenposition', name: 'Rang',
userData: this.userRanking, userData: this.userRanking,
}, },
{ {
name: 'Mein Team', name: 'Team',
userData: this.teamName, userData: this.teamName,
}, },
{ {
name: 'Teamranglistenposition', name: 'Team-Rang',
userData: this.teamRanking, userData: this.teamRanking,
}, },
], ],
@ -229,17 +224,15 @@
created: function () { created: 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');
this.userName = JSON.parse(localStorage.getItem('userToken')).name;
this.data[0].userData = this.userName;
this.email = JSON.parse(localStorage.getItem('userMail')); this.email = JSON.parse(localStorage.getItem('userMail'));
this.data[1].userData = this.email; this.data[0].userData = this.email;
this.userRanking = "1234"; this.userRanking = "1234";
this.data[2].userData = this.userRanking; this.data[1].userData = this.userRanking;
this.teamName = "BuGa19Community"; this.teamName = "BuGa19Community";
this.data[3].userData = this.teamName; this.data[2].userData = this.teamName;
this.dropDownSelectedItem = this.teamName; this.dropDownSelectedItem = this.teamName;
this.teamRanking = "2019"; this.teamRanking = "2019";
this.data[4].userData = this.teamRanking; this.data[3].userData = this.teamRanking;
}, },
methods: { methods: {
validateEmail(email) { validateEmail(email) {

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

@ -1,6 +1,12 @@
<template> <template>
<div> <div>
<qrscanner /> <div v-if="!cameraActive" class="q-ma-md">
<p class="text-h4">QR-Scanner</p>
<p class="">Mit diesem Scanner kannst du die nächste Station deines Caches einscannen
oder einen neuen Cache beginnen indem du eine der Startstationen einscannst.
Du findest die Startstationen über die Karte.</p>
</div>
<qrscanner @camera="cameraState($event)" />
</div> </div>
</template> </template>
@ -11,11 +17,14 @@
components: {qrscanner}, components: {qrscanner},
data() { data() {
return { return {
cameraActive: false,
} }
}, },
methods: { methods: {
cameraState(event) {
this.cameraActive = event;
}
}, },
} }
</script> </script>