Basic implementation of notification

This commit is contained in:
Lucas Verney 2018-09-14 15:23:21 +02:00
parent 085f34dbe8
commit 04ac3538a4

View File

@ -88,6 +88,7 @@ function setPosition(position) {
export default { export default {
beforeDestroy() { beforeDestroy() {
this.disableNoSleep(); this.disableNoSleep();
this.removeNotification();
this.$store.dispatch('hideReportDetails'); this.$store.dispatch('hideReportDetails');
}, },
components: { components: {
@ -166,10 +167,16 @@ export default {
return { return {
isReportDialogVisible: false, isReportDialogVisible: false,
noSleep: null, noSleep: null,
notification: null,
reportLatLng: null, reportLatLng: null,
}; };
}, },
methods: { methods: {
createNotification() {
this.notification = new Notification('Toto', { body: 'Foobar', icon: '', tag: 'CyclassistMap' }); // TODO: icon
this.notification.addEventListener('click', this.showReportDialog);
this.notification.addEventListener('close', this.createNotification);
},
disableNoSleep() { disableNoSleep() {
if (this.noSleep) { if (this.noSleep) {
this.noSleep.disable(); this.noSleep.disable();
@ -211,6 +218,13 @@ export default {
onMapZoomUpdate(zoom) { onMapZoomUpdate(zoom) {
this.$store.dispatch('setCurrentMapZoom', { zoom }); this.$store.dispatch('setCurrentMapZoom', { zoom });
}, },
removeNotification() {
if (this.notification) {
this.notification.removeEventListener('close', this.createNotification);
this.notification.close();
this.notification = null;
}
},
resetReportLatLng() { resetReportLatLng() {
this.reportLatLng = null; this.reportLatLng = null;
}, },
@ -220,6 +234,22 @@ export default {
this.noSleep.enable(); this.noSleep.enable();
} }
}, },
setupNotification() {
if (!window.Notification) {
// Ensure notification API is available
return;
}
if (Notification.permission && Notification.permission === 'granted') {
this.createNotification();
} else {
Notification.requestPermission((permission) => {
if (permission === 'granted') {
this.createNotification();
}
});
}
},
showReportDialog(latlng) { showReportDialog(latlng) {
if (latlng) { if (latlng) {
this.reportLatLng = [latlng[0], latlng[1]]; this.reportLatLng = [latlng[0], latlng[1]];
@ -249,6 +279,8 @@ export default {
} }
} }
this.$store.dispatch('fetchReports').catch(() => {}); this.$store.dispatch('fetchReports').catch(() => {});
this.setupNotification();
}, },
}; };
</script> </script>