From 52b04a90a2a74926bd53e762f9936d5a7c521f12 Mon Sep 17 00:00:00 2001
From: rchrist <rchrist@stud.hs-heilbronn.de>
Date: Mon, 6 May 2019 17:46:26 +0200
Subject: [PATCH] some work at profile component

---
 frontend/src/pages/Profile.vue  |  88 ++++++++++++++---------
 frontend/src/pages/Register.vue | 120 +++++++++++++++++---------------
 2 files changed, 119 insertions(+), 89 deletions(-)

diff --git a/frontend/src/pages/Profile.vue b/frontend/src/pages/Profile.vue
index c588040..e3f4dd4 100644
--- a/frontend/src/pages/Profile.vue
+++ b/frontend/src/pages/Profile.vue
@@ -61,35 +61,45 @@
               </q-list>
             </q-btn-dropdown>
           </div>
-          <p class="text-h5"> Teammitglieder </p>
-          <q-table
-            :data="teamData"
-            :columns="teamColumns"
-            row-key="name"
-            table-class="my-custom"
-            hide-bottom
-            :pagination.sync="pagination"
-          />
-          <br/>
-          <p class="text-h5"> Einladungen </p>
-          <q-input outlined filled stack-label v-model="inviteMail"
-                   type="text" label="Email des Nutzers"
-                   :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
-          <div align="center">
-            <q-btn label="Einladung versenden"
-                   color="primary"
-                   type="submit"/>
+          <div v-show="boolMyTeam">
+            <p class="text-h5"> Teammitglieder </p>
+            <q-table
+              :data="teamData"
+              :columns="teamColumns"
+              row-key="name"
+              table-class="my-custom"
+              hide-bottom
+              :pagination.sync="pagination"
+            />
+            <br/>
+            <p class="text-h5"> Einladungen </p>
+            <q-input outlined filled stack-label v-model="inviteMail"
+                     type="text" label="Email des Nutzers"
+                     :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
+            <div align="center">
+              <q-btn label="Einladung versenden"
+                     color="primary"
+                     type="submit"/>
+            </div>
+            <br/>
+            <p class="text-h5"> Teamstatus </p>
+            <p>{{currentTeamStatus}}</p>
+            <q-input outlined filled stack-label v-model="teamStatus"
+                     type="text" label="Neuer Teamstatus"
+                     :rules="[val=>val.length<=160||'Status zu lang!']"/>
+            <div align="center">
+              <q-btn label="Teamstatus aktualisieren"
+                     color="primary"
+                     type="submit"/>
+            </div>
           </div>
-          <br/>
-          <p class="text-h5"> Teamstatus </p>
-          <p>{{currentTeamStatus}}</p>
-          <q-input outlined filled stack-label v-model="teamStatus"
-                   type="text" label="Neuer Teamstatus"
-                   :rules="[val=>val.length<=160||'Status zu lang!']"/>
-          <div align="center">
-            <q-btn label="Teamstatus aktualisieren"
-                   color="primary"
-                   type="submit"/>
+          <div v-show="boolInvites">
+
+          </div>
+          <div v-show="boolCreateTeam">
+            <q-input outlined filled stack-label v-model="newTeamName" type="text"
+                     label="Teamname eingeben"
+                     :rules="[val=>val.length>=2||'Name muss mindestens 5 Zeichen lang sein!']"/>
           </div>
         </q-tab-panel>
 
