90 lines
3.4 KiB
Plaintext
90 lines
3.4 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>My Tickets (Multiple)</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body class="grid">
|
|
<%- 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>
|
|
<div class="content">
|
|
<form id="editor" method="POST" action="/updateoffered2">
|
|
<div id="server-response">Server Ready</div>
|
|
Tickets owned by <%=username%>
|
|
<table border="1">
|
|
<tr>
|
|
<th>Ticket#</th>
|
|
<th>Offered To</th>
|
|
<th>Paid?</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
<% for (const t in tickets) { %>
|
|
<tr>
|
|
<td><a href="oneticket?t=<%=t%>"><%=t%></a></td>
|
|
<td><input type="text" class="offered" value="<%=tickets[t].offered%>" name="<%=t%>"></td>
|
|
<td><%=tickets[t].paid>0 ? (tickets[t].paid/100).toFixed(2) : "No"%>
|
|
<td><button id="<%=t%>-action" type="button"> QRCode </button></td>
|
|
</tr>
|
|
<% } %>
|
|
<tr>
|
|
</tr>
|
|
</table>
|
|
<button id="Update" type="submit">Update Offered</button>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
|
|
|
|
|
|
// JavaScript to change the form element
|
|
const blankimage=document.getElementById("QRCodeImage").src;
|
|
const ResponseDisplay = document.getElementById("server-response");
|
|
let ResponseStack = 0;
|
|
let ResponseError="";
|
|
let ooEdits={}; // Owner or Offer has been edited
|
|
|
|
|
|
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);
|
|
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('/qrcode',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; })
|
|
} else if (["QRShow","QRCodeImage","QRBackground","QRBanner"].includes(id)) {
|
|
const modal = document.getElementById('QRShow');
|
|
modal.style.display="none";
|
|
}
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
const MessageArea=document.getElementById("message");
|
|
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 Offered button.");
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|