implemented progress bar

frontend/quasar.conf.js

@@ -72,9 +72,7 @@ module.exports = function (ctx) {
         'QPopupEdit',
         'QSlideTransition',
         'QToggle',
-        'QStepper',
+        'QLinearProgress'
-        'QStep',
-        'QStepperNavigation'
       ],
 
       directives: [

frontend/src/pages/MyCaches.vue

@@ -32,23 +32,21 @@
                 expand-separator
                 icon="location_on"
                 :label="startedCache.cache.name"
-                :caption=" startedCache.cache.description"
+                :caption="startedCache.cache.rankingPoints+' Punkte, '+startedCache.cache.stationen.length+' Stationen'"
               >
-                <q-item>
+                <q-item class="q-pr-sm">
-                  <q-item-section top avatar class="self-center">
+                  <q-item-section top avatar class="self-center"/>
-                  </q-item-section>
+                  <q-item-section class="">
-                  <q-item-section>
+                    <q-linear-progress rounded style="height: 15px" :value="startedCache.progress" color="primary" class=""/>
-                    <q-item-label caption>{{'Nächste Aufgabe: ' + startedCache.aktuelleStation.description }}
+                    <q-item-label class="q-pt-xs" caption>
-                    </q-item-label>
+                      {{ startedCache.progress * 100 }}% bereits geschafft
-                    <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-item class="q-pr-sm reverse">
-                  <q-btn @click="continueCache(startedCache.cache.id)" unelevated color="positive" stack icon="arrow_forward"
+                  <q-btn @click="continueCache(startedCache.cache.id)" unelevated color="positive" stack
+                         icon="arrow_forward"
                          label="Fortfahren" size="sm"/>
                 </q-item>
               </q-expansion-item>
@@ -58,7 +56,9 @@
 
         <q-tab-panel name="finishedCaches" class="fit">
           <q-list>
-            <q-card class="q-mb-md" v-for="finishedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 1)" :key="finishedCache.id">
+            <q-card class="q-mb-md"
+                    v-for="finishedCache in startedCaches.filter(cache => cache.cacheAccesDefinition.id === 1)"
+                    :key="finishedCache.id">
               <q-expansion-item
                 class=""
                 expand-separator
@@ -80,7 +80,8 @@
                   </q-item-section>
                 </q-item>
                 <q-item class="q-pr-sm reverse q-gutter-x-sm">
-                  <q-btn @click="goToReward(finishedCache.cache.id)" unelevated color="primary" stack icon="arrow_forward"
+                  <q-btn @click="goToReward(finishedCache.cache.id)" unelevated color="primary" stack
+                         icon="arrow_forward"
                          label="Belohnung ansehen" size="sm"/>
                 </q-item>
               </q-expansion-item>
@@ -104,11 +105,8 @@
       return {
         tab: 'startedCaches',
         startedCaches: [],
-        inviteMail: "",
+
-        currentTeamStatus: "Dienstag 15:00 Treffen zum Blumencache",
+        //progress: 0.4
-        teamStatus: "",
-        userName: null,
-        email: null,
       }
     },
     mounted: function () {
@@ -119,12 +117,35 @@
       },
     },
     created: function () {
-      this.fetchUserCaches();
       this.$store.commit('auth/SET_AUTHENTICATED');
-      this.$store.commit('auth/SET_USER');
+      //this.$store.commit('auth/SET_USER');
+      this.fetchUserCaches();
+
     },
     methods: {
-      fetchUserCaches: function () {
+      calculateProgress() {
+        console.log("calcProgress...")
+        console.log("this.startedCaches: ")
+        console.log(this.startedCaches)
+        // for (let startedCache of this.startedCaches) {
+        //   console.log(startedCache)
+        //   let stationCount = startedCache.cache.stationen.length;
+        //   let stationPos = 1 + startedCache.cache.stationen.findIndex(station => station.id === startedCache.aktuelleStation.id);
+        //   startedCache.progress = stationPos / stationCount;
+        //   console.log(startedCache.progress)
+        // }
+        this.startedCaches.forEach(startedCache => {
+          console.log(startedCache)
+          let stationCount = startedCache.cache.stationen.length;
+          let stationPos = 1 + startedCache.cache.stationen.findIndex(station => station.id === startedCache.aktuelleStation.id);
+          startedCache.progress = stationPos / stationCount;
+          console.log(startedCache.progress)
+        })
+        console.log("calcProgress finished.")
+        console.log(this.startedCaches)
+      },
+      fetchUserCaches() {
+        console.log("fetchCaches...")
         let token;
         if (localStorage.getItem('userToken')) {
           token = JSON.parse(localStorage.getItem('userToken')).token;
@@ -135,6 +156,7 @@
           .then((response) => {
             console.log(response.data)
             this.startedCaches = response.data;
+
           }).catch((error) => {
           // Error
           let msg;
@@ -156,7 +178,11 @@
           }
           console.log(error.config);
           this.$store.commit('dialog/NEW_MESSAGE_DIALOG', {message: msg, title: title,});
-        })
+        }).finally(() => {
+          console.log("fetchCaches... finally")
+          this.calculateProgress();
+        });
+        console.log("fetchCaches... outside")
       },
       continueCache(cacheID) {
         console.log("cacheID");
@@ -192,73 +218,6 @@
             });
         }
       },
-      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>

frontend/src/pages/Overview.vue

@@ -29,7 +29,7 @@
                 expand-separator
                 icon="location_on"
                 :label="cache.name"
-                :caption="cache.rankingPoints+' Punkte / Size '+cache.stationen.length"
+                :caption="cache.rankingPoints+' Punkte, '+cache.stationen.length+' Stationen'"
               >
                 <q-item>
                   <q-item-section top avatar class="self-center">