Basic implementation of notification
This commit is contained in:
parent
085f34dbe8
commit
04ac3538a4
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user