From e412d4a797d342486ca6bd200d293458b6b7e56e Mon Sep 17 00:00:00 2001 From: Timo Volkmann Date: Wed, 24 Apr 2019 09:31:12 +0200 Subject: [PATCH 1/3] updated frontend caching logic --- frontend/src/boot/axios.js | 3 +- frontend/src/pages/Cache.vue | 203 +++++++++++------- frontend/src/pages/CacheStart.vue | 2 +- frontend/src/pages/Login.vue | 31 ++- frontend/src/pages/StationEdit.vue | 46 ++-- frontend/src/router/routes.js | 2 +- frontend/src/store/cacheCollector/getters.js | 4 + .../src/store/cacheCollector/mutations.js | 9 + frontend/src/store/cacheCollector/state.js | 6 + 9 files changed, 186 insertions(+), 120 deletions(-) diff --git a/frontend/src/boot/axios.js b/frontend/src/boot/axios.js index 8523d48..ea842da 100644 --- a/frontend/src/boot/axios.js +++ b/frontend/src/boot/axios.js @@ -1,7 +1,8 @@ import axios from "axios"; const axiosInstance = axios.create({ - baseURL: process.env.API + baseURL: process.env.API, + timeout: 3000 }); console.log("process.env.DEV: "+process.env.DEV); console.log("process.env.API: "+process.env.API); diff --git a/frontend/src/pages/Cache.vue b/frontend/src/pages/Cache.vue index e3126cf..5409e0a 100644 --- a/frontend/src/pages/Cache.vue +++ b/frontend/src/pages/Cache.vue @@ -1,75 +1,108 @@ @@ -81,7 +114,7 @@ name: "Cache", data() { return { - // stationComponent: null, + //endStation: {}, scrolldown: false, isNewCache: this.$route.params.id === undefined, tempCache: {}, @@ -122,6 +155,19 @@ // swapComponent: function (component) { // this.stationComponent = component; // }, + editEndStation() { + console.log("editEndStation()"); + const station = this.cache.endStation; + console.log(station); + if (station.hasOwnProperty('id')) { + //this.$router.push({ path: '/station/'+station.id}); + } else { + // TODO Stationen bearbeitbar machen bevor sie abgeschickt werden. Am besten Station Objekt als Übergabe Parameter bei Router + this.$store.commit('cacheCollector/SET_TEMPSTATION', station); + this.$router.push({path: `/tempstation/${index}`}); // add parameter + } + + }, cacheToStore() { // push tempCache to Store console.log("set Cache"); @@ -129,20 +175,20 @@ // this.SET_CACHE(JSON.parse(JSON.stringify(this.tempCache))); }, addStation() { - this.$router.push({ path: '/station' }); + this.$router.push({path: '/station'}); //this.swapComponent(station); // create Station and add it to array tempCache.stationen }, editStation(index) { - console.log("editStation("+index+")"); + console.log("editStation(" + index + ")"); const station = this.cache.stationen[index]; - console.log(station) - if (station.hasOwnProperty('id') ) { + console.log(station); + if (station.hasOwnProperty('id')) { //this.$router.push({ path: '/station/'+station.id}); } else { // TODO Stationen bearbeitbar machen bevor sie abgeschickt werden. Am besten Station Objekt als Übergabe Parameter bei Router this.$store.commit('cacheCollector/SET_TEMPSTATION', station); - this.$router.push({ path: `/station-l/${index}` }); // add parameter + this.$router.push({path: `/tempstation/${index}`}); // add parameter } }, deleteStation(index) { @@ -153,12 +199,14 @@ // commit to store, send to api, if success -> reset store if (this.isNewCache) { console.log(this.cache); - console.log(JSON.stringify(this.cache)); + let cache = this.cache; + cache.stationen.push(this.endStation); + this.$axios.post('/api/createCache', this.cache) .then((response) => { console.log("POST api/createCache: " + response.statusText); this.$store.commit('cacheCollector/RESET_NEW_CACHE'); - this.$router.push({ path: '/overview' }); + this.$router.push({path: '/overview'}); }).catch((error) => { // Error let msg; @@ -179,16 +227,17 @@ console.log('Error', error.message); } console.log(error.config); - this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: msg, title: title, }); + this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,}); }) - } else { + } else { // TODO update existing Cache } - }, + }, }, computed: { ...mapGetters({ - cache: 'cacheCollector/GET_CACHE' + cache: 'cacheCollector/GET_CACHE', + endStation: 'cacheCollector/GET_ENDSTATION' }), // computedCache: { // set(value) { diff --git a/frontend/src/pages/CacheStart.vue b/frontend/src/pages/CacheStart.vue index 2ee2846..ec4394b 100644 --- a/frontend/src/pages/CacheStart.vue +++ b/frontend/src/pages/CacheStart.vue @@ -23,7 +23,7 @@ return { //TODO Lageplan einbinden cacheID: "", cacheName: "", - code: "8/6", + 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." } }, diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue index 649de1c..881b3d7 100644 --- a/frontend/src/pages/Login.vue +++ b/frontend/src/pages/Login.vue @@ -25,12 +25,18 @@ + > + + - - - -
Fehler
- - - - Es konnten keine übereinstimmenden Zugangsdaten in der Datenbank gefunden werden. - - - - - - - @@ -68,13 +59,13 @@ export default { data() { return { + loading: false, user: { email: "volkmann@geocaching.de", password: "0123456789", //token: "", // evalAuthentication: false }, - credentialsDialog: false, }; }, // beforeMount: { @@ -97,7 +88,7 @@ }, methods: { login: function () { - + this.loading = true; const data = { email: this.user.email, password: this.user.password @@ -135,7 +126,9 @@ } console.log(error.config); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, }); - }) + }).finally(() => { + this.loading = false; + }) }, evalAuthentication: function () { this.$store.commit('auth/SET_AUTHENTICATED'); diff --git a/frontend/src/pages/StationEdit.vue b/frontend/src/pages/StationEdit.vue index f51add4..78b29a4 100644 --- a/frontend/src/pages/StationEdit.vue +++ b/frontend/src/pages/StationEdit.vue @@ -3,14 +3,16 @@

Neue Station

+ ['bold', 'italic', 'strike', 'underline'], + ['undo', 'redo'], + ['hr', 'link'], + ['fullscreen'], + ]" + v-model="station.description" min-height="10rem"/> - - - + + +

Location

- +

Lösung

- - + +
@@ -37,6 +40,7 @@ diff --git a/frontend/src/pages/StationView.vue b/frontend/src/pages/StationView.vue index 767193d..75fb24a 100644 --- a/frontend/src/pages/StationView.vue +++ b/frontend/src/pages/StationView.vue @@ -17,10 +17,29 @@
- - - - +
+

Um den QR-Code scannen zu können, müssen Sie den Zugriff auf Ihre Kamera erlauben.

+ + +
+
+ + +
+
+
+ +
+ + +
+
@@ -45,13 +64,25 @@ code: 213812, solution: "Schneeglöckchen" } - } + }, + + // 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: function () { console.log("StationView: ") - console.log("'id' from url: " + this.$route.params.id) - console.log("'cache' from url: " + this.$route.params.cache) + // console.log("'id' from url: " + this.$route.params.id) + // console.log("'cache' from url: " + this.$route.params.cache) this.fetchData(); }, beforeMount: function () { @@ -129,7 +160,104 @@ console.log(error.config); this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: msg, title: title, }); }) + }, + + setParams() { + console.log("setParams: "); + let params = {}; + params.cacheID = this.code.split('/')[0]; + params.stationID = this.code.split('/')[1]; + params.durchgefuehrterCacheID = this.cacheID; + 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)"); + resolve(true); + this.$router.push({path: `/station/${params.cacheID}/${params.stationID}`}); + }).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; + } } + } } From 479173de8405ae10685f308ef082677f1525c467 Mon Sep 17 00:00:00 2001 From: Timo Volkmann Date: Thu, 25 Apr 2019 10:54:06 +0200 Subject: [PATCH 3/3] changes for cache creation --- frontend/src/pages/Cache.vue | 5 +- frontend/src/pages/CacheStart.vue | 4 +- frontend/src/pages/StationEdit.vue | 4 +- frontend/src/pages/StationEndEdit.vue | 97 +++++++++++++++++++++++++++ frontend/src/router/routes.js | 10 +++ 5 files changed, 114 insertions(+), 6 deletions(-) create mode 100644 frontend/src/pages/StationEndEdit.vue diff --git a/frontend/src/pages/Cache.vue b/frontend/src/pages/Cache.vue index ef3f49a..db80dbb 100644 --- a/frontend/src/pages/Cache.vue +++ b/frontend/src/pages/Cache.vue @@ -147,14 +147,15 @@ methods: { editEndStation() { console.log("editEndStation()"); - const station = this.cache.endStation; + const station = this.endStation; console.log(station); if (station.hasOwnProperty('id')) { //this.$router.push({ path: '/station/'+station.id}); } else { // TODO Stationen bearbeitbar machen bevor sie abgeschickt werden. Am besten Station Objekt als Übergabe Parameter bei Router this.$store.commit('cacheCollector/SET_TEMPSTATION', station); - this.$router.push({path: `/tempstation/${index}`}); // add parameter + //this.$router.push({path: `/tempendstation/${index}`}); // add parameter + this.$router.push({path: `/tempendstation/`}); // add parameter } }, diff --git a/frontend/src/pages/CacheStart.vue b/frontend/src/pages/CacheStart.vue index 4619554..2cc51de 100644 --- a/frontend/src/pages/CacheStart.vue +++ b/frontend/src/pages/CacheStart.vue @@ -94,8 +94,8 @@ setParams() { console.log("setParams: "); let params = {}; - params.cacheID = this.code.split('/')[0]; - params.stationID = this.code.split('/')[1]; + params.cacheID = this.result.split('/')[0]; + params.stationID = this.result.split('/')[1]; params.durchgefuehrterCacheID = this.cacheID; console.log(params.cacheID + " und " + params.stationID); if (localStorage.getItem('userToken')) { diff --git a/frontend/src/pages/StationEdit.vue b/frontend/src/pages/StationEdit.vue index 78b29a4..3e1a6e8 100644 --- a/frontend/src/pages/StationEdit.vue +++ b/frontend/src/pages/StationEdit.vue @@ -27,8 +27,8 @@ -

Lösung

- + +
diff --git a/frontend/src/pages/StationEndEdit.vue b/frontend/src/pages/StationEndEdit.vue new file mode 100644 index 0000000..1f37fc5 --- /dev/null +++ b/frontend/src/pages/StationEndEdit.vue @@ -0,0 +1,97 @@ + + + + + diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js index d2e6391..1a1e7ff 100644 --- a/frontend/src/router/routes.js +++ b/frontend/src/router/routes.js @@ -30,11 +30,21 @@ const routes = [ component: () => import("layouts/MyLayout.vue"), children: [{ path: "", component: () => import("pages/StationEdit.vue") }] }, + { + path: "/endstation/", + component: () => import("layouts/MyLayout.vue"), + children: [{ path: "", component: () => import("pages/StationEndEdit.vue") }] + }, { path: "/tempstation/:pos", component: () => import("layouts/MyLayout.vue"), children: [{path: "", component: () => import("pages/StationEdit.vue")}] }, + { + path: "/tempendstation/", + component: () => import("layouts/MyLayout.vue"), + children: [{path: "", component: () => import("pages/StationEndEdit.vue")}] + }, { path: "/station/:cache/:id", component: () => import("layouts/MyLayout.vue"),