From c10820d83251471f222b2d7f246ad593c810ea2d Mon Sep 17 00:00:00 2001
From: rchrist <rchrist@stud.hs-heilbronn.de>
Date: Sat, 27 Apr 2019 21:43:23 +0200
Subject: [PATCH] myProfile and myTeams MOCKUP version added

---
 frontend/quasar.conf.js        |   1 +
 frontend/src/pages/Profile.vue | 196 +++++++++++++++++++++++++++++----
 2 files changed, 176 insertions(+), 21 deletions(-)

diff --git a/frontend/quasar.conf.js b/frontend/quasar.conf.js
index 9ee4e06..1ceac6e 100644
--- a/frontend/quasar.conf.js
+++ b/frontend/quasar.conf.js
@@ -68,6 +68,7 @@ module.exports = function (ctx) {
         'QEditor',
         'QSelect',
         'QField',
+        'QBtnDropdown',
       ],
 
       directives: [
diff --git a/frontend/src/pages/Profile.vue b/frontend/src/pages/Profile.vue
index d3a76c6..44f4ff8 100644
--- a/frontend/src/pages/Profile.vue
+++ b/frontend/src/pages/Profile.vue
@@ -1,20 +1,21 @@
 <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="profile" label="Profil" icon="perm_identity"/>
-          <q-tab name="startedCaches" label="Angefangene Caches" icon="playlist_play"/>
-          <q-tab name="finishedCaches" label="Beendete Caches" icon="playlist_add_check"/>
-        </q-tabs>
+      <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="profile" label="Profil" icon="perm_identity"/>
+        <q-tab name="teams" label="Teams" 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>
 
@@ -22,6 +23,151 @@
       <q-tab-panels v-model="tab" animated swipeable class="col">
 
         <q-tab-panel name="profile" class=" fit">
+
+          <div class="row">
+            <div class="col" align="center">
+              <b>
+                Mein Nutzername
+              </b>
+            </div>
+            <div class="col" align="center">
+              BuGaCacher2019
+            </div>
+          </div>
+          <hr/>
+          <div class="row text-center">
+            <div class="col">
+              <b>
+                Meine Email
+              </b>
+            </div>
+            <div class="col" align="center">
+              muster.mail@muster.de
+            </div>
+          </div>
+          <hr/>
+          <div class="row">
+            <div class="col" align="center">
+              <b>
+                Meine Ranglistenposition
+              </b>
+            </div>
+            <div class="col" align="center">
+              1234
+            </div>
+          </div>
+          <hr/>
+          <div align="center">
+            <b>
+              Meine Teams
+            </b>
+          </div>
+          <br/>
+          <div class="col" align="center">
+            BuGa19Community
+            <br/>
+            GeoCachingHeilbronn
+            <br/>
+            RunForTheFlowers
+          </div>
+          <br/>
+          <div align="center">
+            <b>
+              Offene Teameinladungen
+            </b>
+          </div>
+          <br/>
+          <div class="col" align="center">
+            HNcachingHN
+          </div>
+        </q-tab-panel>
+        <q-tab-panel name="teams">
+            <div class="q-pa-md" align="center">
+              <q-btn-dropdown color="primary" label="BuGa19Community" size="30px">
+                <q-list>
+                  <q-item clickable v-close-popup>
+                    <q-item-section>
+                      <q-item-label>BuGa19Community</q-item-label>
+                    </q-item-section>
+                  </q-item>
+
+                  <q-item clickable v-close-popup>
+                    <q-item-section>
+                      <q-item-label>GeoCachingHeilbronn</q-item-label>
+                    </q-item-section>
+                  </q-item>
+
+                  <q-item clickable v-close-popup>
+                    <q-item-section>
+                      <q-item-label>RunForTheFlowers</q-item-label>
+                    </q-item-section>
+                  </q-item>
+
+                  <q-item clickable v-close-popup>
+                    <q-item-section>
+                      <q-item-label>HNcachingHN</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+            </div>
+          <hr/>
+          <div align="center">
+            <b>
+              Teammitglieder
+            </b>
+          </div>
+          <br/>
+          <div align="center">
+            BuGaCacher2019
+            <br/>
+            Max
+            <br/>
+            Timo
+            <br/>
+            Katharina
+            <br/>
+            Michael
+            <br/>
+            Robin
+          </div>
+          <br/>
+          <div class="row">
+            <div class="col" align="center">
+              <q-input outlined filled stack-label v-model="inviteMail"
+                       type="text" label="Email des Nutzers der ins Team aufgenommen werden soll"
+                       :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
+            </div>
+            <div class="col" align="center">
+              <q-btn label="Einladung versenden"
+                     color="primary"
+                     type="submit"
+                     size="22px"/>
+            </div>
+          </div>
+          <hr/>
+          <div align="center">
+            <b>
+              Aktueller Teamstatus
+            </b>
+          </div>
+          <br/>
+          <div>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil praesentium molestias a adipisci,
+            dolore vitae odit, quidem consequatur optio voluptates asperiores pariatur eos numquam rerum delectus
+            commodi perferendis voluptate?
+          </div>
+          <br/>
+          <q-input outlined filled stack-label v-model="teamStatus"
+                   type="text" label="Neuer Teamstatus"/>
+          <br/>
+          <div align="center">
+            <q-btn label="Teamstatus aktualisieren"
+                   size="20px"
+                   color="primary"
+                   type="submit"/>
+          </div>
+
         </q-tab-panel>
 
         <q-tab-panel name="startedCaches" class=" fit">
@@ -76,7 +222,9 @@
                     <!--<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-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">
@@ -107,6 +255,8 @@
       return {
         tab: 'profile',
         startedCaches: [],
+        inviteMail: "",
+        teamStatus: "",
       }
     },
     mounted: function () {
@@ -116,17 +266,17 @@
         return this.$store.getters['auth/GET_ADMINSTATE'];
       }
     },
-    created: function() {
+    created: function () {
       this.fetchUserCaches();
       this.$store.commit('auth/SET_AUTHENTICATED');
       this.$store.commit('auth/SET_USER');
     },
     methods: {
-      fetchUserCaches: function() {
+      fetchUserCaches: function () {
         const token = JSON.parse(localStorage.getItem('userToken')).token;
-        this.$axios.get('/api/getMyCaches', { params: {token}} )
+        this.$axios.get('/api/getMyCaches', {params: {token}})
           .then((response) => {
-          this.startedCaches = response.data;
+            this.startedCaches = response.data;
           }).catch((error) => {
           // Error
           let msg;
@@ -147,11 +297,15 @@
             console.log('Error', error.message);
           }
           console.log(error.config);
-          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: msg, title: title, });
+          this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
         })
       },
       continueCache(cacheID) {
-      }
+      },
+      validateEmail(email) {
+        var 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());
+      },
     }
   }
 </script>