updated frontend caching logic

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);

frontend/src/pages/Cache.vue

@@ -6,27 +6,32 @@
       <div class="q-pa-md q-gutter-y-md">
         <p class="text-h5">{{ isNewCache ? "Neuen Cache erstellen" : "Cache bearbeiten"}}</p>
         <q-input class="col" dense stack-label filled v-model="tempCache.name" label="Name" @change="cacheToStore"/>
-          <q-input
-            v-model="tempCache.description"
-            dense
-            stack-label
-            filled
-            autogrow
-            type="textarea"
-            label="Beschreibung"
-            @change="cacheToStore"
-          />
         <q-input class="col" dense stack-label filled v-model="tempCache.rankingPoints" label="Punktewert"
                  @change="cacheToStore"/>
-          <q-input
+        <p class="text-h6">Beschreibung</p>
-            disable
+        <q-editor
+          :toolbar="[
+            ['bold', 'italic', 'strike', 'underline'],
+            ['undo', 'redo'],
+            ['hr', 'link'],
+            ['fullscreen'],
+          ]"
+          v-model="tempCache.description"
+          min-height="5rem"
+          max-height="50vh"
+          @change="cacheToStore"
+        />
+        <p class="text-h6">Belohnung</p>
+        <q-editor
+          :toolbar="[
+            ['bold', 'italic', 'strike', 'underline'],
+            ['undo', 'redo'],
+            ['hr', 'link'],
+            ['fullscreen'],
+          ]"
           v-model="tempCache.reward"
-            dense
+          min-height="5rem"
-            stack-label
+          max-height="50vh"
-            filled
-            autogrow
-            type="textarea"
-            label="Belohnung"
           @change="cacheToStore"
         />
         <p class="text-h6">Stationen</p>
@@ -63,6 +68,34 @@
         <div class="row reverse">
           <q-btn @click="addStation" unelevated color="primary" label="Station hinzufügen" icon-right="add"/>
         </div>
+        <p class="text-h6">Endstation</p>
+        <q-card flat bordered class="rounded-borders">
+          <q-item>
+            <q-item-section avatar>
+              <q-avatar color="primary" text-color="white">
+                {{ tempCache.stationen.length + 1 }}
+              </q-avatar>
+            </q-item-section>
+
+            <q-item-section top>
+              <q-item-label lines="1">
+                <span class="text-grey-8">ID: {{ endStation.id ? endStation.id : "keine" }}</span>
+              </q-item-label>
+              <q-item-label lines="1" class="q-mt-xs text-body2">
+                <span class="cursor-pointer">Endstation</span>
+              </q-item-label>
+              <q-item-label caption lines="1">
+                Koordinaten: {{ endStation.lattitude }}, {{ endStation.longitude }}
+              </q-item-label>
+            </q-item-section>
+
+            <q-item-section side>
+              <div class="text-grey-8 q-gutter-xs">
+                <q-btn @click="editEndStation" class="" color="" flat dense round icon="edit"/>
+              </div>
+            </q-item-section>
+          </q-item>
+        </q-card>
         <div class="row q-mt-xl">
           <q-btn @click="saveCache" class="full-width" color="primary" unelevated stack label="Cache speichern"
                  icon="save_alt"/>
@@ -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");
@@ -136,13 +182,13 @@
       editStation(index) {
         console.log("editStation(" + index + ")");
         const station = this.cache.stationen[index];
-        console.log(station)
+        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,7 +199,9 @@
         // 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);
@@ -188,7 +236,8 @@
     },
     computed: {
       ...mapGetters({
-        cache: 'cacheCollector/GET_CACHE'
+        cache: 'cacheCollector/GET_CACHE',
+        endStation: 'cacheCollector/GET_ENDSTATION'
       }),
       // computedCache: {
       //   set(value) {

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."
       }
     },

frontend/src/pages/Login.vue

@@ -25,12 +25,18 @@
                 <q-btn
                   :outline="userAuthenticated"
                   :disabled="userAuthenticated"
+                  :loading="loading"
                   label="Login"
                   color="primary"
                   class="full-width"
                   type="submit"
                   unelevated
