From d810d782cb13f854da847973fb78190e771145f0 Mon Sep 17 00:00:00 2001
From: rchrist <rchrist@stud.hs-heilbronn.de>
Date: Thu, 11 Apr 2019 00:52:27 +0200
Subject: [PATCH] finished user story angefangene und abgeschlossene Caches
 ansehen

---
 frontend/src/pages/Profile.vue | 144 ++++++++++++++++++---------------
 1 file changed, 80 insertions(+), 64 deletions(-)

diff --git a/frontend/src/pages/Profile.vue b/frontend/src/pages/Profile.vue
index 3a6bafb..386706e 100644
--- a/frontend/src/pages/Profile.vue
+++ b/frontend/src/pages/Profile.vue
@@ -25,38 +25,66 @@
         </q-tab-panel>
 
         <q-tab-panel name="startedCaches" class=" fit">
-          <!--<q-list>-->
-            <!--<q-card class="q-mb-md" v-for="startedCache in startedCaches" :key="startedCache.id">-->
-              <!--<q-expansion-item-->
-                <!--class=""-->
-                <!--expand-icon-toggle-->
-                <!--expand-separator-->
-                <!--icon="location_on"-->
-                <!--:label="startedCache.cache.name"-->
-                <!--:caption="'Hallo'"-->
-              <!--&gt;-->
-                <!--<q-item>-->
-                  <!--<q-item-section top avatar class="self-center">-->
-                    <!--&lt;!&ndash;<q-icon rounded color="cyan-14" name="location_on" size="3rem"/>&ndash;&gt;-->
-                  <!--</q-item-section>-->
-                  <!--<q-item-section>-->
-                    <!--<q-item-label caption>{{ startedCache.cache.description }}</q-item-label>-->
-                  <!--</q-item-section>-->
+          <q-list>
+            <q-card class="q-mb-md" v-for="startedCache in startedCaches" :key="startedCache.id">
+              <q-expansion-item
+                class=""
+                v-if="startedCache.cacheAccesDefinition.description == 'angefangen'"
+                expand-icon-toggle
+                expand-separator
+                icon="location_on"
+                :label="startedCache.cache.name"
+                :caption=" startedCache.cache.description"
+              >
+                <q-item>
+                  <q-item-section top avatar class="self-center">
+                    <!--<q-icon rounded color="cyan-14" name="location_on" size="3rem"/>-->
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption>{{'Nächste Aufgabe: ' + startedCache.aktuelleStation.description }}
+                    </q-item-label>
+                    <q-item-label caption>{{'Ranglistenpunkte für diesen Cache: ' + startedCache.cache.rankingPoints}}
+                    </q-item-label>
+                  </q-item-section>
 
-                  <!--<q-item-section side top class="self-center">-->
-                  <!--</q-item-section>-->
-                <!--</q-item>-->
-                <!--<q-item class="q-pr-sm reverse q-gutter-x-sm">-->
-                  <!--<q-btn @click="startCache(startedCache.id)" unelevated color="positive" stack icon="arrow_forward"-->
-                         <!--label="Starten" size="sm"/>-->
-                <!--</q-item>-->
-              <!--</q-expansion-item>-->
-            <!--</q-card>-->
-          <!--</q-list>-->
+                  <q-item-section side top class="self-center">
+                  </q-item-section>
+                </q-item>
+                <q-item class="q-pr-sm reverse q-gutter-x-sm">
+                  <q-btn @click="startCache(startedCache.id)" unelevated color="positive" stack icon="arrow_forward"
+                         label="Fortfahren" size="sm"/>
+                </q-item>
+              </q-expansion-item>
+            </q-card>
+          </q-list>
         </q-tab-panel>
 
         <q-tab-panel name="finishedCaches" class="fit">
