182 lines
4.4 KiB
Plaintext
182 lines
4.4 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Event Log Viewer</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: #f7f7f7;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.container {
|
|
/* max-width: 900px; */
|
|
margin: 40px auto;
|
|
background: #fff;
|
|
padding: 32px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
margin-bottom: 32px;
|
|
color: #333;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 12px 8px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background: #f0f0f0;
|
|
color: #444;
|
|
}
|
|
|
|
tr:hover {
|
|
background: #f9f9f9;
|
|
}
|
|
</style>
|
|
<script>
|
|
const wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
|
|
const wsUrl = `${wsProtocol}//${location.host}${location.pathname}`;
|
|
const ws = new WebSocket(wsUrl);
|
|
|
|
ws.onmessage = function (event) {
|
|
// Handle incoming event log messages
|
|
// Example: append to a table or display in the UI
|
|
console.log('Event received:', event.data);
|
|
const tbody = document.querySelector('tbody');
|
|
const log = JSON.parse(event.data);
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td><input type="checkbox" /></td>
|
|
<td>${log.CardNumber}</td>
|
|
<td>${log.Controller}</td>
|
|
<td>${log.Door}</td>
|
|
<td>${new Date(log.Timestamp).toLocaleString()}</td>
|
|
<td>
|
|
<input type="text" name="name" required value="${log.CardNumber}" />
|
|
</td>
|
|
<td><input type="date" value="${new Date().toISOString().slice(0, 10)}" /></td>
|
|
<td><input type="date" value="${new Date(Date.now() + 99 * 365.25 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10)}" /></td>
|
|
<td>
|
|
<% for (const doorName of Object.keys(doorList)) { %>
|
|
<label>
|
|
<input type="checkbox" name="<%= doorName %>" value="<%= doorName %>" checked />
|
|
<%= doorName %>
|
|
</label>
|
|
<% } %>
|
|
</td>
|
|
`;
|
|
tbody.insertBefore(tr, tbody.firstChild);
|
|
tr.style.background = 'orange';
|
|
setTimeout(() => {
|
|
let opacity = 1;
|
|
const fade = setInterval(() => {
|
|
opacity -= 0.05;
|
|
tr.style.background = `rgba(255,165,0,${opacity})`;
|
|
if (opacity <= 0.1) {
|
|
tr.style.background = '';
|
|
clearInterval(fade);
|
|
}
|
|
}, 40);
|
|
}, 0);
|
|
};
|
|
|
|
ws.onopen = function () {
|
|
console.log('WebSocket connection established');
|
|
};
|
|
|
|
ws.onclose = function () {
|
|
console.log('WebSocket connection closed');
|
|
};
|
|
|
|
ws.onerror = function (error) {
|
|
console.error('WebSocket error:', error);
|
|
};
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>Bulk Credential Adder</h1>
|
|
<a href="/dashboard">Dashboard</a>
|
|
<a href="/acl">Access Control List</a>
|
|
<a href="/acl/add">Add Credential</a>
|
|
<form action="/acl/bulk-add" method="post">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Select</th>
|
|
<th>Credential</th>
|
|
<th>Controller</th>
|
|
<th>Door</th>
|
|
<th>Data</th>
|
|
<th>Name</th>
|
|
<th>Start Date</th>
|
|
<th>End Date</th>
|
|
<th>Allowed Doors</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<button type="submit">Add Selected</button>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
document.querySelector('form').addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
const rows = document.querySelectorAll('tbody tr');
|
|
const credentials = [];
|
|
rows.forEach(tr => {
|
|
const selected = tr.querySelector('input[type="checkbox"]');
|
|
if (selected && selected.checked) {
|
|
const CardNumber = tr.children[1].textContent;
|
|
const Name = tr.querySelector('input[name="name"]').value;
|
|
const StartDate = tr.querySelectorAll('input[type="date"]')[0].value;
|
|
const EndDate = tr.querySelectorAll('input[type="date"]')[1].value;
|
|
const Doors = [];
|
|
tr.children[8].querySelectorAll('input[type="checkbox"]').forEach(cb => {
|
|
if (cb.attributes.checked) Doors.push(cb.attributes.name.nodeValue);
|
|
});
|
|
credentials.push({
|
|
CardNumber,
|
|
Name,
|
|
StartDate,
|
|
EndDate,
|
|
Doors
|
|
});
|
|
}
|
|
});
|
|
|
|
fetch('/acl/bulk-add', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ credentials })
|
|
}).then(res => {
|
|
if (res.ok) {
|
|
window.location.href = '/acl';
|
|
} else {
|
|
alert('Failed to add credentials');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</html> |