Merge branch 'frontend/timo' into develop

2019-05-08 12:20:48 +02:00 · 2019-05-08 12:20:48 +02:00 · 62098b11b5
commit 62098b11b5
parent 04f5a4d20b b5ba5230ab
12 changed files with 155 additions and 233 deletions
--- a/frontend/src/components/qrscanner.vue
+++ b/frontend/src/components/qrscanner.vue
@ -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>
@ -65,11 +65,11 @@
        this.validating = true;
        this.isValid = await this.validate();

-        window.setTimeout(() => {
        this.validating = false;
        this.unPauseCamera();
-        }, 2000)
-        //this.unPauseCamera();
+        // window.setTimeout(() => {
+        // }, 2000)
+        // //this.unPauseCamera();
      },

      validate() {
@ -77,9 +77,11 @@
          let params = this.setParams();
          console.log(params);
          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);
-            console.log("Parameter konnten nicht erkannt werden.");
          } else {
            this.$axios.put('/api/checkStation', null, { params })
              .then((response) => {
@ -98,12 +100,20 @@
              let message = "";
              if (error.response) {
                console.log(error.response);
+                if (this.$route.path === "/qr-scanner") {
+                  console.log(this.$route);
                  header = "Falsche Station!";
-                message = "Diese Station wurde schon gescannt, ist noch nicht an der Reihe oder gehört nicht zum Cache. ";
-                message += "Bitte das Rätsel nochmal lesen und die richtige Station scannen.";
+                  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) {
                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.";
              } else {
                console.log(error);
@ -114,6 +124,8 @@
              this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
              resolve(false);
            });
+            window.setTimeout(() => {
+            }, 2000)
          }
        })
      },
--- a/frontend/src/layouts/MyLayout.vue
+++ b/frontend/src/layouts/MyLayout.vue
@ -52,7 +52,7 @@
          to="/qr-scanner"
        >
          <q-item-section avatar>
-            <q-icon name="camera"/>
+            <q-icon name="filter_center_focus"/>
          </q-item-section>
          <q-item-section>
            <q-item-label>QR-Code Scanner</q-item-label>
@ -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>
--- a/frontend/src/pages/Cache.vue
+++ b/frontend/src/pages/Cache.vue
@ -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;
--- a/frontend/src/pages/CacheEnd.vue
+++ b/frontend/src/pages/CacheEnd.vue
@ -2,23 +2,15 @@
  <div>
    <div class="q-ma-md">
      <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">
-        <q-btn unelevated v-if="isLoggedIn" color="primary" label="Zur Rangliste" to="/ranking/"/>
-        <q-btn unelevated v-if="isLoggedIn" color="primary" label="Zur Belohnung" @click="reward = true" />
-          <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="/"/>
+        <q-btn unelevated color="primary" label="Rangliste" to="/ranking/"/>
+        <q-btn unelevated color="primary" label="Startseite" to="/"/>
      </div>
    </div>
  </div>
@ -28,21 +20,15 @@
  export default {
    data() {
      return {
-        reward: false,
        cacheID: "",
        cacheName: "",
        cache: {
          reward: "",
        },
        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: {
-      isLoggedIn() {
-        return localStorage.getItem('userToken'); //TODO Methode umschreiben --> funktioniert das?
-      }
    },
    created() {
      this.fetchData();
--- a/frontend/src/pages/CacheStart.vue
+++ b/frontend/src/pages/CacheStart.vue
@ -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>
--- a/frontend/src/pages/MyCaches.vue
+++ b/frontend/src/pages/MyCaches.vue
@ -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"
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@ -44,11 +44,13 @@
                </q-item>
                <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"/>
+                         label="Starten" size="xs"/>
                  <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
+                         icon="edit" label="Bearbeiten" size="xs"/>
+                  <q-btn v-if="hasAdminState" @click="generateQrCodes(cache.id)" unelevated color="primary" stack
+                         icon="image" label="QR-Codes" size="xs"/>
                </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}`})
      }
    }
  }
--- a/frontend/src/pages/Profile.vue
+++ b/frontend/src/pages/Profile.vue
@ -100,17 +100,17 @@
 </template>

 <style>
-  .my-custom th {
-    color: #027BE3 !important;
-  }
+  /*.my-custom th {*/
+  /*  color: #027BE3 !important;*/
+  /*}*/

-  .my-custom tr {
-    color: #027BE3 !important;
-  }
+  /*.my-custom tr {*/
+  /*  color: #027BE3 !important;*/
+  /*}*/

-  .my-custom td {
-    color: #027BE3 !important;
-  }
+  /*.my-custom td {*/
+  /*  color: #027BE3 !important;*/
+  /*}*/
 </style>
 <script>
  //import {dom} from 'quasar'
@ -123,7 +123,6 @@
        inviteMail: "",
        currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
        teamStatus: "",
-        userName: null,
        email: null,
        userRanking: null,
        teamName: null,
@ -146,23 +145,19 @@
        ],
        data: [
          {
-            name: 'Mein Nutzername',
-            userData: this.userName,
-          },
-          {
-            name: 'Meine Email',
+            name: 'E-Mail',
            userData: this.email,
          },
          {
-            name: 'Meine Ranglistenposition',
+            name: 'Rang',
            userData: this.userRanking,
          },
          {
-            name: 'Mein Team',
+            name: 'Team',
            userData: this.teamName,
          },
          {
-            name: 'Teamranglistenposition',
+            name: 'Team-Rang',
            userData: this.teamRanking,
          },
        ],
@ -229,17 +224,15 @@
    created: function () {
      this.$store.commit('auth/SET_AUTHENTICATED');
      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.data[1].userData = this.email;
+      this.data[0].userData = this.email;
      this.userRanking = "1234";
-      this.data[2].userData = this.userRanking;
+      this.data[1].userData = this.userRanking;
      this.teamName = "BuGa19Community";
-      this.data[3].userData = this.teamName;
+      this.data[2].userData = this.teamName;
      this.dropDownSelectedItem = this.teamName;
      this.teamRanking = "2019";
-      this.data[4].userData = this.teamRanking;
+      this.data[3].userData = this.teamRanking;
    },
    methods: {
      validateEmail(email) {
--- a/frontend/src/pages/StationView.vue
+++ b/frontend/src/pages/StationView.vue
@ -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>
--- a/frontend/src/pages/qr-generator.vue
+++ b/frontend/src/pages/qr-generator.vue
@ -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>
--- a/frontend/src/pages/qr-scanner.vue
+++ b/frontend/src/pages/qr-scanner.vue
@ -1,6 +1,12 @@
 <template>
  <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>
 </template>

@ -11,11 +17,14 @@
    components: {qrscanner},
    data() {
      return {
+        cameraActive: false,
      }
    },

    methods: {
-
+      cameraState(event) {
+        this.cameraActive = event;
+      }
    },
  }
 </script>
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@ -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"),