+          <q-list>
+            <q-card class="q-mb-md" v-for="startedCache in startedCaches" :key="startedCache.id">
+              <q-expansion-item
+                class=""
+                v-if="startedCache.cacheAccesDefinition.description == 'abgeschlossen'"
+                expand-icon-toggle
+                expand-separator
+                icon="location_on"
+                :label="startedCache.cache.name"
+                :caption=" startedCache.cache.description"
+              >
+                <q-item>
+                  <q-item-section top avatar class="self-center">
+                    <!--<q-icon rounded color="cyan-14" name="location_on" size="3rem"/>-->
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption>{{'Erhaltene Punkte für diesen Cache: ' + startedCache.cache.rankingPoints }}</q-item-label>
+                  </q-item-section>
 
+                  <q-item-section side top class="self-center">
+                  </q-item-section>
+                </q-item>
+              </q-expansion-item>
+            </q-card>
+          </q-list>
         </q-tab-panel>
 
       </q-tab-panels>
@@ -77,10 +105,7 @@
   export default {
     data() {
       return {
-        tab: 'startedCaches',
-        // hheight: 71.0,
-        // fheight: 36.0, //37
-        //header: {h: '0px', w: 0}
+        tab: 'startedCaches' + 'finishedCaches',
         startedCaches: [],
       }
     },
@@ -92,45 +117,36 @@
       }
     },
     created: function() {
-      console.log("created(): " + this.startedCaches);
-      this.fetchStartedCaches();
-    //  this.fetchFinishedCaches();
+      this.fetchUserCaches();
       this.$store.commit('auth/SET_AUTHENTICATED');
       this.$store.commit('auth/SET_USER');
     },
     methods: {
-      fetchStartedCaches() {
-        this.$axios.get('http://localhost:8080/api/getMyCaches')
+      fetchUserCaches: function() {
+        const token = JSON.parse(localStorage.getItem('userToken'));
+        this.$axios.get('http://localhost:8080/api/getMyCaches', { params: {token}} )
           .then((response) => {
-          console.log("Caches: " + this.startedCaches);
-        this.startedCaches = response.data;
-      })
+          this.startedCaches = response.data;
+          });
       },
-      // fetchFinishedCaches() {
-      //   this.$axios.get('http://localhost:8080/api/getMyCaches')
-      //     .then((response) => {
-      //     console.log("Caches: " + this.finishedCaches);
-      //   this.finishedCaches = response.data;
-      // })
-      // },
-      // startCache(cacheID) {
-      //   const userToken = JSON.parse(localStorage.getItem('userToken'));
-      //   let params = {cacheID: cacheID};
-      //   if (userToken != null) {
-      //     params.token = userToken;
-      //   }
-      //   console.log(params);
-      //
-      //   this.$axios.get('http://localhost:8080/api/startCache', {params})
-      //     .then((response) => {
-      //       console.log(response.data);
-      //       // TODO wenn cache angefangen, dann suche die letzte gefundene Station
-      //       let stationID = this.caches.find(x => x.id === cacheID).stationen[0].id;
-      //       console.log(stationID);
-      //       //this.$router.push({path: `/station/${stationID}`})
-      //       this.$router.push({path: `/station/${cacheID}/${stationID}`})
-      //     })
-      // }
+      startCache(cacheID) {
+        const userToken = JSON.parse(localStorage.getItem('userToken'));
+        let params = {cacheID: cacheID};
+        if (userToken != null) {
+          params.token = userToken;
+        }
+        console.log(params);
+
+        this.$axios.get('http://localhost:8080/api/startCache', {params})
+          .then((response) => {
+            console.log(response.data);
+            // TODO wenn cache angefangen, dann suche die letzte gefundene Station
+            let stationID = this.caches.find(x => x.id === cacheID).stationen[0].id;
+            console.log(stationID);
+            //this.$router.push({path: `/station/${stationID}`})
+            this.$router.push({path: `/station/${cacheID}/${stationID}`})
+          })
+      }
     }
   }
 </script>