changed dropdown to read-only textfield when only 1 associated child and fixed redirects after manual entries

src/baby_monitor/static/sleep.html

@@ -328,19 +328,22 @@
       let allChildren = [];
       let selectedChildId = "";
 
-      // Filter change handlers
-      document
-        .getElementById("childFilter")
-        .addEventListener("change", function () {
-          selectedChildId = this.value;
-          // Save selection to localStorage
-          if (selectedChildId) {
-            localStorage.setItem("lastSleepChildFilter", selectedChildId);
-          } else {
-            localStorage.removeItem("lastSleepChildFilter");
-          }
-          renderCharts();
-        });
+      // Filter change handlers (will be attached after children are loaded)
+      function attachChildFilterListener() {
+        const childFilter = document.getElementById("childFilter");
+        if (childFilter) {
+          childFilter.addEventListener("change", function () {
+            selectedChildId = this.value;
+            // Save selection to localStorage
+            if (selectedChildId) {
+              localStorage.setItem("lastSleepChildFilter", selectedChildId);
+            } else {
+              localStorage.removeItem("lastSleepChildFilter");
+            }
+            renderCharts();
+          });
+        }
+      }
 
       document
         .getElementById("timeRangeFilter")
@@ -365,19 +368,52 @@
 
           allChildren = await childrenResponse.json();
 
-          // Populate child filter
-          const childFilter = document.getElementById("childFilter");
-          childFilter.innerHTML = '<option value="">All Children</option>';
-          allChildren.forEach((child) => {
-            const option = document.createElement("option");
-            option.value = child.id;
-            option.textContent = child.name;
-            childFilter.appendChild(option);
-          });
+          // Auto-select first child if available
+          if (allChildren.length > 0 && !selectedChildId) {
+            selectedChildId = allChildren[0].id;
+          }
+
+          // Populate child filter or show single child
+          const childFilterContainer = document.querySelector('.controls');
+          if (allChildren.length === 1) {
+            // Single child: show as read-only text
+            const child = allChildren[0];
+            childFilterContainer.innerHTML = `
+              <label for="childDisplay">Child:</label>
+              <input
+                type="text"
+                id="childDisplay"
+                value="${child.name}"
+                readonly
+                style="background-color: #f5f5f5; cursor: default; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"
+              />
+              
+              <label for="timeRangeFilter">Time Range:</label>
+              <select id="timeRangeFilter">
+                <option value="1">Last 24 hours</option>
+                <option value="3">Last 3 days</option>
+                <option value="7" selected>Last 7 days</option>
+                <option value="14">Last 14 days</option>
+                <option value="30">Last 30 days</option>
+                <option value="90">Last 90 days</option>
+              </select>
+            `;
+          } else {
+            // Multiple children: show dropdown
+            const childFilter = document.getElementById("childFilter");
+            childFilter.innerHTML = '';
+            allChildren.forEach((child) => {
+              const option = document.createElement("option");
+              option.value = child.id;
+              option.textContent = child.name;
+              childFilter.appendChild(option);
+            });
+          }
 
           // Restore last selected child from localStorage
           const lastChildId = localStorage.getItem("lastSleepChildFilter");
-          if (lastChildId) {
+          if (lastChildId && allChildren.length > 1) {
+            const childFilter = document.getElementById("childFilter");
             childFilter.value = lastChildId;
             selectedChildId = lastChildId;
           }
@@ -402,6 +438,11 @@
 
           allSleeps = await sleepResponse.json();
 
+          // Attach event listener for child filter if multiple children
+          if (allChildren.length > 1) {
+            attachChildFilterListener();
+          }
+
           renderCharts();
         } catch (error) {
           console.error("Error loading data:", error);