design of profl

frontend/quasar.conf.js

@@ -69,6 +69,9 @@ module.exports = function (ctx) {
         'QSelect',
         'QField',
         'QBtnDropdown',
+        'QPopupEdit',
+        'QSlideTransition',
+        'QToggle',
       ],
 
       directives: [

frontend/src/pages/Profile.vue

@@ -12,7 +12,7 @@
         switch-indicator
       >
         <q-tab name="profile" label="Profil" icon="perm_identity"/>
-        <q-tab name="teams" label="Teams" icon="group"/>
+        <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>
@@ -23,62 +23,15 @@
       <q-tab-panels v-model="tab" animated swipeable class="col">
 
         <q-tab-panel name="profile" class=" fit">
-
+          <p class="text-h5"> Persönliche Daten </p>
-          <div class="row">
+          <q-table
-            <div class="col" align="center">
+            :data="data"
-              <b>
+            :columns="columns"
-                Mein Nutzername
+            row-key="name"
-              </b>
+            hide-header
-            </div>
+            hide-bottom
-            <div id="username" class="col" align="center">
+            table-class="my-custom"
-              <span v-html="userNameContent"></span>
+          />
-            </div>
-          </div>
-          <hr/>
-          <div class="row text-center">
-            <div class="col">
-              <b>
-                Meine Email
-              </b>
-            </div>
-            <div class="col" align="center">
-              <span v-html="emailContent"></span>
-            </div>
-          </div>
-          <hr/>
-          <div class="row">
-            <div class="col" align="center">
-              <b>
-                Meine Ranglistenposition
-              </b>
-            </div>
-            <div class="col" align="center">
-              <span v-html="userRanking"></span>
-            </div>
-          </div>
-          <hr/>
-          <div class="row">
-            <div class="col" align="center">
-              <b>
-                Mein Team
-              </b>
-            </div>
-            <div class="col" align="center">
-              <span v-html="teamName"></span>
-            </div>
-          </div>
-          <hr/>
-          <div class="row">
-            <div class="col" align="center">
-              <b>
-                Teamranglistenposition
-              </b>
-            </div>
-            <div class="col" align="center">
-              <span v-html="teamRanking"></span>
-            </div>
-          </div>
-          <hr/>
         </q-tab-panel>
         <q-tab-panel name="teams">
           <div class="q-pa-md" align="center">
@@ -110,58 +63,36 @@
               </q-list>
             </q-btn-dropdown>
           </div>
-          <hr/>
+          <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">
-            <b>
+            <q-btn label="Einladung versenden"
-              Teammitglieder
+                   color="primary"
-            </b>
+                   type="submit"/>
-          </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"
-                       :rules="[val=>validateEmail(val)||'Bitte Email verwenden']"/>
-            </div>
-            <div class="col" align="center">
-              <q-btn label="Einladung versenden"
-                     color="primary"
-                     type="submit"/>
-            </div>
-          </div>
-          <hr/>
-          <div align="center">
-            <b>
-              Aktueller Teamstatus
-            </b>
-          </div>
-          <br/>
-          <div>
-            Dienstag 15:00 Treffen zum Blumencache.
           </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"/>
+                   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>
-
         </q-tab-panel>
 
         <q-tab-panel name="startedCaches" class=" fit">
@@ -236,10 +167,17 @@
 </template>
 
 <style>
-  /*
+  .my-custom th {
-    .my-list-card-item
+    color: #027BE3 !important;
-      padding-left: 8px
+  }
-  */
+
+  .my-custom tr {
+    color: #027BE3 !important;
+  }
+
+  .my-custom td {
+    color: #027BE3 !important;
+  }
 </style>
 <script>
   //import {dom} from 'quasar'
@@ -250,13 +188,102 @@
         tab: 'profile',
         startedCaches: [],
         inviteMail: "",
+        currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
         teamStatus: "",
-        userNameContent: null,
+        userName: null,
-        emailContent: 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 () {
@@ -270,12 +297,17 @@
       this.fetchUserCaches();
       this.$store.commit('auth/SET_AUTHENTICATED');
       this.$store.commit('auth/SET_USER');
-      this.userNameContent = JSON.parse(localStorage.getItem('userToken')).name;
+      this.userName = JSON.parse(localStorage.getItem('userToken')).name;
-      this.emailContent = JSON.parse(localStorage.getItem('userMail'));
+      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 () {
@@ -314,7 +346,7 @@
       },
       getPersonalRanking() {
         const name = JSON.parse(localStorage.getItem('userToken')).name;
-        JSON.stringify(name);
+        console.log(JSON.parse(localStorage.getItem('userToken')).name);
         this.$axios.get('/api/hello', {params: {name}})
           .then((response) => {
             this.userRanking = response.data;
@@ -343,11 +375,37 @@
         })
       },
       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){
+      dropDownSelectItem(item) {
-        if(item === 'team'){
+        if (item === 'team') {
           this.dropDownSelectedItem = this.teamName;
         } else {
           this.dropDownSelectedItem = item;

src/main/java/hhn/labsw/bugageocaching/controller/Controller.java

@@ -807,6 +807,7 @@ public class Controller {
     return ResponseEntity.status(200).body(new Gson().toJson(teamStatus));
   }
 
+  @CrossOrigin(origins = "http://localhost:8081") // only for dev purpose
   @RequestMapping("/api/getTeam")
   public ResponseEntity getTeam(@RequestParam String name){
     ResponseEntity responseEntity = FinderUtil.findTeamByName(name);
@@ -814,6 +815,7 @@ public class Controller {
     return responseEntity;
   }
 
+  @CrossOrigin(origins = "http://localhost:8081") // only for dev purpose
   @RequestMapping("/api/getTeamMembers")
   public ResponseEntity getTeamMembers(@RequestParam String name){
     return FinderUtil.findTeammemberByTeamName(name);