Use browser helper functions in COG

Author: graduta

Control/public/Model.js

@@ -13,7 +13,7 @@
 */
 
 // Import frontend framework
-import {Observable, WebSocketClient, QueryRouter, Loader, sessionService, RemoteData} from '/js/src/index.js';
+import {Observable, WebSocketClient, QueryRouter, Loader, sessionService, RemoteData, showNativeBrowserNotification} from '/js/src/index.js';
 import {Notification as O2Notification} from '/js/src/index.js';
 import Lock from './lock/Lock.js';
 import Environment from './environment/Environment.js';
@@ -153,7 +153,7 @@ export default class Model extends Observable {
     if (this.detectors.selected || this.session.role == ROLES.Guest) {
       this.handleLocationChange();
     }
-    this.requestBrowserNotificationPermissions()
+
     this.notify();
   }
 
@@ -170,10 +170,14 @@ export default class Model extends Observable {
         const { payload: task } = message;
         if (task?.taskId) {
           // Notification is for the first task in error from an environment
-          this.showNativeNotification({
+          showNativeBrowserNotification({
             title: `TASK in ${task.state ?? 'unknown'} state`,
             body: `Task ${task.id} in environment ${task.environmentId} is in ${task.state ?? 'unknown'} state`,
-            url: `?page=environment&id=${task.environmentId}`
+            icon: '/o2_icon.png',
+            onclick: (event) => {
+              event?.preventDefault();
+              this.router.go(`?page=environment&id=${task.environmentId}`, '_blank');
+            }
           });
         }
         break;
@@ -361,36 +365,4 @@ export default class Model extends Observable {
       this.notify();
     }
   }
-
-  /**
-   * Display a browser notification(Notification - Web API)
-   * @param {String} message
-   */
-  showNativeNotification(message) {
-    const notification = new Notification(message.title, {body: message.body, icon: '/o2_icon.png'});
-    notification.onclick = (event) => {
-      event.preventDefault();
-      this.router.go(message.url, '_blank');
-    }
-  }
-
-  /**
-   * Request notification permission
-   */
-  requestBrowserNotificationPermissions() {
-    if (this.checkBrowserNotificationPermissions()) {
-      Notification.requestPermission();
-    }
-  }
-
-  /**
-   * Defines policy when user can trigger request for enabling notifications
-   * This is used to display/hide enable button
-   * @returns {boolean} True when notifications are not enabled and HTTPS is used
-   */
-  checkBrowserNotificationPermissions() {
-    return (Notification.permission === 'denied' ||
-      Notification.permission === 'default') &&
-      window.location.protocol === "https:";
-  }
 }

Control/public/common/appHeader.js

@@ -12,7 +12,7 @@
  * or submit itself to any jurisdiction.
 */
 
-import {h, iconPerson} from '/js/src/index.js';
+import {h, iconPerson, areBrowserNotificationsGranted, requestBrowserNotificationPermissions} from '/js/src/index.js';
 
 /**
  * Application header (left part): lockpad button and application name
@@ -39,11 +39,13 @@ const loginButton = (model) => h('.dropdown', {class: model.accountMenuEnabled ?
   h('button.btn', {onclick: () => model.toggleAccountMenu()}, iconPerson()),
   h('.dropdown-menu', [
     h('p.m3.mv2.text-ellipsis', `Welcome ${model.session.name}`, h('sup', model.session.role)),
-    model.session.personid === 0 // anonymous user has id 0
+    model.session.personid === 0 // anonymous user has id 0 
       && h('p.m3.gray-darker', 'You are connected as anonymous, no authentification needed for this application.'),
-    model.checkBrowserNotificationPermissions() &&
+    !areBrowserNotificationsGranted() &&
       h('a.menu-item', {onclick: () => {
-        model.toggleAccountMenu();  model.requestBrowserNotificationPermissions()}
+          requestBrowserNotificationPermissions();
+          model.toggleAccountMenu();
+        }
       }, 'Enable notifications'),
     model.session.personid !== 0 &&
       h('a.menu-item', {onclick: () => alert(`Not implemented`)}, 'Logout')