m.giller/giller.dev
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Simple notifications on wake up

Browse source
This commit is contained in:
Maximilian Giller 2023-02-25 04:47:11 +01:00
parent c9f0a03c12
commit 4290d4850d
1 changed files with 160 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

167
index.html
View file

@ -42,10 +42,32 @@
align-items: center; align-items: center;
text-align: 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> </style>
</head> </head>
<body> <body>
<div id="settings-notice">Scroll down for settings</div>
<div id="container"> <div id="container">
<div id="vertical-center"> <div id="vertical-center">
Currently: Currently:
@ -55,9 +77,22 @@
</div> </div>
</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> <script>
const url = "https://giller.dev/g/my-status"; 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) { function setText(id, text) {
document.getElementById(id).innerHTML = text; document.getElementById(id).innerHTML = text;
@ -84,16 +119,134 @@
return seconds + " seconds remaining"; return seconds + " seconds remaining";
} }
fetch(url) function updateStatus() {
.then(response => response.json()) fetch(url)
.then(data => { .then(response => response.json())
setText("status", data.status); .then(data => {
previousStatus = currentStatus;
currentStatus = data;
if (data.status.toLowerCase() === "sleeping") { setText("status", data.status);
const remainingText = formatRemainingTime(data.time_until_wake);
setText("sleep", "Time until wake up:<br><span class='info'>" + remainingText + "</span>"); 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> </script>
</body> </body>