added view for Stations
This commit is contained in:
Timo Volkmann
parent
fee5f4319d
commit
0f7a4a56e6
@ -63,6 +63,7 @@ module.exports = function (ctx) {
|
||||
'QSpinnerPuff',
|
||||
'QExpansionItem',
|
||||
'QParallax',
|
||||
'QEditor',
|
||||
],
|
||||
|
||||
directives: [
|
||||
|
||||
@ -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()
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@ -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'
|
||||
|
||||
const {height, width} = dom
|
||||
//import {dom} from 'quasar'
|
||||
//const {height, width} = dom
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tab: 'list',
|
||||
hheight: 71.0,
|
||||
fheight: 36.0, //37
|
||||
// hheight: 71.0,
|
||||
// fheight: 36.0, //37
|
||||
//header: {h: '0px', w: 0}
|
||||
caches: [],
|
||||
}
|
||||
@ -89,13 +90,13 @@
|
||||
// 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'};
|
||||
},
|
||||
// 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} )` };
|
||||
// }
|
||||
|
||||
60
frontend/src/pages/Station.vue
Normal file
60
frontend/src/pages/Station.vue
Normal file
@ -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>
|
||||
@ -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"),
|
||||
|
||||
Loading…
Reference in New Issue
Block a user