changes in Cache & Station Editpages, worked on cacheCollector store

2019-04-09 03:41:05 +02:00 · 2019-04-09 03:41:05 +02:00 · 2723c59056
commit 2723c59056
parent 57e66dcc45
8 changed files with 307 additions and 110 deletions
--- a/frontend/src/pages/Cache.vue
+++ b/frontend/src/pages/Cache.vue
@ -1,80 +1,59 @@
 <template>
  <div>
+<!--    <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">Cache erstellen/bearbeiten</p>
-        <q-input class="col" dense stack-label filled v-model="text" label="Name"/>
+          <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="description"
+            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="text" label="Punktewert"/>
+          <q-input class="col" dense stack-label filled v-model="tempCache.rankingPoints" label="Punktewert"
+                   @change="cacheToStore"/>
          <q-input
-          v-model="reward"
+            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 v-for="(station, index) in cache.stationen" :key="index">
              <q-item-section avatar>
                <q-avatar color="primary" text-color="white">
-                1
+                  {{ index + 1 }}
                </q-avatar>
              </q-item-section>

              <q-item-section top>
                <q-item-label lines="1">
-                <span class="text-grey-8">Beschreibung:</span>
+                  <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">Dies ist der Anfang der Beschreibung...</span>
+                  <span class="cursor-pointer">{{ station.description }}</span>
                </q-item-label>
                <q-item-label caption lines="1">
-                Code: 123456
+                  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 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" />
+                  <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>
@ -84,28 +63,120 @@
            <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"/>
+            <q-btn @click="saveCache" class="full-width" unelevated stack color="positive" label="Cache speichern"
+                   icon="save_alt"/>
          </div>
        </div>
      </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>
--- 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}` })
          })
--- 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` });
      }
    }
  }
--- 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"),
--- 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')));
--- 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;
+};
--- 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;
+        }
+      }
+    });
+};
--- 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: {},
 }