From 4290d4850d82ae4b1da7dcc7a03da1f3ad6dbfa3 Mon Sep 17 00:00:00 2001
From: Maximilian Giller <m.giller@tu-braunschweig.de>
Date: Sat, 25 Feb 2023 04:47:11 +0100
Subject: [PATCH] Simple notifications on wake up

---
 index.html | 167 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 160 insertions(+), 7 deletions(-)
diff --git a/index.html b/index.html
index 333ee86..e7a58ee 100644
--- a/index.html
+++ b/index.html
@@ -42,10 +42,32 @@
             align-items: center;
             text-align: center;
         }
+
+        #settings {
+            width: 500px;
+            margin: 0 auto;
+            height: 60vh;
+        }
+
+        #settings-notice {
+            position: absolute;
+            bottom: 5vh;
+            width: 100vw;
+            text-align: center;
+            color: #444;
+
+            transition-duration: 0.5s;
+            transition-property: opacity;
+        }
+
+        .hide {
+            opacity: 0;
+        }
     </style>
 </head>
 
 <body>
+    <div id="settings-notice">Scroll down for settings</div>
     <div id="container">
         <div id="vertical-center">
             Currently:
@@ -55,9 +77,22 @@
 
         </div>
     </div>
+    <div id="settings">
+        <h1>Settings</h1>
+        <input type="checkbox" id="notifications" name="notifications" value="notifications" /><label
+            for="notifications">Enable wake up
+            notifications</label>
+    </div>
 
     <script>
         const url = "https://giller.dev/g/my-status";
+        const notifications = [];
+        let userOnPage = true;
+        let previousStatus = undefined;
+        let currentStatus = undefined;
+        let updateRoutine = undefined;
+        const updateInterval = 60 * 1000;
+        const notificationSettingName = "wake-up-notifications";
 
         function setText(id, text) {
             document.getElementById(id).innerHTML = text;
@@ -84,16 +119,134 @@
             return seconds + " seconds remaining";
         }
 
-        fetch(url)
-            .then(response => response.json())
-            .then(data => {
-                setText("status", data.status);
+        function updateStatus() {
+            fetch(url)
+                .then(response => response.json())
+                .then(data => {
+                    previousStatus = currentStatus;
+                    currentStatus = data;
 
-                if (data.status.toLowerCase() === "sleeping") {
-                    const remainingText = formatRemainingTime(data.time_until_wake);
-                    setText("sleep", "Time until wake up:<br><span class='info'>" + remainingText + "</span>");
+                    setText("status", data.status);
+
+                    if (data.status.toLowerCase() === "sleeping") {
+                        const remainingText = formatRemainingTime(data.time_until_wake);
+                        setText("sleep", "Time until wake up:<br><span class='info'>" + remainingText + "</span>");
+                    } else {
+                        setText("sleep", "");
+                    }
+                });
+        }
+
+
+        function dismissNotifications() {
+            notifications.forEach(notification => notification.close());
+            notifications.length = 0;
+        }
+
+        function hasWakenUp() {
+            return previousStatus && previousStatus.status.toLowerCase() === "sleeping" && currentStatus.status.toLowerCase() !== "sleeping";
+        }
+
+        function enableNotifications() {
+            if (updateRoutine) {
+                return;
+            }
+
+            // Request permission to show notifications
+            Notification.requestPermission().then(function (result) {
+                if (result === "granted") {
+                    // Save setting
+                    localStorage.setItem(notificationSettingName, "true");
+
+                    // Enable notifications
+                    updateRoutine = setInterval(function () {
+                        updateStatus();
+                        if (hasWakenUp()) {
+                            showNotification("Max Status", "Max has woken up!");
+                        }
+                    }, updateInterval);
                 }
             });
+        }
+
+        function disableNotifications() {
+            if (!updateRoutine) {
+                return;
+            }
+
+            clearInterval(updateRoutine);
+            updateRoutine = undefined;
+
+            dismissNotifications();
+
+            // Save setting
+            localStorage.setItem(notificationSettingName, "false");
+        }
+
+        function showNotification(title, body) {
+            if (userOnPage) {
+                return;
+            }
+
+            const notification = new Notification(title, {
+                body: body,
+                icon: "https://giller.dev/favicon.ico"
+            });
+
+            notification.onclick = function () {
+                window.focus();
+            };
+
+            notifications.push(notification);
+        }
+
+        function loadNotificationSetting() {
+            if (localStorage.getItem(notificationSettingName) === "true") {
+                document.getElementById("notifications").checked = true;
+                enableNotifications();
+            } else {
+                document.getElementById("notifications").checked = false;
+                disableNotifications();
+            }
+        }
+
+        // On window focus, dismiss all notifications
+        window.onfocus = function () {
+            dismissNotifications();
+            userOnPage = true;
+        };
+
+        // On window blur, enable notifications
+        window.onblur = function () {
+            userOnPage = false;
+        };
+
+        // On page unload, dismiss all notifications
+        window.onbeforeunload = function () {
+            dismissNotifications();
+        };
+
+        // On checkbox change, enable/disable notifications
+        document.getElementById("notifications").onchange = function () {
+            if (this.checked) {
+                enableNotifications();
+            } else {
+                disableNotifications();
+            }
+        };
+
+        // On scroll, hide settings notice
+        window.onscroll = function () {
+            const scrollPosition = window.scrollY;
+            if (scrollPosition > 0) {
+                document.getElementById("settings-notice").classList.add("hide");
+            } else {
+                document.getElementById("settings-notice").classList.remove("hide");
+            }
+        };
+
+        updateStatus();
+        loadNotificationSetting();
     </script>
 </body>
 
