From f13566ccaf4a51f26e6bc55efb2c25f4183d7c7c Mon Sep 17 00:00:00 2001 From: Ashrockzzz2003 Date: Mon, 14 Oct 2024 16:02:53 +0530 Subject: [PATCH] Add Main Gate Entry/Exit support. --- README.md | 9 +++-- app.js | 84 ++++++++++++++++++++++++++++++++++++++++++-- events.html | 5 ++- index.html | 4 +-- styles/base.css | 18 ++++++++++ styles/events.css | 2 +- take-attendance.html | 67 ++++++++++++++++++++++------------- 7 files changed, 155 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index c3417bd..8cdd1b9 100644 --- a/README.md +++ b/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. \ No newline at end of file diff --git a/app.js b/app.js index a570f6c..ee74191 100644 --- a/app.js +++ b/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', + ` + Back to Events Page + Logout + `, + ); + } else { + const pageTitle = document.querySelector('#page-title'); + pageTitle.innerHTML = "Anokha 2024"; + eventNameElement.insertAdjacentHTML('afterend', `Logout`); + } 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 diff --git a/events.html b/events.html index 7a982a0..dabf0db 100644 --- a/events.html +++ b/events.html @@ -11,7 +11,10 @@ -

Choose Event to take Attendance

+
+

Choose Event to take Attendance

+ Logout +
diff --git a/index.html b/index.html index b6b7dc7..83878b5 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,11 @@ - +

Login

-

Anokha 2024 | Event Attendance

+

diff --git a/styles/base.css b/styles/base.css index 68538d1..3905172 100644 --- a/styles/base.css +++ b/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; } \ No newline at end of file diff --git a/styles/events.css b/styles/events.css index a585eb5..9240455 100644 --- a/styles/events.css +++ b/styles/events.css @@ -8,7 +8,7 @@ body { h1 { color: #333; - margin-top: 20px; + margin-top: 32px; } .event-list { diff --git a/take-attendance.html b/take-attendance.html index 106992c..a621939 100644 --- a/take-attendance.html +++ b/take-attendance.html @@ -14,11 +14,9 @@ -

Take Attendance

+

Take Attendance

- Back to Events Page -