adopted changes from kathy, some changes and implemented api/allCaches, api/login
This commit is contained in:
Timo Volkmann
parent
53dfb2a90a
commit
67d6ad1b6b
@ -61,6 +61,8 @@ module.exports = function (ctx) {
|
||||
'QPageSticky',
|
||||
'QAvatar',
|
||||
'QSpinnerPuff',
|
||||
'QExpansionItem',
|
||||
'QParallax',
|
||||
],
|
||||
|
||||
directives: [
|
||||
|
||||
@ -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"
|
||||
href="http://v1.quasar-framework.org"
|
||||
to="/"
|
||||
>
|
||||
<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 caption>v1.quasar-framework.org</q-item-label>
|
||||
<q-item-label>Startseite</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
class="text-primary"
|
||||
v-ripple
|
||||
tag="a"
|
||||
target="_blank"
|
||||
href="https://github.com/quasarframework/"
|
||||
to="/Overview"
|
||||
>
|
||||
<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 caption>github.com/quasarframework</q-item-label>
|
||||
<q-item-label>Caches</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
disable
|
||||
class="text-primary"
|
||||
v-ripple
|
||||
tag="a"
|
||||
target="_blank"
|
||||
href="http://chat.quasar-framework.org"
|
||||
to="/"
|
||||
>
|
||||
<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 caption>chat.quasar-framework.org</q-item-label>
|
||||
<q-item-label>Rangliste</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
disable
|
||||
class="text-primary"
|
||||
v-ripple
|
||||
tag="a"
|
||||
target="_blank"
|
||||
href="https://forum.quasar-framework.org"
|
||||
to="/Login"
|
||||
>
|
||||
<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 caption>forum.quasar-framework.org</q-item-label>
|
||||
<q-item-label>Profil</q-item-label>
|
||||
</q-item-section>
|
||||
</q-item>
|
||||
<q-item
|
||||
clickable
|
||||
class="text-primary"
|
||||
v-ripple
|
||||
tag="a"
|
||||
target="_blank"
|
||||
href="https://twitter.com/quasarframework"
|
||||
to="/Login"
|
||||
>
|
||||
<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 caption>@quasarframework</q-item-label>
|
||||
<q-item-label>Login</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 {
|
||||
name: "MyLayout",
|
||||
data() {
|
||||
return {
|
||||
leftDrawerOpen: this.$q.platform.is.desktop,
|
||||
//menuButtonVisible: !this.$q.platform.is.desktop,
|
||||
//leftDrawerOpen: true,
|
||||
//miniState: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openURL
|
||||
}
|
||||
};
|
||||
export default {
|
||||
name: "MyLayout",
|
||||
data() {
|
||||
return {
|
||||
leftDrawerOpen: this.$q.platform.is.desktop,
|
||||
//menuButtonVisible: !this.$q.platform.is.desktop,
|
||||
//leftDrawerOpen: true,
|
||||
//miniState: true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openURL
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
||||
@ -1,74 +1,49 @@
|
||||
<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="map" label="Karte" icon="map"/>
|
||||
<q-tab name="list" label="Liste" icon="list"/>
|
||||
</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="statics/osm_mock.png" transition="fade" class="absolute-full">
|
||||
<template v-slot:loading>
|
||||
<QSpinnerPuff color="cyan-14" size="4em" />
|
||||
</template>
|
||||
</q-img>
|
||||
</q-tab-panel>
|
||||
|
||||
<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>
|
||||
<div class="q-pa-md">
|
||||
<q-card class="my-card q-mb-md" style="max-width: 600px">
|
||||
<q-parallax
|
||||
src="https://www.buga2019.de/we-bilder/2.Aktuelles/BUGA-Zwerg/zwerg-im-gras-buga-heilbronn-2019.jpg?m=1550501506"
|
||||
:height="200"
|
||||
/>
|
||||
<q-card-section>
|
||||
<div class="text-h6">GeoCaching</div>
|
||||
<div class="text-body2">Willkommen</div>
|
||||
<q-expansion-item
|
||||
expand-separator
|
||||
rounded-borders
|
||||
class="bg-green-3 text-black shadow-2 full-width q-mt-md"
|
||||
label="Was ist GeoCaching?"
|
||||
>
|
||||
<q-card>
|
||||
<q-card-section>
|
||||
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.
|
||||
Eine Station ist eine QR-Code, bei dessen einscannen das nächste Rätsel freigeschaltet wird.
|
||||
Findet ein Cacher alle Stationen eines Caches erhält er eine kleine Belohnung und sammelt Punkte für eine Rangliste.
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</q-expansion-item>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
<q-card class="my-card" style="max-width: 600px">
|
||||
<q-parallax
|
||||
src="https://www.buga2019.de/we-bilder/1.Bundesgartenschau/171205_BUGA-2019_Sommerinsel_LOMA_430px.jpg?m=1550501561"
|
||||
:height="200"
|
||||
/>
|
||||
|
||||
<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>
|
||||
|
||||
@ -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">
|
||||
<template v-slot:loading>
|
||||
<q-spinner-puff color="cyan-14" size="4em" />
|
||||
</template>
|
||||
<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">
|
||||
<div class="text-h6">Alarms</div>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
<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
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user