Add Main Gate Entry/Exit support.

README.md

@@ -1,14 +1,15 @@
 # Anokha Event Attendance
 
-Built for Anokha Event Organizers/Admins to take attendance of the participants in the event and ensure that only registered participants are allowed to enter/exit the event.
+Built for Anokha Event Organizers/Admins, this application allows you to take attendance of participants in events, ensuring that only registered participants are allowed to enter or exit the respective event. Additionally, entry and exit at the main gate can be recorded and controlled.
 
 ## Features
 
 - [x] Admins/EventOrganizers/AttendanceTakers can login to the app.
+- [x] Gate Entry/Exit can be marked via QR Code Scanning.
 - [x] Events associated with the logged in user are displayed.
     - [x] Display the events the logged official can take attendance for.
     - [x] Select the event to take attendance for.
-- [x] Take Attendance Screen
+- [x] Take Attendance Screen.
     - [x] QR Code Scanner to scan the QR Code of the participant.
         - [x] Scan QR with camera.
         - [x] Upload QR screenshot to take attendance.
@@ -29,6 +30,8 @@ Built for Anokha Event Organizers/Admins to take attendance of the participants
 
 1. Clone the repository.
 2. Open the project in your favorite code editor.
-3. Open the `index.html` file in your browser.
+3. Follow the steps below to run the project.
+    1. `Event Attendance` - Open the `index.html` file in your browser.
+    2. `Gate Entry/Exit` - Open the `index.html?wtf=0` file in your browser (wtf=0 is a query parameter to differentiate between the two functionalities).
 
 Built with ❤️ by Ashwin Narayanan S.

app.js

@@ -4,9 +4,21 @@ const LOGIN_URL = `${BASE_URL}/auth/loginOfficial`;
 const EVENTS_URL = `${BASE_URL}/admin/getOfficialEvents`;
 const ENTRY_ATTENDANCE_URL = `${BASE_URL}/admin/markEventAttendanceEntry`;
 const EXIT_ATTENDANCE_URL = `${BASE_URL}/admin/markEventAttendanceExit`;
+const GATE_ENTRY_URL = `${BASE_URL}/admin/markGateEntry`;
+const GATE_EXIT_URL = `${BASE_URL}/admin/markGateExit`;
 
 let isEntry = true;
 
