116 lines
3.5 KiB
HTML
116 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Day Drain</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Day Drain</h1>
|
|
<div class="status" id="statusText"></div>
|
|
|
|
<!-- Daily Progress -->
|
|
<div class="progress-bar">
|
|
<div class="progress-fill daily" id="dailyFill"></div>
|
|
</div>
|
|
<div class="percent" id="dailyPercent">0%</div>
|
|
|
|
<!-- Weekly Progress -->
|
|
<h2 class="weekly-title">Work Week Progress</h2>
|
|
<div class="progress-bar weekly">
|
|
<div class="progress-fill weekly-fill" id="weeklyFill"></div>
|
|
</div>
|
|
<div class="percent weekly-percent" id="weeklyPercent">0%</div>
|
|
</div>
|
|
|
|
<!-- App configuration -->
|
|
<script id="app-config" type="application/json">
|
|
{{ {
|
|
"workStart": work_start,
|
|
"workEnd": work_end,
|
|
"workDays": work_days,
|
|
"updateInterval": update_interval
|
|
} | tojson }}
|
|
</script>
|
|
|
|
<!-- Application logic -->
|
|
<script>
|
|
const config = JSON.parse(
|
|
document.getElementById("app-config").textContent
|
|
);
|
|
|
|
const WORK_START_HOUR = config.workStart.hour;
|
|
const WORK_START_MINUTE = config.workStart.minute;
|
|
const WORK_END_HOUR = config.workEnd.hour;
|
|
const WORK_END_MINUTE = config.workEnd.minute;
|
|
|
|
const WORK_DAYS = config.workDays;
|
|
const UPDATE_INTERVAL = config.updateInterval;
|
|
|
|
const TOTAL_WORK_SECONDS =
|
|
(WORK_END_HOUR * 3600 + WORK_END_MINUTE * 60) -
|
|
(WORK_START_HOUR * 3600 + WORK_START_MINUTE * 60);
|
|
|
|
const WEEKLY_DAY_WEIGHT = 100 / WORK_DAYS.length;
|
|
|
|
function updateProgress() {
|
|
const now = new Date();
|
|
const day = now.getDay();
|
|
|
|
const statusText = document.getElementById("statusText");
|
|
const dailyFill = document.getElementById("dailyFill");
|
|
const weeklyFill = document.getElementById("weeklyFill");
|
|
const dailyPercentText = document.getElementById("dailyPercent");
|
|
const weeklyPercentText = document.getElementById("weeklyPercent");
|
|
|
|
let dailyPercent = 0;
|
|
|
|
const start = new Date(now);
|
|
start.setHours(WORK_START_HOUR, WORK_START_MINUTE, 0, 0);
|
|
|
|
const end = new Date(now);
|
|
end.setHours(WORK_END_HOUR, WORK_END_MINUTE, 0, 0);
|
|
|
|
const isWorkday = WORK_DAYS.includes(day);
|
|
|
|
if (!isWorkday) {
|
|
statusText.textContent = "Not a workday 😌";
|
|
} else if (now < start) {
|
|
statusText.textContent = "Workday hasn't started yet";
|
|
} else if (now > end) {
|
|
dailyPercent = 100;
|
|
statusText.textContent = "Workday complete 🎉";
|
|
} else {
|
|
const elapsedSeconds = (now - start) / 1000;
|
|
|
|
dailyPercent = Math.min(
|
|
(elapsedSeconds / TOTAL_WORK_SECONDS) * 100,
|
|
100
|
|
);
|
|
statusText.textContent = "Grinding…";
|
|
}
|
|
|
|
// Daily progress
|
|
dailyFill.style.width = dailyPercent + "%";
|
|
dailyPercentText.textContent = dailyPercent.toFixed(4) + "%";
|
|
|
|
// Weekly progress
|
|
const completedDays = WORK_DAYS.filter(d => d < day).length;
|
|
let weeklyPercent =
|
|
(completedDays * WEEKLY_DAY_WEIGHT) +
|
|
(isWorkday ? (dailyPercent / 100) * WEEKLY_DAY_WEIGHT : 0);
|
|
|
|
weeklyPercent = Math.min(weeklyPercent, 100);
|
|
|
|
weeklyFill.style.width = weeklyPercent + "%";
|
|
weeklyPercentText.textContent = weeklyPercent.toFixed(4) + "%";
|
|
}
|
|
|
|
updateProgress();
|
|
setInterval(updateProgress, UPDATE_INTERVAL);
|
|
</script>
|
|
</body>
|
|
</html>
|