adopted changes from kathy, some changes and implemented api/allCaches, api/login

frontend/quasar.conf.js

@@ -61,6 +61,8 @@ module.exports = function (ctx) {
         'QPageSticky',
         'QAvatar',
         'QSpinnerPuff',
+        'QExpansionItem',
+        'QParallax',
       ],
 
       directives: [

frontend/src/layouts/MyLayout.vue

@@ -2,7 +2,7 @@
   <q-layout view="hhh Lpr lFf">
     <q-header id="qheader" class="bg-white text-grey-14" elevated>
       <q-toolbar class="q-pa-md">
-        <q-img src="statics/buga_logo.svg" style="max-width: 40px;" class="q-mr-sm" />
+        <q-img src="statics/buga_logo.svg" style="max-width: 40px;" class="q-mr-sm"/>
 
         <q-toolbar-title>
           BuGa Geocaching
@@ -15,7 +15,7 @@
           @click="leftDrawerOpen = !leftDrawerOpen"
           aria-label="Menu"
         >
-          <q-icon name="menu" />
+          <q-icon name="menu"/>
         </q-btn>
         <!--<div>Quasar v{{ $q.version }}</div>-->
       </q-toolbar>
@@ -27,103 +27,105 @@
       show-if-above
       content-class="">
       <q-list>
-        <q-item-label header>Essential Links</q-item-label>
+        <q-item-label header>BuGa Geocaching</q-item-label>
         <q-item
           clickable
+          class="text-primary"
+          v-ripple
           tag="a"
-          target="_blank"
+          to="/"
-          href="http://v1.quasar-framework.org"
         >
           <q-item-section avatar>
-            <q-icon name="school" />
+            <q-icon name="directions"/>
           </q-item-section>
           <q-item-section>
-            <q-item-label>Docs</q-item-label>
+            <q-item-label>Startseite</q-item-label>
-            <q-item-label caption>v1.quasar-framework.org</q-item-label>
           </q-item-section>
         </q-item>
         <q-item
           clickable
+          class="text-primary"
+          v-ripple
           tag="a"
-          target="_blank"
+          to="/Overview"
-          href="https://github.com/quasarframework/"
         >
           <q-item-section avatar>
-            <q-icon name="code" />
+            <q-icon name="map"/>
           </q-item-section>
           <q-item-section>
-            <q-item-label>Github</q-item-label>
+            <q-item-label>Caches</q-item-label>
-            <q-item-label caption>github.com/quasarframework</q-item-label>
           </q-item-section>
         </q-item>
         <q-item
           clickable
+          disable
+          class="text-primary"
+          v-ripple
           tag="a"
-          target="_blank"
+          to="/"
-          href="http://chat.quasar-framework.org"
         >
           <q-item-section avatar>
-            <q-icon name="chat" />
+            <q-icon name="list"/>
           </q-item-section>
           <q-item-section>
-            <q-item-label>Discord Chat Channel</q-item-label>
+            <q-item-label>Rangliste</q-item-label>
-            <q-item-label caption>chat.quasar-framework.org</q-item-label>
           </q-item-section>
         </q-item>
         <q-item
           clickable
+          disable
+          class="text-primary"
+          v-ripple
           tag="a"
-          target="_blank"
+          to="/Login"
-          href="https://forum.quasar-framework.org"
         >
           <q-item-section avatar>
-            <q-icon name="record_voice_over" />
+            <q-icon name="perm_identity"/>
           </q-item-section>
           <q-item-section>
-            <q-item-label>Forum</q-item-label>
+            <q-item-label>Profil</q-item-label>
-            <q-item-label caption>forum.quasar-framework.org</q-item-label>
           </q-item-section>
         </q-item>
         <q-item
           clickable
+          class="text-primary"
+          v-ripple
           tag="a"
-          target="_blank"
+          to="/Login"
-          href="https://twitter.com/quasarframework"
         >
           <q-item-section avatar>
-            <q-icon name="rss_feed" />
+            <q-icon name="logout"/>
           </q-item-section>
           <q-item-section>
-            <q-item-label>Twitter</q-item-label>
+            <q-item-label>Login</q-item-label>
-            <q-item-label caption>@quasarframework</q-item-label>
           </q-item-section>
         </q-item>
       </q-list>
     </q-drawer>
 
     <q-page-container>
-      <router-view />
+      <router-view/>
     </q-page-container>
   </q-layout>
 </template>
 
 <script>
-import { openURL } from "quasar";
+  import {openURL} from "quasar";
 
-export default {
+  export default {
-  name: "MyLayout",
+    name: "MyLayout",
-  data() {
+    data() {
-    return {
+      return {
-      leftDrawerOpen: this.$q.platform.is.desktop,
+        leftDrawerOpen: this.$q.platform.is.desktop,
-      //menuButtonVisible: !this.$q.platform.is.desktop,
+        //menuButtonVisible: !this.$q.platform.is.desktop,
-      //leftDrawerOpen: true,
+        //leftDrawerOpen: true,
-      //miniState: true
+        //miniState: true
-    };
+      };
-  },
+    },
-  methods: {
+    methods: {
-    openURL
+      openURL
-  }
+    }
-};
+  };
 </script>
 
 <style></style>

frontend/src/pages/Index.vue

@@ -1,74 +1,49 @@
 <template>
-  <q-page class="column">
+  <div class="q-pa-md">
-    <div class="bg-red col col-shrink" style="">
+    <q-card class="my-card q-mb-md" style="max-width: 600px">
-      <q-tabs
+      <q-parallax
-        v-model="tab"
+        src="https://www.buga2019.de/we-bilder/2.Aktuelles/BUGA-Zwerg/zwerg-im-gras-buga-heilbronn-2019.jpg?m=1550501506"
-        class="bg-grey-2"
+        :height="200"
-        inline-label
+      />
-        align="justify"
+      <q-card-section>
-        active-bg-color="bg-grey-1"
+        <div class="text-h6">GeoCaching</div>
-        active-color="cyan-14"
+        <div class="text-body2">Willkommen</div>
-        indicator-color="cyan-14"
+        <q-expansion-item
-        narrow-indicator
+          expand-separator
-        switch-indicator
+          rounded-borders
-      >
+          class="bg-green-3 text-black shadow-2 full-width q-mt-md"
-        <q-tab name="map" label="Karte" icon="map"/>
+          label="Was ist GeoCaching?"
-        <q-tab name="list" label="Liste" icon="list"/>
+        >
-      </q-tabs>
+          <q-card>
-      <q-separator color="grey-4" />
+            <q-card-section>
-    </div>
+              GeoCaching ist eine spielerische Führung, eine Schnitzeljagd, über die Bundesgartenschau.
-
+              Es gibt mehrere Routen (Caches), von denen man wählen kann. Auf jedem Cache gibt es mehrere Stationen, bei denen Rätsel und Aufgaben gelöst werden müssen, um die nächste zu finden.
-    <div class="col flex column">
+              Eine Station ist eine QR-Code, bei dessen einscannen das nächste Rätsel freigeschaltet wird.
-      <q-tab-panels v-model="tab" animated swipeable class="col">
+              Findet ein Cacher alle Stationen eines Caches erhält er eine kleine Belohnung und sammelt Punkte für eine Rangliste.
-        <q-tab-panel name="map" class="q-pa-none fit">
+            </q-card-section>
-          <!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
+          </q-card>
-          <!--</div>-->
+        </q-expansion-item>
-          <q-img src="statics/osm_mock.png" transition="fade" class="absolute-full">
+      </q-card-section>
-          <template v-slot:loading>
+    </q-card>
-            <QSpinnerPuff color="cyan-14" size="4em" />
+    <q-card class="my-card" style="max-width: 600px">
-          </template>
+      <q-parallax
-          </q-img>
+        src="https://www.buga2019.de/we-bilder/1.Bundesgartenschau/171205_BUGA-2019_Sommerinsel_LOMA_430px.jpg?m=1550501561"
-        </q-tab-panel>
+        :height="200"
-
+      />
-        <q-tab-panel name="list">
-          <div class="text-h6">Alarms</div>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit.
-        </q-tab-panel>
-      </q-tab-panels>
-    </div>
-  </q-page>
 
+      <q-card-section>
+        <div class="text-h6">Loslegen</div>
+        <q-btn color="green-3" text-color="black" class="full-width q-mt-md" label="Zu den Caches" to="/Overview"/>
+      </q-card-section>
+    </q-card>
+  </div>
 </template>
 
 <script>
-  import {dom} from 'quasar'
-
-  const {height, width} = dom
   export default {
-    data() {
+    data () {
       return {
-        tab: 'map',
-        hheight: 71.0,
-        fheight: 36.0, //37
-        //header: {h: '0px', w: 0}
       }
-    },
-    mounted: function () {
-      //this.header.h = style(this.$refs.layout.$refs.header, 'height')
-      // this.hheight = height(document.getElementById('qheader'));
-      // this.fheight = height(document.getElementById('qfooter'));
-    },
-    computed: {
-      mapHeight() {
-        let header = this.hheight
-        let footer = this.fheight
-        let offset = header + footer + 1;
-        console.log(offset)
-        return {minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh'};
-      },
-      // computedMainStyle() {
-      //   return { height: `calc( 100vh - ${this.header.h} )` };
-      // }
     }
   }
 </script>

frontend/src/pages/Overview.vue

@@ -15,7 +15,7 @@
         <q-tab name="map" label="Karte" icon="map"/>
         <q-tab name="list" label="Liste" icon="list"/>
       </q-tabs>
-      <q-separator color="grey-4" />
+      <q-separator color="grey-4"/>
     </div>
 
     <div class="col flex column">
@@ -23,16 +23,39 @@
         <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="statics/osm_mock.png" transition="fade" class="absolute-full">
+          <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>
+            <template v-slot:loading>
-            <q-spinner-puff color="cyan-14" size="4em" />
+              <q-spinner-puff color="cyan-14" size="4em"/>
-          </template>
+            </template>
           </q-img>
         </q-tab-panel>
 
-        <q-tab-panel name="list">
+        <q-tab-panel name="list" class=" fit">
-          <div class="text-h6">Alarms</div>
+
-          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          <q-list>
+            <q-card class="q-mb-md" v-for="cache in caches" :key="cache.id">
+              <q-item
+                class="q-pr-sm "
+              >
+                <q-item-section top avatar class="self-center">
+                  <q-icon rounded color="cyan-14" name="location_on" size="3rem"/>
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label><a class="text-black" style="text-decoration: none" href="/#/CacheDetail?id=2"><span>{{ cache.name }}</span></a></q-item-label>
+                  <q-item-label overline>
+                    <span class="text-grey">{{ cache.rankingPoints }} Punkte /</span>
+                    <span class="text-grey"> Size {{ cache.stationen.length }} </span>
+                  </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-panels>
     </div>
@@ -40,6 +63,12 @@
 
 </template>
 
+<style>
+/*
+  .my-list-card-item
+    padding-left: 8px
+*/
+</style>
 <script>
   import {dom} from 'quasar'
 
@@ -51,6 +80,7 @@
         hheight: 71.0,
         fheight: 36.0, //37
         //header: {h: '0px', w: 0}
+        caches: [],
       }
     },
     mounted: function () {
@@ -69,6 +99,19 @@
       // computedMainStyle() {
       //   return { height: `calc( 100vh - ${this.header.h} )` };
       // }
+    },
+    created: function() {
+      console.log("created(): " + this.caches);
+      this.fetchAllCaches();
+    },
+    methods: {
+      fetchAllCaches() {
+        this.$axios.get('http://localhost:8080/api/allCaches')
+          .then((response) => {
+            console.log("Caches: " + this.caches);
+            this.caches = response.data;
+          })
+      }
     }
   }
 </script>