cygnal/src/views/Map.vue

116 lines
3.2 KiB
Vue
Raw Normal View History

2018-06-25 18:29:57 +02:00
<template>
<v-container fluid fill-height class="no-padding">
<v-layout row wrap fill-height>
<v-flex xs12 fill-height v-if="lat && lng">
<Map :lat="lat" :lng="lng" :heading="heading"></Map>
<v-btn
fixed
dark
fab
bottom
right
color="orange"
class="overlayButton"
@click.native.stop="dialog = !dialog"
>
<v-icon>report_problem</v-icon>
</v-btn>
<ReportDialog v-model="dialog" :lat="lat" :lng="lng"></ReportDialog>
</v-flex>
<v-flex xs12 fill-height v-else class="pa-3">
<p>{{ error }}</p>
<p class="text-xs-center">
<v-btn color="blue" dark @click="initializePositionWatching">Retry</v-btn>
</p>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import { MOCK_LOCATION } from '@/constants';
import Map from '@/components/Map.vue';
import ReportDialog from '@/components/ReportDialog/index.vue';
export default {
components: {
Map,
ReportDialog,
},
created() {
this.initializePositionWatching();
},
beforeDestroy() {
this.disablePositionWatching();
},
data() {
return {
dialog: false,
error: this.$t('geolocation.enable'),
heading: null,
lat: null,
lng: null,
watchID: null,
};
},
methods: {
initializePositionWatching() {
this.disablePositionWatching(); // Ensure at most one at the same time
if (!('geolocation' in navigator)) {
this.error = this.$t('geolocation.unavailable');
}
if (MOCK_LOCATION) {
this.lat = MOCK_LOCATION.lat;
this.lng = MOCK_LOCATION.lng;
this.heading = MOCK_LOCATION.heading;
} else {
this.watchID = navigator.geolocation.watchPosition(
this.setPosition,
this.handlePositionError,
{
enableHighAccuracy: true,
maximumAge: 30000,
timeout: 27000,
},
);
}
},
disablePositionWatching() {
if (this.watchID !== null) {
navigator.geolocation.clearWatch(this.watchID);
}
},
handlePositionError(error) {
this.error = `Error ${error.code}: ${error.message}`;
},
setPosition(position) {
this.lat = position.coords.latitude;
this.lng = position.coords.longitude;
if (position.coords.heading) {
this.heading = position.coords.heading;
} else {
this.heading = null;
}
},
},
};
</script>
<style scoped>
.no-padding {
padding: 0;
}
.overlayButton {
z-index: 1000 !important;
}
</style>
<style>
.overlay {
z-index: 1002 !important;
}
</style>