From 2723c59056449b2d03f8e9fff40e950d750d83ce Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Tue, 9 Apr 2019 03:41:05 +0200
Subject: [PATCH] changes in Cache & Station Editpages, worked on
 cacheCollector store

---
 frontend/src/pages/Cache.vue                  | 243 +++++++++++-------
 frontend/src/pages/Overview.vue               |  13 +-
 frontend/src/pages/StationEdit.vue            |  36 ++-
 frontend/src/router/routes.js                 |  18 +-
 frontend/src/store/auth/mutations.js          |   1 -
 frontend/src/store/cacheCollector/getters.js  |  12 +-
 .../src/store/cacheCollector/mutations.js     |  57 +++-
 frontend/src/store/cacheCollector/state.js    |  37 ++-
 8 files changed, 307 insertions(+), 110 deletions(-)

diff --git a/frontend/src/pages/Cache.vue b/frontend/src/pages/Cache.vue
index 6fee21b..5d6b325 100644
--- a/frontend/src/pages/Cache.vue
+++ b/frontend/src/pages/Cache.vue
@@ -1,111 +1,182 @@
 <template>
   <div>
-    <form>
-      <div class="q-pa-md q-gutter-y-md">
-        <p class="text-h5">Cache erstellen/bearbeiten</p>
-        <q-input class="col" dense stack-label filled v-model="text" label="Name"/>
-        <q-input
-          v-model="description"
-          dense
-          stack-label
-          filled
-          autogrow
-          type="textarea"
-          label="Beschreibung"
-        />
-        <q-input class="col" dense stack-label filled v-model="text" label="Punktewert"/>
-        <q-input
-          v-model="reward"
-          dense
-          stack-label
-          filled
-          autogrow
-          type="textarea"
-          label="Belohnung"
-        />
-        <p class="text-h6">Stationen</p>
-        <q-list bordered separator class="rounded-borders" >
+<!--    <div :is="stationComponent" @q-tb="scrollToBottomState" :stationObject="tempStation">STATION</div>-->
+<!--    <div v-show="!stationComponent">-->
+      <form>
+        <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
+            v-model="tempCache.reward"
+            dense
+            stack-label
+            filled
+            autogrow
+            type="textarea"
+            label="Belohnung"
+            @change="cacheToStore"
+          />
+          <p class="text-h6">Stationen</p>
+          <q-list bordered separator class="rounded-borders">
 
-          <q-item>
-            <q-item-section avatar>
-              <q-avatar color="primary" text-color="white">
-                1
-              </q-avatar>
-            </q-item-section>
+            <q-item v-for="(station, index) in cache.stationen" :key="index">
+              <q-item-section avatar>
+                <q-avatar color="primary" text-color="white">
+                  {{ index + 1 }}
+                </q-avatar>
+              </q-item-section>
 
-            <q-item-section top>
-              <q-item-label lines="1">
-                <span class="text-grey-8">Beschreibung:</span>
-              </q-item-label>
-              <q-item-label lines="1" class="q-mt-xs text-body2">
-                <span class="cursor-pointer">Dies ist der Anfang der Beschreibung...</span>
-              </q-item-label>
-              <q-item-label caption lines="1">
-                Code: 123456
-              </q-item-label>
-            </q-item-section>
+              <q-item-section top>
+                <q-item-label lines="1">
+                  <span class="text-grey-8">ID: {{ station.id ? station.id : "keine" }}</span>
+                </q-item-label>
+                <q-item-label lines="1" class="q-mt-xs text-body2">
+                  <span class="cursor-pointer">{{ station.description }}</span>
+                </q-item-label>
+                <q-item-label caption lines="1">
+                  Code: {{ station.code }}
+                </q-item-label>
+              </q-item-section>
 
