added view for Stations

frontend/quasar.conf.js

@@ -63,6 +63,7 @@ module.exports = function (ctx) {
         'QSpinnerPuff',
         'QExpansionItem',
         'QParallax',
+        'QEditor',
       ],
 
       directives: [

frontend/src/pages/Login.vue

@@ -82,7 +82,6 @@
     // },
     mounted () {
       this.isAuthenticated();
-      //this.pollData();
       console.log("mounted: initiated");
     },
     methods: {
@@ -113,7 +112,7 @@
         console.log("isAuthenticated()");
         console.log("content of localstorage: ");
         console.log(JSON.parse(localStorage.getItem('userToken')));
-        if (localStorage.getItem('userToken')) { // TODO hier muss Abfrage mit API, z.B. /api/user?token="ME" stattfinden.
+        if (localStorage.getItem('userToken')) {
           this.user.isAuthenticated = true;
         } else {
           this.user.isAuthenticated = false;
@@ -134,10 +133,6 @@
           })
           .catch((error) => {
           });
-        // console.log(localStorage.getItem('userToken'));
-        // localStorage.removeItem('userToken');
-        // console.log(localStorage.getItem('userToken'));
-        // this.isAuthenticated()
       },
     },
   };

frontend/src/pages/Overview.vue

@@ -9,26 +9,16 @@
         active-bg-color="bg-grey-1"
         active-color="cyan-14"
         indicator-color="cyan-14"
-        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">
 
@@ -41,7 +31,7 @@
                   <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><a class="text-black" style="text-decoration: none"><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>
@@ -57,6 +47,18 @@
 
           </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>
@@ -70,15 +72,14 @@
 */
 </style>
 <script>
-  import {dom} from 'quasar'
+  //import {dom} from 'quasar'
-
+  //const {height, width} = dom
-  const {height, width} = dom
   export default {
     data() {
       return {
         tab: 'list',
-        hheight: 71.0,
+        // hheight: 71.0,
-        fheight: 36.0, //37
+        // fheight: 36.0, //37
         //header: {h: '0px', w: 0}
         caches: [],
       }
@@ -89,13 +90,13 @@
       // this.fheight = height(document.getElementById('qfooter'));
     },
     computed: {
-      mapHeight() {
+      // mapHeight() {
-        let header = this.hheight
+      //   let header = this.hheight
-        let footer = this.fheight
+      //   let footer = this.fheight
-        let offset = header + footer + 1;
+      //   let offset = header + footer + 1;
-        console.log(offset)
+      //   console.log(offset)
-        return {minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh'};
+      //   return {minHeight: offset ? `calc(100vh - ${offset}px)` : '100vh'};
-      },
+      // },
       // computedMainStyle() {
       //   return { height: `calc( 100vh - ${this.header.h} )` };
       // }

frontend/src/pages/Station.vue

@@ -0,0 +1,60 @@
+<template>
+  <q-page class="q-ma-md">
+    <h4 class="text-h4">Neue Station</h4>
+    <q-editor
+      :toolbar="[
+        ['bold', 'italic', 'strike', 'underline'],
+        ['undo', 'redo']
+      ]"
+      v-model="description" min-height="10rem" />
+    <!--<q-input-->
+      <!--v-model="description"-->
+      <!--filled-->
+      <!--type="textarea"-->
+    <!--/>-->
+    <p class="text-h5 q-mt-md">Location</p>
+    <q-img 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>
+    <div class="row q-col-gutter-md">
+      <q-input class="col" dense stack-label filled v-model="text" label="Längengrad" />
+      <q-input class="col" dense stack-label filled v-model="text" label="Breitengrad" />
+      <div class="col-shrink">
+        <q-btn unelevated color="primary" class="full-height" icon="my_location"/>
+      </div>
+    </div>
+    <p class="text-h5 q-mt-md">Lösung</p>
+    <q-input class="col" dense stack-label filled v-model="text" label="Lösung" />
+    <q-input class="col q-mt-md" dense stack-label filled v-model="text" label="Code" readonly/>
+  </q-page>
+</template>
+
+<script>
+  export default {
+    name: "Station",
+
+    data() {
+      return {
+        description: "Rätsel, Aufgabe und Informationen zur Station.",
+        text:"v-model !!"
+      }
+    },
+    created: function() {
+    },
+    beforeMount: function() {
+    },
+    mounted: function() {
+      console.log("'id' from url: "+this.$route.params.id)
+    },
+    computed: {
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

frontend/src/router/routes.js

@@ -19,6 +19,16 @@ const routes = [
     component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/CacheView.vue") }]
   },
+  {
+    path: "/station/",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/Station.vue") }]
+  },
+  {
+    path: "/station/:id",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/Station.vue") }]
+  },
   {
     path: "/login/",
     component: () => import("layouts/MyLayout.vue"),