persisted selection of child and time range when switching between pages. Also added automatic total sleep time scaling on vertical axis

This commit is contained in:
Brian Bjarke Jensen
2025-11-11 14:29:43 +01:00
parent b1fae46f28
commit dea3b5d3b5
3 changed files with 59 additions and 7 deletions
+9 -1
View File
@@ -267,9 +267,15 @@
let allDiaperChanges = []; let allDiaperChanges = [];
let allChildren = []; let allChildren = [];
let currentDaysRange = 7; let currentDaysRange = parseInt(localStorage.getItem("lastDiaperTimeRange")) || 7;
let selectedChildId = null; // null means "All Children" let selectedChildId = null; // null means "All Children"
// Restore last selected child from localStorage
const lastChildId = localStorage.getItem("lastDiaperChildFilter");
if (lastChildId && lastChildId !== "all") {
selectedChildId = parseInt(lastChildId);
}
// Load diaper changes data // Load diaper changes data
async function loadDiaperChanges() { async function loadDiaperChanges() {
try { try {
@@ -311,12 +317,14 @@
function onDaysRangeChange(event) { function onDaysRangeChange(event) {
currentDaysRange = parseInt(event.target.value); currentDaysRange = parseInt(event.target.value);
localStorage.setItem("lastDiaperTimeRange", currentDaysRange);
displayDiaperChanges(allDiaperChanges); displayDiaperChanges(allDiaperChanges);
} }
function onChildChange(event) { function onChildChange(event) {
selectedChildId = selectedChildId =
event.target.value === "all" ? null : parseInt(event.target.value); event.target.value === "all" ? null : parseInt(event.target.value);
localStorage.setItem("lastDiaperChildFilter", event.target.value);
displayDiaperChanges(allDiaperChanges); displayDiaperChanges(allDiaperChanges);
} }
+9 -1
View File
@@ -304,9 +304,15 @@
let allFeedings = []; let allFeedings = [];
let allChildren = []; let allChildren = [];
let currentDaysRange = 7; let currentDaysRange = parseInt(localStorage.getItem("lastFeedingTimeRange")) || 7;
let selectedChildId = null; // null means "All Children" let selectedChildId = null; // null means "All Children"
// Restore last selected child from localStorage
const lastChildId = localStorage.getItem("lastFeedingChildFilter");
if (lastChildId && lastChildId !== "all") {
selectedChildId = parseInt(lastChildId);
}
// Load feedings data // Load feedings data
async function loadFeedings() { async function loadFeedings() {
try { try {
@@ -348,12 +354,14 @@
function onDaysRangeChange(event) { function onDaysRangeChange(event) {
currentDaysRange = parseInt(event.target.value); currentDaysRange = parseInt(event.target.value);
localStorage.setItem("lastFeedingTimeRange", currentDaysRange);
displayFeedings(allFeedings); displayFeedings(allFeedings);
} }
function onChildChange(event) { function onChildChange(event) {
selectedChildId = selectedChildId =
event.target.value === "all" ? null : parseInt(event.target.value); event.target.value === "all" ? null : parseInt(event.target.value);
localStorage.setItem("lastFeedingChildFilter", event.target.value);
displayFeedings(allFeedings); displayFeedings(allFeedings);
} }
+41 -5
View File
@@ -339,6 +339,8 @@
document document
.getElementById("timeRangeFilter") .getElementById("timeRangeFilter")
.addEventListener("change", function () { .addEventListener("change", function () {
// Save selection to localStorage
localStorage.setItem("lastSleepTimeRange", this.value);
loadData(); loadData();
}); });
@@ -374,6 +376,13 @@
selectedChildId = lastChildId; selectedChildId = lastChildId;
} }
// Restore last selected time range from localStorage
const timeRangeFilter = document.getElementById("timeRangeFilter");
const lastTimeRange = localStorage.getItem("lastSleepTimeRange");
if (lastTimeRange) {
timeRangeFilter.value = lastTimeRange;
}
// Fetch sleep logs // Fetch sleep logs
const sleepResponse = await fetch("/api/sleep", { const sleepResponse = await fetch("/api/sleep", {
headers: { headers: {
@@ -778,11 +787,27 @@
console.log('Datasets:', datasets); console.log('Datasets:', datasets);
// Determine the maximum total duration across all periods (in hours)
const maxDuration = Math.max(...chartData.durations.map(periodDurations =>
periodDurations.reduce((sum, val) => sum + val, 0)
), 0);
console.log('Max duration (hours):', maxDuration);
// Decide whether to use minutes or hours based on max duration
const useMinutes = maxDuration < 2; // Use minutes if max is less than 2 hours
// Convert data to minutes if needed
const finalDatasets = useMinutes ? datasets.map(dataset => ({
...dataset,
data: dataset.data.map(hours => hours * 60) // Convert hours to minutes
})) : datasets;
barChartInstance = new Chart(ctx, { barChartInstance = new Chart(ctx, {
type: "bar", type: "bar",
data: { data: {
labels: chartData.labels, labels: chartData.labels,
datasets: datasets, datasets: finalDatasets,
}, },
options: { options: {
responsive: true, responsive: true,
@@ -796,11 +821,15 @@
beginAtZero: true, beginAtZero: true,
title: { title: {
display: true, display: true,
text: "Hours", text: useMinutes ? "Minutes" : "Hours",
}, },
ticks: { ticks: {
callback: function(value) { callback: function(value) {
return value.toFixed(1) + 'h'; if (useMinutes) {
return Math.round(value) + 'm';
} else {
return value.toFixed(1) + 'h';
}
} }
}, },
}, },
@@ -812,8 +841,12 @@
tooltip: { tooltip: {
callbacks: { callbacks: {
label: function(context) { label: function(context) {
const hours = Math.floor(context.parsed.y); const value = useMinutes ? context.parsed.y / 60 : context.parsed.y;
const minutes = Math.round((context.parsed.y - hours) * 60); const hours = Math.floor(value);
const minutes = Math.round((value - hours) * 60);
if (hours === 0) {
return `${context.dataset.label}: ${minutes}m`;
}
return `${context.dataset.label}: ${hours}h ${minutes}m`; return `${context.dataset.label}: ${hours}h ${minutes}m`;
}, },
footer: function(tooltipItems) { footer: function(tooltipItems) {
@@ -822,6 +855,9 @@
const hours = Math.floor(totalHours); const hours = Math.floor(totalHours);
const minutes = Math.round((totalHours - hours) * 60); const minutes = Math.round((totalHours - hours) * 60);
const sessionCount = chartData.sessionCounts[periodIndex]; const sessionCount = chartData.sessionCounts[periodIndex];
if (hours === 0) {
return `Total: ${minutes}m (${sessionCount} session${sessionCount !== 1 ? 's' : ''})`;
}
return `Total: ${hours}h ${minutes}m (${sessionCount} session${sessionCount !== 1 ? 's' : ''})`; return `Total: ${hours}h ${minutes}m (${sessionCount} session${sessionCount !== 1 ? 's' : ''})`;
} }
} }