PRMSChallengeOct

Sleeping

App Files Files Community

TheFrogGod commited on Oct 2, 2025

Commit

b1505ef

verified ·

1 Parent(s): caf9618

Update web/profile.html

Browse files

Files changed (1) hide show

web/profile.html +290 -148

web/profile.html CHANGED Viewed

@@ -6,6 +6,7 @@
     <title>Profile - CTRL + ALT + HEAL</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body class="bg-[#F7F8F9] min-h-screen">
     <!-- NAVBAR -->
@@ -224,22 +225,161 @@
         '#mobile-menu a[href="index.html"]'
       )?.parentElement;
       // ✅ Auth State Handling
       onAuthStateChanged(auth, async (user) => {
-        const authNavItem = document.getElementById("authNavItem");
-        if (user) {
-          currentUser = user;
-          await loadUserProfile();
-          authNavItem.innerHTML = '<button onclick="logout()" style="color: red;">Logout</button>';
-          if (homeNavDesktop) homeNavDesktop.style.display = "none";
-          if (homeNavMobile) homeNavMobile.style.display = "none";
-        } else {
-          authNavItem.innerHTML = '<a href="login.html">Login</a>';
-          if (homeNavDesktop) homeNavDesktop.style.display = "";
-          if (homeNavMobile) homeNavMobile.style.display = "";
-          window.location.href = "login.html";
-        }
-      });
       async function loadUserProfile() {
         try {
@@ -280,7 +420,7 @@
         }
       };
-      document.addEventListener("DOMContentLoaded", () => {
         const profileView = document.getElementById("profileViewSection");
         const profileEdit = document.getElementById("profileEditSection");
         const editBtn = document.getElementById("editProfileBtn");
@@ -295,6 +435,8 @@
           profileView.classList.add("hidden");
           profileEdit.classList.remove("hidden");
         });
         saveBtn.addEventListener("click", async () => {
           const nameVal = inputName.value.trim();
@@ -320,139 +462,139 @@
         // RANGE BARS LOGIC
         const tabs = document.querySelectorAll(".tab");
         const contents = document.querySelectorAll(".tab-content");
-        const measurements = [
-          {
-            name: "Blood Sugar",
-            min: 70,
-            max: 110,
-            value: 95,
-            tab: "in-range",
-            impacts: ["Pancreas"],
-          },
-          {
-            name: "Cholesterol",
-            min: 120,
-            max: 200,
-            value: 180,
-            tab: "in-range",
-            impacts: ["Heart", "Arteries"],
-          },
-          {
-            name: "Triglycerides",
-            min: 50,
-            max: 150,
-            value: 180,
-            tab: "out-range",
-            impacts: ["Heart"],
-          },
-          {
-            name: "Blood Pressure",
-            min: 90,
-            max: 120,
-            value: 130,
-            tab: "out-range",
-            impacts: ["Heart", "Kidneys"],
-          },
-        ];
-        const counts = { "in-range": 0, "out-range": 0 };
-        measurements.forEach((m) => {
-          counts[m.tab]++;
-          const container = document.getElementById(m.tab);
-          const card = document.createElement("div");
-          card.className = "range-card";
-          const title = document.createElement("h3");
-          title.textContent = m.name;
-          card.appendChild(title);
-          if (m.impacts) {
-            const impactLabel = document.createElement("div");
-            impactLabel.className = "impact-label";
-            impactLabel.textContent = "Impacts: " + m.impacts.join(", ");
-            card.appendChild(impactLabel);
-          }
-          const barContainer = document.createElement("div");
-          barContainer.className = "range-bar-container";
-          const bar = document.createElement("div");
-          bar.className = "range-bar";
-          let normalPercent = 100;
-          let overflowPercent = 0;
-          if (m.tab === "out-range" && m.value > m.max) {
-            normalPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
-            overflowPercent = 100 - normalPercent;
-          }
-          const normalDiv = document.createElement("div");
-          normalDiv.className = "normal-range";
-          normalDiv.style.width = normalPercent + "%";
-          bar.appendChild(normalDiv);
-          if (overflowPercent > 0) {
-            const overflowDiv = document.createElement("div");
-            overflowDiv.className = "overflow-range";
-            overflowDiv.style.left = normalPercent + "%";
-            overflowDiv.style.width = overflowPercent + "%";
-            bar.appendChild(overflowDiv);
-          }
-          let valuePercent = ((m.value - m.min) / (m.max - m.min)) * 100;
-          valuePercent = Math.min(Math.max(valuePercent, 0), 100);
-          const marker = document.createElement("div");
-          marker.className = "marker";
-          marker.style.left = valuePercent + "%";
-          bar.appendChild(marker);
-          const valueLabel = document.createElement("div");
-          valueLabel.className = "value-label";
-          valueLabel.style.left = valuePercent + "%";
-          valueLabel.textContent = m.value;
-          bar.appendChild(valueLabel);
-          barContainer.appendChild(bar);
-const minMaxDiv = document.createElement("div");
-minMaxDiv.className = "min-max-labels relative w-full";
-const minLabel = document.createElement("span");
-minLabel.textContent = "Min: " + m.min;
-minLabel.style.position = "absolute";
-minLabel.style.left = "0";
-const maxLabel = document.createElement("span");
-maxLabel.textContent = "Max: " + m.max;
-maxLabel.style.position = "absolute";
-// put the max label at the end of the green section
-let maxPercent = 100;
-if (m.value > m.max) {
-  maxPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
-}
-maxLabel.style.left = maxPercent + "%";
-maxLabel.style.transform = "translateX(-100%)"; // anchor it properly
-minMaxDiv.appendChild(minLabel);
-minMaxDiv.appendChild(maxLabel);
-barContainer.appendChild(minMaxDiv);
-          card.appendChild(barContainer);
-          container.appendChild(card);
-        });
-        tabs.forEach((tab) => {
-          const t = tab.dataset.tab;
-          const badge = tab.querySelector(".count-badge");
-          badge.textContent = counts[t];
-          tab.addEventListener("click", () => {
-            tabs.forEach((t) => t.classList.remove("active"));
-            tab.classList.add("active");
-            contents.forEach((c) =>
-              c.id === t
-                ? c.classList.add("active")
-                : c.classList.remove("active")
-            );
-          });
-        });
       });
     </script>
   </body>
