Simple notifications on wake up

2023-02-25 04:47:11 +01:00 · 2023-02-25 04:47:11 +01:00 · 4290d4850d
commit 4290d4850d
parent c9f0a03c12
1 changed files with 160 additions and 7 deletions
--- 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";
        }

+        function updateStatus() {
            fetch(url)
                .then(response => response.json())
                .then(data => {
+                    previousStatus = currentStatus;
+                    currentStatus = data;
+
                    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>