Skip to content
Snippets Groups Projects

As an admin, to approve and reject the care provider. front end page

Merged As an admin, to approve and reject the care provider. front end page
32-as-an-admin-i-want-to-approve-or-reject-a-care-provider-from-being-shown-on-the-website-after-it into main
All threads resolved!
Merged
Chen Liangrequested to merge
32-as-an-admin-i-want-to-approve-or-reject-a-care-provider-from-being-shown-on-the-website-after-it into main
All threads resolved!
Viewing commit 1f529ddc
Next
Show latest version
1 file
+ 380
− 0
Compare changes
  • Side-by-side
  • Inline
src/main/resources/static/html/CHApprovalSystem.html 0 → 100644
+ 380
− 0
Burhan Akbar
Last comment by Burhan Akbar
<!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>