tvolkmann/labswp_2019_sose_geocaching
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixed fullscreen map view

Browse Source
This commit is contained in:
Timo Volkmann 2019-05-27 23:26:13 +02:00
parent 93d4c664b9
commit ae4b510ea2
5 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
labswp_2019_sose_geocaching_frontend/frontend/quasar.conf.js
View File

@ -75,7 +75,8 @@ module.exports = function (ctx) {
'QLinearProgress',
'QBtnGroup',
'QTooltip',
'QMenu'
'QMenu',
'QResizeObserver',
],
directives: [

2
labswp_2019_sose_geocaching_frontend/frontend/src/layouts/MyLayout.vue
View File

@ -1,7 +1,7 @@
<template>
<q-layout view="hhh Lpr lFf" @click.native="counter()">
<q-header id="qheader" class="bg-white text-grey-14" elevated>
<q-toolbar class="q-pa-md">
<q-toolbar id="toolbar" class="q-pa-md">
<router-link to="/">
<q-img src="statics/buga_logo.svg" style="width: 40px;" class="q-mr-sm"/>
</router-link>

2
labswp_2019_sose_geocaching_frontend/frontend/src/pages/CacheStart.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
data-projection="EPSG:4326" style="height: 200px" >
data-projection="EPSG:4326" style="height: 200px" v-if="!cameraActive">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
<vl-feature id="marker" ref="marker">

32
labswp_2019_sose_geocaching_frontend/frontend/src/pages/Overview.vue
View File

@ -10,6 +10,7 @@
active-color="cyan-14"
indicator-color="cyan-14"
switch-indicator
ref="tabView"
>
<q-tab name="list" label="Liste" icon="list"/>
<q-tab name="map" label="Karte" icon="map"/>
@ -17,10 +18,10 @@
<q-separator color="grey-4"/>
</div>
<div class="col flex column">
<q-tab-panels v-model="tab" animated class="col">
<div ref="contentView" class="col flex column">
<q-tab-panels v-model="tab" animated class="col column">
<q-tab-panel name="list" class=" fit">
<q-tab-panel name="list" class="fit column">
<q-spinner-oval
v-if="!render"
class="absolute-center"
@ -107,12 +108,12 @@
</q-tab-panel>
<q-tab-panel name="map" class="q-pa-none fit">
<q-tab-panel name="map" class="q-pa-none">
<!--<div class="full-width full-height absolute-full" style="background: url('statics/osm_mock.png'); background-size: cover">-->
<!--</div>-->
<div class="full-width full-height absolute-full">
<div v-if="render" class="">
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
data-projection="EPSG:4326">
data-projection="EPSG:4326" :style="{ height: mapHeight+'px' }">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
<vl-geoloc @update:position="geolocPosition = $event">
@ -170,27 +171,42 @@ Vue.use(VueLayers);
center: [ 9.208858198755664, 49.14785422283188],
rotation: 0,
geolocPosition: undefined,
mapHeight: 0,
}
},
mounted: function () {
this.initMap().then(features => {
this.features = features.map(Object.freeze)
})
});
},
destroyed() {
window.removeEventListener('resize', this.matchHeight)
},
computed: {
hasAdminState() {
return this.$store.getters['auth/GET_ADMINSTATE'];
}
},
},
async created() {
console.log("created(): " + this.caches);
this.loadData();
window.addEventListener('resize', this.matchHeight);
},
methods: {
matchHeight() {
console.log("matchHeight");
const heightWindow = window.innerHeight;
const heightBar = this.$refs.tabView.$el.clientHeight + document.getElementById('toolbar').clientHeight;
console.log("heightWindow="+heightWindow);
console.log("heightBar="+heightBar);
this.mapHeight = heightWindow - heightBar;
},
async loadData() {
this.render = false;
await this.fetchAllCaches();
this.render = await this.fetchMyCaches();
this.matchHeight();
},
getColorClass(cache) {
switch (this.getCacheAccesDefinition(cache)) {

2
labswp_2019_sose_geocaching_frontend/frontend/src/pages/StationView.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
data-projection="EPSG:4326" style="height: 200px" >
data-projection="EPSG:4326" style="height: 200px" v-if="!cameraActive">
<vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation"></vl-view>
<vl-geoloc @update:position="geolocPosition = $event">