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

src/baby_monitor/static/diapers.html

@@ -280,7 +280,7 @@
       let allChildren = [];
       let currentDaysRange =
         parseInt(localStorage.getItem("lastDiaperTimeRange")) || 7;
-      let selectedChildId = null; // null means "All Children"
+      let selectedChildId = null; // null means show first/only child
 
       // Restore last selected child from localStorage
       const lastChildId = localStorage.getItem("lastDiaperChildFilter");
@@ -321,6 +321,11 @@
 
           if (response.ok) {
             allChildren = await response.json();
+            
+            // Auto-select first child if no selection exists
+            if (selectedChildId === null && allChildren.length > 0) {
+              selectedChildId = allChildren[0].id;
+            }
           }
         } catch (error) {
           console.error("Error loading children:", error);
@@ -334,8 +339,7 @@
       }
 
       function onChildChange(event) {
-        selectedChildId =
-          event.target.value === "all" ? null : parseInt(event.target.value);
+        selectedChildId = parseInt(event.target.value);
         localStorage.setItem("lastDiaperChildFilter", event.target.value);
         displayDiaperChanges(allDiaperChanges);
       }
@@ -367,11 +371,21 @@
 
           content.innerHTML = `
             <div class="controls">
-              <label for="childFilter">Child:</label>
-              <select id="childFilter" onchange="onChildChange(event)">
-                <option value="all" ${selectedChildId === null ? "selected" : ""}>All Children</option>
-                ${childOptions}
-              </select>
+              ${allChildren.length === 1 ? `
+                <label for="childDisplay">Child:</label>
+                <input
+                  type="text"
+                  id="childDisplay"
+                  value="${allChildren[0].name}"
+                  readonly
+                  style="background-color: #f5f5f5; cursor: default; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"
+                />
+              ` : `
+                <label for="childFilter">Child:</label>
+                <select id="childFilter" onchange="onChildChange(event)">
+                  ${childOptions}
+                </select>
+              `}
 
               <label for="daysRange">Time Range:</label>
               <select id="daysRange" onchange="onDaysRangeChange(event)">