67 lines
1.8 KiB
Plaintext
67 lines
1.8 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Your Tickets</title>
|
|
</head>
|
|
<body>
|
|
<h1>Welcome, <%= username %>!</h1>
|
|
<form id="editor">
|
|
<table border="1">
|
|
<tr>
|
|
<th>Ticket</th>
|
|
<th>Owner</th>
|
|
<th>Offered To</th>
|
|
<th>Used</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
<% for (const t in tickets) { %>
|
|
<tr>
|
|
<td><%=t%></td>
|
|
<td><%=tickets[t].owner%></td>
|
|
<td><input type="edit" value="<%=tickets[t].offered%>" id="<%=t%>-offered"></td>
|
|
<td><input type="checkbox" id="<%=t%>-used"<%=tickets[t].used ? ' checked' : ''%>></td>
|
|
<td><button id="<%=t%>-action"> QRCode </button></td>
|
|
</tr>
|
|
<% } %>
|
|
<tr>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
<script>
|
|
// JavaScript to change the form element
|
|
const EditOffer = document.getElementById('habitat-1-offered');
|
|
const ActionButton = document.getElementById('habitat-1-action');
|
|
|
|
|
|
function toggleUsed(el) {
|
|
const id=el.target.id.slice(0,-5);
|
|
const isChecked=this.checked;
|
|
const js=JSON.stringify( { ticket: id, checked: isChecked } );
|
|
const fetchtable={ method:'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: js };
|
|
console.log(fetchtable);
|
|
fetch('/toggle',fetchtable)
|
|
.then( response => response.json() )
|
|
.then( data => console.log('Server Response: ',data) )
|
|
.catch( error => console.error('Error: ',error));
|
|
}
|
|
|
|
const elements = document.querySelectorAll("[id$=-used]");
|
|
|
|
|
|
elements.forEach((el) => {
|
|
const UsedCheckbox = document.getElementById(el.id);
|
|
UsedCheckbox.addEventListener("change",toggleUsed);
|
|
});
|
|
|
|
|
|
|
|
|
|
EditOffer.addEventListener('input', () => {
|
|
ActionButton.textContent = "Update";
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|