Skip to content
Snippets Groups Projects
Commit 1f529ddc authored by Chen Liang's avatar Chen Liang
Browse files

Upload New File

parent 9ad7088b
Branches
No related tags found
1 merge request!73As an admin, to approve and reject the care provider. front end page
Hide whitespace changes
Inline Side-by-side
src/main/resources/static/html/CHApprovalSystem.html 0 → 100644
+ 380
− 0
View file @ 1f529ddc
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Care Home Approval System</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KyZXEJr+fzzj7QPAAd6XJlNhh8Fj72V53fzmdeau9g7KZb6eYy2v8t+HjlFjzml0" crossorigin="anonymous">
<style>
body {
background-color: #f4f9fc;
font-family: 'Arial', sans-serif;
color: #333;
}
.container {
margin-top: 50px;
}
.header {
text-align: center;
margin-bottom: 40px;
}
.table th,
.table td {
vertical-align: middle;
}
.card {
border: 1px solid #007BFF;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn {
border-radius: 25px;
padding: 8px 20px;
font-size: 14px;
transition: background-color 0.3s ease;
}
.btn-primary {
background-color: #007BFF;
border-color: #007BFF;
}
.btn-primary:hover {
background-color: #0056b3;
border-color: #0056b3;
}
.btn-danger {
background-color: #dc3545;
border-color: #dc3545;
}
.btn-danger:hover {
background-color: #c82333;
border-color: #c82333;
}
.btn-warning {
background-color: #ffc107;
border-color: #ffc107;
}
.btn-warning:hover {
background-color: #e0a800;
border-color: #e0a800;
}
.alert-info {
font-size: 16px;
background-color: #e3f2fd;
border-color: #b3e5fc;
color: #0277bd;
}
.modal-content {
background-color: #f8f9fa;
border-radius: 10px;
padding: 20px;
}
.modal-header {
background-color: #007BFF;
color: white;
border-bottom: none;
padding-bottom: 10px;
border-radius: 8px;
}
.modal-footer {
justify-content: space-between;
border-top: none;
padding-top: 15px;
}
.modal-body {
font-size: 16px;
color: #555;
}
.btn-group {
display: flex;
gap: 15px;
}
.btn-group button {
flex: 1;
max-width: 120px;
}
.btn-info {
background-color: #17a2b8;
border-color: #17a2b8;
}
.btn-info:hover {
background-color: #138496;
border-color: #138496;
}
.table {
border-radius: 10px;
overflow: hidden;
border: 1px solid #ddd;
width: 100%;
}
.table th {
background-color: #007BFF;
color: white;
}
.table td {
background-color: #ffffff;
}
.table-container {
display: flex;
justify-content: center;
margin-top: 50px;
}
.pagination {
display: flex;
gap: 10px;
justify-content: center;
padding: 10px 0;
}
.pagination .page-item {
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.pagination .page-item.active .page-link {
background-color: #007BFF;
color: white;
}
.pagination .page-item .page-link {
border-radius: 5px;
padding: 10px 15px;
background-color: white;
color: #007BFF;
border: 1px solid #007BFF;
transition: all 0.3s ease;
}
.pagination .page-item:hover .page-link {
background-color: #007BFF;
color: white;
}
.pagination .page-item.disabled .page-link {
background-color: #f4f9fc;
color: #ccc;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="display-4">Care Home Approval System</h1>
<p class="lead">Admin can approve, reject or delete the requests of registration from care homes.</p>
</div>
<!--E.g.-->
<div class="alert alert-info">There are currently 10 pending care home requests.</div>
<div class="table-container">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>CHName</th>
<th>Address</th>
<th>Option</th>
</tr>
</thead>
<tbody id="hospitalTableBody">
<!-- 动态生成表格内容 -->
</tbody>
</table>
</div>
<!-- 分页控件 -->
<div class="d-flex justify-content-center">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item" id="prevPageBtn">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="changePage(1)">1</a></li>
<li class="page-item"><a class="page-link" href="#" onclick="changePage(2)">2</a></li>
<li class="page-item"><a class="page-link" href="#" onclick="changePage(3)">3</a></li>
<li class="page-item" id="nextPageBtn">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- 模态框：显示详细请求信息 -->
<div class="modal fade" id="requestDetailsModal" tabindex="-1" aria-labelledby="requestDetailsModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="requestDetailsModalLabel">Details of Requests</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="requestDetailsContent"></div>
</div>
<div class="modal-footer">
<div class="btn-group">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="approveButton">Approve</button>
<button type="button" class="btn btn-danger" id="rejectButton">Reject</button>
<button type="button" class="btn btn-warning" id="deleteButton">Delete</button>
</div>
</div>
</div>
</div>
</div>
<script>
let selectedHospitalId = null;
// 示例医院数据
const hospitalData = [
{ id: 1, name: "Hospital 1", address: "Cardiff" },
{ id: 2, name: "Hospital 2", address: "Cardiff" },
{ id: 3, name: "Hospital 3", address: "Cardiff" },
{ id: 4, name: "Hospital 4", address: "London" },
{ id: 5, name: "Hospital 5", address: "London" },
{ id: 6, name: "Hospital 6", address: "Manchester" },
{ id: 7, name: "Hospital 7", address: "Bristol" },
{ id: 8, name: "Hospital 8", address: "London" },
{ id: 9, name: "Hospital 9", address: "Cardiff" },
{ id: 10, name: "Hospital 10", address: "Cardiff" }
];
let currentPage = 1;
const itemsPerPage = 5;
// 获取当前页面的医院数据
function getCurrentPageData(page) {
const startIndex = (page - 1) * itemsPerPage;
const endIndex = page * itemsPerPage;
return hospitalData.slice(startIndex, endIndex);
}
// 渲染表格数据
function renderTable(page) {
const currentData = getCurrentPageData(page);
const tableBody = document.getElementById('hospitalTableBody');
tableBody.innerHTML = '';
currentData.forEach(hospital => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${hospital.name}</td>
<td>${hospital.address}</td>
<td>
<button class="btn btn-info" onclick="showRequestDetails(${hospital.id}, '${hospital.name}', '${hospital.address}')">Check Requests</button>
</td>
`;
tableBody.appendChild(row);
});
}
// 切换分页
function changePage(page) {
currentPage = page;
renderTable(currentPage);
updatePagination();
}
// 更新分页按钮状态
function updatePagination() {
const totalPages = Math.ceil(hospitalData.length / itemsPerPage);
document.getElementById('prevPageBtn').classList.toggle('disabled', currentPage === 1);
document.getElementById('nextPageBtn').classList.toggle('disabled', currentPage === totalPages);
// 更新分页按钮显示
const pageLinks = document.querySelectorAll('.pagination .page-item');
pageLinks.forEach(link =>{
const pageNumber = link.querySelector('a').textContent;
if (parseInt(pageNumber) === currentPage) {
link.classList.add('active');
} else {
link.classList.remove('active');
}
});
}
// 显示请求详细信息
function showRequestDetails(id, name, address) {
selectedHospitalId = id;
const requestDetailsContent = `
<h5>CH Name: ${name}</h5>
<p><strong>Address: </strong> ${address}</p>
<p><strong>State: </strong> Pending</p>
`;
document.getElementById('requestDetailsContent').innerHTML = requestDetailsContent;
// 显示模态框
const modal = new bootstrap.Modal(document.getElementById('requestDetailsModal'));
modal.show();
// 设置按钮功能
document.getElementById('approveButton').onclick = approveHospital;
document.getElementById('rejectButton').onclick = rejectHospital;
document.getElementById('deleteButton').onclick = deleteHospital;
}
// 批准医院
function approveHospital() {
alert('The Care Home has been approved!');
window.location.reload();
}
// 拒绝医院
function rejectHospital() {
alert('The Care Home has been rejected!');
window.location.reload();
}
// 删除医院
function deleteHospital() {
alert('The Care Home has been deleted!');
window.location.reload();
}
// 初始化表格和分页
renderTable(currentPage);
updatePagination();
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment