cygnal/src/views/Map.vue

225 lines
7.5 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 v-if="isIntro" row wrap class="text-xs-center blue lighten-2">
<v-flex xs8 offset-xs2>
<p><img src="@/assets/logo.svg" alt="Logo"/></p></p>
<p>{{ $t('about.summary') }}</p>
2018-07-11 01:14:54 +02:00
<v-btn role="button" round color="green" dark @click="introButtonClick">{{ $t('intro.start') }}</v-btn>
</v-flex>
</v-layout>
<v-layout v-else row wrap fill-height>
<ReportCard></ReportCard>
<v-flex xs12 fill-height v-if="latLng">
<Map :positionLatLng="latLng" :reportLatLng="reportLatLng" :polyline="positionHistory" :heading="heading" :accuracy="accuracy" :markers="reportsMarkers" :onPress="showReportDialog"></Map>
2018-06-25 18:29:57 +02:00
<v-btn
absolute
2018-06-25 18:29:57 +02:00
dark
fab
2018-07-02 18:27:35 +02:00
large
2018-06-25 18:29:57 +02:00
bottom
right
color="orange"
class="overlayButton"
@click.native.stop="() => showReportDialog()"
2018-07-11 01:14:54 +02:00
role="button"
:aria-label="$t('buttons.reportProblem')"
2018-06-25 18:29:57 +02:00
>
<v-icon>report_problem</v-icon>
</v-btn>
<ReportDialog v-model="dialog" :lat="reportLat" :lng="reportLng"></ReportDialog>
2018-06-25 18:29:57 +02:00
</v-flex>
<v-flex xs12 fill-height v-else class="pa-3">
<template v-if="error">
<p class="text-xs-center">{{ error }}</p>
<p class="text-xs-center">
2018-07-11 01:14:54 +02:00
<v-btn role="button" color="blue" dark @click="initializePositionWatching">Retry</v-btn>
</p>
</template>
<template v-else>
<p class="text-xs-center">{{ $t('geolocation.fetching') }}</p>
</template>
2018-06-25 18:29:57 +02:00
</v-flex>
</v-layout>
</v-container>
</template>
<script>
import NoSleep from 'nosleep.js';
2018-06-25 18:29:57 +02:00
import Map from '@/components/Map.vue';
import ReportCard from '@/components/ReportCard.vue';
2018-06-25 18:29:57 +02:00
import ReportDialog from '@/components/ReportDialog/index.vue';
import * as constants from '@/constants';
2018-06-26 11:04:23 +02:00
import { distance, mockLocation } from '@/tools';
2018-06-25 18:29:57 +02:00
export default {
components: {
Map,
ReportCard,
2018-06-25 18:29:57 +02:00
ReportDialog,
},
beforeDestroy() {
if (!this.isIntro) {
this.disableNoSleep();
this.disablePositionWatching();
window.removeEventListener('keydown', this.hideReportDialogOnEsc);
}
2018-07-12 17:48:26 +02:00
this.$store.dispatch('hideReportDetails');
2018-06-25 18:29:57 +02:00
},
2018-06-26 11:04:23 +02:00
computed: {
reportsMarkers() {
return this.$store.getters.notDismissedReports.map(report => ({
2018-06-26 11:04:23 +02:00
id: report.id,
type: report.attributes.type,
2018-06-26 11:04:23 +02:00
latLng: [report.attributes.lat, report.attributes.lng],
}));
},
reportLatLng() {
if (this.dialog && this.reportLat && this.reportLng) {
return [this.reportLat, this.reportLng];
}
return null;
},
2018-06-26 11:04:23 +02:00
},
2018-06-25 18:29:57 +02:00
data() {
return {
accuracy: null,
centering: false,
2018-06-25 18:29:57 +02:00
dialog: false,
error: null,
2018-06-25 18:29:57 +02:00
heading: null,
isIntro: true,
latLng: null,
noSleep: null,
positionHistory: [],
reportLat: null,
reportLng: null,
2018-06-25 18:29:57 +02:00
watchID: null,
};
},
methods: {
initializePositionWatching() {
this.error = null; // Reset any error
2018-06-25 18:29:57 +02:00
this.disablePositionWatching(); // Ensure at most one at the same time
if (constants.MOCK_LOCATION) {
2018-06-26 11:04:23 +02:00
this.setPosition(mockLocation());
this.watchID = setInterval(
() => this.setPosition(mockLocation()),
constants.MOCK_LOCATION_UPDATE_INTERVAL,
2018-06-26 11:04:23 +02:00
);
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) {
if (constants.MOCK_LOCATION) {
2018-06-26 11:04:23 +02:00
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) {
if (this.latLng) {
2018-06-26 11:04:23 +02:00
const distanceFromPreviousPoint = distance(
[this.latLng[0], this.latLng[1]],
2018-06-26 11:04:23 +02:00
[position.coords.latitude, position.coords.longitude],
);
if (distanceFromPreviousPoint > constants.UPDATE_REPORTS_DISTANCE_THRESHOLD) {
this.$store.dispatch('fetchReports');
2018-06-26 11:04:23 +02:00
}
}
this.latLng = [position.coords.latitude, position.coords.longitude];
this.positionHistory.push(this.latLng);
this.heading = null;
if (position.coords.heading !== null && !isNaN(position.coords.heading)) {
this.heading = position.coords.heading;
}
this.accuracy = position.coords.accuracy ? position.coords.accuracy : null;
2018-06-25 18:29:57 +02:00
},
setNoSleep() {
2018-07-03 19:01:56 +02:00
let preventSuspend = localStorage.getItem('preventSuspend');
if (preventSuspend) {
preventSuspend = JSON.parse(preventSuspend);
} else {
preventSuspend = true;
}
if (preventSuspend) {
this.noSleep = new NoSleep();
this.noSleep.enable();
}
},
disableNoSleep() {
if (this.noSleep) {
this.noSleep.disable();
}
},
showReportDialog(latlng) {
if (latlng) {
this.reportLat = latlng.lat;
this.reportLng = latlng.lng;
} else {
this.reportLat = this.latLng[0];
this.reportLng = this.latLng[1];
}
this.dialog = !this.dialog;
},
hideReportDialogOnEsc(event) {
let isEscape = false;
if ('key' in event) {
isEscape = (event.key === 'Escape' || event.key === 'Esc');
} else {
isEscape = (event.keyCode === 27);
}
if (isEscape) {
this.dialog = false;
}
},
introButtonClick() {
this.setNoSleep();
this.isIntro = false;
this.initializePositionWatching();
this.$store.dispatch('fetchReports');
window.addEventListener('keydown', this.hideReportDialogOnEsc);
},
2018-06-25 18:29:57 +02:00
},
};
</script>
<style scoped>
.no-padding {
padding: 0;
}
</style>
<style>
.v-overlay, .v-dialog__content {
2018-06-25 18:29:57 +02:00
z-index: 1002 !important;
}
.overlayButton {
z-index: 1000 !important;
position: absolute !important;
bottom: 24px !important;
border-radius: 50% !important;
}
2018-06-25 18:29:57 +02:00
</style>