142 lines
3.4 KiB
Plaintext
142 lines
3.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>Add ACL Entry</title>
|
|
<style>
|
|
form#acl-edit-form {
|
|
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);
|
|
}
|
|
|
|
form#acl-edit-form div {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
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"] {
|
|
width: 100%;
|
|
padding: 0.5em;
|
|
border: 1px solid #bbb;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
form#acl-edit-form fieldset {
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
padding: 1em;
|
|
margin-bottom: 1em;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
form#acl-edit-form legend {
|
|
font-weight: 600;
|
|
}
|
|
|
|
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;
|
|
}
|
|
</style>
|
|
|
|
</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>
|
|
</body>
|
|
|
|
</html> |