Merge pull request 'show-most-recent-feeding-session' (#39) from show-most-recent-feeding-session into main

Reviewed-on: #39

src/baby_monitor/static/index.html

@@ -180,8 +180,8 @@
         font-size: 1.1rem;
       }
       .activity-grid {
-        display: grid;
+        display: flex;
-        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        flex-direction: column;
         gap: 1rem;
       }
       .activity-card {
@@ -384,8 +384,8 @@
             activeFeeding = await activeResponse.json();
           }
 
-          // Fetch all feedings to get the last one
+          // Fetch the 10 most recent feedings to calculate the most recent session
-          const feedingsResponse = await fetch("/api/feedings", {
+          const feedingsResponse = await fetch("/api/feedings?limit=10", {
             headers: {
               Authorization: `Bearer ${token}`,
             },
@@ -394,8 +394,68 @@
           if (feedingsResponse.ok) {
             const feedings = await feedingsResponse.json();
             if (feedings.length > 0) {
-              // Feedings are ordered by start_time desc, so first is most recent
+              // Calculate the most recent feeding session
-              lastFeeding = feedings[0];
+              let sessionStart = feedings[0].start_time;
+              let sessionEnd = feedings[0].end_time || feedings[0].start_time;
+              let sessionChildId = feedings[0].child_id;
+              let sessionEntries = [feedings[0]];
+
+              for (let i = 1; i < feedings.length; i++) {
+                const entry = feedings[i];
+                // Only group entries for the same child (ignore feeding type)
+                if (entry.child_id !== sessionChildId) {
+                  break;
+                }
+                // If the gap between this entry's end_time and current sessionStart is more than 30 min, stop
+                const prevEnd = entry.end_time || entry.start_time;
+                const sessionStartDate = new Date(sessionStart);
+                const prevEndDate = new Date(prevEnd);
+                const diffMins = Math.abs(
+                  (sessionStartDate - prevEndDate) / 60000,
+                );
+                if (diffMins > 30) {
+                  break;
+                }
+                // Extend session to include this entry
+                sessionStart = entry.start_time;
+                sessionEntries.push(entry);
+              }
+
+              // Calculate accumulated feeding time for all events in the session
+              let accumulatedMinutes = 0;
+              sessionEntries.forEach((entry) => {
+                if (entry.end_time && entry.start_time) {
+                  const start = new Date(entry.start_time);
+                  const end = new Date(entry.end_time);
+                  const diffMs = end - start;
+                  if (diffMs > 0) {
+                    accumulatedMinutes += Math.floor(diffMs / 60000);
+                  }
+                }
+              });
+
+              // Build a string showing all feeding types used during the session
+              const feedingTypesSet = new Set();
+              sessionEntries.forEach((entry) => {
+                if (entry.feeding_type) {
+                  feedingTypesSet.add(entry.feeding_type);
+                }
+              });
+              const feedingTypesString = Array.from(feedingTypesSet)
+                .map(formatFeedingType)
+                .join(", ");
+
+              // Compose a session object
+              lastFeeding = {
+                child_id: sessionChildId,
+                feeding_type: feedings[0].feeding_type,
+                start_time: sessionStart,
+                end_time: sessionEnd,
+                entries: sessionEntries,
+                child_name: feedings[0].child_name,
+                accumulated_minutes: accumulatedMinutes,
+                feeding_types_string: feedingTypesString,
+              };
             }
           }
 
@@ -570,11 +630,13 @@
           ? `
             <a href="/feedings.html" class="activity-card" style="text-decoration:none; color:inherit;">
               <div class="icon">🍼</div>
-              <div class="type">Last Feeding</div>
+              <div class="type">Last Feeding Session</div>
               <div class="time">${formatTime(lastFeeding.start_time)}</div>
               <div class="details">
-                ${formatFeedingType(lastFeeding.feeding_type)}
+                ${lastFeeding.feeding_types_string ? `${lastFeeding.feeding_types_string}` : ""}
-                ${lastFeeding.end_time ? ` • ${calculateDuration(lastFeeding.start_time, lastFeeding.end_time)}` : " (ongoing)"}
+                ${lastFeeding.feeding_types_string && lastFeeding.accumulated_minutes ? " • " : ""}
+                ${lastFeeding.accumulated_minutes} minutes total
+                ${lastFeeding.end_time ? "" : " (ongoing)"}
               </div>
             </a>
           `
@@ -593,7 +655,7 @@
               <div class="type">Last Sleep</div>
               <div class="time">${formatTime(lastSleep.start_time)}</div>
               <div class="details">
-                ${lastSleep.end_time ? calculateDuration(lastSleep.start_time, lastSleep.end_time) : "ongoing"}
+                Duration: ${lastSleep.end_time ? calculateDuration(lastSleep.start_time, lastSleep.end_time) : "ongoing"}
               </div>
             </a>
           `