-</html>

     <title>Profile - CTRL + ALT + HEAL</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="style.css" />
+    <script src="script.js"></script>
   </head>
   <body class="bg-[#F7F8F9] min-h-screen">
     <!-- NAVBAR -->
         '#mobile-menu a[href="index.html"]'
       )?.parentElement;
+      // Fetch measurements from backend API
+      async function getUserMeasurements(userId) {
+      try {
+    const url = api("user_measurements/", { user_id: userId });
+    const res = await fetch(url);
+    if (!res.ok) throw new Error("Failed to fetch measurements");
+        const data = await res.json();
+    return (data.measurements || []).map((m) => ({
+      name: m.type,
+      value: Number(m.value),
+      min: Number(m.min),
+      max: Number(m.max),
+      tab: m.status === "HIGH" || m.status === "LOW" ? "out-range" : "in-range",
+      impacts: m.impacts || [],
+    }));
+  } catch (e) {
+    console.error("Error fetching user measurements:", e);
+    return [];
+  }
+}
+      // Render bars in the UI based on measurement array
+function renderBars(measurements) {
+  const counts = { "in-range": 0, "out-range": 0 };
+  const tabs = document.querySelectorAll(".tab");
+  const contents = document.querySelectorAll(".tab-content");
+  // Clear existing content
+  contents.forEach((c) => (c.innerHTML = ""));
+  measurements.forEach((m) => {
+    counts[m.tab]++;
+    const container = document.getElementById(m.tab);
+    const card = document.createElement("div");
+    card.className = "range-card";
+    const title = document.createElement("h3");
+    title.textContent = m.name;
+    card.appendChild(title);
+    if (m.impacts?.length) {
+      const impactLabel = document.createElement("div");
+      impactLabel.className = "impact-label";
+      impactLabel.textContent = "Impacts: " + m.impacts.join(", ");
+      card.appendChild(impactLabel);
+    }
+    const barContainer = document.createElement("div");
+    barContainer.className = "range-bar-container";
+    const bar = document.createElement("div");
+    bar.className = "range-bar";
+    let normalPercent = 100;
+    let overflowPercent = 0;
+    if (m.tab === "out-range" && m.value > m.max) {
+      normalPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
+      overflowPercent = 100 - normalPercent;
+    }
+    const normalDiv = document.createElement("div");
+    normalDiv.className = "normal-range";
+    normalDiv.style.width = normalPercent + "%";
+    bar.appendChild(normalDiv);
+    if (overflowPercent > 0) {
+      const overflowDiv = document.createElement("div");
+      overflowDiv.className = "overflow-range";
+      overflowDiv.style.left = normalPercent + "%";
+      overflowDiv.style.width = overflowPercent + "%";
+      bar.appendChild(overflowDiv);
+    }
+    let valuePercent = ((m.value - m.min) / (m.max - m.min)) * 100;
+    valuePercent = Math.min(Math.max(valuePercent, 0), 100);
+    const marker = document.createElement("div");
+    marker.className = "marker";
+    marker.style.left = valuePercent + "%";
+    bar.appendChild(marker);
+    const valueLabel = document.createElement("div");
+    valueLabel.className = "value-label";
+    valueLabel.style.left = valuePercent + "%";
+    valueLabel.textContent = m.value;
+    bar.appendChild(valueLabel);
+    barContainer.appendChild(bar);
+    const minMaxDiv = document.createElement("div");
+    minMaxDiv.className = "min-max-labels relative w-full";
+    const minLabel = document.createElement("span");
+    minLabel.textContent = "Min: " + m.min;
+    minLabel.style.position = "absolute";
+    minLabel.style.left = "0";
+    const maxLabel = document.createElement("span");
+    maxLabel.textContent = "Max: " + m.max;
+    maxLabel.style.position = "absolute";
+    let maxPercent = 100;
+    if (m.value > m.max) maxPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
+    maxLabel.style.left = maxPercent + "%";
+    maxLabel.style.transform = "translateX(-100%)";
+    minMaxDiv.appendChild(minLabel);
+    minMaxDiv.appendChild(maxLabel);
+    barContainer.appendChild(minMaxDiv);
+    card.appendChild(barContainer);
+    container.appendChild(card);
+  });
+  // Update tab badges
+  tabs.forEach((tab) => {
+    const t = tab.dataset.tab;
+    const badge = tab.querySelector(".count-badge");
+    badge.textContent = counts[t];
+    tab.addEventListener("click", () => {
+      tabs.forEach((t) => t.classList.remove("active"));
+      tab.classList.add("active");
+      contents.forEach((c) =>
+        c.id === t ? c.classList.add("active") : c.classList.remove("active")
+      );
+    });
+  });
+}
       // ✅ Auth State Handling
       onAuthStateChanged(auth, async (user) => {
+  const authNavItem = document.getElementById("authNavItem");
+  if (user) {
+    currentUser = user;
+    await loadUserProfile();
+    // ✅ fetch and render bars after user is ready
+    console.log("currentuser data",currentUser);
+    // const measurements = await getUserMeasurements(currentUser.uid);
+    const measurements = await getUserMeasurements(currentUser.email);
+    renderBars(measurements);
+    authNavItem.innerHTML = '<button onclick="logout()" style="color:red">Logout</button>';
+    if (homeNavDesktop) homeNavDesktop.style.display = "none";
+    if (homeNavMobile) homeNavMobile.style.display = "none";
+  } else {
+    authNavItem.innerHTML = '<a href="login.html">Login</a>';
+    if (homeNavDesktop) homeNavDesktop.style.display = "";
+    if (homeNavMobile) homeNavMobile.style.display = "";
+    window.location.href = "login.html";
+  }
+});
       async function loadUserProfile() {
         try {
         }
       };
