135 lines
5.5 KiB
Plaintext
135 lines
5.5 KiB
Plaintext
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Groups (Camps)</title>
|
||
|
|
<link rel="stylesheet" href="styles.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<%- include('partials/nav') %>
|
||
|
|
<h1>Welcome, <%= username %>!</h1>
|
||
|
|
<form id="editor">
|
||
|
|
<table border="1">
|
||
|
|
<tr>
|
||
|
|
<th>Camp</th>
|
||
|
|
<th>Leader</th>
|
||
|
|
<th>#Issued</th>
|
||
|
|
<th>#Claimed</th>
|
||
|
|
<th>#Used</th>
|
||
|
|
</tr>
|
||
|
|
<% for (const t in tickets) { %>
|
||
|
|
<tr>
|
||
|
|
<td><%=t%></td>
|
||
|
|
<td><input type="edit" value="<%=tickets[t].owner%>" id="<%=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" type="button"> QRCode </button></td>
|
||
|
|
</tr>
|
||
|
|
<% } %>
|
||
|
|
<tr>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</form>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
const menuIcon = document.getElementById('menu-icon');
|
||
|
|
const navLinks = document.getElementById('nav-links');
|
||
|
|
|
||
|
|
menuIcon.addEventListener('click', function() {
|
||
|
|
navLinks.classList.toggle('active');
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// JavaScript to change the form element
|
||
|
|
const blankimage=document.getElementById("QRCodeImage").src;
|
||
|
|
console.log("Blank is ",blankimage);
|
||
|
|
const ResponseDisplay = document.getElementById("server-response");
|
||
|
|
let ResponseStack = 0;
|
||
|
|
let ResponseError="";
|
||
|
|
let ooEdits={}; // Owner or Offer has been edited
|
||
|
|
|
||
|
|
function UpdateSR(delta) {
|
||
|
|
ResponseStack+=delta;
|
||
|
|
if (ResponseError!="") ResponseDisplay.textContent=ResponseError;
|
||
|
|
else if (ResponseStack>0) ResponseDisplay.textContent="Waiting for Server";
|
||
|
|
else ResponseDisplay.textContent="Server Ready";
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
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);
|
||
|
|
UpdateSR(1);
|
||
|
|
fetch('/toggle',fetchtable)
|
||
|
|
.then( response => { if (!response.ok) throw new Error(`Server responded with status ${response.status}`); else return response.json(); } )
|
||
|
|
.then( data => UpdateSR(-1) )
|
||
|
|
.catch( error => { console.log("Here is the error!"+error); ResponseError=error; UpdateSR(-1); })
|
||
|
|
}
|
||
|
|
|
||
|
|
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);
|
||
|
|
if (ooEdits[id0]) {
|
||
|
|
UpdateSR(1);
|
||
|
|
const offeredEdit=document.getElementById(id0+"-offered");
|
||
|
|
const js=JSON.stringify( { ticket: id0, offered: offeredEdit.value } );
|
||
|
|
const fetchtable={ method:'POST', headers: { 'Content-Type': 'application/json' }, body: js };
|
||
|
|
fetch('/updateoffered',fetchtable)
|
||
|
|
.then( response => { if (!response.ok) throw new Error(`Server responded with status ${response.status}`); else return response.json(); } )
|
||
|
|
.then( data => { UpdateSR(-1); event.target.textContent="QRCode"; ooEdits[id0]=false; } )
|
||
|
|
.catch( error => { console.log("Here is the error!"+error); ResponseError=error; UpdateSR(-1); })
|
||
|
|
} else {
|
||
|
|
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; UpdateSR(-1); })
|
||
|
|
|
||
|
|
console.log("QRCode ",id0);
|
||
|
|
}
|
||
|
|
} else if (["QRShow","QRCodeImage","QRBackground","QRBanner"].includes(id)) {
|
||
|
|
const modal = document.getElementById('QRShow');
|
||
|
|
modal.style.display="none";
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const checkboxes = document.querySelectorAll("[id$=-used]");
|
||
|
|
checkboxes.forEach(el => {
|
||
|
|
const UsedCheckbox = document.getElementById(el.id);
|
||
|
|
UsedCheckbox.addEventListener("change",toggleUsed);
|
||
|
|
});
|
||
|
|
|
||
|
|
const owners = document.querySelectorAll("[id$=-owner]");
|
||
|
|
owners.forEach(el => {
|
||
|
|
const id0=el.id.slice(0,-6);
|
||
|
|
const OwnerEdit = document.getElementById(id0+"-owner" );
|
||
|
|
const OfferedEdit = document.getElementById(id0+"-offered");
|
||
|
|
const ActionButton = document.getElementById(id0+"-action" );
|
||
|
|
OwnerEdit .addEventListener('input', () => { ActionButton.textContent = "Update"; ooEdits[id0]=true; console.log("Changed OfferedEdit:",OfferedEdit.value); });
|
||
|
|
OfferedEdit.addEventListener('input', () => { ActionButton.textContent = "Update"; ooEdits[id0]=true; console.log("Changed OfferedEdit:",OfferedEdit.value); });
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|