From 6f4789fff0b8304c6319cb133331e66d73d4f6c0 Mon Sep 17 00:00:00 2001
From: Timo Volkmann <volkmann@stud.hs-heilbronn.de>
Date: Tue, 30 Apr 2019 16:45:27 +0200
Subject: [PATCH] fixed login & separated profile from mycaches

---
 frontend/src/layouts/MyLayout.vue |  16 +-
 frontend/src/pages/Login.vue      |   5 +-
 frontend/src/pages/MyCaches.vue   | 347 ++++++++++++++++++++++++++++++
 frontend/src/pages/Profile.vue    | 107 ---------
 frontend/src/router/routes.js     |   5 +
 5 files changed, 370 insertions(+), 110 deletions(-)
 create mode 100644 frontend/src/pages/MyCaches.vue

diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index f677cad..943c3f7 100644
--- a/frontend/src/layouts/MyLayout.vue
+++ b/frontend/src/layouts/MyLayout.vue
@@ -69,7 +69,21 @@
             <q-icon name="map"/>
           </q-item-section>
           <q-item-section>
-            <q-item-label>Caches</q-item-label>
+            <q-item-label>Alle Caches</q-item-label>
+          </q-item-section>
+        </q-item>
+        <q-item
+          clickable
+          class="text-primary"
+          v-ripple
+          tag="a"
+          to="/mycaches"
+        >
+          <q-item-section avatar>
+            <q-icon name="map"/>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label>Meine Caches</q-item-label>
           </q-item-section>
         </q-item>
         <q-item
diff --git a/frontend/src/pages/Login.vue b/frontend/src/pages/Login.vue
index ceedb71..9ec6a11 100644
--- a/frontend/src/pages/Login.vue
+++ b/frontend/src/pages/Login.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="q-pa-md">
-    <form class="login" @submit.prevent="login">
+    <form class="login">
       <div class="q-pa-md">
         <div class="column q-gutter-lg" style="">
           <div class="col">
@@ -29,7 +29,7 @@
                   label="Login"
                   color="primary"
                   class="full-width"
-                  type="submit"
+                  @click="login"
                   unelevated
                 >
                   <template v-slot:loading>
