changes

2024-12-26 00:33:23 -05:00
parent 2ad92eb7fd
commit 37eb7eebe8
11 changed files with 475 additions and 132 deletions
--- a/views/camplead.ejs
+++ b/views/camplead.ejs
@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Your Tickets (Camp Lead)</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <%- 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>
+    <h1>Welcome, <%= username %>!</h1>
+    <form id="editor">
+      <div id="server-response">Server Ready</div>
+      <table border="1">
+        <tr>
+          <th>Ticket#</th>
+          <th>Owner</th>
+          <th>Offered To</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><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";
+    }
+
+
+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 owners = document.querySelectorAll("[id$=-owner]");
+owners.forEach(el => {
+    const id0=el.id.slice(0,-6);
+    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>
--- a/views/camps.ejs
+++ b/views/camps.ejs
@@ -6,8 +6,7 @@
  </head>
  <body>
    <%- include('partials/nav') %>
-    <h1>Camp Editor (Administrator <%= username %>)</h1>
-    <form id="editor">
+    <form id="editor" method="post">
      <table border="1">
        <tr>
          <th>Camp</th>
@@ -18,7 +17,7 @@
        </tr>
        <% for (const c in camps) { %>
          <tr>
-            <td><%=c%></td>
+            <td><a href="/editcamp?campname=<%= c %>"><%=c%></td>
            <td><%=camps[c].leader%>  </td>
            <td><%=camps[c].issued%>  </td>
            <td><%=camps[c].claimed%>  </td>
@@ -28,16 +27,11 @@
        <tr>
        </tr>
      </table>
-    <br><b>Create New Group:</b><br>
+    <br><b>Create New Camp:</b><br>
    Group Name: <input type="edit" name="campname"><br>
-    Lead Email: <input type="edit" name="email"><br>
-    Initial Qty: <input type="edit" name="qty"><br>
+    Lead Email: <input type="edit" name="leader"><br>
+    Initial Qty (Optional): <input type="edit" name="qty"><br>
    <input type="submit" value="Submit">
    </form>
-
-<script src="/js/nav.js"></script>
-<script>      
-</script>
-
  </body>
 </html>
--- a/views/editcamp.ejs
+++ b/views/editcamp.ejs
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Edit Camp</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <%- 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>Owner</th>
+          <th>Offered To</th>
+          <th>Status</th>
+          <th>Action</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>
+              <select id="<%=t%>-status" name="status">
+                <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>
+        <% } %>
+        <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";
+    }
+
+
+function changeStatus(el) {
+    console.log("Change Status: ",el.target.value);
+    const id=el.target.id.slice(0,-7);
+    const js=JSON.stringify( { ticket: id, status: el.target.value } );
+    const fetchtable={ method:'POST', headers: { 'Content-Type': 'application/json' }, body: js };
+    UpdateSR(1);
+    fetch('/changestatus',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 ownerEdit=document.getElementById(id0+"-owner");
+            const offeredEdit=document.getElementById(id0+"-offered");
+            const js=JSON.stringify( { ticket: id0, owner:ownerEdit.value, offered: offeredEdit.value } );
+            const fetchtable={ method:'POST', headers: { 'Content-Type': 'application/json' }, body: js };
+            fetch('/updateticketsu',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('/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; UpdateSR(-1); })
+	        
+            console.log("QRCode ",id0);
+            }
+    } else if (["QRShow","QRCodeImage","QRBackground","QRBanner"].includes(id)) { 
+        const modal = document.getElementById('QRShow');
+        modal.style.display="none";
+        }
+})
+
+
+
+
+const pulldowns = document.querySelectorAll("[id$=-status]");
+pulldowns.forEach(el => {
+    const pd = document.getElementById(el.id);
+    pd.addEventListener("change",changeStatus);
+    });
+
+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>
--- a/views/issue.ejs
+++ b/views/issue.ejs
@@ -5,28 +5,34 @@
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
-    <h1>Welcome, <%= username %>!</h1>
-    <form id="editor" action="/issue" method="post">
-      <table border="1">
-        <tr>
-          <th>Group</th>
-          <th>Quantity</th>
-          <th>Claimed</th>
-          <th>Used</th>
-        </tr>
-        <% for (const [c,v] of Object.entries(camps)) { %>
+    <%- include('partials/nav') %>
+    <main class="content">
+      <form id="editor" action="/issue" method="post">
+        <table border="1">
+          <tr>
+            <th>Group</th>
+            <th>Quantity</th>
+            <th>Claimed</th>
+            <th>Used</th>
+          </tr>
+          <% for (const [c,v] of Object.entries(camps)) { %>
          <tr>
            <td><%=c%></td>
            <td><%=v.issued%></td>
            <td><%=v.claimed%></td>
            <td><%=v.used%></td>
          </tr>
-        <% } %>
-      </table>
+          <% } %>
+        </table>
    Issue new tickets:<br>
    Group Name: <input type="edit" name="campname"><br>
    Lead Email: <input type="edit" name="email"><br>
    Qty: <input type="edit" name="qty"><br>
-    <input type="submit" value="Submit">
-    </form>
-    <script>
+        <input type="submit" value="Submit">
+      </form>
+    </main>
+  </body>
+<script>
+</script>
+
+</html>
--- a/views/message.ejs
+++ b/views/message.ejs
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Message</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <%- include('partials/nav') %>
+    <%=message%>
+  </body>
+</html>
+
--- a/views/oneticket.ejs
+++ b/views/oneticket.ejs
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Your Ticket</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+    <%- include('partials/nav') %>
+  <body>
+    <form id="editor">
+      Transfer Ticket:
+      <input type="edit" placeholder="yourfriend@xyz.com" value="<%=offered%>" id="offered">
+      <button id="Submit" type="button">Transfer</button>
+      <br>
+    </form>
+    <img width=300 height=300 src="https://via.placeholder.com/150" alt="Placeholder Image">
+  </body>
+</html>
--- a/views/partials/nav.ejs
+++ b/views/partials/nav.ejs
@@ -1,17 +1,10 @@
 <!-- views/partials/nav.ejs -->
-<nav class="navbar">
-  <div class="menu-icon" id="menu-icon">
-    <!-- The "three lines" hamburger icon -->
-    <span></span>
-    <span></span>
-    <span></span>
-  </div>
-  
-  <ul class="nav-links" id="nav-links">
-    <li><a href="/claim">Claim Tickets</a></li>
-    <li><a href="/view">View My Tickets</a></li>
-    <li><a href="/camps">View Camps</a></li>
-    <li><a href="/issue">Issue Tickets (Admin)</a></li>
-    <li><a href="/edit">Edit Tickets (Admin)</a></li>
-  </ul>
-</nav>
+<aside>
+  <nav class="nav-links">
+    Welcome, <%= username %>!
+    <ul>
+      <li><a href="/mytickets">View My Tickets</a></li>
+      <li><a href="/camps">View Camps (Admin)</a></li>
+    </ul>
+  </nav>
+</aside>
--- a/views/transfer.ejs
+++ b/views/transfer.ejs
@@ -38,14 +38,6 @@
    </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