-            <q-item-section side>
-              <div class="text-grey-8 q-gutter-xs">
-                <q-btn class="" color="" flat dense round icon="delete" />
-                <q-btn class="" color="" flat dense round icon="edit" />
-              </div>
-            </q-item-section>
-          </q-item>
-          <q-item>
-            <q-item-section avatar>
-              <q-avatar color="primary" text-color="white">
-                1
-              </q-avatar>
-            </q-item-section>
+              <q-item-section side>
+                <div class="text-grey-8 q-gutter-xs">
+                  <q-btn disable @click="deleteStation" class="" color="" flat dense round icon="delete"/>
+                  <q-btn @click="editStation(index)" class="" color="" flat dense round icon="edit"/>
+                </div>
+              </q-item-section>
+            </q-item>
 
-            <q-item-section top>
-              <q-item-label lines="1">
-                <span class="text-grey-8">Beschreibung:</span>
-              </q-item-label>
-              <q-item-label lines="1" class="q-mt-xs text-body2">
-                <span class="cursor-pointer">Dies ist der Anfang der Beschreibung...</span>
-              </q-item-label>
-              <q-item-label caption lines="1">
-                Code: 123456
-              </q-item-label>
-            </q-item-section>
-
-            <q-item-section side>
-              <div class="text-grey-8 q-gutter-xs">
-                <q-btn class="" color="" flat dense round icon="delete" />
-                <q-btn class="" color="" flat dense round icon="edit" />
-              </div>
-            </q-item-section>
-          </q-item>
-
-        </q-list>
-        <div class="row reverse">
-          <q-btn @click="addStation" unelevated color="primary" label="Station hinzufügen" icon-right="add"/>
+          </q-list>
+          <div class="row reverse">
+            <q-btn @click="addStation" unelevated color="primary" label="Station hinzufügen" icon-right="add"/>
+          </div>
+          <div class="row q-mt-xl">
+            <q-btn @click="saveCache" class="full-width" unelevated stack color="positive" label="Cache speichern"
+                   icon="save_alt"/>
+          </div>
         </div>
-        <div class="row q-mt-xl">
-          <q-btn @click="saveCache" class="full-width" unelevated stack color="positive" label="Cache speichern" icon="save_alt"/>
-        </div>
-      </div>
-    </form>
+      </form>
+<!--    </div>-->
   </div>
 </template>
 
 <script>
