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

Implemented streak

Browse source
This commit is contained in:
Maximilian Giller 2024-01-09 22:41:22 +01:00
parent 7382378349
commit f0d98c43ae
1 changed files with 50 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
index.html
View file

@ -44,6 +44,10 @@
margin-top: 2em; margin-top: 2em;
} }
.sleep-streak {
margin-top: 2em;
}
#container { #container {
display: flex; display: flex;
height: 100vh; height: 100vh;
@ -83,6 +87,8 @@
.hide { .hide {
opacity: 0; opacity: 0;
height: 0;
margin: 0 !important;
} }
.settings-table td { .settings-table td {
@ -110,6 +116,7 @@
background-color: #222; background-color: #222;
} }
</style> </style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head> </head>
<body> <body>
@ -134,6 +141,18 @@
<div id="sleep"></div> <div id="sleep"></div>
<div id="sleep-streak">
Going to bed before 10pm
<br />
<i id="day-7" class="bi"></i>
<i id="day-6" class="bi"></i>
<i id="day-5" class="bi"></i>
<i id="day-4" class="bi"></i>
<i id="day-3" class="bi"></i>
<i id="day-2" class="bi"></i>
<i id="day-1" class="bi"></i>
</div>
</div> </div>
</div> </div>
<div id="settings"> <div id="settings">
@ -209,6 +228,8 @@
setText("status", data.title); setText("status", data.title);
setText("description", data.description); setText("description", data.description);
updateSleepStreak(data.streak);
if (data.title.toLowerCase() === "sleeping") { if (data.title.toLowerCase() === "sleeping") {
const remainingText = formatRemainingTime(data.remainingDuration); const remainingText = formatRemainingTime(data.remainingDuration);
setText("sleep", "Time until wake up:<br><span class='info'>" + remainingText + "</span>"); setText("sleep", "Time until wake up:<br><span class='info'>" + remainingText + "</span>");
@ -291,6 +312,35 @@
} }
} }
function updateSleepStreak(streakData) {
if (streakData.length == 0) {
document.getElementById("sleep-streak").classList = "hide";
return;
} else {
document.getElementById("sleep-streak").classList = "sleep-streak";
}
for (let offset = 1; offset < 8; offset++) {
let classes = ["bi"]
const adjustedDate = new Date((new Date()).getTime() - offset * 24 * 60 * 60 * 1000);
const formattedDate = adjustedDate.toISOString().split('T')[0];
if (streakData.length > 0) {
if (streakData.includes(formattedDate)) {
classes.push("bi-circle-fill");
} else if (offset == 0) {
classes.push("bi-circle-half");
} else {
classes.push("bi-circle");
}
}
document.getElementById("day-" + offset).classList = classes.join(" ");
document.getElementById("day-" + offset).title = formattedDate;
}
}
// On window focus, dismiss all notifications // On window focus, dismiss all notifications
window.onfocus = function () { window.onfocus = function () {
dismissNotifications(); dismissNotifications();