|
|
@@ -4,26 +4,31 @@
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>会友信息考勤打卡系统</title>
|
|
|
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
|
|
|
<style>
|
|
|
- body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; }
|
|
|
- h1 { color: #333; }
|
|
|
- form { margin-bottom: 20px; }
|
|
|
- input, button { margin: 5px 0; padding: 5px; }
|
|
|
- ul { list-style-type: none; padding: 0; }
|
|
|
- li { background: #f4f4f4; margin-bottom: 5px; padding: 10px; }
|
|
|
+ body { padding-top: 20px; }
|
|
|
+ .container { max-width: 800px; }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <h1>会友信息考勤打卡系统</h1>
|
|
|
-
|
|
|
- <form id="addMemberForm">
|
|
|
- <input type="text" id="memberName" placeholder="输入会员姓名" required>
|
|
|
- <button type="submit">添加会员</button>
|
|
|
- </form>
|
|
|
+ <div class="container">
|
|
|
+ <h1 class="mb-4">会友信息考勤打卡系统</h1>
|
|
|
+
|
|
|
+ <form id="addMemberForm" class="mb-4">
|
|
|
+ <div class="input-group">
|
|
|
+ <input type="text" id="memberName" class="form-control" placeholder="输入会员姓名" required>
|
|
|
+ <button type="submit" class="btn btn-primary">添加会员</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
|
|
|
- <h2>会员列表</h2>
|
|
|
- <ul id="memberList"></ul>
|
|
|
+ <h2>会员列表</h2>
|
|
|
+ <ul id="memberList" class="list-group mb-4"></ul>
|
|
|
|
|
|
+ <h2>设备状态</h2>
|
|
|
+ <ul id="deviceList" class="list-group"></ul>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
<script>
|
|
|
const API_URL = '/api';
|
|
|
|
|
|
@@ -32,10 +37,12 @@
|
|
|
const members = await response.json();
|
|
|
const memberList = document.getElementById('memberList');
|
|
|
memberList.innerHTML = members.map(member => `
|
|
|
- <li>
|
|
|
+ <li class="list-group-item d-flex justify-content-between align-items-center">
|
|
|
${member.name}
|
|
|
- <button onclick="recordAttendance(${member.id})">记录考勤</button>
|
|
|
- <button onclick="viewAttendance(${member.id})">查看考勤</button>
|
|
|
+ <div>
|
|
|
+ <button onclick="recordAttendance('${member._id}')" class="btn btn-sm btn-success">记录考勤</button>
|
|
|
+ <button onclick="viewAttendance('${member._id}')" class="btn btn-sm btn-info">查看考勤</button>
|
|
|
+ </div>
|
|
|
</li>
|
|
|
`).join('');
|
|
|
}
|
|
|
@@ -68,7 +75,21 @@
|
|
|
alert(`考勤记录：\n${attendance.join('\n')}`);
|
|
|
}
|
|
|
|
|
|
+ async function fetchDevices() {
|
|
|
+ const response = await fetch(`${API_URL}/devices`);
|
|
|
+ const devices = await response.json();
|
|
|
+ const deviceList = document.getElementById('deviceList');
|
|
|
+ deviceList.innerHTML = devices.map(device => `
|
|
|
+ <li class="list-group-item d-flex justify-content-between align-items-center">
|
|
|
+ ${device.name} (${device.deviceId})
|
|
|
+ <span class="badge bg-${device.status === 'online' ? 'success' : 'danger'} rounded-pill">${device.status}</span>
|
|
|
+ </li>
|
|
|
+ `).join('');
|
|
|
+ }
|
|
|
+
|
|
|
fetchMembers();
|
|
|
+ fetchDevices();
|
|
|
+ setInterval(fetchDevices, 30000); // 每30秒更新一次设备状态
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
D8D AI