2024-12-26 00:33:23 -05:00
<!DOCTYPE html>
<html>
<head>
<title>Edit Camp</title>
<link rel="stylesheet" href="styles.css">
</head>
2024-12-26 21:46:13 -05:00
<body class="grid">
2024-12-26 00:33:23 -05:00
<%- include('partials/nav') %>
<div id="QRShow" class="modal">
<div id="QRBackground" class="modal-content">
<p id="QRBanner">Generating QR Code...</p>
<img class="qrcode-image" id="QRCodeImage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/wcAAgMBAAeWBjwAAAAASUVORK5CYII=" />
</div>
</div>
2024-12-28 00:07:12 -05:00
<div class="content">
2024-12-29 17:20:34 -05:00
<form id="editor" method="POST" action="/updateoffered2su">
2024-12-28 00:07:12 -05:00
<div id="server-response">Server Ready</div>
2025-03-03 23:53:35 -05:00
Camp Name: <%=campname%><br>
2024-12-28 00:07:12 -05:00
Camp Leader: <%=leader%>
<table border="1">
<tr>
<th>Ticket#</th>
<th>Owner</th>
<th>Offered To</th>
2025-02-10 20:53:52 -05:00
<th>Paid?</th>
2024-12-28 00:07:12 -05:00
<th>Status</th>
<th>Action</th>
</tr>
<% for (const t in tickets) { %>
2024-12-26 00:33:23 -05:00
<tr>
2025-02-10 20:53:52 -05:00
<td><a href="oneticket?t=<%=t%>"><%=t%></a></td>
2024-12-29 17:20:34 -05:00
<td><input type="text" class="owner" value="<%=tickets[t].owner%>" name="<%=t%>-owner"> </td>
<td><input type="text" class="offered" value="<%=tickets[t].offered%>" name="<%=t%>-offered"></td>
2025-02-10 20:53:52 -05:00
<td><%=tickets[t].paid>0 ? (tickets[t].paid/100).toFixed(2) : "No"%>
2024-12-26 00:33:23 -05:00
<td>
2024-12-29 17:20:34 -05:00
<select class="status" name="<%=t%>-status">
2024-12-26 00:33:23 -05:00
<option value="i"<%=tickets[t].status=="i" ? " selected" : ""%>>Issued</option>
<option value="u"<%=tickets[t].status=="u" ? " selected" : ""%>>Used</option>
<option value="r"<%=tickets[t].status=="r" ? " selected" : ""%>>Revoked</option>
</select>
</td>
<td><button id="<%=t%>-action" type="button"> QRCode </button></td>
</tr>
2024-12-28 00:07:12 -05:00
<% } %>
<tr>
</tr>
</table>
<input type="hidden" name="campname" value="<%=campname%>">
2024-12-29 17:20:34 -05:00
<button type="submit">Update Tickets</button>
</form>
<br>
<form action='/moretickets' method='post'>
2024-12-28 00:07:12 -05:00
Issue Tickets (Qty): <input type="edit" name="qty"><br>
2024-12-29 17:20:34 -05:00
<input type="hidden" name="campname" value="<%=campname%>">
2024-12-28 00:07:12 -05:00
<button type="submit">Issue</button>
</form>
</div>
</body>
<script>
2024-12-26 00:33:23 -05:00
// JavaScript to change the form element
const blankimage=document.getElementById("QRCodeImage").src;
document.body.addEventListener("click", event => {
const id=event.target.id;
console.log("Click event on id ",id);
if (id.endsWith("-action")) {
const id0=id.slice(0,-7);
2024-12-29 17:20:34 -05:00
const modal = document.getElementById('QRShow');
const qrbanner=document.getElementById('QRBanner');
const qrcodeimage=document.getElementById('QRCodeImage');
const closeModalSpan = document.querySelector('.close');
modal.style.display = 'flex';
const js=JSON.stringify( { ticket: id0 } );
const fetchtable={ method:'POST', headers: { 'Content-Type': 'application/json' }, body: js };
qrcodeimage.src=blankimage;
fetch('/qrcodesu',fetchtable)
.then( response => { if (!response.ok) throw new Error(`Server responded with status ${response.status}`); else return response.json(); } )
.then( data => {
console.log("Data is: ",data);
qrbanner.innerText="Ticket: "+id0+" Owner: "+data.owner;
qrcodeimage.src=data.qrcode;
} )
.catch( error => { console.log("Here is the error!"+error); ResponseError=error; })
2024-12-26 00:33:23 -05:00
} else if (["QRShow","QRCodeImage","QRBackground","QRBanner"].includes(id)) {
const modal = document.getElementById('QRShow');
modal.style.display="none";
}
})
2024-12-29 17:20:34 -05:00
const MessageArea=document.getElementById("message");
const pulldowns = document.getElementsByClassName("status");
for (let i=0; i<pulldowns.length; i++) pulldowns[i].addEventListener('change',(event) => MessageArea.textContent="Be sure to use the Update Tickets button.");
const owners = document.getElementsByClassName("owner");
for (let i=0; i<owners.length; i++) owners[i].addEventListener('input',(event)=>MessageArea.textContent= "Be sure to use the Update Tickets button.");
const offereds = document.getElementsByClassName("offered");
for (let i=0; i<offereds.length; i++) offereds[i].addEventListener('input',(event)=>MessageArea.textContent= "Be sure to use the Update Tickets button.");
2024-12-26 00:33:23 -05:00
</script>
</body>
</html>
