Select Git revision
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
admin.html 16.11 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospital Management</title>
<link rel="stylesheet" href="../css/beds.css">
<link rel="stylesheet" href="../css/admin.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/shared-nav.css">
<script src="../js/shared-nav.js"></script>
</head>
<body>
<!-- Update sidebar HTML structure -->
<nav class="sidebar">
<div class="text-lg">System</div>
<a href="#" data-content="hospital" class="nav-item">
Hospital
</a>
<a href="#" data-content="nursing" class="nav-item">
Nursing Staff
</a>
<div onclick="chooseOut()" class="nav-item sign-out">
Sign Out
</div>
</nav>
</nav>
<div class="content">
<div id="user-info" style="text-align: right; padding: 10px; font-weight: bold;"></div>
<div id="dynamic-content">
<h1>Welcome to the Management System</h1>
<p>Select an option from the sidebar to get started.</p>
</div>
</div>
<!-- Modal for Adding or Editing Hospital -->
<div id="hospital-modal" class="modal" style="display: none;">
<div class="modal-content">
<h2 id="modal-title">Add New Hospital</h2>
<label for="modal-name">Name</label>
<input type="text" id="modal-name" placeholder="Enter name" />
<label for="modal-address">Address</label>
<input type="text" id="modal-address" placeholder="Enter address" />
<label for="modal-phone">Phone</label>
<input type="text" id="modal-phone" placeholder="Enter phone number" />
<label for="modal-totalBeds">Total Beds</label>
<input type="number" id="modal-totalBeds" placeholder="Enter total beds" />
<label for="modal-availableBeds">Available Beds</label>
<input type="number" id="modal-availableBeds" placeholder="Enter available beds" />
<div class="modal-footer">
<button id="save-hospital-btn">Save</button>
<button id="close-hospital-modal">Close</button>
</div>
</div>
</div>
<script>
const dynamicContent = document.getElementById("dynamic-content");
function loadCurrentUser() {
fetch('/commonAdmin/hospital/currentUser')
.then(response => {
if (!response.ok) throw new Error("Failed to fetch current user.");
return response.text();
})
.then(username => {
document.getElementById('user-info').innerText = `Logged in as: ${username}`;
}) .catch(error => {
console.error("Error fetching current user:", error);
document.getElementById('user-info').innerText = "Unable to fetch user info.";
});
}
function chooseOut() {
window.location.href = "/logout";
}
loadCurrentUser();
function loadHospitalInterface() {
dynamicContent.innerHTML = `
<h2>Hospital Management</h2>
<div id="toolbar">
<label for="searchName">Name</label>
<input type="text" id="searchName" placeholder="Search by name" />
<label for="searchAddress">Address</label>
<input type="text" id="searchAddress" placeholder="Search by address" />
<button id="searchButton">Search</button>
<button id="allButton">All</button>
<button id="addHospitalButton">Add Hospital</button>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Phone</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="hospital-table-body"></tbody>
</table>
`;
bindHospitalToolbarEvents();
loadHospitals();
}
function loadNursingStaffInterface() {
dynamicContent.innerHTML = `
<h2>Nursing Staff</h2>
<div id="toolbar">
<label for="searchNurseName">Name</label>
<input type="text" id="searchNurseName" placeholder="Search by name" />
<label for="searchNurseHospitalId">Hospital ID</label>
<input type="number" id="searchNurseHospitalId" placeholder="Search by Hospital ID" />
<button id="searchNurseButton">Search</button>
<button id="allNurseButton">All</button>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Status</th>
<th>Hospital ID</th>
<th>Age</th>
<th>Address</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody id="nursing-table-body"></tbody>
</table>
`;
bindNursingToolbarEvents();
loadNurses();
}
function openAddHospitalModal() {
document.getElementById('modal-title').innerText = "Add New Hospital";
document.getElementById('hospital-modal').style.display = 'flex';
// Reset modal content
document.getElementById('modal-name').value = '';
document.getElementById('modal-address').value = '';
document.getElementById('modal-phone').value = '';
document.getElementById('modal-totalBeds').value = '';
document.getElementById('modal-availableBeds').value = '';
document.getElementById('save-hospital-btn').onclick = saveHospital;
}
function closeHospitalModal() {
document.getElementById('hospital-modal').style.display = 'none';
}
function saveHospital() {
const hospitalData = {
name: document.getElementById('modal-name').value.trim(),
address: document.getElementById('modal-address').value.trim(),
phone: document.getElementById('modal-phone').value.trim(),
totalBeds: parseInt(document.getElementById('modal-totalBeds').value.trim()),
availableBeds: parseInt(document.getElementById('modal-availableBeds').value.trim())
};
if (!hospitalData.name || !hospitalData.address || !hospitalData.phone ||
isNaN(hospitalData.totalBeds) || isNaN(hospitalData.availableBeds)) {
alert("All fields are required!");
return;
}
fetch('/commonAdmin/hospital/add', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(hospitalData),
}).then(response => {
if (response.ok) {
alert("Hospital saved successfully!");
closeHospitalModal();
loadHospitals();
} else {
return response.text().then(text => { throw new Error(text); });
}
}).catch(error => {
console.error("Error adding hospital:", error);
alert("Failed to save hospital: " + error.message);
});
}
function openEditHospitalModal(hospitalId) {
fetch(`/commonAdmin/hospital/${hospitalId}`)
.then(response => {
if (!response.ok) throw new Error("Failed to fetch hospital data.");
return response.json();
})
.then(hospital => {
document.getElementById('modal-title').innerText = "Edit Hospital";
document.getElementById('modal-name').value = hospital.name;
document.getElementById('modal-address').value = hospital.address;
document.getElementById('modal-phone').value = hospital.phone;
document.getElementById('modal-totalBeds').value = hospital.totalBeds;
document.getElementById('modal-availableBeds').value = hospital.availableBeds;
document.getElementById('hospital-modal').style.display = 'flex';
const saveButton = document.getElementById('save-hospital-btn');
saveButton.replaceWith(saveButton.cloneNode(true));
document.getElementById('save-hospital-btn').addEventListener('click', () => updateHospital(hospitalId));
})
.catch(error => {
console.error("Error loading hospital data:", error);
alert("Failed to load hospital data.");
});
}
function updateHospital(hospitalId) {
const hospitalData = {
id: hospitalId,
name: document.getElementById('modal-name').value.trim(),
location: document.getElementById('modal-location') ? document.getElementById('modal-location').value.trim() : "", // 如果 location 是可选的
address: document.getElementById('modal-address').value.trim(),
phone: document.getElementById('modal-phone').value.trim(),
totalBeds: parseInt(document.getElementById('modal-totalBeds').value.trim()),
availableBeds: parseInt(document.getElementById('modal-availableBeds').value.trim())
};
console.log("Updating hospital with data:", hospitalData);
if (!hospitalData.name || !hospitalData.address || !hospitalData.phone ||
isNaN(hospitalData.totalBeds) || isNaN(hospitalData.availableBeds)) {
alert("All fields are required!");
return;
}
fetch(`/commonAdmin/hospital/update/${hospitalId}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(hospitalData),
})
.then(response => {
if (response.ok) {
alert("Hospital updated successfully!");
closeHospitalModal();
loadHospitals(); // Reload hospital list
} else {
return response.text().then(text => { throw new Error(text); });
}
})
.catch(error => {
console.error("Error updating hospital:", error);
alert("Failed to update hospital: " + error.message);
});
}
function loadHospitals(filters = {}) {
const query = new URLSearchParams(filters).toString();
fetch(`/commonAdmin/hospital/all?${query}`)
.then(response => response.json())
.then(data => {
const tableBody = document.getElementById('hospital-table-body');
tableBody.innerHTML = '';
data.forEach(hospital => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${hospital.id}</td>
<td>${hospital.name}</td>
<td>${hospital.address}</td>
<td>${hospital.phone}</td>
<td>
<button class="editButton" data-id="${hospital.id}">Edit</button>
<button class="deleteButton" data-id="${hospital.id}">Delete</button>
</td> `;
tableBody.appendChild(row);
});
document.querySelectorAll(".editButton").forEach(button => {
button.addEventListener("click", () => {
const hospitalId = button.getAttribute("data-id");
openEditHospitalModal(hospitalId);
});
});
document.querySelectorAll(".deleteButton").forEach(button => {
button.addEventListener("click", () => {
const hospitalId = button.getAttribute("data-id");
if (confirm("Are you sure you want to delete this hospital?")) {
fetch(`/commonAdmin/hospital/delete/${hospitalId}`, {
method: "DELETE",
})
.then(response => {
if (!response.ok) {
return response.text().then(text => { throw new Error(text); });
}
alert("Hospital deleted successfully!");
loadHospitals();
})
.catch(error => {
console.error("Error deleting hospital:", error);
alert(`Failed to delete hospital: ${error.message}`);
});
}
});
});
})
.catch(error => console.error("Error loading hospitals:", error));
}
function loadNurses(filters = {}) {
const query = new URLSearchParams(filters).toString();
fetch(`/commonAdmin/hospital/nurses?${query}`)
.then(response => response.json())
.then(data => {
const tableBody = document.getElementById('nursing-table-body');
tableBody.innerHTML = '';
data.forEach(nurse => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${nurse.id}</td>
<td>${nurse.name}</td>
<td>${nurse.status_str}</td>
<td>${nurse.hospitalId}</td>
<td>${nurse.age}</td>
<td>${nurse.address}</td>
<td>${nurse.email}</td>
<td>${nurse.phone}</td>
`;
tableBody.appendChild(row);
});
})
.catch(error => console.error("Error loading nurses:", error));
}
function bindHospitalToolbarEvents() {
document.getElementById('addHospitalButton').addEventListener('click', openAddHospitalModal);
document.getElementById('searchButton').addEventListener('click', () => {
const name = document.getElementById('searchName').value.trim();
const address = document.getElementById('searchAddress').value.trim(); const filters = {};
if (name) filters.name = name;
if (address) filters.location = address;
loadHospitals(filters);
});
document.getElementById('allButton').addEventListener('click', () => {
loadHospitals();
});
document.getElementById('close-hospital-modal').addEventListener('click', closeHospitalModal);
}
function bindNursingToolbarEvents() {
document.getElementById('searchNurseButton').addEventListener('click', () => {
const name = document.getElementById('searchNurseName').value.trim();
const hospitalId = document.getElementById('searchNurseHospitalId').value.trim();
const filters = {};
if (name) filters.name = name;
if (hospitalId) filters.hospitalId = hospitalId;
loadNurses(filters);
});
document.getElementById('allNurseButton').addEventListener('click', () => {
loadNurses();
});
}
document.querySelectorAll(".sidebar a").forEach(link => {
link.addEventListener("click", function(event) {
event.preventDefault();
const contentKey = this.getAttribute("data-content");
if (contentKey === "hospital") {
loadHospitalInterface();
} else if (contentKey === "nursing") {
loadNursingStaffInterface();
}
});
});
document.addEventListener('DOMContentLoaded', function() {
setupNavigation('currentPage'); // Replace currentPage with: dashboard, beds, or approvals
});
</script>
</body>
</html>