+      document.addEventListener("DOMContentLoaded", async () => {
         const profileView = document.getElementById("profileViewSection");
         const profileEdit = document.getElementById("profileEditSection");
         const editBtn = document.getElementById("editProfileBtn");
           profileView.classList.add("hidden");
           profileEdit.classList.remove("hidden");
         });
         saveBtn.addEventListener("click", async () => {
           const nameVal = inputName.value.trim();
         // RANGE BARS LOGIC
         const tabs = document.querySelectorAll(".tab");
         const contents = document.querySelectorAll(".tab-content");
+        // const measurements = [
+        //   {
+        //     name: "Blood Sugar",
+        //     min: 70,
+        //     max: 110,
+        //     value: 95,
+        //     tab: "in-range",
+        //     impacts: ["Pancreas"],
+        //   },
+        //   {
+        //     name: "Cholesterol",
+        //     min: 120,
+        //     max: 200,
+        //     value: 180,
+        //     tab: "in-range",
+        //     impacts: ["Heart", "Arteries"],
+        //   },
+        //   {
+        //     name: "Triglycerides",
+        //     min: 50,
+        //     max: 150,
+        //     value: 180,
+        //     tab: "out-range",
+        //     impacts: ["Heart"],
+        //   },
+        //   {
+        //     name: "Blood Pressure",
+        //     min: 90,
+        //     max: 120,
+        //     value: 130,
+        //     tab: "out-range",
+        //     impacts: ["Heart", "Kidneys"],
+        //   },
+        // ];
+//         const counts = { "in-range": 0, "out-range": 0 };
+//         measurements.forEach((m) => {
+//           counts[m.tab]++;
+//           const container = document.getElementById(m.tab);
+//           const card = document.createElement("div");
+//           card.className = "range-card";
+//           const title = document.createElement("h3");
+//           title.textContent = m.name;
+//           card.appendChild(title);
+//           if (m.impacts) {
+//             const impactLabel = document.createElement("div");
+//             impactLabel.className = "impact-label";
+//             impactLabel.textContent = "Impacts: " + m.impacts.join(", ");
+//             card.appendChild(impactLabel);
+//           }
+//           const barContainer = document.createElement("div");
+//           barContainer.className = "range-bar-container";
+//           const bar = document.createElement("div");
+//           bar.className = "range-bar";
+//           let normalPercent = 100;
+//           let overflowPercent = 0;
+//           if (m.tab === "out-range" && m.value > m.max) {
+//             normalPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
+//             overflowPercent = 100 - normalPercent;
+//           }
+//           const normalDiv = document.createElement("div");
+//           normalDiv.className = "normal-range";
+//           normalDiv.style.width = normalPercent + "%";
+//           bar.appendChild(normalDiv);
+//           if (overflowPercent > 0) {
+//             const overflowDiv = document.createElement("div");
+//             overflowDiv.className = "overflow-range";
+//             overflowDiv.style.left = normalPercent + "%";
+//             overflowDiv.style.width = overflowPercent + "%";
+//             bar.appendChild(overflowDiv);
+//           }
+//           let valuePercent = ((m.value - m.min) / (m.max - m.min)) * 100;
+//           valuePercent = Math.min(Math.max(valuePercent, 0), 100);
+//           const marker = document.createElement("div");
+//           marker.className = "marker";
+//           marker.style.left = valuePercent + "%";
+//           bar.appendChild(marker);
+//           const valueLabel = document.createElement("div");
+//           valueLabel.className = "value-label";
+//           valueLabel.style.left = valuePercent + "%";
+//           valueLabel.textContent = m.value;
+//           bar.appendChild(valueLabel);
+//           barContainer.appendChild(bar);
+// const minMaxDiv = document.createElement("div");
+// minMaxDiv.className = "min-max-labels relative w-full";
+// const minLabel = document.createElement("span");
+// minLabel.textContent = "Min: " + m.min;
+// minLabel.style.position = "absolute";
+// minLabel.style.left = "0";
+// const maxLabel = document.createElement("span");
+// maxLabel.textContent = "Max: " + m.max;
+// maxLabel.style.position = "absolute";
+// // put the max label at the end of the green section
+// let maxPercent = 100;
+// if (m.value > m.max) {
+//   maxPercent = ((m.max - m.min) / (m.value - m.min)) * 100;
+// }
+// maxLabel.style.left = maxPercent + "%";
+// maxLabel.style.transform = "translateX(-100%)"; // anchor it properly
+// minMaxDiv.appendChild(minLabel);
+// minMaxDiv.appendChild(maxLabel);
+// barContainer.appendChild(minMaxDiv);
+//           card.appendChild(barContainer);
+//           container.appendChild(card);
+//         });
+        // tabs.forEach((tab) => {
+        //   const t = tab.dataset.tab;
+        //   const badge = tab.querySelector(".count-badge");
+        //   badge.textContent = counts[t];
+        //   tab.addEventListener("click", () => {
+        //     tabs.forEach((t) => t.classList.remove("active"));
+        //     tab.classList.add("active");
+        //     contents.forEach((c) =>
+        //       c.id === t
+        //         ? c.classList.add("active")
+        //         : c.classList.remove("active")
+        //     );
+        //   });
+        // });
       });
     </script>
   </body>
+</html>