From fee5f4319dd0bec7d1e497651688703215cefe65 Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Tue, 2 Apr 2019 23:28:27 +0200
Subject: [PATCH 1/3] Implemented: startCache Call and logout Call, some
 improvements in controller

---
 frontend/quasar.conf.js                       |  2 +-
 frontend/src/pages/Login.vue                  | 27 ++++++++++++++-----
 frontend/src/pages/Overview.vue               | 17 ++++++++++--
 .../bugageocaching/controller/Controller.java |  9 +++++--
 4 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js
index 0528ca8..b65a837 100644
--- a/frontend/quasar.conf.js
+++ b/frontend/quasar.conf.js
@@ -103,7 +103,7 @@ module.exports = function (ctx) {
     devServer: {
       // https: true,
       port: 8081,
-      open: true // opens browser window automatically
+      open: false // opens browser window automatically
     },
 
     // animations: 'all' --- includes all animations
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 13c0770..0cc9f9b 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -100,7 +100,8 @@
           .then((response) => {
             console.log("GET/POST http://localhost:8080/api/login/ - response: " + response.data);
             //this.user.token = response.data;
-            localStorage.setItem('userToken', JSON.stringify(response));
+            localStorage.setItem('userToken', JSON.stringify(response.data));
+            //localStorage.setItem('userToken', response.data);
             this.isAuthenticated();
           })
           .catch((error) => {
@@ -110,7 +111,8 @@
       },
       isAuthenticated: function () {
         console.log("isAuthenticated()");
-        console.log(localStorage.getItem('userToken'));
+        console.log("content of localstorage: ");
+        console.log(JSON.parse(localStorage.getItem('userToken')));
         if (localStorage.getItem('userToken')) { // TODO hier muss Abfrage mit API, z.B. /api/user?token="ME" stattfinden.
           this.user.isAuthenticated = true;
         } else {
@@ -119,10 +121,23 @@
       },
       logout: function () {
         console.log("logout()");
-        console.log(localStorage.getItem('userToken'));
-        localStorage.removeItem('userToken');
-        console.log(localStorage.getItem('userToken'));
-        this.isAuthenticated()
+        console.log(JSON.parse(localStorage.getItem('userToken')));
+        this.$axios.get('http://localhost:8080/api/logout', {
+            params: {
+              token: JSON.parse(localStorage.getItem('userToken'))
+            }
+          })
+          .then((response) => {
+            console.log("GET/POST http://localhost:8080/api/logout/ - response: " + response.data);
+            localStorage.removeItem('userToken');
+            this.isAuthenticated();
+          })
+          .catch((error) => {
+          });
+        // console.log(localStorage.getItem('userToken'));
+        // localStorage.removeItem('userToken');
+        // console.log(localStorage.getItem('userToken'));
+        // this.isAuthenticated()
       },
     },
   };
diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
index 5295f00..8efbcda 100644
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@@ -50,7 +50,7 @@
                 </q-item-section>
 
                 <q-item-section side top class="self-center" >
-                  <q-btn flat unelevated stack color="positive" icon="arrow_forward" label="Starten" size="sm" style="height: 4.5rem"/>
+                  <q-btn @click="startCache(cache.id)" flat unelevated stack color="positive" icon="arrow_forward" label="Starten" size="sm" style="height: 4.5rem"/>
                 </q-item-section>
               </q-item>
             </q-card>
@@ -76,7 +76,7 @@
   export default {
     data() {
       return {
-        tab: 'map',
+        tab: 'list',
         hheight: 71.0,
         fheight: 36.0, //37
         //header: {h: '0px', w: 0}
@@ -111,6 +111,19 @@
             console.log("Caches: " + this.caches);
             this.caches = 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("Angefangen: " + response.data);
+          })
       }
     }
   }
diff --git a/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java b/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java
index a245f13..a79e8ed 100644
--- a/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java
+++ b/src/main/java/hhn/labsw/bugageocaching/controller/Controller.java
@@ -71,7 +71,8 @@ public class Controller {
       String hashedToken = BCrypt.hashpw(token, BCrypt.gensalt());
       userRepository.findByUsername(user.getUsername()).setToken(hashedToken);
       userRepository.save(userRepository.findByUsername(user.getUsername()));
-      return ResponseEntity.ok(new Gson().toJson(token));
+      //return ResponseEntity.ok(new Gson().toJson(token));
+      return ResponseEntity.ok(token);
     }
     return ResponseEntity.status(HttpStatus.BAD_GATEWAY).body(null);
   }
@@ -128,8 +129,12 @@ public class Controller {
   @RequestMapping("/api/logout")
   @ResponseBody
   boolean logout(@RequestParam String token) {
-
+//    System.out.println("logout");
     User user = userRepository.findByUsername(token.substring(0, token.indexOf("$")));
+//    System.out.println(token);
+//    System.out.println(user.getToken());
+    if (user == null || user.getToken().isEmpty() )
+      return false;
     user.setToken(null);
     userRepository.save(user);
     return true;

From 0f7a4a56e6a57d3b10f16914545a6b23425fd994 Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Thu, 4 Apr 2019 10:25:11 +0200
Subject: [PATCH 2/3] added view for Stations

---
 frontend/quasar.conf.js         |  1 +
 frontend/src/pages/Login.vue    |  7 +---
 frontend/src/pages/Overview.vue | 49 ++++++++++++++-------------
 frontend/src/pages/Station.vue  | 60 +++++++++++++++++++++++++++++++++
 frontend/src/router/routes.js   | 10 ++++++
 5 files changed, 97 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/pages/Station.vue

diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js
index b65a837..42861b5 100644
--- a/frontend/quasar.conf.js
+++ b/frontend/quasar.conf.js
@@ -63,6 +63,7 @@ module.exports = function (ctx) {
         'QSpinnerPuff',
         'QExpansionItem',
         'QParallax',
+        'QEditor',
       ],
 
       directives: [
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index 0cc9f9b..c5d83e3 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -82,7 +82,6 @@
     // },
     mounted () {
       this.isAuthenticated();
-      //this.pollData();
       console.log("mounted: initiated");
     },
     methods: {
@@ -113,7 +112,7 @@
         console.log("isAuthenticated()");
         console.log("content of localstorage: ");
         console.log(JSON.parse(localStorage.getItem('userToken')));
-        if (localStorage.getItem('userToken')) { // TODO hier muss Abfrage mit API, z.B. /api/user?token="ME" stattfinden.
+        if (localStorage.getItem('userToken')) {
           this.user.isAuthenticated = true;
         } else {
           this.user.isAuthenticated = false;
@@ -134,10 +133,6 @@
           })
           .catch((error) => {
           });
-        // console.log(localStorage.getItem('userToken'));
-        // localStorage.removeItem('userToken');
-        // console.log(localStorage.getItem('userToken'));
-        // this.isAuthenticated()
       },
     },
   };
diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
index 8efbcda..b7ff5ad 100644
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@@ -9,26 +9,16 @@
         active-bg-color="bg-grey-1"
         active-color="cyan-14"
         indicator-color="cyan-14"
-        narrow-indicator
         switch-indicator
       >
-        <q-tab name="map" label="Karte" icon="map"/>
         <q-tab name="list" label="Liste" icon="list"/>
+        <q-tab name="map" label="Karte" icon="map"/>
       </q-tabs>
       <q-separator color="grey-4"/>
     </div>
 
     <div class="col flex column">
       <q-tab-panels v-model="tab" animated swipeable class="col">
-        <q-tab-panel name="map" class="q-pa-none fit">
-          <!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
-          <!--</div>-->
-          <q-img src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg" transition="fade" class="absolute-full">
-            <template v-slot:loading>
-              <q-spinner-puff color="cyan-14" size="4em"/>
-            </template>
-          </q-img>
-        </q-tab-panel>
 
         <q-tab-panel name="list" class=" fit">
 
@@ -41,7 +31,7 @@
                   <q-icon rounded color="cyan-14" name="location_on" size="3rem"/>
                 </q-item-section>
                 <q-item-section>
-                  <q-item-label><a class="text-black" style="text-decoration: none" href="/#/CacheDetail?id=2"><span>{{ cache.name }}</span></a></q-item-label>
+                  <q-item-label><a class="text-black" style="text-decoration: none"><span>{{ cache.name }}</span></a></q-item-label>
                   <q-item-label overline>
                     <span class="text-grey">{{ cache.rankingPoints }} Punkte /</span>
                     <span class="text-grey"> Size {{ cache.stationen.length }} </span>
@@ -57,6 +47,18 @@
 
           </q-list>
         </q-tab-panel>
+
+
+        <q-tab-panel name="map" class="q-pa-none fit">
+          <!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
+          <!--</div>-->
+          <q-img src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg" transition="fade" class="absolute-full">
+            <template v-slot:loading>
+              <q-spinner-puff color="cyan-14" size="4em"/>
+            </template>
+          </q-img>
+        </q-tab-panel>
+
       </q-tab-panels>
     </div>
   </q-page>
@@ -70,15 +72,14 @@
 */
 </style>
 <script>
-  import {dom} from 'quasar'
-
-  const {height, width} = dom
+  //import {dom} from 'quasar'
+  //const {height, width} = dom
   export default {
     data() {
       return {
         tab: 'list',
-        hheight: 71.0,
-        fheight: 36.0, //37
+        // hheight: 71.0,
+        // fheight: 36.0, //37
         //header: {h: '0px', w: 0}
         caches: [],
       }
@@ -89,13 +90,13 @@
       // this.fheight = height(document.getElementById('qfooter'));
     },
     computed: {
-      mapHeight() {
-        let header = this.hheight
-        let footer = this.fheight
-        let offset = header + footer + 1;
-        console.log(offset)
-        return {minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh'};
-      },
+      // mapHeight() {
+      //   let header = this.hheight
+      //   let footer = this.fheight
+      //   let offset = header + footer + 1;
+      //   console.log(offset)
+      //   return {minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh'};
+      // },
       // computedMainStyle() {
       //   return { height: `calc( 100vh - ${this.header.h} )` };
       // }
diff --git a/frontend/src/pages/Station.vue b/frontend/src/pages/Station.vue
new file mode 100644
index 0000000..d4f3032
--- /dev/null
+++ b/frontend/src/pages/Station.vue
@@ -0,0 +1,60 @@
+<template>
+  <q-page class="q-ma-md">
+    <h4 class="text-h4">Neue Station</h4>
+    <q-editor
+      :toolbar="[
+        ['bold', 'italic', 'strike', 'underline'],
+        ['undo', 'redo']
+      ]"
+      v-model="description" min-height="10rem" />
+    <!--<q-input-->
+      <!--v-model="description"-->
+      <!--filled-->
+      <!--type="textarea"-->
+    <!--/>-->
+    <p class="text-h5 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" />
+      <q-input class="col" dense stack-label filled v-model="text" label="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>
+</template>
+
+<script>
+  export default {
+    name: "Station",
+
+    data() {
+      return {
+        description: "Rätsel, Aufgabe und Informationen zur Station.",
+        text:"v-model !!"
+      }
+    },
+    created: function() {
+    },
+    beforeMount: function() {
+    },
+    mounted: function() {
+      console.log("'id' from url: "+this.$route.params.id)
+    },
+    computed: {
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 46da100..c027592 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -19,6 +19,16 @@ const routes = [
     component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/CacheView.vue") }]
   },
+  {
+    path: "/station/",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/Station.vue") }]
+  },
+  {
+    path: "/station/:id",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/Station.vue") }]
+  },
   {
     path: "/login/",
     component: () => import("layouts/MyLayout.vue"),

From 2a459818f2ee8235ee92ee64f72be43b820e3089 Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Thu, 4 Apr 2019 15:00:53 +0200
Subject: [PATCH 3/3] some changes

---
 frontend/src/pages/Overview.vue | 23 ++++++++++++++---------
 frontend/src/pages/Station.vue  |  3 +--
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
index b7ff5ad..f9285c7 100644
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@@ -24,27 +24,32 @@
 
           <q-list>
             <q-card class="q-mb-md" v-for="cache in caches" :key="cache.id">
+            <q-expansion-item
+              class=""
+              expand-icon-toggle
+              expand-separator
+              icon="location_on"
+              :label="cache.name"
+              :caption="cache.rankingPoints+' Punkte / Size '+cache.stationen.length"
+            >
               <q-item
                 class="q-pr-sm "
               >
                 <q-item-section top avatar class="self-center">
-                  <q-icon rounded color="cyan-14" name="location_on" size="3rem"/>
+                  <!--<q-icon rounded color="cyan-14" name="location_on" size="3rem"/>-->
                 </q-item-section>
                 <q-item-section>
-                  <q-item-label><a class="text-black" style="text-decoration: none"><span>{{ cache.name }}</span></a></q-item-label>
-                  <q-item-label overline>
-                    <span class="text-grey">{{ cache.rankingPoints }} Punkte /</span>
-                    <span class="text-grey"> Size {{ cache.stationen.length }} </span>
-                  </q-item-label>
-                  <q-item-label caption>{{ cache.description.substring(0,80) }} ... </q-item-label>
+                  <q-item-label caption>{{ cache.description }}</q-item-label>
                 </q-item-section>
 
                 <q-item-section side top class="self-center" >
-                  <q-btn @click="startCache(cache.id)" flat unelevated stack color="positive" icon="arrow_forward" label="Starten" size="sm" style="height: 4.5rem"/>
                 </q-item-section>
               </q-item>
+              <q-item class="q-pr-sm reverse">
+                <q-btn @click="startCache(cache.id)" flat unelevated stack color="positive" icon="arrow_forward" label="Starten" size="sm"/>
+              </q-item>
+            </q-expansion-item>
             </q-card>
-
           </q-list>
         </q-tab-panel>
 
diff --git a/frontend/src/pages/Station.vue b/frontend/src/pages/Station.vue
index d4f3032..61c7d06 100644
--- a/frontend/src/pages/Station.vue
+++ b/frontend/src/pages/Station.vue
@@ -19,8 +19,7 @@
            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" />
-      <q-input class="col" dense stack-label filled v-model="text" label="Breitengrad" />
+      <q-input class="col" dense stack-label filled v-model="text" label="Längengrad/Breitengrad" />
       <div class="col-shrink">
         <q-btn unelevated color="primary" class="full-height" icon="my_location"/>
       </div>