alex/puppy-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: alex/puppy-tracker:561b98b64f3c738ddbcd727d97965ec0abd92472
Branches Tags
alex/puppy-tracker:main
..
compare: alex/puppy-tracker:8f809b5f1459f040f2390ee23ed23c4dd56a54b2
Branches Tags
alex/puppy-tracker:main

2 Commits
561b98b64f .. 8f809b5f14

Author SHA1 Message Date
Alexander Heldt 8f809b5f14 Make info panels collapsible with remembered state 
Each main section with a data-panel key can now be folded by clicking its
heading (rotating chevron, keyboard-accessible via role/tabindex/aria-expanded
and Enter/Space). Collapsed keys are persisted in localStorage and restored on
load, so the layout stays how you left it across reloads.

State is device-global like the theme (a single non-namespaced key, not
per-user data), and only collapsed panels are stored — so any panel added
later defaults to open.
 2026-07-10 16:57:48 +00:00
Alexander Heldt edfe75e14f Add sleep timeline and by-hour heatmaps 
Two new charts over the last 14 days, in the existing hand-rolled SVG style:

- "When he sleeps": an actogram with one row per day (oldest at top, Today
  at bottom) and a midnight-to-midnight track with sleep shaded. Sleep
  windows are clipped per day so a night crossing midnight splits across two
  rows, and today's open sleep runs to now. Tapping a row selects that day.
- "By hour of day": pee/poo/meal frequency as three 24-cell heatmap rows,
  each cell shaded by how often that event lands in that hour — surfacing
  daily rhythm the median gap can't show.

Both re-render on the one-minute tick so the current day keeps filling in.
 2026-07-10 16:55:55 +00:00
2 changed files with 1 additions and 5 deletions
Expand all files Collapse all files
src/app.js
-4
View File
@@ -1216,10 +1216,6 @@
const ageText = formatAge(cfg.birthday); const ageText = formatAge(cfg.birthday);
ageEl.textContent = ageText; ageEl.textContent = ageText;
ageEl.hidden = !ageText; ageEl.hidden = !ageText;
// Use the puppy's name in the sleep-timeline heading rather than assuming a
// gender; fall back to a neutral phrase when no name is configured.
const sleepTitle = document.getElementById("sleep-timeline-title");
if (sleepTitle) sleepTitle.textContent = cfg.name ? `When ${cfg.name} sleeps` : "When sleeping";
} }
function render() { function render() {
src/index.html
+1 -1
View File
@@ -172,7 +172,7 @@
</section> </section>
<section class="patterns" data-panel="sleep-timeline"> <section class="patterns" data-panel="sleep-timeline">
<h2><span id="sleep-timeline-title">When sleeping</span> <span class="muted-note">(last 14 days)</span></h2> <h2>When he sleeps <span class="muted-note">(last 14 days)</span></h2>
<svg id="chart-sleep-timeline" class="chart-svg" viewBox="0 0 320 228" role="img" aria-label="Sleep periods per day over the last 14 days"></svg> <svg id="chart-sleep-timeline" class="chart-svg" viewBox="0 0 320 228" role="img" aria-label="Sleep periods per day over the last 14 days"></svg>
<p class="muted-note">Each row is a day, midnight to midnight; shaded = asleep. Tap a row to open that day.</p> <p class="muted-note">Each row is a day, midnight to midnight; shaded = asleep. Tap a row to open that day.</p>
</section> </section>