changes

2024-12-27 08:49:34 -05:00
parent 70f434cae3
commit dfeb478a72
2 changed files with 114 additions and 8 deletions
--- a/views/manytickets.ejs
+++ b/views/manytickets.ejs
@@ -0,0 +1,106 @@
+<!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>
+    <form id="editor">
+      <div id="server-response">Server Ready</div>
+      <table border="1">
+        <tr>
+          <th>Ticket#</th>
+          <th>Offered To</th>
+          <th>Action</th>
+        </tr>
+        <% for (const t in tickets) { %>
+          <tr>
+            <td><%=t%></td>
+            <td><input type="edit" value="<%=tickets[t].offered%>" id="<%=t%>-offered"></td>
+            <td><button id="<%=t%>-action" type="button"> QRCode </button></td>
+          </tr>
+        <% } %>
+        <tr>
+        </tr>
+      </table>
+    </form>
+    <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
+
+function UpdateSR(delta) {
+    ResponseStack+=delta;
+    if      (ResponseError!="") ResponseDisplay.textContent=ResponseError;
+    else if (ResponseStack>0)   ResponseDisplay.textContent="Waiting for Server";
+    else                        ResponseDisplay.textContent="Server Ready";
+    }
+
+
+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 offereds = document.querySelectorAll("[id$=-offered]");
+offereds.forEach(el => {
+    const id0=el.id.slice(0,-8);
+    const OfferedEdit  = document.getElementById(id0+"-offered");
+    const ActionButton = document.getElementById(id0+"-action" );
+    OfferedEdit.addEventListener('input', () => { ActionButton.textContent = "Update"; ooEdits[id0]=true; console.log("Changed OfferedEdit:",OfferedEdit.value); });
+    });
+
+    </script>
+  </body>
+</html>