Added map to CacheStart view

frontend/src/pages/CacheStart.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <q-img transition="fade"
+    <iframe transition="fade"
            class="q-mb-md "
-           :ratio="16/9"
-           src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg"
-    ></q-img>
+           height= "200px"
+           width= "100%"
+           :src= "iFrameURL" frameborder="0"></iframe>
     <div class="q-ma-md">
       <p class="text-h4">{{ cacheName }}</p>
       <p>{{ instruction }}</p>
@@ -55,7 +55,11 @@
         paused: false,
         result: null,
         params: null,
-        noStreamApiSupport: false
+        noStreamApiSupport: false,
+        lon: "",
+        lat: "",
+        stationID: [],
+        iFrameURL: ""
 
       }
     },
@@ -71,9 +75,12 @@
             const cache = response.data.find(cache => cache.id === Number(this.$route.params.cache));
             this.cacheName = cache.name;
             this.cacheID = this.$route.params.cache;
+            this.stationID = cache.stationen[0];
+            this.lon = this.stationID.longitude;
+            this.lat = this.stationID.lattitude;
+            this.iFrameURL = `http://www.se.hs-heilbronn.de:3000/api/map/lon=${this.lon}&lat=${this.lat}`
           })
       },
-
       checkStation() {
         let params = this.setParams();
         console.log(params);

frontend/src/pages/ranking.vue

@@ -36,13 +36,13 @@
 
         <q-tab-panel name="team" class=" fit">
           <q-list>
-            <q-card class="q-mb-md">
+            <q-card class="q-mb-md" v-for="(team,index) in teamRankinglist" :key="team.id">
               <q-item class="q-pr-sm ">
                 <q-item-section>
-                  <q-item-label>Single line item</q-item-label>
+                  <q-item-label><a class="text-black" style="text-decoration: none"><span>{{index+1}}. {{team.name}}</span></a></q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <span class="text-grey"> Punkte </span>
+                  <span class="text-grey">{{team.ranking_points}} Punkte </span>
                 </q-item-section>
               </q-item>
             </q-card>
@@ -68,12 +68,15 @@
     data() {
       return {
         tab: 'solo',
-        rankinglist: []
+        rankinglist: [],
+        teamRankinglist: []
       }
     },
     created: function() {
       console.log("created(): " + this.rankinglist);
+      console.log("created(): " + this.teamRankinglist);
       this.fetchRankinglist();
+      this.fetchTeamRankinglist();
     },
     methods: {
       fetchRankinglist() {
@@ -104,6 +107,35 @@
           console.log(error.config);
           this.$store.commit('dialog/NEW_MESSAGE_DIALOG', { message: msg, title: title, });
         })
+      },
+      fetchTeamRankinglist() {
+        this.$axios.get('/api/getTeamRankingList')
+          .then((response) => {
+            console.log("Team-Rankinglist: ");
+            console.log(response.data);
+            this.teamRankinglist = 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, });
+        })
       }
     }
 }