ChrisChrome/uhppoted-db-web
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Test

Browse source
This commit is contained in:
Christopher Cookman 2025-09-01 00:36:41 -06:00
parent 4c31841a2b
commit 1e5f5abadf
3 changed files with 266 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
routes/acl.js
View file

@ -18,13 +18,12 @@ router.get('/', async (req, res) => {
res.render('acl', { acl, user: req.session.user }); res.render('acl', { acl, user: req.session.user });
}); });
router.put('/:cardNumber', async (req, res) => { // Attempt to create new ACL entry. Fail if cardNumber already exists router.put('/', async (req, res) => { // Attempt to create new ACL entry. Fail if cardNumber already exists
const cardNumber = parseInt(req.params.cardNumber); const data = req.body;
const cardNumber = parseInt(data.cardNumber);
if (isNaN(cardNumber) || cardNumber <= 0) { if (isNaN(cardNumber) || cardNumber <= 0) {
return res.status(400).json({ error: 'Invalid card number' }); return res.status(400).json({ error: 'Invalid card number' });
} }
const data = req.body;
data.cardNumber = cardNumber;
try { try {
const check = await db.query('SELECT * FROM ACL WHERE CardNumber = ?', [cardNumber]); const check = await db.query('SELECT * FROM ACL WHERE CardNumber = ?', [cardNumber]);
if (check && check.length > 0) { if (check && check.length > 0) {

197
views/acl-add.ejs
View file

@ -1,68 +1,141 @@
<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);"> <!DOCTYPE html>
<h2 style="text-align:center; margin-bottom:1em;">Add ACL Entry</h2> <html lang="en">
<div style="margin-bottom:1em;">
<label for="Name" style="display:block; margin-bottom:0.5em;">Name:</label> <head>
<input type="text" id="Name" name="Name" required style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;"> <meta charset="UTF-8">
</div> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<div style="margin-bottom:1em;"> <title>Edit ACL Entry</title>
<label for="CardNumber" style="display:block; margin-bottom:0.5em;">Card Number:</label> <style>
<input type="text" id="CardNumber" name="CardNumber" required style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;"> form#acl-edit-form {
</div> max-width: 500px;
<div style="margin-bottom:1em;"> margin: 2em auto;
<label for="PIN" style="display:block; margin-bottom:0.5em;">PIN:</label> padding: 2em;
<input type="text" id="PIN" name="PIN" style="width:100%; padding:0.5em; border-radius:4px; border:1px solid #bbb;"> border: 1px solid #ccc;
</div> border-radius: 8px;
<div style="margin-bottom:1em;"> background: #fafafa;
<label for="StartDate" style="display:block; margin-bottom:0.5em;">Start Date:</label> box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
<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;"> form#acl-edit-form div {
<label for="EndDate" style="display:block; margin-bottom:0.5em;">End Date:</label> margin-bottom: 1em;
<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;"> form#acl-edit-form label {
<legend style="font-weight:bold;">Doors</legend> display: block;
<% if (typeof doorsList !== 'undefined') { %> 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="put" 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="text" 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="">
</div>
<div>
<label for="EndDate">End Date:</label>
<input type="date" id="EndDate" name="EndDate" value="">
</div>
<fieldset>
<legend>Doors</legend>
<% Object.keys(doorsList).forEach(function(door) { %> <% Object.keys(doorsList).forEach(function(door) { %>
<div style="margin-bottom:0.5em;"> <legend>Doors</legend>
<label style="cursor:pointer;"> <% Object.keys(doorsList).forEach(function(door) { %>
<div>
<label>
<input type="checkbox" name="doors[<%= door %>]" value="1"> <input type="checkbox" name="doors[<%= door %>]" value="1">
<%= door %> <%= door %>
</label> </label>
</div> </div>
<% }) %> <% }) %>
<% } else { %> </fieldset>
<div>No doors configured.</div> <button type="submit">Create</button>
<% } %> </form>
</fieldset> document.getElementById('acl-edit-form').addEventListener('submit', function (e) {
<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> e.preventDefault();
</form> const form = e.target;
<script>
<script> document.getElementById('acl-edit-form').addEventListener('submit', function (e) {
document.getElementById('acl-add-form').addEventListener('submit', function(e) { e.preventDefault();
e.preventDefault(); const form = e.target;
const form = e.target; const formData = new FormData(form);
const formData = new FormData(form); const data = {
const data = { Name: formData.get('Name'),
Name: formData.get('Name'), CardNumber: formData.get('CardNumber'),
CardNumber: formData.get('CardNumber'), PIN: formData.get('PIN'),
PIN: formData.get('PIN'), StartDate: formData.get('StartDate'),
StartDate: formData.get('StartDate'), EndDate: formData.get('EndDate'),
EndDate: formData.get('EndDate'), doors: {}
doors: {} };
}; <% Object.keys(doorsList).forEach(function (door) { %>
<% if (typeof doorsList !== 'undefined') { Object.keys(doorsList).forEach(function(door) { %> data.doors['<%= door %>'] = formData.get('doors[<%= door %>]') ? 1 : 0;
data.doors['<%= door %>'] = formData.get('doors[<%= door %>]') ? 1 : 0; <% }) %>
<% }) } %> fetch(form.action, {
fetch(form.action, { method: 'PUT',
method: 'POST', headers: { 'Content-Type': 'application/json' },
headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data)
body: JSON.stringify(data) }).then(res => {
}).then(res => { console.log(res.status, res.statusText);
if (res.ok) window.location.href = '/acl'; if (res.ok) window.location.href = '/acl';
else alert('Failed to add ACL entry'); else alert('Failed to create ACL entry');
}).catch(err => { }).catch(err => {
alert('Error: ' + err.message); alert('Error: ' + err.message);
}); });
}); });
</script> </script>
</body>

243
views/acl-edit.ejs
View file

@ -1,130 +1,143 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit ACL Entry</title> <title>Edit ACL Entry</title>
<style> <style>
form#acl-edit-form { form#acl-edit-form {
max-width: 500px; max-width: 500px;
margin: 2em auto; margin: 2em auto;
padding: 2em; padding: 2em;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 8px; border-radius: 8px;
background: #fafafa; background: #fafafa;
box-shadow: 0 2px 8px rgba(0,0,0,0.05); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
} }
form#acl-edit-form div {
margin-bottom: 1em; form#acl-edit-form div {
} margin-bottom: 1em;
form#acl-edit-form label { }
display: block;
font-weight: 500; form#acl-edit-form label {
margin-bottom: 0.3em; display: block;
} font-weight: 500;
form#acl-edit-form input[type="text"], margin-bottom: 0.3em;
form#acl-edit-form input[type="date"] { }
width: 100%;
padding: 0.5em; form#acl-edit-form input[type="text"],
border: 1px solid #bbb; form#acl-edit-form input[type="date"] {
border-radius: 4px; width: 100%;
box-sizing: border-box; padding: 0.5em;
} border: 1px solid #bbb;
form#acl-edit-form fieldset { border-radius: 4px;
border: 1px solid #ddd; box-sizing: border-box;
border-radius: 4px; }
padding: 1em;
margin-bottom: 1em; form#acl-edit-form fieldset {
background: #f5f5f5; border: 1px solid #ddd;
} border-radius: 4px;
form#acl-edit-form legend { padding: 1em;
font-weight: 600; margin-bottom: 1em;
} background: #f5f5f5;
form#acl-edit-form button[type="submit"] { }
background: #1976d2;
color: #fff; form#acl-edit-form legend {
border: none; font-weight: 600;
padding: 0.7em 1.5em; }
border-radius: 4px;
font-size: 1em; form#acl-edit-form button[type="submit"] {
cursor: pointer; background: #1976d2;
transition: background 0.2s; color: #fff;
} border: none;
form#acl-edit-form button[type="submit"]:hover { padding: 0.7em 1.5em;
background: #1565c0; border-radius: 4px;
} font-size: 1em;
form#acl-edit-form input[type="checkbox"] { cursor: pointer;
margin-right: 0.5em; transition: background 0.2s;
} }
</style>
form#acl-edit-form button[type="submit"]:hover {
background: #1565c0;
}
form#acl-edit-form input[type="checkbox"] {
margin-right: 0.5em;
}
</style>
</head> </head>
<body> <body>
<form id="acl-edit-form" method="patch" action="/acl/<%= aclEntry.CardNumber %>"> <form id="acl-edit-form" method="patch" action="/acl/<%= aclEntry.CardNumber %>">
<div> <div>
<label for="Name">Name:</label> <label for="Name">Name:</label>
<input type="text" id="Name" name="Name" value="<%= aclEntry.Name %>" required> <input type="text" id="Name" name="Name" value="<%= aclEntry.Name %>" required>
</div> </div>
<div> <div>
<label for="CardNumber">Card Number:</label> <label for="CardNumber">Card Number:</label>
<input type="text" id="CardNumber" name="CardNumber" value="<%= aclEntry.CardNumber %>" readonly> <input type="text" id="CardNumber" name="CardNumber" value="<%= aclEntry.CardNumber %>" readonly>
</div> </div>
<div> <div>
<label for="PIN">PIN:</label> <label for="PIN">PIN:</label>
<input type="text" id="PIN" name="PIN" value="<%= aclEntry.PIN %>"> <input type="text" id="PIN" name="PIN" value="<%= aclEntry.PIN %>">
</div> </div>
<div> <div>
<label for="StartDate">Start Date:</label> <label for="StartDate">Start Date:</label>
<input type="date" id="StartDate" name="StartDate" value="<%= new Date(aclEntry.StartDate).toISOString().slice(0,10) %>"> <input type="date" id="StartDate" name="StartDate"
</div> value="<%= new Date(aclEntry.StartDate).toISOString().slice(0,10) %>">
<div> </div>
<label for="EndDate">End Date:</label> <div>
<input type="date" id="EndDate" name="EndDate" value="<%= new Date(aclEntry.EndDate).toISOString().slice(0,10) %>"> <label for="EndDate">End Date:</label>
</div> <input type="date" id="EndDate" name="EndDate"
<fieldset> value="<%= new Date(aclEntry.EndDate).toISOString().slice(0,10) %>">
<legend>Doors</legend> </div>
<% Object.keys(doorsList).forEach(function(door) { %> <fieldset>
<div> <legend>Doors</legend>
<label> <% Object.keys(doorsList).forEach(function(door) { %>
<input type="checkbox" name="doors[<%= door %>]" value="1" <div>
<% if (doorsList[door] && doorsList[door] == 1) { %> checked <% } %> > <label>
<%= door %> <input type="checkbox" name="doors[<%= door %>]" value="1" <% if (doorsList[door] &&
<% doorsList[door] %> doorsList[door]==1) { %> checked <% } %> >
</label> <%= door %>
</div> <% doorsList[door] %>
<% }) %> </label>
</fieldset> </div>
<button type="submit">Save</button> <% }) %>
</form> </fieldset>
<button type="submit">Save</button>
</form>
<script> <script>
document.getElementById('acl-edit-form').addEventListener('submit', function(e) { document.getElementById('acl-edit-form').addEventListener('submit', function (e) {
e.preventDefault(); e.preventDefault();
const form = e.target; const form = e.target;
const formData = new FormData(form); const formData = new FormData(form);
const data = { const data = {
Name: formData.get('Name'), Name: formData.get('Name'),
CardNumber: formData.get('CardNumber'), CardNumber: formData.get('CardNumber'),
PIN: formData.get('PIN'), PIN: formData.get('PIN'),
StartDate: formData.get('StartDate'), StartDate: formData.get('StartDate'),
EndDate: formData.get('EndDate'), EndDate: formData.get('EndDate'),
doors: {} doors: {}
}; };
<% Object.keys(doorsList).forEach(function(door) { %> <% Object.keys(doorsList).forEach(function (door) { %>
data.doors['<%= door %>'] = formData.get('doors[<%= door %>]') ? 1 : 0; data.doors['<%= door %>'] = formData.get('doors[<%= door %>]') ? 1 : 0;
<% }) %> <% }) %>
fetch(form.action, { fetch(form.action, {
method: 'PATCH', method: 'PATCH',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data) body: JSON.stringify(data)
}).then(res => { }).then(res => {
console.log(res.status, res.statusText); console.log(res.status, res.statusText);
if (res.ok) window.location.href = '/acl'; if (res.ok) window.location.href = '/acl';
else alert('Failed to update ACL entry'); else alert('Failed to update ACL entry');
}).catch(err => { }).catch(err => {
alert('Error: ' + err.message); alert('Error: ' + err.message);
}); });
}); });
</script> </script>
</body> </body>
</html> </html>