diff --git a/src/baby_monitor/static/index.html b/src/baby_monitor/static/index.html index c382d67..153c7b2 100644 --- a/src/baby_monitor/static/index.html +++ b/src/baby_monitor/static/index.html @@ -167,6 +167,52 @@ margin-top: 0.5rem; opacity: 0.9; } + .recent-activity { + margin-top: 2rem; + padding: 1.5rem; + background: #f8f9fa; + border-radius: 8px; + } + .recent-activity h3 { + margin-top: 0; + margin-bottom: 1rem; + color: #333; + font-size: 1.1rem; + } + .activity-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; + } + .activity-card { + background: white; + padding: 1rem; + border-radius: 6px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); + } + .activity-card .icon { + font-size: 1.5rem; + margin-bottom: 0.5rem; + } + .activity-card .type { + font-weight: 600; + color: #333; + margin-bottom: 0.25rem; + } + .activity-card .time { + font-size: 0.85rem; + color: #666; + } + .activity-card .details { + font-size: 0.85rem; + color: #888; + margin-top: 0.5rem; + } + .activity-card.empty { + opacity: 0.5; + font-style: italic; + color: #999; + } @@ -321,6 +367,7 @@ let activeSleep = null; let lastSleep = null; let sleepUpdateTimerInterval = null; + let lastDiaperChange = null; async function loadFeedingStatus(children) { userChildren = children; @@ -376,6 +423,20 @@ lastSleep = sleeps[0]; } } + + // Fetch all diaper changes to get the last one + const diaperResponse = await fetch("/api/diaper-changes", { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + + if (diaperResponse.ok) { + const diapers = await diaperResponse.json(); + if (diapers.length > 0) { + lastDiaperChange = diapers[0]; + } + } } catch (error) { console.error("Error loading feeding status:", error); } @@ -478,9 +539,98 @@ ${feedingButtonHtml} ${sleepButtonHtml} + ${buildRecentActivitySection()} `; } + function buildRecentActivitySection() { + // Build diaper card + const diaperCard = lastDiaperChange + ? ` +
+
๐Ÿงท
+
Last Diaper
+
${formatTime(lastDiaperChange.change_time)}
+
+ ${lastDiaperChange.poop_amount ? `๐Ÿ’ฉ ${lastDiaperChange.poop_amount}` : ""} + ${lastDiaperChange.poop_amount && lastDiaperChange.pee_amount ? " โ€ข " : ""} + ${lastDiaperChange.pee_amount ? `๐Ÿ’ง ${lastDiaperChange.pee_amount}` : ""} +
+
+ ` + : ` +
+
๐Ÿงท
+
No diaper changes yet
+
+ `; + + // Build feeding card + const feedingCard = lastFeeding + ? ` +
+
๐Ÿผ
+
Last Feeding
+
${formatTime(lastFeeding.start_time)}
+
+ ${formatFeedingType(lastFeeding.feeding_type)} + ${lastFeeding.end_time ? ` โ€ข ${calculateDuration(lastFeeding.start_time, lastFeeding.end_time)}` : " (ongoing)"} +
+
+ ` + : ` +
+
๐Ÿผ
+
No feedings yet
+
+ `; + + // Build sleep card + const sleepCard = lastSleep + ? ` +
+
๐Ÿ˜ด
+
Last Sleep
+
${formatTime(lastSleep.start_time)}
+
+ ${lastSleep.end_time ? calculateDuration(lastSleep.start_time, lastSleep.end_time) : "ongoing"} +
+
+ ` + : ` +
+
๐Ÿ˜ด
+
No sleep sessions yet
+
+ `; + + return ` +
+

๐Ÿ“Š Recent Activity

+
+ ${diaperCard} + ${feedingCard} + ${sleepCard} +
+
+ `; + } + + function calculateDuration(startTime, endTime) { + const start = new Date(startTime); + const end = new Date(endTime); + const diffMs = end - start; + const diffMins = Math.floor(diffMs / 60000); + + if (diffMins < 60) { + return `${diffMins} min`; + } + + const hours = Math.floor(diffMins / 60); + const mins = diffMins % 60; + return `${hours}h ${mins}m`; + } + function formatFeedingType(type) { const types = { left_breast: "Left Breast",