Test
This commit is contained in:
parent
cd2a0b4b17
commit
c6b5c66546
|
|
@ -4,139 +4,136 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Add ACL Entry</title>
|
||||
<title>Event Log Viewer</title>
|
||||
<style>
|
||||
form#acl-edit-form {
|
||||
max-width: 500px;
|
||||
margin: 2em auto;
|
||||
padding: 2em;
|
||||
border: 1px solid #ccc;
|
||||
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;
|
||||
background: #fafafa;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
form#acl-edit-form div {
|
||||
margin-bottom: 1em;
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
form#acl-edit-form label {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
form#acl-edit-form input[type="text"],
|
||||
form#acl-edit-form input[type="date"] {
|
||||
table {
|
||||
width: 100%;
|
||||
padding: 0.5em;
|
||||
border: 1px solid #bbb;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
form#acl-edit-form fieldset {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
background: #f5f5f5;
|
||||
th,
|
||||
td {
|
||||
padding: 12px 8px;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
form#acl-edit-form legend {
|
||||
font-weight: 600;
|
||||
th {
|
||||
background: #f0f0f0;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
form#acl-edit-form button[type="submit"] {
|
||||
background: #1976d2;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 0.7em 1.5em;
|
||||
border-radius: 4px;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
form#acl-edit-form button[type="submit"]:hover {
|
||||
background: #1565c0;
|
||||
}
|
||||
|
||||
form#acl-edit-form input[type="checkbox"] {
|
||||
margin-right: 0.5em;
|
||||
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);
|
||||
if (!log || log.EventType != 2 || log.Granted != 0) return; // Only allow denied swipes
|
||||
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>${log.Name || ''}</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 %>" 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>
|
||||
<form id="acl-edit-form" method="patch" action="/acl">
|
||||
<div>
|
||||
<label for="Name">Name:</label>
|
||||
<input type="text" id="Name" name="Name" value="" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="CardNumber">Card Number:</label>
|
||||
<input type="number" id="CardNumber" name="CardNumber" value="" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="PIN">PIN:</label>
|
||||
<input type="text" id="PIN" name="PIN" value="">
|
||||
</div>
|
||||
<div>
|
||||
<label for="StartDate">Start Date:</label>
|
||||
<input type="date" id="StartDate" name="StartDate"
|
||||
value="<%= new Date().toISOString().slice(0,10) %>" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="EndDate">End Date:</label>
|
||||
<input type="date" id="EndDate" name="EndDate"
|
||||
value="<%= new Date(Date.now() + 99*365.25*24*60*60*1000).toISOString().slice(0,10) %>" required>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>Doors</legend>
|
||||
<% Object.keys(doorList).forEach(function(door) { %>
|
||||
<div>
|
||||
<label>
|
||||
<input type="checkbox" name="doors[<%= door %>]" value="1" <% if (doorList[door] &&
|
||||
doorList[door]==1) { %> checked <% } %> >
|
||||
<%= door %>
|
||||
<% doorList[door] %>
|
||||
</label>
|
||||
</div>
|
||||
<% }) %>
|
||||
</fieldset>
|
||||
<button type="submit">Save</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
document.getElementById('acl-edit-form').addEventListener('submit', function (e) {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const formData = new FormData(form);
|
||||
const data = {
|
||||
Name: formData.get('Name'),
|
||||
CardNumber: formData.get('CardNumber'),
|
||||
PIN: formData.get('PIN'),
|
||||
StartDate: formData.get('StartDate'),
|
||||
EndDate: formData.get('EndDate'),
|
||||
doors: {}
|
||||
};
|
||||
<% Object.keys(doorList).forEach(function (door) { %>
|
||||
data.doors['<%= door %>'] = formData.get('doors[<%= door %>]') ? 1 : 0;
|
||||
<% }) %>
|
||||
fetch(form.action, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data)
|
||||
}).then(res => {
|
||||
if (res.ok) window.location.href = '/acl';
|
||||
else alert('Failed to update ACL entry');
|
||||
}).catch(err => {
|
||||
alert('Error: ' + err.message);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div class="container">
|
||||
<h1>Bulk Credential Adder</h1>
|
||||
<a href="/dashboard">Dashboard</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>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in a new issue