69 lines
3.1 KiB
Plaintext
69 lines
3.1 KiB
Plaintext
<form id="acl-add-form" method="post" action="/acl" style="max-width: 500px; margin: 2em auto; padding: 2em; border: 1px solid #ccc; border-radius: 8px; background: #fafafa; box-shadow: 0 2px 8px rgba(0,0,0,0.05);">
|
|
<h2 style="text-align:center; margin-bottom:1em;">Add ACL Entry</h2>
|
|
<div style="margin-bottom:1em;">
|
|
<label for="Name" style="display:block; margin-bottom:0.5em;">Name:</label>
|
|
<input type="text" id="Name" name="Name" required style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;">
|
|
</div>
|
|
<div style="margin-bottom:1em;">
|
|
<label for="CardNumber" style="display:block; margin-bottom:0.5em;">Card Number:</label>
|
|
<input type="text" id="CardNumber" name="CardNumber" required style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;">
|
|
</div>
|
|
<div style="margin-bottom:1em;">
|
|
<label for="PIN" style="display:block; margin-bottom:0.5em;">PIN:</label>
|
|
<input type="text" id="PIN" name="PIN" style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;">
|
|
</div>
|
|
<div style="margin-bottom:1em;">
|
|
<label for="StartDate" style="display:block; margin-bottom:0.5em;">Start Date:</label>
|
|
<input type="date" id="StartDate" name="StartDate" style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;">
|
|
</div>
|
|
<div style="margin-bottom:1em;">
|
|
<label for="EndDate" style="display:block; margin-bottom:0.5em;">End Date:</label>
|
|
<input type="date" id="EndDate" name="EndDate" style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;">
|
|
</div>
|
|
<fieldset style="margin-bottom:1em; border-radius:4px; border:1px solid #bbb; padding:1em;">
|
|
<legend style="font-weight:bold;">Doors</legend>
|
|
<% if (typeof doorsList !== 'undefined') { %>
|
|
<% Object.keys(doorsList).forEach(function(door) { %>
|
|
<div style="margin-bottom:0.5em;">
|
|
<label style="cursor:pointer;">
|
|
<input type="checkbox" name="doors[<%= door %>]" value="1">
|
|
<%= door %>
|
|
</label>
|
|
</div>
|
|
<% }) %>
|
|
<% } else { %>
|
|
<div>No doors configured.</div>
|
|
<% } %>
|
|
</fieldset>
|
|
<button type="submit" style="width:100%; padding:0.75em; background:#1976d2; color:#fff; border:none; border-radius:4px; font-size:1em; cursor:pointer;">Add Entry</button>
|
|
</form>
|
|
|
|
<script>
|
|
document.getElementById('acl-add-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: {}
|
|
};
|
|
<% if (typeof doorsList !== 'undefined') { Object.keys(doorsList).forEach(function(door) { %>
|
|
data.doors['<%= door %>'] = formData.get('doors[<%= door %>]') ? 1 : 0;
|
|
<% }) } %>
|
|
fetch(form.action, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data)
|
|
}).then(res => {
|
|
if (res.ok) window.location.href = '/acl';
|
|
else alert('Failed to add ACL entry');
|
|
}).catch(err => {
|
|
alert('Error: ' + err.message);
|
|
});
|
|
});
|
|
</script>
|