added sleep logging workflow and overview page
This commit is contained in:
Brian Bjarke Jensen
@@ -0,0 +1,923 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Sleep - Baby Monitor</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.burger-menu {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
cursor: pointer;
|
||||
z-index: 1000;
|
||||
background: white;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.burger-menu div {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background-color: #333;
|
||||
margin: 5px 0;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.menu-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: -250px;
|
||||
width: 250px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
|
||||
transition: left 0.3s;
|
||||
z-index: 999;
|
||||
padding: 4rem 1rem 1rem 1rem;
|
||||
}
|
||||
.menu-overlay.open {
|
||||
left: 0;
|
||||
}
|
||||
.menu-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
z-index: 998;
|
||||
}
|
||||
.menu-backdrop.open {
|
||||
display: block;
|
||||
}
|
||||
.menu-item {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.menu-item:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.menu-item.logout {
|
||||
color: #dc3545;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
padding: 40px;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: #6c757d;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.button.secondary:hover {
|
||||
box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
font-size: 64px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.empty-state h2 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
margin-bottom: 40px;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.chart-container h2 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.charts-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.charts-row {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #f8f9fa;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-card h3 {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
color: #4facfe;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.list-container {
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.list-container h2 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.sleep-list {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sleep-item {
|
||||
background: white;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.sleep-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.sleep-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sleep-child {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sleep-time {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sleep-duration {
|
||||
color: #4facfe;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sleep-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.edit-button {
|
||||
background: #4facfe;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.edit-button:hover {
|
||||
background: #3a9be8;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
margin-bottom: 30px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-group select {
|
||||
padding: 8px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.badge.ongoing {
|
||||
background: #4facfe;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="burger-menu" id="burgerMenu">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
|
||||
<div class="menu-backdrop" id="menuBackdrop"></div>
|
||||
|
||||
<div class="menu-overlay" id="menuOverlay">
|
||||
<div class="menu-item" id="menuHome">🏠 Home</div>
|
||||
<div class="menu-item" id="menuAddChild">👶 Add Child</div>
|
||||
<div class="menu-item" id="menuFeedings">🍼 Feedings</div>
|
||||
<div class="menu-item" id="menuDiapers">🧷 Diapers</div>
|
||||
<div class="menu-item" id="menuSleep">😴 Sleep</div>
|
||||
<div class="menu-item logout" id="menuLogout">🚪 Logout</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h1>😴 Sleep Tracking</h1>
|
||||
<p class="subtitle">Monitor your baby's sleep patterns</p>
|
||||
|
||||
<div class="filters">
|
||||
<div class="filter-group">
|
||||
<label for="childFilter">Child</label>
|
||||
<select id="childFilter">
|
||||
<option value="">All Children</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="timeRangeFilter">Time Range</label>
|
||||
<select id="timeRangeFilter">
|
||||
<option value="1">Last 24 hours</option>
|
||||
<option value="3">Last 3 days</option>
|
||||
<option value="7" selected>Last 7 days</option>
|
||||
<option value="14">Last 14 days</option>
|
||||
<option value="30">Last 30 days</option>
|
||||
<option value="90">Last 90 days</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="content" class="loading">
|
||||
<p>Loading sleep data...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
|
||||
<script>
|
||||
const token = localStorage.getItem("access_token");
|
||||
|
||||
// Burger menu functionality
|
||||
const burgerMenu = document.getElementById("burgerMenu");
|
||||
const menuOverlay = document.getElementById("menuOverlay");
|
||||
const menuBackdrop = document.getElementById("menuBackdrop");
|
||||
|
||||
function toggleMenu() {
|
||||
menuOverlay.classList.toggle("open");
|
||||
menuBackdrop.classList.toggle("open");
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
menuOverlay.classList.remove("open");
|
||||
menuBackdrop.classList.remove("open");
|
||||
}
|
||||
|
||||
burgerMenu.addEventListener("click", toggleMenu);
|
||||
menuBackdrop.addEventListener("click", closeMenu);
|
||||
|
||||
document.getElementById("menuHome").addEventListener("click", () => {
|
||||
window.location.href = "/";
|
||||
});
|
||||
|
||||
document.getElementById("menuAddChild").addEventListener("click", () => {
|
||||
window.location.href = "/add-child.html";
|
||||
});
|
||||
|
||||
document.getElementById("menuFeedings").addEventListener("click", () => {
|
||||
window.location.href = "/feedings.html";
|
||||
});
|
||||
|
||||
document.getElementById("menuDiapers").addEventListener("click", () => {
|
||||
window.location.href = "/diapers.html";
|
||||
});
|
||||
|
||||
document.getElementById("menuSleep").addEventListener("click", () => {
|
||||
closeMenu();
|
||||
});
|
||||
|
||||
document.getElementById("menuLogout").addEventListener("click", () => {
|
||||
closeMenu();
|
||||
logout();
|
||||
});
|
||||
|
||||
// Check if user is logged in
|
||||
if (!token) {
|
||||
window.location.href = "/login.html";
|
||||
}
|
||||
|
||||
let allSleeps = [];
|
||||
let allChildren = [];
|
||||
let selectedChildId = "";
|
||||
|
||||
// Filter change handlers
|
||||
document
|
||||
.getElementById("childFilter")
|
||||
.addEventListener("change", function () {
|
||||
selectedChildId = this.value;
|
||||
// Save selection to localStorage
|
||||
if (selectedChildId) {
|
||||
localStorage.setItem("lastSleepChildFilter", selectedChildId);
|
||||
} else {
|
||||
localStorage.removeItem("lastSleepChildFilter");
|
||||
}
|
||||
renderCharts();
|
||||
});
|
||||
|
||||
document
|
||||
.getElementById("timeRangeFilter")
|
||||
.addEventListener("change", function () {
|
||||
loadData();
|
||||
});
|
||||
|
||||
async function loadData() {
|
||||
try {
|
||||
// Fetch children
|
||||
const childrenResponse = await fetch("/api/children", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!childrenResponse.ok) {
|
||||
throw new Error("Failed to fetch children");
|
||||
}
|
||||
|
||||
allChildren = await childrenResponse.json();
|
||||
|
||||
// Populate child filter
|
||||
const childFilter = document.getElementById("childFilter");
|
||||
childFilter.innerHTML = '<option value="">All Children</option>';
|
||||
allChildren.forEach((child) => {
|
||||
const option = document.createElement("option");
|
||||
option.value = child.id;
|
||||
option.textContent = child.name;
|
||||
childFilter.appendChild(option);
|
||||
});
|
||||
|
||||
// Restore last selected child from localStorage
|
||||
const lastChildId = localStorage.getItem("lastSleepChildFilter");
|
||||
if (lastChildId) {
|
||||
childFilter.value = lastChildId;
|
||||
selectedChildId = lastChildId;
|
||||
}
|
||||
|
||||
// Fetch sleep logs
|
||||
const sleepResponse = await fetch("/api/sleep", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!sleepResponse.ok) {
|
||||
throw new Error("Failed to fetch sleep data");
|
||||
}
|
||||
|
||||
allSleeps = await sleepResponse.json();
|
||||
|
||||
renderCharts();
|
||||
} catch (error) {
|
||||
console.error("Error loading data:", error);
|
||||
document.getElementById("content").innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">😴</div>
|
||||
<h2>Error Loading Data</h2>
|
||||
<p>${error.message}</p>
|
||||
<button class="button" onclick="window.location.href='/'">Go Home</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderCharts() {
|
||||
const timeRange = parseInt(
|
||||
document.getElementById("timeRangeFilter").value,
|
||||
);
|
||||
const cutoffDate = new Date();
|
||||
cutoffDate.setDate(cutoffDate.getDate() - timeRange);
|
||||
|
||||
// Filter sleeps by time range and child
|
||||
let filteredSleeps = allSleeps.filter((sleep) => {
|
||||
const sleepDate = new Date(sleep.start_time);
|
||||
const matchesTimeRange = sleepDate >= cutoffDate;
|
||||
const matchesChild =
|
||||
!selectedChildId ||
|
||||
sleep.child_id === parseInt(selectedChildId);
|
||||
return matchesTimeRange && matchesChild;
|
||||
});
|
||||
|
||||
if (filteredSleeps.length === 0) {
|
||||
document.getElementById("content").innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">😴</div>
|
||||
<h2>No Sleep Data</h2>
|
||||
<p>Start tracking sleep sessions from the home page.</p>
|
||||
<button class="button" onclick="window.location.href='/'">Go Home</button>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculate stats
|
||||
const completedSleeps = filteredSleeps.filter(
|
||||
(sleep) => sleep.end_time,
|
||||
);
|
||||
const totalSessions = filteredSleeps.length;
|
||||
const ongoingSessions = filteredSleeps.filter(
|
||||
(sleep) => !sleep.end_time,
|
||||
).length;
|
||||
|
||||
let totalMinutes = 0;
|
||||
let longestMinutes = 0;
|
||||
let shortestMinutes = Infinity;
|
||||
|
||||
completedSleeps.forEach((sleep) => {
|
||||
const duration = calculateDuration(sleep.start_time, sleep.end_time);
|
||||
totalMinutes += duration;
|
||||
if (duration > longestMinutes) longestMinutes = duration;
|
||||
if (duration < shortestMinutes) shortestMinutes = duration;
|
||||
});
|
||||
|
||||
const avgMinutes =
|
||||
completedSleeps.length > 0
|
||||
? Math.round(totalMinutes / completedSleeps.length)
|
||||
: 0;
|
||||
|
||||
if (completedSleeps.length === 0) {
|
||||
shortestMinutes = 0;
|
||||
}
|
||||
|
||||
// Prepare data for charts
|
||||
const barChartData = prepareBarChartData(filteredSleeps, timeRange);
|
||||
const durationDistData = prepareDurationDistributionData(completedSleeps);
|
||||
|
||||
let html = `
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<h3>Total Sessions</h3>
|
||||
<div class="value">${totalSessions}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Ongoing</h3>
|
||||
<div class="value">${ongoingSessions}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Avg Duration</h3>
|
||||
<div class="value">${formatDuration(avgMinutes)}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Longest Sleep</h3>
|
||||
<div class="value">${formatDuration(longestMinutes)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<h2>Sleep Sessions per Day</h2>
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="barChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="charts-row">
|
||||
<div class="chart-container">
|
||||
<h2>Duration Distribution</h2>
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="durationChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<h2>Average Duration by Day</h2>
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="avgDurationChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-container">
|
||||
<h2>Recent Sleep Sessions</h2>
|
||||
<div class="sleep-list">
|
||||
${filteredSleeps
|
||||
.slice(0, 50)
|
||||
.map((sleep) => renderSleepItem(sleep))
|
||||
.join("")}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.getElementById("content").innerHTML = html;
|
||||
|
||||
// Render charts
|
||||
renderBarChart(barChartData);
|
||||
renderDurationChart(durationDistData);
|
||||
renderAvgDurationChart(filteredSleeps, timeRange);
|
||||
}
|
||||
|
||||
function calculateDuration(startTime, endTime) {
|
||||
if (!endTime) return 0;
|
||||
const start = new Date(startTime);
|
||||
const end = new Date(endTime);
|
||||
return Math.round((end - start) / 60000); // minutes
|
||||
}
|
||||
|
||||
function formatDuration(minutes) {
|
||||
if (minutes === 0) return "0m";
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
if (hours === 0) return `${mins}m`;
|
||||
if (mins === 0) return `${hours}h`;
|
||||
return `${hours}h ${mins}m`;
|
||||
}
|
||||
|
||||
function prepareBarChartData(sleeps, timeRange) {
|
||||
const days = {};
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
// Initialize all days in range
|
||||
for (let i = timeRange - 1; i >= 0; i--) {
|
||||
const date = new Date(today);
|
||||
date.setDate(date.getDate() - i);
|
||||
const dateStr = date.toISOString().split("T")[0];
|
||||
days[dateStr] = 0;
|
||||
}
|
||||
|
||||
// Count sleeps per day
|
||||
sleeps.forEach((sleep) => {
|
||||
const date = new Date(sleep.start_time);
|
||||
date.setHours(0, 0, 0, 0);
|
||||
const dateStr = date.toISOString().split("T")[0];
|
||||
if (days.hasOwnProperty(dateStr)) {
|
||||
days[dateStr]++;
|
||||
}
|
||||
});
|
||||
|
||||
const labels = Object.keys(days).map((date) => {
|
||||
const d = new Date(date);
|
||||
return d.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
});
|
||||
|
||||
return {
|
||||
labels,
|
||||
data: Object.values(days),
|
||||
};
|
||||
}
|
||||
|
||||
function prepareDurationDistributionData(sleeps) {
|
||||
const ranges = {
|
||||
"0-30m": 0,
|
||||
"30m-1h": 0,
|
||||
"1-2h": 0,
|
||||
"2-3h": 0,
|
||||
"3-4h": 0,
|
||||
"4h+": 0,
|
||||
};
|
||||
|
||||
sleeps.forEach((sleep) => {
|
||||
const duration = calculateDuration(sleep.start_time, sleep.end_time);
|
||||
if (duration < 30) ranges["0-30m"]++;
|
||||
else if (duration < 60) ranges["30m-1h"]++;
|
||||
else if (duration < 120) ranges["1-2h"]++;
|
||||
else if (duration < 180) ranges["2-3h"]++;
|
||||
else if (duration < 240) ranges["3-4h"]++;
|
||||
else ranges["4h+"]++;
|
||||
});
|
||||
|
||||
return {
|
||||
labels: Object.keys(ranges),
|
||||
data: Object.values(ranges),
|
||||
};
|
||||
}
|
||||
|
||||
function renderBarChart(chartData) {
|
||||
const ctx = document.getElementById("barChart");
|
||||
new Chart(ctx, {
|
||||
type: "bar",
|
||||
data: {
|
||||
labels: chartData.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Sleep Sessions",
|
||||
data: chartData.data,
|
||||
backgroundColor: "rgba(79, 172, 254, 0.6)",
|
||||
borderColor: "rgba(79, 172, 254, 1)",
|
||||
borderWidth: 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
stepSize: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function renderDurationChart(chartData) {
|
||||
const ctx = document.getElementById("durationChart");
|
||||
new Chart(ctx, {
|
||||
type: "pie",
|
||||
data: {
|
||||
labels: chartData.labels,
|
||||
datasets: [
|
||||
{
|
||||
data: chartData.data,
|
||||
backgroundColor: [
|
||||
"rgba(79, 172, 254, 0.8)",
|
||||
"rgba(0, 242, 254, 0.8)",
|
||||
"rgba(58, 155, 232, 0.8)",
|
||||
"rgba(32, 137, 220, 0.8)",
|
||||
"rgba(21, 119, 208, 0.8)",
|
||||
"rgba(11, 101, 196, 0.8)",
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "bottom",
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function renderAvgDurationChart(sleeps, timeRange) {
|
||||
const days = {};
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
|
||||
// Initialize all days
|
||||
for (let i = timeRange - 1; i >= 0; i--) {
|
||||
const date = new Date(today);
|
||||
date.setDate(date.getDate() - i);
|
||||
const dateStr = date.toISOString().split("T")[0];
|
||||
days[dateStr] = { total: 0, count: 0 };
|
||||
}
|
||||
|
||||
// Calculate totals
|
||||
sleeps
|
||||
.filter((sleep) => sleep.end_time)
|
||||
.forEach((sleep) => {
|
||||
const date = new Date(sleep.start_time);
|
||||
date.setHours(0, 0, 0, 0);
|
||||
const dateStr = date.toISOString().split("T")[0];
|
||||
if (days.hasOwnProperty(dateStr)) {
|
||||
const duration = calculateDuration(
|
||||
sleep.start_time,
|
||||
sleep.end_time,
|
||||
);
|
||||
days[dateStr].total += duration;
|
||||
days[dateStr].count++;
|
||||
}
|
||||
});
|
||||
|
||||
const labels = Object.keys(days).map((date) => {
|
||||
const d = new Date(date);
|
||||
return d.toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
});
|
||||
});
|
||||
|
||||
const data = Object.values(days).map((day) =>
|
||||
day.count > 0 ? Math.round(day.total / day.count) : 0,
|
||||
);
|
||||
|
||||
const ctx = document.getElementById("avgDurationChart");
|
||||
new Chart(ctx, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Avg Duration (minutes)",
|
||||
data,
|
||||
borderColor: "rgba(79, 172, 254, 1)",
|
||||
backgroundColor: "rgba(79, 172, 254, 0.1)",
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
callback: function (value) {
|
||||
return value + "m";
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function renderSleepItem(sleep) {
|
||||
const child = allChildren.find((c) => c.id === sleep.child_id);
|
||||
const childName = child ? child.name : "Unknown";
|
||||
const startDate = new Date(sleep.start_time);
|
||||
const isOngoing = !sleep.end_time;
|
||||
|
||||
let durationText = "";
|
||||
if (isOngoing) {
|
||||
durationText = '<span class="badge ongoing">Ongoing</span>';
|
||||
} else {
|
||||
const duration = calculateDuration(sleep.start_time, sleep.end_time);
|
||||
durationText = `Duration: ${formatDuration(duration)}`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="sleep-item">
|
||||
<div class="sleep-info">
|
||||
<div class="sleep-child">${childName}</div>
|
||||
<div class="sleep-time">
|
||||
${startDate.toLocaleString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
})}
|
||||
${isOngoing ? "" : ` - ${new Date(sleep.end_time).toLocaleString("en-US", { hour: "numeric", minute: "2-digit" })}`}
|
||||
</div>
|
||||
<div class="sleep-duration">${durationText}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
try {
|
||||
await fetch("/api/logout", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
console.error("Logout error:", error);
|
||||
} finally {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("username");
|
||||
window.location.href = "/login.html";
|
||||
}
|
||||
}
|
||||
|
||||
// Load data on page load
|
||||
loadData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user