From b6a9cdcb07af7dabb23f4aa7fec9946326706fec Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Wed, 8 May 2019 00:39:59 +0200
Subject: [PATCH 1/2] added qr-generator and fixed some bugs

---
 frontend/src/components/qrscanner.vue |   2 +-
 frontend/src/layouts/MyLayout.vue     |   2 +-
 frontend/src/pages/Cache.vue          |   1 +
 frontend/src/pages/CacheStart.vue     | 165 +++-----------------------
 frontend/src/pages/MyCaches.vue       |   2 -
 frontend/src/pages/Overview.vue       |  17 ++-
 frontend/src/pages/StationView.vue    |  10 --
 frontend/src/pages/qr-generator.vue   |  59 +++++++++
 frontend/src/router/routes.js         |  10 ++
 9 files changed, 95 insertions(+), 173 deletions(-)
 create mode 100644 frontend/src/pages/qr-generator.vue

diff --git a/frontend/src/components/qrscanner.vue b/frontend/src/components/qrscanner.vue
index f17a6d0..995cfa2 100644
--- 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>
diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index f879799..be9facf 100644
--- a/frontend/src/layouts/MyLayout.vue
+++ b/frontend/src/layouts/MyLayout.vue
@@ -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>
diff --git a/frontend/src/pages/Cache.vue b/frontend/src/pages/Cache.vue
index 183e401..42c9e40 100644
--- 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;
diff --git a/frontend/src/pages/CacheStart.vue b/frontend/src/pages/CacheStart.vue
index 9c525c3..635b544 100644
--- 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>
diff --git a/frontend/src/pages/MyCaches.vue b/frontend/src/pages/MyCaches.vue
index e817543..ff7022f 100644
--- 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"
diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
index 22575e3..a08f598 100644
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@@ -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"/>
+                  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}`})
       }
     }
   }
diff --git a/frontend/src/pages/StationView.vue b/frontend/src/pages/StationView.vue
index 37b59ac..990e5b1 100644
--- 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>
diff --git a/frontend/src/pages/qr-generator.vue b/frontend/src/pages/qr-generator.vue
new file mode 100644
index 0000000..5138ed4
--- /dev/null
+++ 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>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 5036bab..8586b23 100644
--- 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"),

From b5ba5230ab6c0f9a27d87e9e07ec97a1777c59de Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Wed, 8 May 2019 12:17:47 +0200
Subject: [PATCH 2/2] improvements: profile, qr-scanner, layout

---
 frontend/src/components/qrscanner.vue | 34 +++++++++++++++-------
 frontend/src/layouts/MyLayout.vue     |  2 +-
 frontend/src/pages/CacheEnd.vue       | 28 +++++-------------
 frontend/src/pages/Overview.vue       |  8 +++---
 frontend/src/pages/Profile.vue        | 41 +++++++++++----------------
 frontend/src/pages/qr-scanner.vue     | 13 +++++++--
 6 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/frontend/src/components/qrscanner.vue b/frontend/src/components/qrscanner.vue
index 995cfa2..a2abe74 100644
--- a/frontend/src/components/qrscanner.vue
+++ b/frontend/src/components/qrscanner.vue
@@ -65,11 +65,11 @@
         this.validating = true;
         this.isValid = await this.validate();
 
-        window.setTimeout(() => {
-          this.validating = false;
-          this.unPauseCamera();
-        }, 2000)
-        //this.unPauseCamera();
+        this.validating = false;
+        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);
-                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.";
+                if (this.$route.path === "/qr-scanner") {
+                  console.log(this.$route);
+                  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) {
                 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)
           }
         })
       },
diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index be9facf..23d2b46 100644
--- 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>
diff --git a/frontend/src/pages/CacheEnd.vue b/frontend/src/pages/CacheEnd.vue
index 7ba09e1..93e4f8c 100644
--- 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();
diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
index a08f598..3d127fd 100644
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@@ -44,13 +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"/>
+                         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="sm"/>
+                         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="sm"/>
+                         icon="image" label="QR-Codes" size="xs"/>
                 </q-item>
               </q-expansion-item>
             </q-card>
diff --git a/frontend/src/pages/Profile.vue b/frontend/src/pages/Profile.vue
index 75f3199..3b3cb3f 100644
--- 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) {
diff --git a/frontend/src/pages/qr-scanner.vue b/frontend/src/pages/qr-scanner.vue
index ef5efa2..e5859f3 100644
--- 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>