+function identifyPurpose() {
+    const url = new URLSearchParams(window.location.search);
+    const wtf = url.get('wtf') ?? '1';
+    if (wtf.toString() === '0') {
+        document.querySelector('#purpose').innerHTML = "Anokha 2024 | Gate Entry/Exit";
+    } else {
+        document.querySelector('#purpose').innerHTML = "Anokha 2024 | Event Attendance";
+    }
+}
+
 async function sha256(message) {
     const msgUint8 = new TextEncoder().encode(message); // encode as (utf-8) Uint8Array
     const hashBuffer = await window.crypto.subtle.digest("SHA-256", msgUint8); // hash the message
@@ -55,7 +67,14 @@ async function login() {
         localStorage.setItem("MANAGER_EMAIL", data.managerEmail);
         localStorage.setItem("MANAGER_ROLE_ID", data.managerRoleId);
 
-        window.location.href = "events.html";
+        const url = new URLSearchParams(window.location.search);
+        const wtf = url.get('wtf') ?? '1';
+
+        if (wtf.toString() === '0') {
+            window.location.href = "take-attendance.html?wtf=0&eventName=Gate%20Entry%2FExit";
+        } else {
+            window.location.href = "events.html";
+        }
 
     } else if (response.status === 500) {
         alert("Server error");
@@ -123,10 +142,24 @@ function searchEvents() {
 function init() {
     const urlParams = new URLSearchParams(window.location.search);
     const eventName = urlParams.get('eventName');
+    const wtf = urlParams.get('wtf') ?? '1';
 
     const eventNameElement = document.querySelector('#event-name');
     eventNameElement.innerHTML = eventName;
 
+    if (wtf.toString() !== '0') {
+        eventNameElement.insertAdjacentHTML(
+            'afterend', 
+            `
+            <a href="events.html" class="back-button">Back to Events Page</a>
+            <a href="index.html" class="logout-button">Logout</a>
+            `,
+        );
+    } else {
+        const pageTitle = document.querySelector('#page-title');
+        pageTitle.innerHTML = "Anokha 2024";
+        eventNameElement.insertAdjacentHTML('afterend', `<a href="index.html?wtf=0" class="logout-button">Logout</a>`);
+    }
 
     document.querySelector('#entry-button').disabled = true;
     document.querySelector('#exit-button').disabled = false;
@@ -185,7 +218,54 @@ async function markExit(eventId, studentId) {
         alert("Something's not right bro.");
     }
 }
-
+
+async function markGateEntry(studentId) {
+    const SECRET_TOKEN = localStorage.getItem("SECERT_TOKEN");
+    const url = `${GATE_ENTRY_URL}/${studentId}`;
+
+    const response = await fetch(url, {
+        method: "POST",
+        headers: {
+            "Authorization": `Bearer ${SECRET_TOKEN}`,
+        },
+    });
+
+    if (response.status === 200) {
+        const data = await response.json();
+        alert(data.MESSAGE);
+    } else if (response.status === 401) {
+        logout();
+    } else if (response.status === 400) {
+        const data = await response.json();
+        alert(data.MESSAGE ?? "Something's not right bro.");
+    } else {
+        alert("Something's not right bro.");
+    }
+}
+
+async function markGateExit(studentId) {
+    const SECRET_TOKEN = localStorage.getItem("SECERT_TOKEN");
+    const url = `${GATE_EXIT_URL}/${studentId}`;
+
+    const response = await fetch(url, {
+        method: "POST",
+        headers: {
+            "Authorization": `Bearer ${SECRET_TOKEN}`,
+        },
+    });
+
+    if (response.status === 200) {
+        const data = await response.json();
+        alert(data.MESSAGE);
+    } else if (response.status === 401) {
+        logout();
+    } else if (response.status === 400) {
+        const data = await response.json();
+        alert(data.MESSAGE ?? "Something's not right bro.");
+    } else {
+        alert("Something's not right bro.");
+    }
+}
 
 function redirectTo(url) {
     window.location.href = url

events.html

@@ -11,7 +11,10 @@
     <link rel="stylesheet" href="styles/events.css" />
 </head>
 <body onload="getOfficialEvents()">
-    <h1>Choose Event to take Attendance</h1>
+    <div>
+        <h1>Choose Event to take Attendance</h1>
+        <a href="index.html" class="logout-button">Logout</a>
+    </div>
 
     <input type="text" class="search-bar" placeholder="Search for events..." onkeyup="searchEvents()">
 

index.html

@@ -10,11 +10,11 @@
   <link rel="stylesheet" href="styles/login.css" />
 </head>
 
-<body style="display: flex;">
+<body style="display: flex;" onload="identifyPurpose()">
   <div class="container">
     <div class="title">
       <h2>Login</h2>
-      <p>Anokha 2024 | Event Attendance</p>
+      <p id="purpose"></p>
     </div>  
     <form onsubmit="login()">
       <div class="input-group">

styles/base.css

@@ -29,4 +29,22 @@ body {
 .back-button:hover {
     background-color: #0056b3;
     color: #c7e2ff;
+}
+
+.logout-button {
+    margin-top: 16px;
+    display: inline-block;
+    padding: 4px 8px;
+    font-size: 14px;
+    color: #480000;
+    background-color: #ffc7c7;
+    border: 1px solid #b30000;
+    text-decoration: none;
+    border-radius: 16px;
+    transition: background-color 0.3s ease;
+}
+
+.logout-button:hover {
+    background-color: #b30000;
+    color: #ffc7c7;
 }

styles/events.css

@@ -8,7 +8,7 @@ body {
 
 h1 {
     color: #333;
-    margin-top: 20px;
+    margin-top: 32px;
 }
 
 .event-list {

take-attendance.html

@@ -14,11 +14,9 @@
   </head>
 
   <body onload="init()">
-    <h1>Take Attendance</h1>
+    <h1 id="page-title">Take Attendance</h1>
     <p id="event-name"></p>
 
-    <a href="events.html" class="back-button">Back to Events Page</a>
-
     <div class="segmented-control">
       <button
         class="segmented-control-button"
@@ -43,6 +41,9 @@ <h1>Take Attendance</h1>
 
   <script type="text/javascript" src="./app.js"></script>
   <script type="text/javascript">
+    const url = new URLSearchParams(window.location.search);
+    const wtf = url.get("wtf") ?? '1';
+
     function extractStudentId(qrCodeText) {
       if (qrCodeText.startsWith("anokha://")) {
         return qrCodeText.substring(9);
@@ -69,29 +70,45 @@ <h1>Take Attendance</h1>
         return;
       }
 
-      const eventId = getEventIdFromUrl();
-      const mode = document.querySelector("#mode").innerHTML;
-      const entry = mode === "Marking Entry";
-
-      // Call the API to mark attendance
-      if (entry) {
-        markEntry(eventId, studentId).then(() => {
-            html5QrcodeScanner.resume();
-        });
-        // console.log("Marking entry");
-
-        // setTimeout(() => {
-        //   html5QrcodeScanner.resume();
-        // }, 2000);
+      if (wtf.toString() === '0') {
+        const mode = document.querySelector("#mode").innerHTML;
+        const entry = mode === "Marking Entry";
+
+        // Call the API to mark Gate Entry/Exit
+        if (entry) {
+          markGateEntry(studentId).then(() => {
+              html5QrcodeScanner.resume();
+          });
+        } else {
+          markGateExit(studentId).then(() => {
+              html5QrcodeScanner.resume();
+          });
+        }
       } else {
-        markExit(eventId, studentId).then(() => {
-            this.html5QrcodeScanner.resume();
-        });
-        // console.log("Marking exit");
-
-        // setTimeout(() => {
-        //   html5QrcodeScanner.resume();
-        // }, 2000);
+        const eventId = getEventIdFromUrl();
+        const mode = document.querySelector("#mode").innerHTML;
+        const entry = mode === "Marking Entry";
+
+        // Call the API to mark attendance
+        if (entry) {
+          markEntry(eventId, studentId).then(() => {
+              html5QrcodeScanner.resume();
+          });
+          // console.log("Marking entry");
+
+          // setTimeout(() => {
+          //   html5QrcodeScanner.resume();
+          // }, 2000);
+        } else {
+          markExit(eventId, studentId).then(() => {
+              this.html5QrcodeScanner.resume();
+          });
+          // console.log("Marking exit");
+
+          // setTimeout(() => {
+          //   html5QrcodeScanner.resume();
+          // }, 2000);
+        }
       }
     }