Add a setting to allow permanent notification or not.

src/components/PermissionsSwitches.vue

@@ -30,6 +30,14 @@
             v-model="hasGeolocationPermission"
             >
         </v-switch>
+        <v-switch
+            class="switch"
+            :messages="[`<i aria-hidden='true' class='v-icon material-icons' style='vertical-align: middle;'>help</i> ${$t('permissions.permanentNotificationDescription')}`]"
+            color="success"
+            :label="$t('permissions.permanentNotification')"
+            v-model="hasPermanentNotificationPermission"
+            >
+        </v-switch>
     </div>
 </template>
 
@@ -44,6 +52,14 @@ export default {
                 this.$store.dispatch('setSetting', { setting: 'hasGeolocationPermission', value });
             },
         },
+        hasPermanentNotificationPermission: {
+            get() {
+                return this.$store.state.settings.hasPermanentNotificationPermission;
+            },
+            set(value) {
+                this.$store.dispatch('setSetting', { setting: 'hasPermanentNotificationPermission', value });
+            },
+        },
         hasPlaySoundPermission: {
             get() {
                 return this.$store.state.settings.hasPlaySoundPermission;

src/i18n/en.json

@@ -62,9 +62,14 @@
         "retry": "Retry",
         "spaceBeforeDoublePunctuations": "​"
     },
+    "notification": {
+        "body": "Click to report something!"
+    },
     "permissions": {
         "geolocation": "Geolocation",
         "geolocationDescription": "As of current version, your precise geolocation is handled within your device and never sent from it to any external service. The map background is downloaded on demand from the tile provider and it has then access to an estimate of the displayed position. If you refuse to share your geolocation, you can still pick a location manually but you will miss some geolocation dependent features.",
+        "permanentNotification": "Permanent notification",
+        "permanentNotificationDescription": "Display a permanent notification to quickly jump back to the new report window.",
         "playSound": "Play sound",
         "preventSuspend": "Prevent device from going to sleep",
         "preventSuspendDescription": "When the map is displayed, the device will be prevented from going to sleep.",

src/store/mutations.js

@@ -44,6 +44,7 @@ if (storageAvailable('localStorage')) {
 // Load settings from storage
 let locale = null;
 let hasGeolocationPermission = null;
+let hasPermanentNotificationPermission = null;
 let hasPlaySoundPermission = null;
 let hasPreventSuspendPermission = null;
 let hasVibratePermission = null;
@@ -54,6 +55,7 @@ if (storageAvailable('localStorage')) {
     handleMigrations();
 
     hasGeolocationPermission = loadDataFromStorage('hasGeolocationPermission');
+    hasPermanentNotificationPermission = loadDataFromStorage('hasPermanentNotificationPermission');
     hasPlaySoundPermission = loadDataFromStorage('hasPlaySoundPermission');
     hasPreventSuspendPermission = loadDataFromStorage('hasPreventSuspendPermission');
     hasVibratePermission = loadDataFromStorage('hasVibratePermission');
@@ -107,6 +109,9 @@ export const initialState = {
         hasGeolocationPermission: (
             hasGeolocationPermission !== null ? hasGeolocationPermission : true
         ),
+        hasPermanentNotificationPermission: (
+            hasPermanentNotificationPermission !== null ? hasPermanentNotificationPermission : true
+        ),
         hasPlaySoundPermission: (
             hasPlaySoundPermission !== null ? hasPlaySoundPermission : true
         ),

src/views/Map.vue

@@ -57,6 +57,8 @@ import { distance, mockLocation } from '@/tools';
 import i18n from '@/i18n';
 import store from '@/store';
 
+import AppLogo from '@/assets/logo.svg';
+
 function handlePositionError(error) {
     store.dispatch('setLocationError', { error: error.code });
 }
@@ -173,7 +175,11 @@ export default {
     },
     methods: {
         createNotification() {
-            this.notification = new Notification('Toto', { body: 'Foobar', icon: '', tag: 'CyclassistMap' }); // TODO: icon
+            const $t = this.$t.bind(this);
+            this.notification = new Notification(
+                'Cycl\'Assist',
+                { body: $t('notification.body'), icon: AppLogo, tag: 'CyclassistMap' },
+            );
             this.notification.addEventListener('click', this.showReportDialog);
             this.notification.addEventListener('close', this.createNotification);
         },
@@ -235,8 +241,11 @@ export default {
             }
         },
         setupNotification() {
-            if (!window.Notification) {
+            if (
-                // Ensure notification API is available
+                !window.Notification
+                || !this.$store.state.settings.hasPermanentNotificationPermission
+            ) {
+                // Ensure notification API is available and notification is wanted
                 return;
             }