+  // import station from './StationEdit'
+  import {mapGetters} from 'vuex';
+
   export default {
     name: "Cache",
     data() {
       return {
-        text: ""
+        // stationComponent: null,
+        scrolldown: false,
+        isNewCache: this.$route.params.id === undefined,
+        tempCache: {},
       }
     },
+    // components: {
+    //   station
+    // },
+    beforeCreate: function () {
+    },
+    created: function () {
+      console.log("isNewCache: " + this.isNewCache);
+      console.log("fetch Caches from Store");
+      this.tempCache = JSON.parse(JSON.stringify(this.cache))
+    },
+    beforeMount: function () {
+    },
+    mounted: function () {
+      console.log("Scrolldown: " + this.scrolldown)
+    },
+    updated: function () {
+      if (this.scrolldown) {
+        console.log("scroll down...");
+        window.scrollTo(0, document.body.scrollHeight);
+        this.scrolldown = false
+      }
+      //this.SET_CACHE(this.tempCache);
+      //this.scrollToBottom();
+    },
     methods: {
+      // ...mapMutations([
+      //   'cacheCollector/SET_CACHE',
+      //   'cacheCollector/ADD_STATION',
+      //   'cacheCollector/REMOVE_STATION',
+      //   'cacheCollector/RESET_NEW_CACHE',
+      //   'cacheCollector/LOAD_REMOTE_CACHE'
+      // ]),
+      // swapComponent: function (component) {
+      //   this.stationComponent = component;
+      // },
+      cacheToStore() {
+        // push tempCache to Store
+        console.log("set Cache");
+        this.$store.commit('cacheCollector/SET_CACHE', JSON.parse(JSON.stringify(this.tempCache)));
+        // this.SET_CACHE(JSON.parse(JSON.stringify(this.tempCache)));
+      },
       addStation() {
+        this.$router.push({ path: '/station' });
+        //this.swapComponent(station);
+        // create Station and add it to array tempCache.stationen
+      },
+      editStation(index) {
+        console.log("editStation("+index+")");
+        const station = this.cache.stationen[index];
+        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?local=${index}` }); // add parameter
+        }
+      },
+      deleteStation() {
 
       },
       saveCache() {
-
-      }
+        // commit to store, send to api, if success -> reset store
+        if (this.isNewCache) {
+          console.log(this.cache);
+          console.log(JSON.stringify(this.cache));
+          this.$axios.post('http://localhost:8080/api/createCache', this.cache)
+            .then((response) => {
+              console.log("POST api/createCache: " + response.statusText);
+              this.$router.push({ path: '/overview' });
+            })
+            .catch((error) => {
+            });
+          } else {
+          // TODO update existing Cache
+        }
+        },
+    },
+    computed: {
+      ...mapGetters({
+        cache: 'cacheCollector/GET_CACHE'
+      }),
+      // computedCache: {
+      //   set(value) {
+      //     console.log("set cache")
+      //   },
+      //   get() {
+      //     console.log("get cache");
+      //     return this.$store.getters.cacheCollector.GET_CACHE
+      //   }
+      // }
     }
   }
 </script>
diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
index 019aac8..f3b3353 100644
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@@ -45,8 +45,8 @@
               </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 v-if="hasAdminState" @click="startCache(cache.id)" unelevated color="amber" stack icon="edit" label="Bearbeiten" size="sm"/>
-                <q-btn v-if="hasAdminState" @click="startCache(cache.id)" unelevated color="negative" stack icon="delete" label="Löschen" size="sm"/>
+                <q-btn 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"/>
               </q-item>
             </q-expansion-item>
             </q-card>
@@ -114,6 +114,10 @@
       addCache() {
         this.$router.push({ path: `/cache` })
       },
+      editCache() {
+      },
+      removeCache() {
+      },
       startCache(cacheID) {
         const userToken = JSON.parse(localStorage.getItem('userToken'));
         let params = { cacheID: cacheID };
@@ -124,8 +128,9 @@
 
         this.$axios.get('http://localhost:8080/api/startCache', { params })
           .then((response) => {
-            console.log("Angefangen: " + response.data);
-            let stationID = response.data.aktuelleStation.id;
+            console.log(response.data);
+            // let stationID = response.data.stationen[0].id;
+            let stationID = this.caches.find(x => x.id === cacheID).stationen[0].id;
             console.log(stationID);
             this.$router.push({ path: `/station/${stationID}` })
           })
diff --git a/frontend/src/pages/StationEdit.vue b/frontend/src/pages/StationEdit.vue
index 547869f..a8e413c 100644
--- a/frontend/src/pages/StationEdit.vue
+++ b/frontend/src/pages/StationEdit.vue
@@ -28,7 +28,7 @@
     <q-input class="col" dense stack-label filled v-model="station.solution" label="Lösung" />
     <q-input class="col q-mt-md" dense stack-label filled v-model="station.code" label="Code" readonly/>
     <div class="row reverse q-mt-md q-gutter-x-md">
-      <q-btn @click="addStation" unelevated color="primary" label="Speichern" icon-right="add"/>
+      <q-btn @click="saveStation" unelevated color="primary" label="Speichern" icon-right="add"/>
       <q-btn @click="dismiss" unelevated color="negative" label="verwerfen" icon-right="delete"/>
     </div>
 
@@ -36,13 +36,13 @@
 </template>
 
 <script>
+  import {mapGetters} from 'vuex';
   export default {
     name: "Station",
 
     data() {
       return {
         description: "Rätsel, Aufgabe und Informationen zur Station.",
-        text:"v-model !!",
         latlang: "",
         station: {
           description: "description",
@@ -51,20 +51,27 @@
           solution: "solution",
           code: 357547
         },
+        isNewStation: true,
+        // stationObject: null,
       }
     },
+    // props: [ 'stationObject' ],
     created: function() {
+      this.station = this.tempStation;
+      console.log(this.station);
     },
     beforeMount: function() {
     },
     mounted: function() {
-      console.log("'id' from url: "+this.$route.params.id);
+      this.isNewStation = this.$route.params.pos === undefined;
+      console.log("neu: "+this.isNewStation);
+      console.log("pos: "+this.$route.params.pos);
       this.concatLatlang();
     },
     computed: {
-      // concatLatlang() {
-      //   return this.station.lattitude+", "+this.station.longitude
-      // }
+      ...mapGetters({
+        tempStation: 'cacheCollector/GET_TEMPSTATION'
+      }),
     },
     methods: {
       separateLatlang() {
@@ -79,11 +86,22 @@
       concatLatlang() {
         this.latlang = this.station.lattitude+", "+this.station.longitude;
       },
-      addStation() {
-
+      saveStation() {
+        //this.$parent.swapComponent(null);
+        // this.$emit('q-tb');
+        console.log("saveStation(): ");
+        if (isNewStation) {
+          this.$store.commit('cacheCollector/ADD_STATION', this.station);
+        } else {
+          this.$store.commit('cacheCollector/EDIT_STATION', this.$route.params.pos, this.station);
+          this.$store.commit('cacheCollector/SET_TEMPSTATION', null);
+        }
+        this.$router.push({ path: `/cache` });
+        console.log("station saved..");
       },
       dismiss() {
-
+        this.$emit('q-tb');
+        this.$router.push({ path: `/cache` });
       }
     }
   }
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index ce6b632..2b285ca 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -15,7 +15,12 @@ const routes = [
     children: [{ path: "", component: () => import("pages/Cache.vue") }]
   },
   {
-    path: "/station/",
+    path: "/cache/:id",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/Cache.vue") }]
+  },
+  {
+    path: "/station?local=:pos",
     component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/StationEdit.vue") }]
   },
@@ -24,6 +29,17 @@ const routes = [
     component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/StationView.vue") }]
   },
+  {
+    path: "/station/",
+    component: () => import("layouts/MyLayout.vue"),
+    // props: true,
+    children: [{
+      path: "",
+      component: () => import("pages/StationEdit.vue"),
+      // props: true
+      //props: ['stationObject']
+    }]
+  },
   {
     path: "/login/",
     component: () => import("layouts/MyLayout.vue"),
diff --git a/frontend/src/store/auth/mutations.js b/frontend/src/store/auth/mutations.js
index 46266c0..3a5c061 100644
--- a/frontend/src/store/auth/mutations.js
+++ b/frontend/src/store/auth/mutations.js
@@ -1,4 +1,3 @@
-import axios from 'axios'
 export const SET_AUTHENTICATED = (state) => {
     console.log("SET_AUTHENTICATED()");
     console.log(JSON.parse(localStorage.getItem('userToken')));
diff --git a/frontend/src/store/cacheCollector/getters.js b/frontend/src/store/cacheCollector/getters.js
index cc054a3..b2b2dbe 100644
--- a/frontend/src/store/cacheCollector/getters.js
+++ b/frontend/src/store/cacheCollector/getters.js
@@ -1,4 +1,8 @@
-/*
-export function someGetter (state) {
-}
-*/
+export const GET_CACHE = (state) => {
+  console.log("GET_CACHE: retrieve cache from store. ");
+  return state.newCache;
+};
+export const GET_TEMPSTATION = (state) => {
+  console.log("GET_TEMPSTATION: retrieve cache from store. ");
+  return state.tempStation;
+};
diff --git a/frontend/src/store/cacheCollector/mutations.js b/frontend/src/store/cacheCollector/mutations.js
index 63131e2..ee2cab7 100644
--- a/frontend/src/store/cacheCollector/mutations.js
+++ b/frontend/src/store/cacheCollector/mutations.js
@@ -1,4 +1,53 @@
-/*
-export function someMutation (state) {
-}
-*/
+export const SET_CACHE = (state, cache) => {
+  console.log("SET_CACHE: save cache to store. ")
+  state.newCache = cache;
+};
+export const SET_TEMPSTATION = (state, station) => {
+  console.log("SET_TEMPSTATION: add new station to cache: "+station);
+  state.tempStation = station;
+};
+export const ADD_STATION = (state, station) => {
+  console.log("ADD_STATION: add new station to cache: "+station);
+  state.newCache.stationen.push(station);
+};
+export const EDIT_STATION = (state, index, station) => {
+  console.log("ADD_STATION: add new station to cache: "+station);
+  state.newCache.stationen[index] = station;
+};
+export const REMOVE_STATION = (state, index) => {
+  console.log("ADD_STATION: add new station to cache: "+station);
+  state.newCache.stationen.splice(index,1);
+};
+export const RESET_NEW_CACHE = (state) => {
+  state.newCache = {
+    id: null,
+    name: "",
+    description: "",
+    rankingPoints: 0,
+    stationen: []
+  };
+  console.log("resetted new Cache");
+};
+export const LOAD_REMOTE_CACHE = (state, id) => {
+  console.log("LOAD_REMOTE_CACHE: get caches from remote");
+  this.$axios.get('http://localhost:8080/api/allCaches')
+    .then((response) => {
+      const allCaches = JSON.parse(response.data);
+      console.log("Caches: " + allCaches.length);
+      if (response.data === undefined || allCaches.length === 0) {
+        console.log("aborted processing data.");
+        return;
+      }
+      let cacheToSet = null;
+      for (let cache in allCaches) {
+        console.log("Cachedata: ");
+        console.log(cache.id);
+        console.log(cache.name);
+        if (cache.id === id) {
+          cacheToSet = cache;
+          console.log("found matching ID: setted cache to store.");
+          break;
+        }
+      }
+    });
+};
diff --git a/frontend/src/store/cacheCollector/state.js b/frontend/src/store/cacheCollector/state.js
index 40b8bc3..3836b13 100644
--- a/frontend/src/store/cacheCollector/state.js
+++ b/frontend/src/store/cacheCollector/state.js
@@ -1,3 +1,38 @@
 export default {
-  //
+  newCache: {
+    name: "Blumencache",
+    description: "Dieser Cache umfasst 4 Stationen mit Rätseln rund um das Thema Blumen",
+    rankingPoints: 100,
+    stationen: [
+      {
+        description: "Ein kleines winterliches Schlaginstrument. Welche Blume ist damit gemeint?",
+        longitude: 9.206628,
+        lattitude: 49.147734,
+        code: 213812,
+        solution: "Schneeglöckchen"
+      },
+      {
+        description: "Ein blühendes Federvieh. Welche Blume ist damit gemeint?",
+        longitude: 9.206806,
+        lattitude: 49.147318,
+        code: 237823,
+        solution: "Gänseblümchen"
+      },
+      {
+        description: "Eine wertvolle Farbe. Welche Blume ist damit gemeint?",
+        longitude: 9.207844,
+        lattitude: 49.148032,
+        code: 899423,
+        solution: "Edelweiß"
+      },
+      {
+        description: "Ein Zerkleinerungsgerät in der Brüllöffnung eines Raubtieres. Welche Blume ist damit gemeint?",
+        longitude: 9.207649,
+        lattitude: 49.150142,
+        code: 347923,
+        solution: "Löwenzahn"
+      }
+    ]
+  },
+  tempStation: {},
 }