use notyf for notifications

frontend/embed.go

@@ -7,6 +7,7 @@ import (
 //go:embed z2/*.js
 //go:embed z2/css/*.css
 //go:embed z2/css/purecss/*.css
+//go:embed z2/css/notyf/*.css
 //go:embed z2/pages/*.html
 //go:embed z2/sounds/*.mp3
 var FS embed.FS

frontend/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@types/uuid": "^10.0.0",
     "calendar": "github:minor-industries/calendar#v0.0.4",
+    "notyf": "^3.10.0",
     "rtgraph": "github:minor-industries/rtgraph#v0.0.22",
     "uuid": "^10.0.0"
   }

frontend/src/index.ts

@@ -7,9 +7,10 @@ import {decode} from "@msgpack/msgpack"
 import {DefaultApiClient} from "./api_client";
 import {Env} from "./env"
 import {runGoWasm, WASMConnector} from "./wasm_connector"
-import {localDate, runOnce} from "./util";
+import {localDate, notify, runOnce} from "./util";
 import {streamEvents} from "./stream_events";
 
+
 //@ts-ignore
 import {runWasm} from "./startup.js";
 
@@ -24,6 +25,7 @@ export {
     calendar,
     decode,
     localDate,
+    notify,
     runGoWasm,
     runOnce,
     runWasm,

frontend/src/util.ts

@@ -1,3 +1,5 @@
+import {Notyf} from 'notyf';
+
 export function runOnce<T extends (...args: any[]) => Promise<any>>(asyncFn: T): T {
     let initialized = false;
     let resultPromise: ReturnType<T>;
@@ -18,4 +20,18 @@ export function localDate(): string {
     const day = now.getDate().toString().padStart(2, '0');
 
     return `${year}-${month}-${day}`;
+}
+
+export function notify(type: 'success' | 'error', message: string) {
+    switch (type) {
+        case "success":
+            new Notyf().success(message);
+            return;
+        case "error":
+            new Notyf().error(message);
+            return;
+        default:
+            new Notyf().error("unknown alert type");
+            return;
+    }
 }

frontend/templates/header.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/pure-min.css">
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/grids-responsive-min.css">
 
+    <link rel="stylesheet" type="text/css" href="/z2/css/notyf/notyf.min.css"/>
+
     <style>
         body {
             margin: 0 0 20px;

frontend/templates/sound-events.html

@@ -1,5 +1,8 @@
+{{ define "sound-events" }}
+
 <script type="module">
     import {getEnv} from "/z2/env.js";
+    import {notify} from "/z2/z2-bundle.js";
 
     const bluetoothConnectedHandler = (() => {
         const seen = {};
@@ -20,6 +23,7 @@
 
             const info = `${kind}${name} is connected`;
             console.log(info);
+            notify("success", info);
         };
     })();
 
@@ -34,7 +38,10 @@
                     audio.play();
                 }
             },
+
             "bluetooth-is-connected": bluetoothConnectedHandler
         });
     });
 </script>
+
+{{end}}

frontend/z2/pages/backup.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/pure-min.css">
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/grids-responsive-min.css">
 
