cygnal/src/views/Map.vue

168 lines
4.8 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">
2018-06-26 11:04:23 +02:00
<Map :lat="lat" :lng="lng" :heading="heading" :markers="reportsMarkers"></Map>
2018-06-25 18:29:57 +02:00
<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 NoSleep from 'nosleep.js';
2018-06-26 11:04:23 +02:00
import * as api from '@/api';
2018-06-25 18:29:57 +02:00
import Map from '@/components/Map.vue';
import ReportDialog from '@/components/ReportDialog/index.vue';
2018-06-26 11:04:23 +02:00
import { distance, mockLocation } from '@/tools';
const MOCK_LOCATION = false;
const MOCK_LOCATION_UPDATE_INTERVAL = 30 * 1000;
const UPDATE_REPORTS_DISTANCE_THRESHOLD = 500;
2018-06-25 18:29:57 +02:00
export default {
components: {
Map,
ReportDialog,
},
created() {
this.initializePositionWatching();
this.setNoSleep();
2018-06-26 11:04:23 +02:00
this.fetchReports();
2018-06-25 18:29:57 +02:00
},
beforeDestroy() {
this.disableNoSleep();
2018-06-25 18:29:57 +02:00
this.disablePositionWatching();
},
2018-06-26 11:04:23 +02:00
computed: {
reportsMarkers() {
if (!this.reports) {
return [];
}
return this.reports.map(report => ({
id: report.id,
latLng: [report.attributes.lat, report.attributes.lng],
}));
},
},
2018-06-25 18:29:57 +02:00
data() {
return {
dialog: false,
error: this.$t('geolocation.enable'),
heading: null,
lat: null,
lng: null,
noSleep: null,
2018-06-26 11:04:23 +02:00
reports: null,
2018-06-25 18:29:57 +02:00
watchID: null,
};
},
methods: {
initializePositionWatching() {
this.disablePositionWatching(); // Ensure at most one at the same time
if (MOCK_LOCATION) {
2018-06-26 11:04:23 +02:00
this.setPosition(mockLocation());
this.watchID = setInterval(
() => this.setPosition(mockLocation()),
MOCK_LOCATION_UPDATE_INTERVAL,
);
2018-06-25 18:29:57 +02:00
} else {
2018-06-26 11:04:23 +02:00
if (!('geolocation' in navigator)) {
this.error = this.$t('geolocation.unavailable');
}
2018-06-25 18:29:57 +02:00
this.watchID = navigator.geolocation.watchPosition(
this.setPosition,
this.handlePositionError,
{
enableHighAccuracy: true,
maximumAge: 30000,
timeout: 27000,
},
);
}
},
disablePositionWatching() {
if (this.watchID !== null) {
2018-06-26 11:04:23 +02:00
if (MOCK_LOCATION) {
clearInterval(this.watchID);
} else {
navigator.geolocation.clearWatch(this.watchID);
}
2018-06-25 18:29:57 +02:00
}
},
handlePositionError(error) {
this.error = `Error ${error.code}: ${error.message}`;
},
setPosition(position) {
2018-06-26 11:04:23 +02:00
if (this.lat && this.lng) {
const distanceFromPreviousPoint = distance(
[this.lat, this.lng],
[position.coords.latitude, position.coords.longitude],
);
if (distanceFromPreviousPoint > UPDATE_REPORTS_DISTANCE_THRESHOLD) {
this.fetchReports();
}
}
2018-06-25 18:29:57 +02:00
this.lat = position.coords.latitude;
this.lng = position.coords.longitude;
if (position.coords.heading) {
this.heading = position.coords.heading;
} else {
this.heading = null;
}
},
setNoSleep() {
this.noSleep = new NoSleep();
this.noSleep.enable();
},
disableNoSleep() {
if (this.noSleep) {
this.noSleep.disable();
}
},
2018-06-26 11:04:23 +02:00
fetchReports() {
api.getReports().then((reports) => {
this.reports = reports;
});
},
2018-06-25 18:29:57 +02:00
},
};
</script>
<style scoped>
.no-padding {
padding: 0;
}
.overlayButton {
z-index: 1000 !important;
}
</style>
<style>
.overlay {
z-index: 1002 !important;
}
</style>