Show visual notifications, fixes #1

meri-imperiumi · Dec 10, 2024 · 32f0f36 · 32f0f36
1 parent 20a5ba2
commit 32f0f36
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 0 deletions.
diff --git a/public/index.html b/public/index.html
@@ -33,6 +33,35 @@
       iframe#next {
         opacity: 0;
       }
+      dialog[open] {
+        width: 100vw;
+        height: 10vh;
+        font-family: sans-serif;
+        font-size: 8vh;
+        background-color: rgb(87, 148, 242);
+        border: none;
+        padding: 1vh;
+        box-sizing: border-box;
+      }
+      dialog[open]:nth-of-type(2) {
+        top: 10vh;
+      }
+      dialog[open]:nth-of-type(3) {
+        top: 20vh;
+      }
+      dialog.warn {
+        background-color: rgb(250, 222, 42);
+      }
+      dialog.alarm {
+        background-color: rgb(255, 152, 48);
+      }
+      dialog.emergency {
+        background-color: rgb(242, 73, 92);
+      }
+      dialog p {
+        margin: 0 auto;
+        text-align: center;
+      }
     </style>
   </head>
   <body>

diff --git a/public/infodisplay.js b/public/infodisplay.js
@@ -1,4 +1,5 @@
 const stateUrls = {};
+const notifications = {};
 
 function getUrlForState(state) {
   if (!stateUrls[state]) {
@@ -39,6 +40,41 @@ function switchState(state) {
   next.setAttribute('src', stateUrl);
 }
 
+function isNotificationVisual(notification) {
+  if (notification.method && notification.method.indexOf('visual') === -1) {
+    return false;
+  }
+  if (!notification.method && notification.state === 'normal') {
+    return false;
+  }
+  return true;
+}
+
+function handleNotification(path, notification) {
+  let element;
+  if (notifications[path]) {
+    // We have an element for this
+    element = notifications[path];
+  } else if (!isNotificationVisual(notification)) {
+    // No element, but the alert doesn't have a visual component. We can skip this one
+    return;
+  } else {
+    // New notification, create element
+    const body = document.querySelector('body');
+    element = document.createElement('dialog');
+    notifications[path] = element;
+    body.appendChild(element);
+  }
+  element.className = notification.state;
+  element.innerHTML = `<p>${notification.message}</p>`;
+  if (isNotificationVisual(notification)) {
+    element.show();
+  } else {
+    element.close();
+    // TODO: Destroy element?
+  }
+}
+
 function getConfig(callback) {
   fetch('/signalk/v2/api/infodisplay')
     .then((res) => res.json())
@@ -59,6 +95,10 @@ function connect() {
         {
           path: 'navigation.state',
         },
+        {
+          path: 'notifications.*',
+          policy: 'instant',
+        },
       ],
     }));
   });
@@ -74,6 +114,10 @@ function connect() {
       u.values.forEach((v) => {
         if (v.path === 'navigation.state') {
           switchState(v.value);
+          return;
+        }
+        if (v.path.indexOf('notifications.') === 0) {
+          handleNotification(v.path, v.value);
         }
       });
     });