Added pages for starting and ending a cache

frontend/src/pages/CacheEnd.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <div class="q-ma-md">
+      <p class="text-h4">{{ data.cacheName }}</p>
+      <p class="text-h5">{{ end1 + data.cachePoints + end2 }}</p>
+
+      <div class="column q-gutter-y-md">
+        <q-btn unelevated color="primary" label="Zur Rangliste" to="/ranking/"/> // nur wenn man eingeloggt ist
+        <q-btn unelevated color="primary" label="Zur Belohnung" @click="reward = true"> // nur wenn man eingeloggt ist
+          <q-dialog v-model="reward">
+            <q-card>
+              <q-card-section>
+                <div class="text-h6">Jetzt ist eine gute Zeit, etwas Neues zu beginnen.</div>
+              </q-card-section>
+            </card>
+          </q-dialog>
+        <q-btn unelevated color="primary" label="Zur Startseite" to="/"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    reward: false
+    data() {
+      return {
+        end1: "Gut gemacht, Du hast alle Stationen dieses Cache gefunden. Dir wurden "
+        end2: "Punkte gutgeschrieben."
+      }
+    },
+    methods: {
+      fetchData() {
+        this.$axios.get('/api/allCaches')
+          .then((response) => {
+            console.log("/api/allCaches");
+            console.log(JSON.stringify(this.data));
+            console.log(this.data);
+            console.log(response.data);
+            const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
+            this.data.cacheName = cache.name;
+            this.data.cachePoints = cache.rankingPoints;
+          }
+    }
+</script>

frontend/src/pages/CacheStart.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <q-img transition="fade"
+         class="q-mb-md "
+         :ratio="16/9"
+         src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
+    ></q-img>
+    <div class="q-ma-md">
+      <p class="text-h4">{{ data.cacheName }}</p>
+      <p class="text-h5">{{ instruction }}</p>
+
+      <div class="column q-gutter-y-md">
+        <q-btn unelevated color="primary" label="QR-Code scannen (absenden)"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        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."
+      }
+    },
+    methods: {
+      fetchData() {
+        this.$axios.get('/api/allCaches')
+          .then((response) => {
+            console.log("/api/allCaches");
+            console.log(JSON.stringify(this.data));
+            console.log(this.data);
+            console.log(response.data);
+            const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
+            this.data.cacheName = cache.name;
+          }
+        }
+</script>

frontend/src/router/routes.js

@@ -50,6 +50,11 @@ const routes = [
     component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/Login.vue") }]
   },
+  {
+    path: "/CacheStart/",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/CacheStart.vue") }]
+  },
   {
    path: "/profile/",
       component: () => import("layouts/MyLayout.vue"),