implemented edit Cache, bugfixes

frontend/src/pages/Cache.vue

@@ -1,7 +1,5 @@
 <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">{{ isNewCache ? "Neuen Cache erstellen" : "Cache bearbeiten"}}</p>
@@ -94,40 +92,56 @@
           </q-item>
         </q-card>
         <div class="row q-mt-xl">
-          <q-btn @click="saveCache" class="full-width" color="primary" unelevated stack label="Cache speichern"
+          <q-btn @click="saveCache" class="full-width q-mb-md" color="primary" unelevated stack label="Cache speichern"
                  icon="save_alt"/>
+          <q-btn to="/overview" class="full-width" color="negative" unelevated stack label="Abbrechen" />
         </div>
       </div>
     </form>
-    <!--    </div>-->
   </div>
 </template>
 
 <script>
-  // import station from './StationEdit'
   import {mapGetters} from 'vuex';
 
   export default {
     name: "Cache",
     data() {
       return {
-        // stations: [],
-        // endStation: {},
-        //endStation: {},
         scrolldown: false,
         isNewCache: this.$route.params.id === undefined,
-        tempCache: {},
+        //tempCache: {},
       }
     },
-    // components: {
+    beforeRouteUpdate(to, from, next) {
-    //   station
+      console.log("beforeRouteUpdate: reset data and fetch");
-    // },
+      this.$store.commit('cacheCollector/RESET_NEW_CACHE');
+      next()
+    },
+
     beforeCreate: function () {
     },
     created: function () {
       console.log("isNewCache: " + this.isNewCache);
-      console.log("fetch Caches from Store");
+      console.log("Route Params: " + this.$route.params.id);
-      //this.tempCache = JSON.parse(JSON.stringify(this.cache));
+      if (!this.isNewCache) {
+        this.$axios.get('/api/allCaches')
+          .then((response) => {
+            console.log("/api/allCaches");
+            //console.log(JSON.stringify(response.data));
+            console.log(response.data);
+            let cache = response.data.find(cache => Number(cache.id) === Number(this.$route.params.id));
+            console.log(cache);
+            let stations = cache.stationen.filter(station => station.description !== "Endstation");
+            let endstation = cache.stationen.find(station => station.description === "Endstation");
+            console.log(stations);
+            console.log(endstation);
+            this.$store.commit('cacheCollector/SET_CACHE', cache);
+            this.$store.commit('cacheCollector/SET_STATIONS', stations);
+            this.$store.commit('cacheCollector/SET_ENDSTATION', endstation);
+          })
+
+      }
     },
     beforeMount: function () {
     },
@@ -146,37 +160,12 @@
     methods: {
       editEndStation() {
         console.log("editEndStation()");
-        const station = this.endStation;
+        const station = this.$store.getters['cacheCollector/GET_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: `/tempendstation/${index}`}); // add parameter
         this.$router.push({path: `/tempendstation/`}); // add parameter
-        }
 
       },
-      // getStations() {
-      //   console.log("get Stations");
-      //   let stations = this.computedStations.get();
-      //   this.stations = stations.filter(station => station.description !== "Endstation");
-      //   console.log(this.stations);
-      //   this.endStation = stations.filter(station => station.description === "Endstation");
-      //   console.log(this.endStation);
-      // },
-      // setStations() {
-      //   let stations = this.stations;
-      //   stations.push(this.endStation);
-      //   this.computedStations.set(stations);
-      // },
-      // 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'});
       },
@@ -233,26 +222,16 @@
             this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
           })
         } else {
-          // TODO update existing Cache
+          this.$axios.post('/api/editCache', cache)
+            .then((response) => {
+              console.log("POST api/editCache: " + response.statusText);
+              this.$store.commit('cacheCollector/RESET_NEW_CACHE');
+              this.$router.push({path: '/overview'});
+            })
         }
       },
     },
     computed: {
-      ...mapGetters({
-        //cache: 'cacheCollector/GET_CACHE',
-        //endStation: 'cacheCollector/GET_ENDSTATION'
-      }),
-      // computedStations: {
-      //   set(value) {
-      //     console.log("set stations");
-      //     this.computedCache.set(value);
-      //   },
-      //   get() {
-      //     console.log("get stations");
-      //     let stations = this.computedCache.stationen;
-      //     return stations.filter(station => station.description !== "Endstation");
-      //   }
-      // },
       computedCache: {
         set(value) {
           console.log("set cache");

frontend/src/pages/Overview.vue

@@ -120,10 +120,14 @@
     },
     async created() {
       console.log("created(): " + this.caches);
+      this.loadData();
+    },
+    methods: {
+      async loadData() {
+        this.render = false;
         await this.fetchAllCaches();
         this.render = await this.fetchMyCaches();
       },
-    methods: {
       getColorClass(cache) {
         switch (this.getCacheAccesDefinition(cache)) {
           case -1:
@@ -232,6 +236,7 @@
         this.$router.push({path: `/cache`})
       },
       editCache(cacheID) {
+        this.$router.push({path: `/cache/${cacheID}`})
       },
       initMap() {
         console.log("Signalwort: " + this.pois);
@@ -249,9 +254,9 @@
       },
       deleteCache(id) {
         console.log('delete cache: ' + id);
-        axios.get('/api/deleteCache', {params: {cacheID: id}})
+        this.$axios.delete('/api/deleteCache', {params: {cacheID: id}})
           .then((response) => {
-            this.fetchAllCaches()
+            this.loadData();
           }).catch((error) => {
           let message;
           let header = "Fehler: ";

frontend/src/store/cacheCollector/mutations.js

@@ -42,8 +42,8 @@ export const RESET_NEW_CACHE = (state) => {
   };
   state.endStation = {
     description: "Endstation",
-      longitude: 9.206628,
+      longitude: 0.000,
-      lattitude: 49.147734,
+      lattitude: 0.000,
       solution: "",
   };
 

frontend/src/store/cacheCollector/state.js

@@ -11,8 +11,8 @@ export default {
   tempStation: {},
   endStation: {
     description: "Endstation",
-    longitude: 9.206628,
+    longitude: 0.000,
-    lattitude: 49.147734,
+    lattitude: 0.000,
     solution: "",
   },
 }