Add meal gaps to the timing panel

Meals have the same shape as the pee and poo intervals already shown here —
gapsBetween() is type-agnostic, so it is two more rows and one more call. The
window, the median-based "typical" and the em-dash empty state all come along
unchanged.

The heading drops "Bathroom", which stops being accurate once feeding is in
the panel. data-panel stays "timing", so a collapsed panel stays collapsed
across the rename.

The hint keeps keying off pees: it is advice about when to take the puppy out,
which meal spacing has nothing to say about. Only its empty-state text widens.
This commit is contained in:
Alexander Heldt
2026-08-24 12:59:52 +00:00
parent 2a14c34010
commit 29b961c1b0
3 changed files with 8 additions and 2 deletions
+4 -1
View File
@@ -695,6 +695,7 @@
function renderTiming(events) { function renderTiming(events) {
const peeGaps = gapsBetween(events, "pee"); const peeGaps = gapsBetween(events, "pee");
const pooGaps = gapsBetween(events, "poo"); const pooGaps = gapsBetween(events, "poo");
const eatGaps = gapsBetween(events, "eat");
const show = (id, ms) => { const show = (id, ms) => {
document.getElementById(id).textContent = ms == null ? "—" : formatDuration(ms); document.getElementById(id).textContent = ms == null ? "—" : formatDuration(ms);
}; };
@@ -702,6 +703,8 @@
show("gap-pee-min", peeGaps[0] ?? null); show("gap-pee-min", peeGaps[0] ?? null);
show("gap-poo", median(pooGaps)); show("gap-poo", median(pooGaps));
show("gap-poo-min", pooGaps[0] ?? null); show("gap-poo-min", pooGaps[0] ?? null);
show("gap-eat", median(eatGaps));
show("gap-eat-min", eatGaps[0] ?? null);
const hint = document.getElementById("timing-hint"); const hint = document.getElementById("timing-hint");
const typicalPee = median(peeGaps); const typicalPee = median(peeGaps);
@@ -710,7 +713,7 @@
`Based on ${peeGaps.length} pee gap${peeGaps.length === 1 ? "" : "s"}. ` + `Based on ${peeGaps.length} pee gap${peeGaps.length === 1 ? "" : "s"}. ` +
`Aim to take the puppy out a little before the typical ${formatDuration(typicalPee)} mark.`; `Aim to take the puppy out a little before the typical ${formatDuration(typicalPee)} mark.`;
} else { } else {
hint.textContent = "Log a few more pees and poos to see typical timings."; hint.textContent = "Log a few more pees, poos and meals to see typical timings.";
} }
} }
+1
View File
@@ -1,4 +1,5 @@
[ [
{ "date": "2026-08-24", "text": "The timing panel now covers meals too — typical and shortest time between them, alongside the pee and poo gaps — so you can see the feeding rhythm the same way. It is titled just “Timing” now that it is no longer only about bathroom breaks" },
{ "date": "2026-08-24", "text": "The “By hour of day” chart is now tappable: tap any block to read what it counts (“3 meals between 07:00 and 08:00”) just under the chart — until now that number only showed as a hover tooltip, which phones never get. The block you tapped gets a ring; tap it again to clear it" }, { "date": "2026-08-24", "text": "The “By hour of day” chart is now tappable: tap any block to read what it counts (“3 meals between 07:00 and 08:00”) just under the chart — until now that number only showed as a hover tooltip, which phones never get. The block you tapped gets a ring; tap it again to clear it" },
{ "date": "2026-08-21", "text": "The sleep timer pill in the day bar — the one that appears once you've scrolled past the big timer — is now tappable: tap it while the puppy is asleep to log the wake-up, or while awake to log a sleep start, without scrolling back up to the buttons" }, { "date": "2026-08-21", "text": "The sleep timer pill in the day bar — the one that appears once you've scrolled past the big timer — is now tappable: tap it while the puppy is asleep to log the wake-up, or while awake to log a sleep start, without scrolling back up to the buttons" },
{ "date": "2026-08-20", "text": "Added reminders: turn them on in Settings and your phone gets a notification when it's time to sleep (\"Awake for 45 min\") or when there's been no pee, poo or meal for a while. Each one has its own interval, they arrive even with the app closed, and they stay quiet while the puppy is logged as asleep so you're not nagged all night. On iPhone, add Puppy Tracker to your Home Screen first — iOS only allows notifications for installed apps" }, { "date": "2026-08-20", "text": "Added reminders: turn them on in Settings and your phone gets a notification when it's time to sleep (\"Awake for 45 min\") or when there's been no pee, poo or meal for a while. Each one has its own interval, they arrive even with the app closed, and they stay quiet while the puppy is logged as asleep so you're not nagged all night. On iPhone, add Puppy Tracker to your Home Screen first — iOS only allows notifications for installed apps" },
+3 -1
View File
@@ -170,12 +170,14 @@
</section> </section>
<section class="timing" data-panel="timing"> <section class="timing" data-panel="timing">
<h2>Bathroom timing <span class="muted-note">(last 7 days)</span></h2> <h2>Timing <span class="muted-note">(last 7 days)</span></h2>
<div class="lasts"> <div class="lasts">
<div class="last-row"><span>Typical time between pees</span><span id="gap-pee"></span></div> <div class="last-row"><span>Typical time between pees</span><span id="gap-pee"></span></div>
<div class="last-row"><span>Shortest between pees</span><span id="gap-pee-min"></span></div> <div class="last-row"><span>Shortest between pees</span><span id="gap-pee-min"></span></div>
<div class="last-row"><span>Typical time between poos</span><span id="gap-poo"></span></div> <div class="last-row"><span>Typical time between poos</span><span id="gap-poo"></span></div>
<div class="last-row"><span>Shortest between poos</span><span id="gap-poo-min"></span></div> <div class="last-row"><span>Shortest between poos</span><span id="gap-poo-min"></span></div>
<div class="last-row"><span>Typical time between meals</span><span id="gap-eat"></span></div>
<div class="last-row"><span>Shortest between meals</span><span id="gap-eat-min"></span></div>
</div> </div>
<p class="muted-note timing-hint" id="timing-hint"></p> <p class="muted-note timing-hint" id="timing-hint"></p>
</section> </section>