@@ -119,7 +129,6 @@
     data() {
       return {
         tab: 'profile',
-        startedCaches: [],
         inviteMail: "",
         currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
         teamStatus: "",
@@ -129,6 +138,10 @@
         teamName: null,
         teamRanking: null,
         dropDownSelectedItem: null,
+        boolMyTeam: true,
+        boolInvites: false,
+        boolCreateTeam: false,
+        newTeamName: "",
         columns: [
           {
             name: 'desc',
@@ -233,12 +246,12 @@
       this.data[0].userData = this.userName;
       this.email = JSON.parse(localStorage.getItem('userMail'));
       this.data[1].userData = this.email;
-      this.getPersonalRanking();
+      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.teamRanking = 2019;
       this.data[4].userData = this.teamRanking;
     },
     methods: {
@@ -248,7 +261,7 @@
       },
       getPersonalRanking() {
         const token = JSON.parse(localStorage.getItem('userToken')).token;
-        this.$axios.get('/api/getRankingPlace', {params: {token}})
+        this.$axios.get('/api/getRankingPlace', {token})
           .then((response) => {
             this.userRanking = response.data;
             console.log(response.data);
@@ -308,8 +321,19 @@
       dropDownSelectItem(item) {
         if (item === 'team') {
           this.dropDownSelectedItem = this.teamName;
+          this.boolMyTeam = true;
+          this.boolInvites = false;
+          this.boolCreateTeam = false;
+        } else if (item === 'Offene Teameinladungen') {
+          this.dropDownSelectedItem = item;
+          this.boolMyTeam = false;
+          this.boolInvites = true;
+          this.boolCreateTeam = false;
         } else {
           this.dropDownSelectedItem = item;
+          this.boolMyTeam = false;
+          this.boolInvites = false;
+          this.boolCreateTeam = true;
         }
       },
     }
diff --git a/frontend/src/pages/Register.vue b/frontend/src/pages/Register.vue
index a1d5b2c..93f0e8f 100644
--- a/frontend/src/pages/Register.vue
+++ b/frontend/src/pages/Register.vue
@@ -7,57 +7,62 @@
             <div class="">
               <div class="" style="max-width: 440px">
                 <q-input outlined filled stack-label v-model="user.name" type="text"
-                         label="Nutzername eingeben" :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/>
+                         label="Nutzername eingeben"
+                         :rules="[val=>val.length>=2||'Name muss mindestens 2 Zeichen lang sein!']"/>
               </div>
             </div>
           </div>
-            <div class="col">
-              <div class="">
-                <div class="" style="max-width: 440px">
-                  <q-input outlined filled stack-label v-model="user.email" type="text" label="Email eingeben" :rules="[val=>validateEmail(val)||'Email muss valide sein']"/>
-                </div>
+          <div class="col">
+            <div class="">
+              <div class="" style="max-width: 440px">
+                <q-input outlined filled stack-label v-model="user.email" type="text" label="Email eingeben"
+                         :rules="[val=>validateEmail(val)||'Email muss valide sein']"/>
               </div>
             </div>
-            <div class="col">
-              <div class="">
-                <div class="" style="max-width: 440px">
-                  <q-input outlined filled stack-label v-model="user.checkemail" type="text"
-                           label="Email erneut eingeben" placeholer="Email" :rules="[val=>val===user.email||'Email stimmt nicht überein']"/>
-                </div>
+          </div>
+          <div class="col">
+            <div class="">
+              <div class="" style="max-width: 440px">
+                <q-input outlined filled stack-label v-model="user.checkemail" type="text"
+                         label="Email erneut eingeben" placeholer="Email"
+                         :rules="[val=>val===user.email||'Email stimmt nicht überein']"/>
               </div>
             </div>
-            <div class="col">
-              <div class="">
-                <div class="" style="max-width: 440px">
-                  <q-input outlined filled stack-label v-model="user.password" type="password"
-                           label="Passwort eingeben" :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
-                </div>
+          </div>
+          <div class="col">
+            <div class="">
+              <div class="" style="max-width: 440px">
+                <q-input outlined filled stack-label v-model="user.password" type="password"
+                         label="Passwort eingeben"
+                         :rules="[val=>val.length>=8||'Passwort muss mindestens 8 Zeichen lang sein!']"/>
               </div>
             </div>
-            <div class="col">
-              <div class="">
-                <div class="" style="max-width: 440px">
-                  <q-input outlined filled stack-label v-model="user.checkpassword" type="password"
-                           label="Passwort erneut eingeben" :rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
-                </div>
+          </div>
+          <div class="col">
+            <div class="">
+              <div class="" style="max-width: 440px">
+                <q-input outlined filled stack-label v-model="user.checkpassword" type="password"
+                         label="Passwort erneut eingeben"
+                         :rules="[val=>val===user.password||'Passwort stimmt nicht überein']"/>
               </div>
             </div>
-            <div class="col">
-              <div class="">
-                <div class="" style="max-width: 440px">
-                  <q-btn
-                    :disabled="!validationSuccesful"
-                    label="Registrieren"
-                    color="primary"
-                    class="full-width"
-                    @click="register()"
-                    unelevated
-                  />
-                </div>
+          </div>
+          <div class="col">
+            <div class="">
+              <div class="" style="max-width: 440px">
+                <q-btn
+                  :disabled="!validationSuccesful"
+                  label="Registrieren"
+                  color="primary"
+                  class="full-width"
+                  @click="register()"
+                  unelevated
+                />
               </div>
             </div>
           </div>
         </div>
+      </div>
     </form>
   </div>
 </template>
@@ -65,23 +70,23 @@
 <script>
   export default {
     data() {
-      return{
+      return {
         user: {
-          name:"",
-          email:"",
-          checkemail:"",
+          name: "",
+          email: "",
+          checkemail: "",
           password: "",
           checkpassword: "",
         },
       }
     },
     computed: {
-      validationSuccesful(){
-        if(this.user.name.length>=2
-          &&this.validateEmail(this.user.email)
-          &&this.user.email===this.user.checkemail
-          &&this.user.password.length>=8
-          &&this.user.password===this.user.checkpassword){
+      validationSuccesful() {
+        if (this.user.name.length >= 2
+          && this.validateEmail(this.user.email)
+          && this.user.email === this.user.checkemail
+          && this.user.password.length >= 8
+          && this.user.password === this.user.checkpassword) {
           return true;
         }
         return false;
@@ -97,7 +102,7 @@
       },
       register: function () {
 
-        if(this.user.email===this.user.checkemail&&this.user.password===this.user.checkpassword){
+        if (this.user.email === this.user.checkemail && this.user.password === this.user.checkpassword) {
           const data = {
             name: this.user.name,
             password: this.user.password,
@@ -109,18 +114,19 @@
               }
             ]
           };
-
-          console.log("POST /api/register/ - json: " + JSON.stringify(data));
           const token = JSON.parse(localStorage.getItem('registerToken')).token;
-          this.$axios.post(process.env.USER_API+'/account/register', data,{
+          this.$axios.post(process.env.USER_API + '/account/register', data, {
             headers: {
               'Authorization': 'Bearer ' + token,
             }
           })
             .then((response) => {
-              console.log(response.data);
-              if(response.status === 201){
-                this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: "Deine Registrierung war erfolgreich!", title: "Registrierungsprozess", color: "blue"});
+              if (response.status === 201) {
+                this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
+                  message: "Deine Registrierung war erfolgreich!",
+                  title: "Registrierungsprozess",
+                  color: "blue"
+                });
               }
             })
             .catch((error) => {
@@ -147,12 +153,12 @@
             })
         } else {
 
-          if(this.user.email!=this.user.checkemail) {
+          if (this.user.email != this.user.checkemail) {
             this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
               message: "Email stimmt nicht überein",
               title: "Fehler",
             });
-          } else if (this.user.password!=this.user.checkpassword){
+          } else if (this.user.password != this.user.checkpassword) {
             this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {
               message: "Passwort stimmt nicht überein",
               title: "Fehler",
@@ -169,7 +175,7 @@
 
         console.log("GET /api/login/ - json: " + JSON.stringify(logindata));
 
-        this.$axios.post(process.env.USER_API+'/account/login', logindata)
+        this.$axios.post(process.env.USER_API + '/account/login', logindata)
           .then((response) => {
             localStorage.setItem('registerToken', JSON.stringify(response.data));
           })
@@ -193,7 +199,7 @@
               message = error.message;
             }
             console.log(error.config);
-            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: message, title: header, });
+            this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: message, title: header,});
           })
       },
     },