2025-05-12 17:29:54 +08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="zh-Hant">
|
|
|
|
|
<head>
|
2025-05-13 17:49:03 +08:00
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>未開通居民列表</title>
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
|
<!-- Bootstrap -->
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
<style>
|
|
|
|
|
#qrcodeModal .modal-body {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container mt-4">
|
|
|
|
|
<h2 class="mb-4">未開通居民列表</h2>
|
2025-05-12 17:29:54 +08:00
|
|
|
|
2025-05-13 17:49:03 +08:00
|
|
|
<!-- 搜尋列 -->
|
|
|
|
|
<div class="row mb-3">
|
|
|
|
|
<div class="col-md-3">
|
|
|
|
|
<input type="text" id="searchName" class="form-control" placeholder="搜尋姓名">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-3">
|
|
|
|
|
<input type="text" id="searchEmail" class="form-control" placeholder="搜尋 Email">
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
<button class="btn btn-primary w-100" onclick="search()">搜尋</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
<button class="btn btn-danger w-100" onclick="deleteSelected()">刪除勾選</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="col-md-2">
|
|
|
|
|
<button class="btn btn-secondary w-100" onclick="scanResident()">掃描住戶</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-05-12 17:29:54 +08:00
|
|
|
|
2025-05-13 17:49:03 +08:00
|
|
|
<!-- 表格 -->
|
|
|
|
|
<table class="table table-striped table-bordered">
|
|
|
|
|
<thead class="table-dark">
|
|
|
|
|
<tr>
|
|
|
|
|
<th><input type="checkbox" id="selectAll" onclick="toggleAll(this)"></th>
|
|
|
|
|
<th>編號</th>
|
|
|
|
|
<th>姓名</th>
|
|
|
|
|
<th>Email</th>
|
|
|
|
|
<th>聯絡電話</th>
|
|
|
|
|
<th>操作</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody id="residentTable">
|
|
|
|
|
<!-- 動態資料列 -->
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
2025-05-12 17:29:54 +08:00
|
|
|
|
2025-05-13 17:49:03 +08:00
|
|
|
<!-- 分頁 -->
|
|
|
|
|
<nav>
|
|
|
|
|
<ul class="pagination justify-content-center" id="pagination"></ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</div>
|
2025-05-12 17:29:54 +08:00
|
|
|
|
2025-05-13 17:49:03 +08:00
|
|
|
<!-- Modal 彈出 QR Code -->
|
|
|
|
|
<div class="modal fade" id="qrcodeModal" tabindex="-1" aria-labelledby="qrcodeModalLabel" aria-hidden="true">
|
|
|
|
|
<div class="modal-dialog modal-sm modal-dialog-centered">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
<h5 class="modal-title">開通 QR Code</h5>
|
|
|
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="關閉"></button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
<div id="qrcode"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2025-05-12 17:29:54 +08:00
|
|
|
</div>
|
2025-05-13 17:49:03 +08:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap + QRCode.js -->
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/qrcodejs/qrcode.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const pageSize = 5;
|
|
|
|
|
let currentPage = 1;
|
|
|
|
|
let residents = [
|
|
|
|
|
{ id: 1, name: "王小明", email: "xiaoming@example.com", phone: "0912-345-678" },
|
|
|
|
|
{ id: 2, name: "林美麗", email: "meili@example.com", phone: "0987-654-321" },
|
|
|
|
|
{ id: 3, name: "張大雄", email: "daxiong@example.com", phone: "0912-333-444" },
|
|
|
|
|
{ id: 4, name: "李小龍", email: "dragon@example.com", phone: "0900-111-222" },
|
|
|
|
|
{ id: 5, name: "周杰倫", email: "jay@example.com", phone: "0988-888-888" },
|
|
|
|
|
{ id: 6, name: "蔡依林", email: "jolin@example.com", phone: "0977-777-777"},
|
|
|
|
|
{ id: 7, name: "林志玲", email: "lin@example.com", phone: "0966-666-666" },
|
|
|
|
|
{ id: 8, name: "王力宏", email: "leehom@example.com", phone: "0955-555-555" }
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
function renderTable(data) {
|
|
|
|
|
const tbody = document.getElementById("residentTable");
|
|
|
|
|
tbody.innerHTML = "";
|
|
|
|
|
|
|
|
|
|
const start = (currentPage - 1) * pageSize;
|
|
|
|
|
const pageData = data.slice(start, start + pageSize);
|
|
|
|
|
|
|
|
|
|
pageData.forEach(r => {
|
|
|
|
|
const row = document.createElement("tr");
|
|
|
|
|
row.innerHTML = `
|
|
|
|
|
<td><input type="checkbox" class="row-checkbox" data-id="${r.id}"></td>
|
|
|
|
|
<td>${r.id}</td>
|
|
|
|
|
<td>${r.name}</td>
|
|
|
|
|
<td>${r.email}</td>
|
|
|
|
|
<td>${r.phone}</td>
|
|
|
|
|
<td><button class="btn btn-success btn-sm" onclick="showQRCode('https://yourdomain.com/activate?id=${r.id}')">開通</button></td>
|
|
|
|
|
`;
|
|
|
|
|
tbody.appendChild(row);
|
|
|
|
|
});
|
2025-05-12 17:29:54 +08:00
|
|
|
|
2025-05-13 17:49:03 +08:00
|
|
|
renderPagination(data.length);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function renderPagination(totalItems) {
|
|
|
|
|
const totalPages = Math.ceil(totalItems / pageSize);
|
|
|
|
|
const pagination = document.getElementById("pagination");
|
|
|
|
|
pagination.innerHTML = "";
|
|
|
|
|
|
|
|
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
|
|
|
const li = document.createElement("li");
|
|
|
|
|
li.className = "page-item" + (i === currentPage ? " active" : "");
|
|
|
|
|
li.innerHTML = `<a class="page-link" href="#" onclick="goToPage(${i})">${i}</a>`;
|
|
|
|
|
pagination.appendChild(li);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function goToPage(page) {
|
|
|
|
|
currentPage = page;
|
|
|
|
|
search(); // 重新篩選並渲染
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function search() {
|
|
|
|
|
const nameInput = document.getElementById("searchName").value.toLowerCase();
|
|
|
|
|
const emailInput = document.getElementById("searchEmail").value.toLowerCase();
|
|
|
|
|
|
|
|
|
|
const filtered = residents.filter(r =>
|
|
|
|
|
r.name.toLowerCase().includes(nameInput) &&
|
|
|
|
|
r.email.toLowerCase().includes(emailInput)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
renderTable(filtered);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function toggleAll(source) {
|
|
|
|
|
const checkboxes = document.querySelectorAll(".row-checkbox");
|
|
|
|
|
checkboxes.forEach(cb => cb.checked = source.checked);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function deleteSelected() {
|
|
|
|
|
if (!confirm("確定要刪除勾選的資料嗎？")) return;
|
|
|
|
|
|
|
|
|
|
const selected = document.querySelectorAll(".row-checkbox:checked");
|
|
|
|
|
const idsToDelete = Array.from(selected).map(cb => parseInt(cb.dataset.id));
|
|
|
|
|
|
|
|
|
|
residents = residents.filter(r => !idsToDelete.includes(r.id));
|
|
|
|
|
currentPage = 1;
|
|
|
|
|
search();
|
|
|
|
|
document.getElementById("selectAll").checked = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showQRCode(url) {
|
|
|
|
|
const qrContainer = document.getElementById("qrcode");
|
|
|
|
|
qrContainer.innerHTML = "";
|
|
|
|
|
new QRCode(qrContainer, {
|
|
|
|
|
text: url,
|
|
|
|
|
width: 200,
|
|
|
|
|
height: 200
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById("qrcodeModal"));
|
|
|
|
|
modal.show();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function scanResident() {
|
|
|
|
|
alert("這裡可以接掃描裝置或開啟相機功能");
|
|
|
|
|
// 若你想改成開 QRCode 掃描，可在這裡整合 JS 掃描工具
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 初次載入
|
|
|
|
|
search();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
2025-05-12 17:29:54 +08:00
|
|
|
</html>
|