@@ -87,6 +87,7 @@
     },
     methods: {
       login: function () {
+        console.log("login called");
         this.loading = true;
         const data = {
           email: this.user.email,
diff --git a/frontend/src/pages/MyCaches.vue b/frontend/src/pages/MyCaches.vue
new file mode 100644
index 0000000..9f39752
--- /dev/null
+++ b/frontend/src/pages/MyCaches.vue
@@ -0,0 +1,347 @@
+<template>
+  <q-page class="column no-wrap">
+    <div class="bg-red col col-shrink" style="">
+      <q-tabs
+        v-model="tab"
+        class="bg-grey-2"
+        inline-label
+        align="justify"
+        active-bg-color="bg-grey-1"
+        active-color="cyan-14"
+        indicator-color="cyan-14"
+        switch-indicator
+      >
+        <q-tab name="startedCaches" label="Angefangene Caches" icon="playlist_play"/>
+        <q-tab name="finishedCaches" label="Beendete Caches" icon="playlist_add_check"/>
+      </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="startedCaches" class=" fit">
+          <q-list>
+            <q-card
+              class="q-mb-md"
+              v-for="startedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 0)"
+              :key="startedCache.id"
+            >
+              <q-expansion-item
+                class=""
+                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-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="continueCache(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.filter(cache => cache.cacheAccesDefinition.id === 1)" :key="startedCache.id">
+              <q-expansion-item
+                class=""
+                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>
+    </div>
+  </q-page>
+
+</template>
+
+<style>
+  .my-custom th {
+    color: #027BE3 !important;
+  }
+
+  .my-custom tr {
+    color: #027BE3 !important;
+  }
+
+  .my-custom td {
+    color: #027BE3 !important;
+  }
+</style>
+<script>
+  //import {dom} from 'quasar'
+  //const {height, width} = dom
+  export default {
+    data() {
+      return {
+        tab: 'startedCaches',
+        startedCaches: [],
+        inviteMail: "",
+        currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
+        teamStatus: "",
+        userName: null,
+        email: null,
+        userRanking: null,
+        teamName: null,
+        teamRanking: null,
+        dropDownSelectedItem: null,
+        columns: [
+          {
+            name: 'desc',
+            required: true,
+            align: 'left',
+            field: row => row.name,
+            format: val => `${val}`,
+          },
+          {
+            name: 'userData',
+            required: true,
+            align: 'left',
+            field: 'userData',
+          }
+        ],
+        data: [
+          {
+            name: 'Mein Nutzername',
+            userData: this.userName,
+          },
+          {
+            name: 'Meine Email',
+            userData: this.email,
+          },
+          {
+            name: 'Meine Ranglistenposition',
+            userData: this.userRanking,
+          },
+          {
+            name: 'Mein Team',
+            userData: this.teamName,
+          },
+          {
+            name: 'Teamranglistenposition',
+            userData: this.teamRanking,
+          },
+        ],
+        teamColumns: [
+          {
+            name: 'desc',
+            label: 'Benutzername',
+            required: true,
+            align: 'left',
+            field: row => row.name,
+            format: val => `${val}`,
+          },
+          {
+            name: 'ranking',
+            label: 'Solo-Ranglistenpunkte',
+            required: true,
+            align: 'left',
+            field: 'ranking',
+            sortable: true,
+          }
+        ],
+        teamData: [
+          {
+            name: 'BuGaCacher2019',
+            ranking: 10,
+          },
+          {
+            name: 'Max',
+            ranking: 5,
+          },
+          {
+            name: 'Timo',
+            ranking: 4,
+          },
+          {
+            name: 'Katharina',
+            ranking: 3,
+          },
+          {
+            name: 'Michael',
+            ranking: 2,
+          },
+          {
+            name: 'Robin',
+            ranking: 1,
+          },
+        ],
+        pagination: {
+          sortBy: 'name',
+          descending: false,
+          page: 1,
+          rowsPerPage: 10
+          // rowsNumber: xx if getting data from a server
+        },
+      }
+    },
+    mounted: function () {
+    },
+    computed: {
+      hasAdminState() {
+        return this.$store.getters['auth/GET_ADMINSTATE'];
+      },
+    },
+    created: function () {
+      this.fetchUserCaches();
+      this.$store.commit('auth/SET_AUTHENTICATED');
+      this.$store.commit('auth/SET_USER');
+      this.userName = JSON.parse(localStorage.getItem('userToken')).name;
+      this.data[0].userData = this.userName;
+      this.email = JSON.parse(localStorage.getItem('userMail'));
+      this.data[1].userData = this.email;
+      this.userRanking = "1234";
+      this.data[2].userData = this.userRanking;
+      this.teamName = "BuGa19Community";
+      this.data[3].userData = this.teamName;
+      this.dropDownSelectedItem = this.teamName;
+      this.teamRanking = "2019";
+      this.data[4].userData = this.teamRanking;
+    },
+    methods: {
+      fetchUserCaches: function () {
+        let token;
+        if (localStorage.getItem('userToken')) {
+          token = JSON.parse(localStorage.getItem('userToken')).token;
+        } else {
+          return;
+        }
+        this.$axios.get('/api/getMyCaches', {params: {token}})
+          .then((response) => {
+            this.startedCaches = response.data;
+          }).catch((error) => {
+          // Error
+          let msg;
+          let title;
+          if (error.response) {
+            // The request was made and the server responded with a status code
+            title = "Problem with response!";
+            msg = error.response;
+          } else if (error.request) {
+            // The request was made but no response was received
+            title = "Problem with request!";
+            msg = "Error occured due to wrong server request!"
+            console.log(error.request);
+          } else {
+            // Something happened in setting up the request that triggered an Error
+            title = "Error";
+            msg = error.message;
+            console.log('Error', error.message);
+          }
+          console.log(error.config);
+          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
+        })
+      },
+      continueCache(cacheID) {
+      },
+      validateEmail(email) {
+        let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return re.test(String(email).toLowerCase());
+      },
+      getPersonalRanking() {
+        const name = JSON.parse(localStorage.getItem('userToken')).name;
+        console.log(JSON.parse(localStorage.getItem('userToken')).name);
+        this.$axios.get('/api/hello', {params: {name}})
+          .then((response) => {
+            this.userRanking = response.data;
+            console.log(response.data);
+          }).catch((error) => {
+          // Error
+          let msg;
+          let title;
+          if (error.response) {
+            // The request was made and the server responded with a status code
+            title = "Problem with response!";
+            msg = error.response;
+          } else if (error.request) {
+            // The request was made but no response was received
+            title = "Problem with request!";
+            msg = "Error occured due to wrong server request!"
+            console.log(error.request);
+          } else {
+            // Something happened in setting up the request that triggered an Error
+            title = "Error";
+            msg = error.message;
+            console.log('Error', error.message);
+          }
+          console.log(error.config);
+          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
+        })
+      },
+      getTeamData() {
+        const userName = {name: JSON.parse(localStorage.getItem('userToken')).name};
+        this.$axios.get('/api/getTeam', {params: userName})
+          .then(response => {
+            console.log("getTeam: " + response);
+          }).catch((error) => {
+          // Error
+          let msg;
+          let title;
+          if (error.response) {
+            // The request was made and the server responded with a status code
+            title = "Problem with response!";
+            msg = error.response;
+          } else if (error.request) {
+            // The request was made but no response was received
+            title = "Problem with request!";
+            msg = "Error occured due to wrong server request!"
+            console.log(error.request);
+          } else {
+            // Something happened in setting up the request that triggered an Error
+            title = "Error";
+            msg = error.message;
+            console.log('Error', error.message);
+          }
+          console.log(error.config);
+          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
+        })
+
+      },
+
+      dropDownSelectItem(item) {
+        if (item === 'team') {
+          this.dropDownSelectedItem = this.teamName;
+        } else {
+          this.dropDownSelectedItem = item;
+        }
+      },
+    }
+  }
+</script>
diff --git a/frontend/src/pages/Profile.vue b/frontend/src/pages/Profile.vue
index c87fa1d..75f3199 100644
--- a/frontend/src/pages/Profile.vue
+++ b/frontend/src/pages/Profile.vue
@@ -13,8 +13,6 @@
       >
         <q-tab name="profile" label="Profil" icon="perm_identity"/>
         <q-tab name="teams" label="Team" icon="group"/>
-        <q-tab name="startedCaches" label="Angefangene Caches" icon="playlist_play"/>
-        <q-tab name="finishedCaches" label="Beendete Caches" icon="playlist_add_check"/>
       </q-tabs>
       <q-separator color="grey-4"/>
     </div>
@@ -95,75 +93,6 @@
           </div>
         </q-tab-panel>
 
-        <q-tab-panel name="startedCaches" class=" fit">
-          <q-list>
-            <q-card
-              class="q-mb-md"
-              v-for="startedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 0)"
-              :key="startedCache.id"
-            >
-              <q-expansion-item
-                class=""
-
-                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="continueCache(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>
     </div>
   </q-page>
@@ -298,7 +227,6 @@
       },
     },
     created: function () {
-      this.fetchUserCaches();
       this.$store.commit('auth/SET_AUTHENTICATED');
       this.$store.commit('auth/SET_USER');
       this.userName = JSON.parse(localStorage.getItem('userToken')).name;
@@ -314,41 +242,6 @@
       this.data[4].userData = this.teamRanking;
     },
     methods: {
-      fetchUserCaches: function () {
-        let token;
-        if (localStorage.getItem('userToken')) {
-          token = JSON.parse(localStorage.getItem('userToken')).token;
-        } else {
-          return;
-        }
-        this.$axios.get('/api/getMyCaches', {params: {token}})
-          .then((response) => {
-            this.startedCaches = response.data;
-          }).catch((error) => {
-          // Error
-          let msg;
-          let title;
-          if (error.response) {
-            // The request was made and the server responded with a status code
-            title = "Problem with response!";
-            msg = error.response;
-          } else if (error.request) {
-            // The request was made but no response was received
-            title = "Problem with request!";
-            msg = "Error occured due to wrong server request!"
-            console.log(error.request);
-          } else {
-            // Something happened in setting up the request that triggered an Error
-            title = "Error";
-            msg = error.message;
-            console.log('Error', error.message);
-          }
-          console.log(error.config);
-          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
-        })
-      },
-      continueCache(cacheID) {
-      },
       validateEmail(email) {
         let re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
         return re.test(String(email).toLowerCase());
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index 79fa81c..6a39f45 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -75,6 +75,11 @@ const routes = [
       component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/Profile.vue") }]
   },
+  {
+   path: "/mycaches/",
+      component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/MyCaches.vue") }]
+  },
   {
     path: "/register/",
     component: () => import("layouts/MyLayout.vue"),