From 239dc92b5801f7f5539275bef0788a2bac8840fe Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Fri, 5 Apr 2019 14:40:10 +0200
Subject: [PATCH] changes in Cache & Station Editpages, added cacheCollector
 Store

---
 frontend/quasar.conf.js                       |  2 +
 frontend/src/pages/Cache.vue                  | 77 ++++++++++++++++---
 frontend/src/pages/Overview.vue               |  4 +-
 frontend/src/pages/StationEdit.vue            | 57 +++++++++++---
 frontend/src/store/cacheCollector/actions.js  |  4 +
 frontend/src/store/cacheCollector/getters.js  |  4 +
 frontend/src/store/cacheCollector/index.js    | 12 +++
 .../src/store/cacheCollector/mutations.js     |  4 +
 frontend/src/store/cacheCollector/state.js    |  3 +
 frontend/src/store/index.js                   | 22 ++----
 10 files changed, 152 insertions(+), 37 deletions(-)
 create mode 100644 frontend/src/store/cacheCollector/actions.js
 create mode 100644 frontend/src/store/cacheCollector/getters.js
 create mode 100644 frontend/src/store/cacheCollector/index.js
 create mode 100644 frontend/src/store/cacheCollector/mutations.js
 create mode 100644 frontend/src/store/cacheCollector/state.js

diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js
index 42861b5..b557976 100644
--- a/frontend/quasar.conf.js
+++ b/frontend/quasar.conf.js
@@ -64,6 +64,8 @@ module.exports = function (ctx) {
         'QExpansionItem',
         'QParallax',
         'QEditor',
+        'QSelect',
+        'QField',
       ],
 
       directives: [
diff --git a/frontend/src/pages/Cache.vue b/frontend/src/pages/Cache.vue
index 896ba01..513310e 100644
--- a/frontend/src/pages/Cache.vue
+++ b/frontend/src/pages/Cache.vue
@@ -1,19 +1,76 @@
 <template>
-    <div>
-      <div class="q-pa-md">
-        <p class="text-h6">Cache erstellen/bearbeiten</p>
-        <p>Cache Name</p>
-        <p>Cache Beschreibung</p>
-        <p>Cache Punkte</p>
-        <p>Stationen</p>
+  <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"/>
+        <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-section top>
+              <q-item-label lines="1">
+                <!--<span class="text-weight-medium">[quasarframework/quasar]</span>-->
+                <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-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"/>
+        </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>
+    </form>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: "Cache"
+  export default {
+    name: "Cache",
+    data() {
+      return {
+        text: ""
+      }
+    },
+    methods: {
+      addStation() {
+
+      },
+      saveCache() {
+
+      }
     }
+  }
 </script>
 
 <style scoped>
diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
index d206e53..7560bed 100644
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@@ -119,7 +119,9 @@
         this.$axios.get('http://localhost:8080/api/startCache', { params })
           .then((response) => {
             console.log("Angefangen: " + response.data);
-            this.$router.push({ path: `/station/${cacheID}` })
+            let stationID = response.data.aktuelleStation.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 61c7d06..547869f 100644
--- a/frontend/src/pages/StationEdit.vue
+++ b/frontend/src/pages/StationEdit.vue
@@ -1,33 +1,38 @@
 <template>
-  <q-page class="q-ma-md">
-    <h4 class="text-h4">Neue Station</h4>
+  <div class="q-ma-md">
+    <p class="text-h5">Neue Station</p>
     <q-editor
       :toolbar="[
         ['bold', 'italic', 'strike', 'underline'],
         ['undo', 'redo']
       ]"
-      v-model="description" min-height="10rem" />
+      v-model="station.description" min-height="10rem" />
     <!--<q-input-->
       <!--v-model="description"-->
       <!--filled-->
       <!--type="textarea"-->
     <!--/>-->
-    <p class="text-h5 q-mt-md">Location</p>
+    <p class="text-h6 q-mt-md">Location</p>
     <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="row q-col-gutter-md">
-      <q-input class="col" dense stack-label filled v-model="text" 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>
     </div>
-    <p class="text-h5 q-mt-md">Lösung</p>
-    <q-input class="col" dense stack-label filled v-model="text" label="Lösung" />
-    <q-input class="col q-mt-md" dense stack-label filled v-model="text" label="Code" readonly/>
-  </q-page>
+    <p class="text-h6 q-mt-md">Lösung</p>
+    <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="dismiss" unelevated color="negative" label="verwerfen" icon-right="delete"/>
+    </div>
+
+  </div>
 </template>
 
 <script>
@@ -37,7 +42,15 @@
     data() {
       return {
         description: "Rätsel, Aufgabe und Informationen zur Station.",
-        text:"v-model !!"
+        text:"v-model !!",
+        latlang: "",
+        station: {
+          description: "description",
+          lattitude: 0.06470,
+          longitude: 0.05551,
+          solution: "solution",
+          code: 357547
+        },
       }
     },
     created: function() {
@@ -45,11 +58,33 @@
     beforeMount: function() {
     },
     mounted: function() {
-      console.log("'id' from url: "+this.$route.params.id)
+      console.log("'id' from url: "+this.$route.params.id);
+      this.concatLatlang();
     },
     computed: {
+      // concatLatlang() {
+      //   return this.station.lattitude+", "+this.station.longitude
+      // }
     },
     methods: {
+      separateLatlang() {
+        //console.log("separateLatlang()");
+        if (this.latlang.includes(',')) {
+          this.station.lattitude = this.latlang.substr(0, this.latlang.indexOf(',')).trim();
+          this.station.longitude = this.latlang.substr(this.latlang.indexOf(',')+1, this.latlang.length).trim();
+          console.log(this.latlang);
+          console.log(this.station.lattitude + ", " + this.station.longitude);
+        }
+      },
+      concatLatlang() {
+        this.latlang = this.station.lattitude+", "+this.station.longitude;
+      },
+      addStation() {
+
+      },
+      dismiss() {
+
+      }
     }
   }
 </script>
diff --git a/frontend/src/store/cacheCollector/actions.js b/frontend/src/store/cacheCollector/actions.js
new file mode 100644
index 0000000..4787a5f
--- /dev/null
+++ b/frontend/src/store/cacheCollector/actions.js
@@ -0,0 +1,4 @@
+/*
+export function someAction (context) {
+}
+*/
diff --git a/frontend/src/store/cacheCollector/getters.js b/frontend/src/store/cacheCollector/getters.js
new file mode 100644
index 0000000..cc054a3
--- /dev/null
+++ b/frontend/src/store/cacheCollector/getters.js
@@ -0,0 +1,4 @@
+/*
+export function someGetter (state) {
+}
+*/
diff --git a/frontend/src/store/cacheCollector/index.js b/frontend/src/store/cacheCollector/index.js
new file mode 100644
index 0000000..b41a219
--- /dev/null
+++ b/frontend/src/store/cacheCollector/index.js
@@ -0,0 +1,12 @@
+import state from './state'
+import * as getters from './getters'
+import * as mutations from './mutations'
+import * as actions from './actions'
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions
+}
diff --git a/frontend/src/store/cacheCollector/mutations.js b/frontend/src/store/cacheCollector/mutations.js
new file mode 100644
index 0000000..63131e2
--- /dev/null
+++ b/frontend/src/store/cacheCollector/mutations.js
@@ -0,0 +1,4 @@
+/*
+export function someMutation (state) {
+}
+*/
diff --git a/frontend/src/store/cacheCollector/state.js b/frontend/src/store/cacheCollector/state.js
new file mode 100644
index 0000000..40b8bc3
--- /dev/null
+++ b/frontend/src/store/cacheCollector/state.js
@@ -0,0 +1,3 @@
+export default {
+  //
+}
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index 8ccfe4c..8eb6c71 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -2,6 +2,7 @@ import Vue from "vue";
 import Vuex from "vuex";
 import Axios from "axios";
 import auth from "./auth"
+import cacheCollector from "./cacheCollector"
 
 // import example from './module-example'
 
@@ -12,24 +13,11 @@ Vue.use(Vuex, Axios);
  * directly export the Store instantiation
  */
 
-// export default function(/* { ssrContext } */) {
-//   const Store = new Vuex.Store({
-//     modules: {
-//       // example
-//     },
-//
-//     // enable strict mode (adds overhead!)
-//     // for dev mode only
-//     strict: process.env.DEV
-//   });
-//
-//   return Store;
-// }
-
 export default function (/* { ssrContext } */) {
   const Store = new Vuex.Store({
     modules: {
-      auth
+      auth,
+      cacheCollector
     },
 
     // enable strict mode (adds overhead!)
@@ -47,6 +35,10 @@ export default function (/* { ssrContext } */) {
     module.hot.accept(['./auth'], () => {
       const auth = require('./auth').default;
       store.hotUpdate({ modules: { auth: newAuth } })
+    });
+    module.hot.accept(['./cacheCollector'], () => {
+      const cacheCollector = require('./cacheCollector').default;
+      store.hotUpdate({ modules: { cacheCollector: newCacheCollector } })
     })
   }