added child endpoint, ability to add and edit child as well as auto redirect to add-child page when user without child accesses home page

2025-11-09 11:54:28 +01:00
parent 1950b600cf
commit 16e7153f5f
10 changed files with 656 additions and 2 deletions
@@ -0,0 +1,322 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Add Child - Baby Monitor</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding: 20px;
+      }
+
+      .container {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        padding: 40px;
+        max-width: 500px;
+        width: 100%;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 10px;
+        font-size: 28px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 30px;
+        font-size: 14px;
+      }
+
+      .form-group {
+        margin-bottom: 20px;
+      }
+
+      label {
+        display: block;
+        margin-bottom: 8px;
+        color: #333;
+        font-weight: 600;
+        font-size: 14px;
+      }
+
+      input {
+        width: 100%;
+        padding: 12px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 14px;
+        transition: border-color 0.2s;
+      }
+
+      input:focus {
+        outline: none;
+        border-color: #667eea;
+      }
+
+      .button {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border: none;
+        padding: 12px 24px;
+        border-radius: 6px;
+        font-size: 16px;
+        font-weight: 600;
+        cursor: pointer;
+        transition:
+          transform 0.2s,
+          box-shadow 0.2s;
+        width: 100%;
+        margin-top: 10px;
+      }
+
+      .button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+      }
+
+      .button:active {
+        transform: translateY(0);
+      }
+
+      .button:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        transform: none;
+      }
+
+      .button.secondary {
+        background: #6c757d;
+        margin-top: 10px;
+      }
+
+      .button.secondary:hover {
+        box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
+      }
+
+      .message {
+        padding: 12px;
+        border-radius: 6px;
+        margin-bottom: 20px;
+        display: none;
+      }
+
+      .message.show {
+        display: block;
+      }
+
+      .message.error {
+        background: #ffebee;
+        border-left: 4px solid #f44336;
+        color: #c62828;
+      }
+
+      .message.success {
+        background: #e8f5e9;
+        border-left: 4px solid #4caf50;
+        color: #2e7d32;
+      }
+
+      .help-text {
+        font-size: 12px;
+        color: #666;
+        margin-top: 4px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>👶 Add Child</h1>
+      <p class="subtitle">Enter your child's information</p>
+
+      <div id="message" class="message"></div>
+
+      <form id="addChildForm">
+        <div class="form-group">
+          <label for="name">Child's Name *</label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            required
+            placeholder="Enter child's name"
+            maxlength="100"
+          />
+        </div>
+
+        <div class="form-group">
+          <label for="birthTime">Date and Time of Birth *</label>
+          <input
+            type="datetime-local"
+            id="birthTime"
+            name="birthTime"
+            required
+          />
+          <p class="help-text">
+            Select the date and time when your child was born
+          </p>
+        </div>
+
+        <div class="form-group">
+          <label for="birthWeight">Birth Weight (grams) *</label>
+          <input
+            type="number"
+            id="birthWeight"
+            name="birthWeight"
+            required
+            min="1"
+            step="1"
+            placeholder="e.g., 3500"
+          />
+          <p class="help-text">Enter weight in grams (1 kg = 1000 grams)</p>
+        </div>
+
+        <button type="submit" class="button" id="submitBtn">Add Child</button>
+        <button type="button" class="button secondary" onclick="goBack()">
+          Cancel
+        </button>
+      </form>
+    </div>
+
+    <script>
+      // Check if user is authenticated
+      const token = localStorage.getItem("access_token");
+      if (!token) {
+        window.location.href = "/login.html";
+      }
+
+      // Get child ID from URL if editing
+      const urlParams = new URLSearchParams(window.location.search);
+      const childId = urlParams.get("id");
+      const isEditMode = !!childId;
+
+      const form = document.getElementById("addChildForm");
+      const messageDiv = document.getElementById("message");
+      const submitBtn = document.getElementById("submitBtn");
+
+      // Update page title and button text if editing
+      if (isEditMode) {
+        document.querySelector("h1").textContent = "✏️ Edit Child";
+        document.querySelector(".subtitle").textContent =
+          "Update your child's information";
+        submitBtn.textContent = "Update Child";
+
+        // Load existing child data
+        loadChildData(childId);
+      }
+
+      async function loadChildData(id) {
+        try {
+          const response = await fetch(`/api/children/${id}`, {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+
+          if (response.ok) {
+            const child = await response.json();
+
+            // Populate form fields
+            document.getElementById("name").value = child.name;
+
+            // Format datetime for datetime-local input
+            const birthDate = new Date(child.birth_time);
+            const formattedDate = birthDate.toISOString().slice(0, 16);
+            document.getElementById("birthTime").value = formattedDate;
+
+            document.getElementById("birthWeight").value = child.birth_weight;
+          } else {
+            showMessage("Failed to load child data", "error");
+          }
+        } catch (error) {
+          showMessage("Error loading child data", "error");
+        }
+      }
+
+      form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const name = document.getElementById("name").value;
+        const birthTime = document.getElementById("birthTime").value;
+        const birthWeight = parseFloat(
+          document.getElementById("birthWeight").value,
+        );
+
+        // Disable button during request
+        submitBtn.disabled = true;
+        const originalText = submitBtn.textContent;
+        submitBtn.textContent = isEditMode ? "Updating..." : "Adding...";
+        messageDiv.classList.remove("show");
+
+        try {
+          const url = isEditMode ? `/api/children/${childId}` : "/api/children";
+          const method = isEditMode ? "PUT" : "POST";
+
+          const response = await fetch(url, {
+            method: method,
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${token}`,
+            },
+            body: JSON.stringify({
+              name: name,
+              birth_time: birthTime,
+              birth_weight: birthWeight,
+            }),
+          });
+
+          const data = await response.json();
+
+          if (response.ok) {
+            showMessage(
+              isEditMode
+                ? "Child updated successfully!"
+                : "Child added successfully!",
+              "success",
+            );
+            // Redirect to home page after 1 second
+            setTimeout(() => {
+              window.location.href = "/";
+            }, 1000);
+          } else {
+            showMessage(
+              data.detail ||
+                `Failed to ${isEditMode ? "update" : "add"} child. Please try again.`,
+              "error",
+            );
+          }
+        } catch (error) {
+          showMessage("Network error. Please try again.", "error");
+        } finally {
+          submitBtn.disabled = false;
+          submitBtn.textContent = originalText;
+        }
+      });
+
+      function showMessage(text, type) {
+        messageDiv.textContent = text;
+        messageDiv.className = `message ${type} show`;
+      }
+
+      function goBack() {
+        window.location.href = "/";
+      }
+    </script>
+  </body>
+</html>
@@ -129,6 +129,7 @@
    <div class="menu-backdrop" id="menuBackdrop"></div>

    <div class="menu-overlay" id="menuOverlay">
+      <div class="menu-item" id="menuAddChild">👶 Add Child</div>
      <div class="menu-item logout" id="menuLogout">🚪 Logout</div>
    </div>

@@ -160,6 +161,10 @@
      burgerMenu.addEventListener("click", toggleMenu);
      menuBackdrop.addEventListener("click", closeMenu);

+      document.getElementById("menuAddChild").addEventListener("click", () => {
+        window.location.href = "/add-child.html";
+      });
+
      document.getElementById("menuLogout").addEventListener("click", () => {
        closeMenu();
        logout();
@@ -187,14 +192,29 @@
            }
          })
          .then((user) => {
-            // Show authenticated content
-            document.getElementById("content").innerHTML = `
+            // Check if user has any children
+            return fetch("/api/children", {
+              headers: {
+                Authorization: `Bearer ${token}`,
+              },
+            })
+              .then((response) => response.json())
+              .then((children) => {
+                // If no children, redirect to add-child page
+                if (children.length === 0) {
+                  window.location.href = "/add-child.html";
+                  return;
+                }
+
+                // Show authenticated content
+                document.getElementById("content").innerHTML = `
                    <h1>Welcome to Baby Monitor!</h1>
                    <div class="user-info">
                        <p><strong>Logged in as:</strong> ${username}</p>
                    </div>
                    <p>Your session is active.</p>
                `;
+              });
          })
          .catch((error) => {
            console.error("Error:", error);