-                />
+                >
+                  <template v-slot:loading>
+                    <q-spinner-oval class="on-left" />
+                    wird eingeloggt...
+                  </template>
+                </q-btn>
                 <q-btn
                   :outline="!userAuthenticated"
                   :disabled="!userAuthenticated"
@@ -46,21 +52,6 @@
         </div>
       </div>
     </form>
-    <q-dialog v-model="credentialsDialog" persistent transition-show="scale" transition-hide="scale">
-      <q-card class="bg-red-9 text-white" style="">
-        <q-card-section>
-          <div class="text-h6">Fehler</div>
-        </q-card-section>
-
-        <q-card-section>
-          Es konnten keine übereinstimmenden Zugangsdaten in der Datenbank gefunden werden.
-        </q-card-section>
-
-        <q-card-actions align="right" class="bg-white text-teal">
-          <q-btn flat label="OK" color="red-9" v-close-popup/>
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
   </div>
 </template>
 
@@ -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,6 +126,8 @@
             }
             console.log(error.config);
             this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
+          }).finally(() => {
+            this.loading = false;
         })
       },
       evalAuthentication: function () {

frontend/src/pages/StationEdit.vue

@@ -4,7 +4,9 @@
     <q-editor
       :toolbar="[
             ['bold', 'italic', 'strike', 'underline'],
-        ['undo', 'redo']
+            ['undo', 'redo'],
+            ['hr', 'link'],
+            ['fullscreen'],
           ]"
       v-model="station.description" min-height="10rem"/>
     <!--<q-input-->
@@ -19,7 +21,8 @@
            src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
     ></q-img>
     <div class="row q-col-gutter-md">
-      <q-input class="col" dense stack-label filled v-model="latlang" @input="separateLatlang" label="Längengrad/Breitengrad" />
+      <q-input class="col" dense stack-label filled v-model="latlang" @input="separateLatlang"
+               label="Längengrad/Breitengrad"/>
       <div class="col-shrink">
         <q-btn unelevated color="primary" class="full-height" icon="my_location"/>
       </div>
@@ -37,6 +40,7 @@
 
 <script>
   import {mapGetters} from 'vuex';
+
   export default {
     name: "Station",
 

frontend/src/router/routes.js

@@ -31,7 +31,7 @@ const routes = [
     children: [{ path: "", component: () => import("pages/StationEdit.vue") }]
   },
   {
-    path: "/station-l/:pos",
+    path: "/tempstation/:pos",
     component: () => import("layouts/MyLayout.vue"),
     children: [{path: "", component: () => import("pages/StationEdit.vue")}]
   },

frontend/src/store/cacheCollector/getters.js

@@ -6,3 +6,7 @@ export const GET_TEMPSTATION = (state) => {
   console.log("GET_TEMPSTATION: retrieve cache from store. ");
   return state.tempStation;
 };
+export const GET_ENDSTATION = (state) => {
+  console.log("GET_ENDSTATION: retrieve cache from store. ");
+  return state.endStation;
+};

frontend/src/store/cacheCollector/mutations.js

@@ -6,6 +6,10 @@ export const SET_TEMPSTATION = (state, station) => {
   console.log("SET_TEMPSTATION: add new station to cache: "+station);
   state.tempStation = station;
 };
+export const SET_ENDSTATION = (state, station) => {
+  console.log("SET_ENDSTATION: "+station);
+  state.endStation = station;
+};
 export const ADD_STATION = (state, station) => {
   console.log("ADD_STATION: add new station to cache: "+station);
   state.newCache.stationen.push(station);
@@ -29,6 +33,11 @@ export const RESET_NEW_CACHE = (state) => {
     rankingPoints: 0,
     stationen: []
   };
+  state.endStation = {
+    description: "Endstation",
+    longitude: 0.0001,
+    lattitude: 0.0001,
+  };
   console.log("resetted new Cache");
 };
 export const LOAD_REMOTE_CACHE = (state, id) => {

frontend/src/store/cacheCollector/state.js

@@ -3,6 +3,7 @@ export default {
     name: "",
     description: "",
     rankingPoints: 0,
+    reward: "",
     stationen: []
   },
   // newCache: {
@@ -41,4 +42,9 @@ export default {
   //   ]
   // },
   tempStation: {},
+  endStation: {
+    description: "Endstation",
+    longitude: 9.206628,
+    lattitude: 49.147734,
+  },
 }