updated admin page with more functionality, simplified burger menu and added many-to-many parent-child relationship

2025-11-10 22:58:52 +01:00
parent df28af880a
commit 402b5898bb
26 changed files with 952 additions and 564 deletions
@@ -3,7 +3,8 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Diaper Changes - Baby Monitor</title>
+    <title>Diapers - Baby Monitor</title>
+    <link rel="stylesheet" href="/menu.css" />
    <style>
      * {
        margin: 0;
@@ -240,93 +241,9 @@
      .edit-button:hover {
        background: #d77ee6;
      }
-
-      .burger-menu {
-        position: fixed;
-        top: 1rem;
-        left: 1rem;
-        cursor: pointer;
-        z-index: 1000;
-        background: white;
-        padding: 0.5rem;
-        border-radius: 4px;
-        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-      }
-
-      .burger-menu div {
-        width: 25px;
-        height: 3px;
-        background-color: #333;
-        margin: 5px 0;
-        transition: 0.3s;
-      }
-
-      .menu-overlay {
-        position: fixed;
-        top: 0;
-        left: -250px;
-        width: 250px;
-        height: 100vh;
-        background: white;
-        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
-        transition: left 0.3s;
-        z-index: 999;
-        padding: 4rem 1rem 1rem 1rem;
-      }
-
-      .menu-overlay.open {
-        left: 0;
-      }
-
-      .menu-backdrop {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100vh;
-        background: rgba(0, 0, 0, 0.5);
-        display: none;
-        z-index: 998;
-      }
-
-      .menu-backdrop.open {
-        display: block;
-      }
-
-      .menu-item {
-        padding: 1rem;
-        border-bottom: 1px solid #eee;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-
-      .menu-item:hover {
-        background: #f5f5f5;
-      }
-
-      .menu-item.logout {
-        color: #dc3545;
-        font-weight: 600;
-      }
    </style>
  </head>
  <body>
-    <div class="burger-menu" id="burgerMenu">
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-
-    <div class="menu-backdrop" id="menuBackdrop"></div>
-
-    <div class="menu-overlay" id="menuOverlay">
-      <div class="menu-item" id="menuHome">🏠 Home</div>
-      <div class="menu-item" id="menuAddChild">👶 Add Child</div>
-      <div class="menu-item" id="menuFeedings">🍼 Feedings</div>
-      <div class="menu-item" id="menuSleep">😴 Sleep</div>
-      <div class="menu-item logout" id="menuLogout">🚪 Logout</div>
-    </div>
-
    <div class="container">
      <h1>🧷 Diaper Changes</h1>
      <p class="subtitle">Overview of all diaper change sessions</p>
@@ -337,6 +254,7 @@
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+    <script src="/menu.js"></script>
    <script>
      // Check if user is authenticated
      const token = localStorage.getItem("access_token");
@@ -344,50 +262,14 @@
        window.location.href = "/login.html";
      }

+      // Initialize burger menu
+      initBurgerMenu({ includeHome: true });
+
      let allDiaperChanges = [];
      let allChildren = [];
      let currentDaysRange = 7;
      let selectedChildId = null; // null means "All Children"

-      // Burger menu functionality
-      const burgerMenu = document.getElementById("burgerMenu");
-      const menuOverlay = document.getElementById("menuOverlay");
-      const menuBackdrop = document.getElementById("menuBackdrop");
-
-      function toggleMenu() {
-        menuOverlay.classList.toggle("open");
-        menuBackdrop.classList.toggle("open");
-      }
-
-      function closeMenu() {
-        menuOverlay.classList.remove("open");
-        menuBackdrop.classList.remove("open");
-      }
-
-      burgerMenu.addEventListener("click", toggleMenu);
-      menuBackdrop.addEventListener("click", closeMenu);
-
-      document.getElementById("menuHome").addEventListener("click", () => {
-        window.location.href = "/";
-      });
-
-      document.getElementById("menuAddChild").addEventListener("click", () => {
-        window.location.href = "/add-child.html";
-      });
-
-      document.getElementById("menuFeedings").addEventListener("click", () => {
-        window.location.href = "/feedings.html";
-      });
-
-      document.getElementById("menuSleep").addEventListener("click", () => {
-        window.location.href = "/sleep.html";
-      });
-
-      document.getElementById("menuLogout").addEventListener("click", () => {
-        closeMenu();
-        logout();
-      });
-
      // Load diaper changes data
      async function loadDiaperChanges() {
        try {