+    <link rel="stylesheet" type="text/css" href="/z2/css/notyf/notyf.min.css"/>
+
     <style>
         body {
             margin: 0 0 20px;

frontend/z2/pages/bike-presets.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/pure-min.css">
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/grids-responsive-min.css">
 
+    <link rel="stylesheet" type="text/css" href="/z2/css/notyf/notyf.min.css"/>
+
     <style>
         body {
             margin: 0 0 20px;

frontend/z2/pages/bike.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/pure-min.css">
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/grids-responsive-min.css">
 
+    <link rel="stylesheet" type="text/css" href="/z2/css/notyf/notyf.min.css"/>
+
     <style>
         body {
             margin: 0 0 20px;
@@ -86,36 +88,44 @@
 
 <script type="module">
     import {getEnv} from "/z2/env.js";
+    import {notify} from "/z2/z2-bundle.js";
+
+    const bluetoothConnectedHandler = (() => {
+        const seen = {};
+
+        return (data) => {
+            const msg = JSON.parse(data);
+            const key = msg.address;
+            if (key === "") {
+                return;
+            }
+            if (seen[key]) {
+                return;
+            }
+            seen[key] = true;
+
+            const kind = msg.kind;
+            const name = msg.name ? " " + msg.name : "";
+
+            const info = `${kind}${name} is connected`;
+            console.log(info);
+            notify("success", info);
+        };
+    })();
 
     document.addEventListener("DOMContentLoaded", async () => {
         const env = await getEnv();
 
-        const seen = {};
-
+
         env.streamEvents("/events", {
             "play-sound": (data) => {
                 const audio = document.getElementById(`sound-${data}`);
                 if (audio) {
                     audio.play();
                 }
             },
-            "bluetooth-is-connected": (data) => {
-                const msg = JSON.parse(data);
-                const key = msg.address;
-                if (key === "") {
-                    return;
-                }
-                if (seen[key]) {
-                    return;
-                }
-                seen[key] = true;
-
-                const kind = msg.kind;
-                const name = msg.name ? " " + msg.name : "";
 
-                const info = `${kind}${name} is connected`;
-                console.log(info);
-            },
+            "bluetooth-is-connected": bluetoothConnectedHandler
         });
     });
 </script>

frontend/z2/pages/data-bike.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/pure-min.css">
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/grids-responsive-min.css">
 
+    <link rel="stylesheet" type="text/css" href="/z2/css/notyf/notyf.min.css"/>
+
     <style>
         body {
             margin: 0 0 20px;

frontend/z2/pages/data-hrm.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/pure-min.css">
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/grids-responsive-min.css">
 
+    <link rel="stylesheet" type="text/css" href="/z2/css/notyf/notyf.min.css"/>
+
     <style>
         body {
             margin: 0 0 20px;

frontend/z2/pages/data-rower.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/pure-min.css">
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/grids-responsive-min.css">
 
+    <link rel="stylesheet" type="text/css" href="/z2/css/notyf/notyf.min.css"/>
+
     <style>
         body {
             margin: 0 0 20px;

frontend/z2/pages/hrm.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/pure-min.css">
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/grids-responsive-min.css">
 
+    <link rel="stylesheet" type="text/css" href="/z2/css/notyf/notyf.min.css"/>
+
     <style>
         body {
             margin: 0 0 20px;

frontend/z2/pages/rower.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/pure-min.css">
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/grids-responsive-min.css">
 
+    <link rel="stylesheet" type="text/css" href="/z2/css/notyf/notyf.min.css"/>
+
     <style>
         body {
             margin: 0 0 20px;
@@ -86,36 +88,44 @@
 
 <script type="module">
     import {getEnv} from "/z2/env.js";
+    import {notify} from "/z2/z2-bundle.js";
+
+    const bluetoothConnectedHandler = (() => {
+        const seen = {};
+
+        return (data) => {
+            const msg = JSON.parse(data);
+            const key = msg.address;
+            if (key === "") {
+                return;
+            }
+            if (seen[key]) {
+                return;
+            }
+            seen[key] = true;
+
+            const kind = msg.kind;
+            const name = msg.name ? " " + msg.name : "";
+
+            const info = `${kind}${name} is connected`;
+            console.log(info);
+            notify("success", info);
+        };
+    })();
 
     document.addEventListener("DOMContentLoaded", async () => {
         const env = await getEnv();
 
-        const seen = {};
-
+
         env.streamEvents("/events", {
             "play-sound": (data) => {
                 const audio = document.getElementById(`sound-${data}`);
                 if (audio) {
                     audio.play();
                 }
             },
-            "bluetooth-is-connected": (data) => {
-                const msg = JSON.parse(data);
-                const key = msg.address;
-                if (key === "") {
-                    return;
-                }
-                if (seen[key]) {
-                    return;
-                }
-                seen[key] = true;
-
-                const kind = msg.kind;
-                const name = msg.name ? " " + msg.name : "";
 
-                const info = `${kind}${name} is connected`;
-                console.log(info);
-            },
+            "bluetooth-is-connected": bluetoothConnectedHandler
         });
     });
 </script>

frontend/z2/pages/sync.html

@@ -14,6 +14,8 @@
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/pure-min.css">
     <link rel="stylesheet" type="text/css" href="/z2/css/purecss/grids-responsive-min.css">
 
+    <link rel="stylesheet" type="text/css" href="/z2/css/notyf/notyf.min.css"/>
+
     <style>
         body {
             margin: 0 0 20px;