From 74f664e2ba424a109fedd8d15283f5ff6009dfd2 Mon Sep 17 00:00:00 2001
From: Katharina Will <kwill@stud.hs-heilbronn.de>
Date: Mon, 8 Apr 2019 13:09:16 +0200
Subject: [PATCH] Implemented view of rankinglist

---
 frontend/src/layouts/MyLayout.vue |  3 +-
 frontend/src/pages/Overview.vue   | 26 ++++-----
 frontend/src/pages/ranking.vue    | 95 +++++++++++++++++++++++++++++++
 frontend/src/router/routes.js     |  5 ++
 4 files changed, 112 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/pages/ranking.vue

diff --git a/frontend/src/layouts/MyLayout.vue b/frontend/src/layouts/MyLayout.vue
index 82e09e3..c262338 100644
--- a/frontend/src/layouts/MyLayout.vue
+++ b/frontend/src/layouts/MyLayout.vue
@@ -59,11 +59,10 @@
         </q-item>
         <q-item
           clickable
-          disable
           class="text-primary"
           v-ripple
           tag="a"
-          to="/"
+          to="/ranking"
         >
           <q-item-section avatar>
             <q-icon name="list"/>
diff --git a/frontend/src/pages/Overview.vue b/frontend/src/pages/Overview.vue
index 5295f00..c45872f 100644
--- a/frontend/src/pages/Overview.vue
+++ b/frontend/src/pages/Overview.vue
@@ -12,26 +12,15 @@
         narrow-indicator
         switch-indicator
       >
-        <q-tab name="map" label="Karte" icon="map"/>
         <q-tab name="list" label="Liste" icon="list"/>
+        <q-tab name="map" label="Karte" icon="map"/>
       </q-tabs>
       <q-separator color="grey-4"/>
     </div>
 
     <div class="col flex column">
       <q-tab-panels v-model="tab" animated swipeable class="col">
-        <q-tab-panel name="map" class="q-pa-none fit">
-          <!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
-          <!--</div>-->
-          <q-img src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg" transition="fade" class="absolute-full">
-            <template v-slot:loading>
-              <q-spinner-puff color="cyan-14" size="4em"/>
-            </template>
-          </q-img>
-        </q-tab-panel>
-
         <q-tab-panel name="list" class=" fit">
-
           <q-list>
             <q-card class="q-mb-md" v-for="cache in caches" :key="cache.id">
               <q-item
@@ -48,15 +37,22 @@
                   </q-item-label>
                   <q-item-label caption>{{ cache.description.substring(0,80) }} ... </q-item-label>
                 </q-item-section>
-
                 <q-item-section side top class="self-center" >
                   <q-btn flat unelevated stack color="positive" icon="arrow_forward" label="Starten" size="sm" style="height: 4.5rem"/>
                 </q-item-section>
               </q-item>
             </q-card>
-
           </q-list>
         </q-tab-panel>
+        <q-tab-panel name="map" class="q-pa-none fit">
+          <!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
+          <!--</div>-->
+          <q-img src="https://www.buga2019.de/we-bilder/3.Gartenausstellung/Gelaendeplan/190320_Gelaendeplan-quadratisch.jpg" transition="fade" class="absolute-full">
+            <template v-slot:loading>
+              <q-spinner-puff color="cyan-14" size="4em"/>
+            </template>
+          </q-img>
+        </q-tab-panel>
       </q-tab-panels>
     </div>
   </q-page>
@@ -76,7 +72,7 @@
   export default {
     data() {
       return {
-        tab: 'map',
+        tab: 'list',
         hheight: 71.0,
         fheight: 36.0, //37
         //header: {h: '0px', w: 0}
diff --git a/frontend/src/pages/ranking.vue b/frontend/src/pages/ranking.vue
new file mode 100644
index 0000000..3635da6
--- /dev/null
+++ b/frontend/src/pages/ranking.vue
@@ -0,0 +1,95 @@
+<template>
+  <q-page class="column">
+    <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"
+        narrow-indicator
+        switch-indicator
+      >
+        <q-tab name="solo" label="Solo-Cacher" icon="person"/>
+        <q-tab name="team" label="Cacher-Team" icon="group"/>
+      </q-tabs>
+      <q-separator color="grey-4"/>
+    </div>
+
+    <div class="col flex column">
+      <q-tab-panels v-model="tab" animated swipeable class="col">
+        <q-tab-panel name="solo" class="q-pa-none fit">
+          <q-list>
+            <q-card class="q-mb-md" v-for="user in users" :key="user.id">
+              <q-item class="q-pr-sm ">
+                <q-item-section>
+                  <q-item-label overline><a class="text-black" style="text-decoration: none"><span>{{user.username}}</span></a></q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <span class="text-grey">{{user.rankingPointsSum}} Punkte </span>
+                </q-item-section>
+              </q-item>
+            </q-card>
+          </q-list>
+        </q-tab-panel>
+
+        <q-tab-panel name="team" class=" fit">
+          <q-list>
+            <q-card class="q-mb-md">
+              <q-item class="q-pr-sm ">
+                <q-item-section>
+                  <q-item-label>Single line item</q-item-label>
+                </q-item-section>
+                <q-item-section side>
+                  <span class="text-grey"> Punkte </span>
+                </q-item-section>
+              </q-item>
+            </q-card>
+          </q-list>
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </q-page>
+
+</template>
+
+<style>
+/*
+  .my-list-card-item
+    padding-left: 8px
+*/
+</style>
+<script>
+  import {dom} from 'quasar'
+
+  const {height, width} = dom
+  export default {
+    data() {
+      return {
+        tab: 'solo',
+        rankinglist: [],
+        users: [{
+          username: "kathy", id: "123", rankingPointsSum: "15"
+      },
+      {
+        username: "timo", id: "124", rankingPointsSum: "20"
+    }]
+    }
+    },
+    created: function() {
+      console.log("created(): " + this.rankinglist);
+  //    this.fetchRankinglist();
+    },
+    methods: {
+      fetchRankinglist() {
+        this.$axios.get('http://localhost:8080/api/getRankingList')
+          .then((response) => {
+            console.log("Rankinglist: " + this.rankinglist);
+            this.rankinglist = response.data;
+          })
+      }
+    }
+}
+</script>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
index a0724a0..62e6125 100644
--- a/frontend/src/router/routes.js
+++ b/frontend/src/router/routes.js
@@ -20,6 +20,11 @@ const routes = [
     component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/CacheView.vue") }]
   },
+  {
+    path: "/ranking/",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{path: "", component: () => import("pages/ranking.vue")}]
+  },
   {
     path: "/login/",
     component: () => import("layouts/MyLayout.vue"),