updated admin page with more functionality, simplified burger menu and added many-to-many parent-child relationship
This commit is contained in:
Brian Bjarke Jensen
@@ -185,6 +185,172 @@
|
||||
background: #c82333;
|
||||
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
|
||||
}
|
||||
|
||||
.user-management h2::before {
|
||||
content: "👥";
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.user-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #eee;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.user-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.user-item:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.user-meta {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.admin-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.delete-user-btn {
|
||||
padding: 6px 12px;
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.delete-user-btn:hover {
|
||||
background: #c82333;
|
||||
}
|
||||
|
||||
.delete-user-btn:disabled {
|
||||
background: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.modal h3 {
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.modal p {
|
||||
color: #666;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.modal-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.modal-button {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.modal-button.cancel {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-button.cancel:hover {
|
||||
background: #5a6268;
|
||||
}
|
||||
|
||||
.modal-button.confirm {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.modal-button.confirm:hover {
|
||||
background: #c82333;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -218,9 +384,46 @@
|
||||
<div id="error" class="error"></div>
|
||||
</div>
|
||||
|
||||
<div class="section user-management">
|
||||
<h2>User Management</h2>
|
||||
<p style="color: #666; margin-bottom: 15px; font-size: 14px">
|
||||
View and manage all users in the system.
|
||||
</p>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="userSearch"
|
||||
class="search-box"
|
||||
placeholder="Search users by username..."
|
||||
oninput="filterUsers()"
|
||||
/>
|
||||
|
||||
<div id="userListContainer" class="loading">Loading users...</div>
|
||||
</div>
|
||||
|
||||
<button class="button logout-button" onclick="logout()">Logout</button>
|
||||
</div>
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
<div class="modal" id="deleteModal">
|
||||
<div class="modal-content">
|
||||
<h3>⚠️ Confirm User Deletion</h3>
|
||||
<p id="deleteMessage"></p>
|
||||
<p style="color: #dc3545; font-weight: 600">
|
||||
This action cannot be undone. All associated children and their logs
|
||||
(feedings, diapers, sleep) will be permanently deleted.
|
||||
</p>
|
||||
<div class="modal-buttons">
|
||||
<button class="modal-button cancel" onclick="closeDeleteModal()">
|
||||
Cancel
|
||||
</button>
|
||||
<button class="modal-button confirm" onclick="confirmDelete()">
|
||||
Delete User
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Check if user is authenticated and is admin
|
||||
const token = localStorage.getItem("access_token");
|
||||
@@ -228,7 +431,10 @@
|
||||
window.location.href = "/login.html";
|
||||
}
|
||||
|
||||
// Verify user is admin
|
||||
let allUsers = [];
|
||||
let userToDelete = null;
|
||||
|
||||
// Verify user is admin and load data
|
||||
fetch("/api/me", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
@@ -240,12 +446,154 @@
|
||||
alert("Access denied. Admin privileges required.");
|
||||
window.location.href = "/";
|
||||
}
|
||||
// Load users after verifying admin status
|
||||
loadUsers();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error verifying admin status:", error);
|
||||
window.location.href = "/login.html";
|
||||
});
|
||||
|
||||
async function loadUsers() {
|
||||
const container = document.getElementById("userListContainer");
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/admin/users", {
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load users");
|
||||
}
|
||||
|
||||
allUsers = await response.json();
|
||||
renderUsers(allUsers);
|
||||
} catch (error) {
|
||||
console.error("Error loading users:", error);
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
❌ Failed to load users: ${error.message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderUsers(users) {
|
||||
const container = document.getElementById("userListContainer");
|
||||
|
||||
if (users.length === 0) {
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
No users found.
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
container.className = "user-list";
|
||||
container.innerHTML = users
|
||||
.map(
|
||||
(user) => `
|
||||
<div class="user-item">
|
||||
<div class="user-info">
|
||||
<div class="user-name">
|
||||
${user.username}
|
||||
${user.is_admin ? '<span class="admin-badge">ADMIN</span>' : ""}
|
||||
</div>
|
||||
<div class="user-meta">
|
||||
ID: ${user.id} • Created: ${new Date(user.created_at).toLocaleDateString()}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
class="delete-user-btn"
|
||||
onclick="showDeleteModal(${user.id}, '${user.username}', ${user.is_admin})"
|
||||
${user.is_admin ? 'disabled title="Cannot delete admin users"' : ""}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function filterUsers() {
|
||||
const searchTerm = document
|
||||
.getElementById("userSearch")
|
||||
.value.toLowerCase();
|
||||
const filtered = allUsers.filter((user) =>
|
||||
user.username.toLowerCase().includes(searchTerm),
|
||||
);
|
||||
renderUsers(filtered);
|
||||
}
|
||||
|
||||
function showDeleteModal(userId, username, isAdmin) {
|
||||
if (isAdmin) {
|
||||
return; // Don't allow deleting admin users
|
||||
}
|
||||
|
||||
userToDelete = { id: userId, username };
|
||||
const modal = document.getElementById("deleteModal");
|
||||
const message = document.getElementById("deleteMessage");
|
||||
|
||||
message.textContent = `Are you sure you want to delete user "${username}"?`;
|
||||
modal.classList.add("show");
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
const modal = document.getElementById("deleteModal");
|
||||
modal.classList.remove("show");
|
||||
userToDelete = null;
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
if (!userToDelete) return;
|
||||
|
||||
const modal = document.getElementById("deleteModal");
|
||||
const confirmBtn = modal.querySelector(".modal-button.confirm");
|
||||
|
||||
confirmBtn.disabled = true;
|
||||
confirmBtn.textContent = "Deleting...";
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/admin/users/${userToDelete.id}`, {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
Authorization: `Bearer ${token}`,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.detail || "Failed to delete user");
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// Show success message
|
||||
alert(
|
||||
`✓ ${result.message}\n\n` +
|
||||
`Deleted:\n` +
|
||||
`• ${result.deleted_children.length} children\n` +
|
||||
`• ${result.deleted_feedings} feedings\n` +
|
||||
`• ${result.deleted_diapers} diaper changes\n` +
|
||||
`• ${result.deleted_sleeps} sleep sessions`,
|
||||
);
|
||||
|
||||
// Reload user list
|
||||
await loadUsers();
|
||||
closeDeleteModal();
|
||||
} catch (error) {
|
||||
console.error("Error deleting user:", error);
|
||||
alert(`Failed to delete user: ${error.message}`);
|
||||
} finally {
|
||||
confirmBtn.disabled = false;
|
||||
confirmBtn.textContent = "Delete User";
|
||||
}
|
||||
}
|
||||
|
||||
async function generateLink() {
|
||||
const btn = document.getElementById("generateBtn");
|
||||
const linkContainer = document.getElementById("linkContainer");
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Feedings - Baby Monitor</title>
|
||||
<link rel="stylesheet" href="/menu.css" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -277,93 +278,9 @@
|
||||
.edit-button:hover {
|
||||
background: #5568d3;
|
||||
}
|
||||
|
||||
.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="menuDiapers">🧷 Diapers</div>
|
||||
<div class="menu-item" id="menuSleep">😴 Sleep</div>
|
||||
<div class="menu-item logout" id="menuLogout">🚪 Logout</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h1>🍼 Feedings</h1>
|
||||
<p class="subtitle">Overview of all feeding sessions</p>
|
||||
@@ -374,6 +291,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");
|
||||
@@ -381,50 +299,14 @@
|
||||
window.location.href = "/login.html";
|
||||
}
|
||||
|
||||
// Initialize burger menu
|
||||
initBurgerMenu({ includeHome: true });
|
||||
|
||||
let allFeedings = [];
|
||||
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("menuDiapers").addEventListener("click", () => {
|
||||
window.location.href = "/diapers.html";
|
||||
});
|
||||
|
||||
document.getElementById("menuSleep").addEventListener("click", () => {
|
||||
window.location.href = "/sleep.html";
|
||||
});
|
||||
|
||||
document.getElementById("menuLogout").addEventListener("click", () => {
|
||||
closeMenu();
|
||||
logout();
|
||||
});
|
||||
|
||||
// Load feedings data
|
||||
async function loadFeedings() {
|
||||
try {
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Baby Monitor</title>
|
||||
<link rel="stylesheet" href="/menu.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
@@ -12,69 +13,6 @@
|
||||
padding: 0 1rem;
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
.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.admin {
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
.menu-item.logout {
|
||||
color: #dc3545;
|
||||
font-weight: 600;
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
@@ -233,22 +171,6 @@
|
||||
</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="menuAddChild">👶 Add Child</div>
|
||||
<div class="menu-item" id="menuFeedings">🍼 Feedings</div>
|
||||
<div class="menu-item" id="menuDiapers">🧷 Diapers</div>
|
||||
<div class="menu-item" id="menuSleep">😴 Sleep</div>
|
||||
<div class="menu-item logout" id="menuLogout">🚪 Logout</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div id="content" class="loading">
|
||||
<p>Loading...</p>
|
||||
@@ -314,49 +236,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/menu.js"></script>
|
||||
<script>
|
||||
const token = localStorage.getItem("access_token");
|
||||
const username = localStorage.getItem("username");
|
||||
|
||||
// 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("menuAddChild").addEventListener("click", () => {
|
||||
window.location.href = "/add-child.html";
|
||||
});
|
||||
|
||||
document.getElementById("menuFeedings").addEventListener("click", () => {
|
||||
window.location.href = "/feedings.html";
|
||||
});
|
||||
|
||||
document.getElementById("menuDiapers").addEventListener("click", () => {
|
||||
window.location.href = "/diapers.html";
|
||||
});
|
||||
|
||||
document.getElementById("menuSleep").addEventListener("click", () => {
|
||||
window.location.href = "/sleep.html";
|
||||
});
|
||||
|
||||
document.getElementById("menuLogout").addEventListener("click", () => {
|
||||
closeMenu();
|
||||
logout();
|
||||
});
|
||||
|
||||
// Check if user is logged in
|
||||
if (!token) {
|
||||
window.location.href = "/login.html";
|
||||
@@ -379,6 +263,11 @@
|
||||
}
|
||||
})
|
||||
.then((user) => {
|
||||
// Initialize burger menu
|
||||
initBurgerMenu({
|
||||
includeHome: false,
|
||||
});
|
||||
|
||||
// Check if user has any children
|
||||
return fetch("/api/children", {
|
||||
headers: {
|
||||
@@ -529,7 +418,7 @@
|
||||
const feedingButtonHtml = activeFeeding
|
||||
? `
|
||||
<button class="feeding-button active" onclick="stopFeeding()">
|
||||
🛑 Stop Feeding
|
||||
🛑 Stopped Feeding
|
||||
<div class="feeding-info">
|
||||
${activeFeeding.child_name || "Child"} - ${formatFeedingType(activeFeeding.feeding_type)}<br>
|
||||
Started <span id="feedingTimeInfo">${formatTime(activeFeeding.start_time)}</span>
|
||||
@@ -538,14 +427,14 @@
|
||||
`
|
||||
: `
|
||||
<button class="feeding-button" onclick="showStartFeedingModal()">
|
||||
▶️ Start Feeding
|
||||
🍼 Started Feeding
|
||||
</button>
|
||||
`;
|
||||
|
||||
const sleepButtonHtml = activeSleep
|
||||
? `
|
||||
<button class="sleep-button active" onclick="stopSleep()">
|
||||
🛑 Stop Sleep
|
||||
🛑 Stopped Sleeping
|
||||
<div class="sleep-info">
|
||||
${activeSleep.child_name || "Child"}<br>
|
||||
Started <span id="sleepTimeInfo">${formatTime(activeSleep.start_time)}</span>
|
||||
@@ -554,7 +443,7 @@
|
||||
`
|
||||
: `
|
||||
<button class="sleep-button" onclick="showStartSleepModal()">
|
||||
😴 Start Sleep
|
||||
😴 Started Sleeping
|
||||
</button>
|
||||
`;
|
||||
|
||||
@@ -563,11 +452,11 @@
|
||||
<div class="user-info">
|
||||
<p><strong>Logged in as:</strong> ${username}</p>
|
||||
</div>
|
||||
<button class="feeding-button" onclick="window.location.href='/log-diaper.html'" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); margin-bottom: 20px;">
|
||||
🧷 Changed Diaper
|
||||
</button>
|
||||
${feedingButtonHtml}
|
||||
${sleepButtonHtml}
|
||||
<button class="feeding-button" onclick="window.location.href='/log-diaper.html'" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); margin-top: 20px;">
|
||||
🧷 Log Diaper Change
|
||||
</button>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
/* Burger Menu Styles */
|
||||
.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-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-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-item {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.menu-item.admin {
|
||||
color: #667eea;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.menu-item.logout {
|
||||
color: #dc3545;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* Initializes the burger menu navigation
|
||||
* @param {Object} options - Configuration options
|
||||
* @param {boolean} options.includeHome - Whether to include Home menu item
|
||||
* @param {boolean} options.includeFeedings - Whether to include Feedings menu item
|
||||
* @param {boolean} options.includeDiapers - Whether to include Diapers menu item
|
||||
* @param {boolean} options.includeSleep - Whether to include Sleep menu item
|
||||
*/
|
||||
function initBurgerMenu(options = {}) {
|
||||
const {
|
||||
includeHome = true,
|
||||
includeFeedings = true,
|
||||
includeDiapers = true,
|
||||
includeSleep = true,
|
||||
} = options;
|
||||
|
||||
// Create burger menu HTML
|
||||
const burgerMenuHTML = `
|
||||
<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">
|
||||
${includeHome ? '<div class="menu-item" id="menuHome">🏠 Home</div>' : ""}
|
||||
${includeDiapers ? '<div class="menu-item" id="menuDiapers">🧷 Diapers</div>' : ""}
|
||||
${includeFeedings ? '<div class="menu-item" id="menuFeedings">🍼 Feedings</div>' : ""}
|
||||
${includeSleep ? '<div class="menu-item" id="menuSleep">😴 Sleep</div>' : ""}
|
||||
<div class="menu-item" id="menuAddChild">👶 Add Child</div>
|
||||
<div class="menu-item logout" id="menuLogout">🚪 Logout</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Insert menu at the beginning of body
|
||||
document.body.insertAdjacentHTML("afterbegin", burgerMenuHTML);
|
||||
|
||||
// Get elements
|
||||
const burgerMenu = document.getElementById("burgerMenu");
|
||||
const menuOverlay = document.getElementById("menuOverlay");
|
||||
const menuBackdrop = document.getElementById("menuBackdrop");
|
||||
|
||||
// Toggle menu function
|
||||
function toggleMenu() {
|
||||
menuOverlay.classList.toggle("open");
|
||||
menuBackdrop.classList.toggle("open");
|
||||
}
|
||||
|
||||
// Close menu function
|
||||
function closeMenu() {
|
||||
menuOverlay.classList.remove("open");
|
||||
menuBackdrop.classList.remove("open");
|
||||
}
|
||||
|
||||
// Event listeners for menu toggle
|
||||
burgerMenu.addEventListener("click", toggleMenu);
|
||||
menuBackdrop.addEventListener("click", closeMenu);
|
||||
|
||||
// Navigation event listeners
|
||||
if (includeHome) {
|
||||
document.getElementById("menuHome")?.addEventListener("click", () => {
|
||||
window.location.href = "/";
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("menuAddChild").addEventListener("click", () => {
|
||||
window.location.href = "/add-child.html";
|
||||
});
|
||||
|
||||
if (includeFeedings) {
|
||||
document.getElementById("menuFeedings")?.addEventListener("click", () => {
|
||||
window.location.href = "/feedings.html";
|
||||
});
|
||||
}
|
||||
|
||||
if (includeDiapers) {
|
||||
document.getElementById("menuDiapers")?.addEventListener("click", () => {
|
||||
window.location.href = "/diapers.html";
|
||||
});
|
||||
}
|
||||
|
||||
if (includeSleep) {
|
||||
document.getElementById("menuSleep")?.addEventListener("click", () => {
|
||||
window.location.href = "/sleep.html";
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("menuLogout").addEventListener("click", () => {
|
||||
closeMenu();
|
||||
// Call the page's logout function if it exists, otherwise use default
|
||||
if (typeof logout === "function") {
|
||||
logout();
|
||||
} else {
|
||||
defaultLogout();
|
||||
}
|
||||
});
|
||||
|
||||
// Default logout function
|
||||
function defaultLogout() {
|
||||
localStorage.removeItem("access_token");
|
||||
localStorage.removeItem("username");
|
||||
window.location.href = "/login.html";
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,7 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Sleep - Baby Monitor</title>
|
||||
<link rel="stylesheet" href="/menu.css" />
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
@@ -20,66 +21,6 @@
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
@@ -335,23 +276,6 @@
|
||||
</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="menuDiapers">🧷 Diapers</div>
|
||||
<div class="menu-item" id="menuSleep">😴 Sleep</div>
|
||||
<div class="menu-item logout" id="menuLogout">🚪 Logout</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h1>😴 Sleep Tracking</h1>
|
||||
<p class="subtitle">Monitor your baby's sleep patterns</p>
|
||||
@@ -382,57 +306,18 @@
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
|
||||
<script src="/menu.js"></script>
|
||||
<script>
|
||||
const token = localStorage.getItem("access_token");
|
||||
|
||||
// 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("menuDiapers").addEventListener("click", () => {
|
||||
window.location.href = "/diapers.html";
|
||||
});
|
||||
|
||||
document.getElementById("menuSleep").addEventListener("click", () => {
|
||||
closeMenu();
|
||||
});
|
||||
|
||||
document.getElementById("menuLogout").addEventListener("click", () => {
|
||||
closeMenu();
|
||||
logout();
|
||||
});
|
||||
|
||||
// Check if user is logged in
|
||||
if (!token) {
|
||||
window.location.href = "/login.html";
|
||||
}
|
||||
|
||||
// Initialize burger menu
|
||||
initBurgerMenu({ includeHome: true });
|
||||
|
||||
let allSleeps = [];
|
||||
let allChildren = [];
|
||||
let selectedChildId = "";
|
||||
@@ -584,10 +469,6 @@
|
||||
<h3>Total Sessions</h3>
|
||||
<div class="value">${totalSessions}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Ongoing</h3>
|
||||
<div class="value">${ongoingSessions}</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Avg Duration</h3>
|
||||
<div class="value">${formatDuration(avgMinutes)}</div>
|
||||
|
||||
Reference in New Issue
Block a user