Implement interim subevent check-in system (#377)

* Temp: progress on subevent check-in

* Finish interim subevent check-in system

* fix: export Role

---------

Co-authored-by: Sam Der <[email protected]>

apps/api/src/admin/participant_manager.py

@@ -97,6 +97,7 @@ async def check_in_participant(uid: str, badge_number: str, associate: User) ->
 
     log.info(f"Applicant {uid} ({badge_number}) checked in by {associate.uid}")
 
+
 async def confirm_attendance_non_hacker(uid: str, director: User) -> None:
     """Update status for Role.Attending for non-hackers."""
 
@@ -117,3 +118,13 @@ async def confirm_attendance_non_hacker(uid: str, director: User) -> None:
         raise RuntimeError(f"Could not update status to ATTENDING for {uid}.")
 
     log.info(f"Non-hacker {uid} status updated to attending by {director.uid}")
+
+
+async def subevent_checkin(event_id: str, uid: str, organizer: User) -> None:
+    checkin = (uid, utc_now())
+    res = await mongodb_handler.raw_update_one(
+        Collection.EVENTS, {"_id": event_id}, {"$push": {"checkins": checkin}}
+    )
+    if not res:
+        raise RuntimeError(f"Could not update events table for {event_id} with {uid}")
+    log.info(f"{organizer.uid} checked in {uid} to {event_id}")

apps/api/src/routers/admin.py

@@ -288,6 +288,21 @@ async def update_attendance(
         raise HTTPException(status.HTTP_500_INTERNAL_SERVER_ERROR)
 
 
+@router.get("/events", dependencies=[Depends(require_checkin_associate)])
+async def events() -> list[dict[str, object]]:
+    """Get list of events"""
+    return await mongodb_handler.retrieve(Collection.EVENTS, {})
+
+
+@router.post("/event-checkin/{event}")
+async def subevent_checkin(
+    event: str,
+    uid: Annotated[str, Body()],
+    organizer: Annotated[User, Depends(require_checkin_associate)],
+) -> None:
+    await participant_manager.subevent_checkin(event, uid, organizer)
+
+
 async def _process_status(uids: Sequence[str], status: Status) -> None:
     ok = await mongodb_handler.update(
         Collection.USERS, {"_id": {"$in": uids}}, {"status": status}

apps/api/src/services/mongodb_handler.py

@@ -43,6 +43,7 @@ class Collection(str, Enum):
     USERS = "users"
     TESTING = "testing"
     SETTINGS = "settings"
+    EVENTS = "events"
 
 
 async def insert(

apps/site/src/app/admin/events/Events.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { useState } from "react";
+
+import ContentLayout from "@cloudscape-design/components/content-layout";
+import Select, { SelectProps } from "@cloudscape-design/components/select";
+
+import useEvents from "@/lib/admin/useEvents";
+import useParticipants, { Participant } from "@/lib/admin/useParticipants";
+
+import SubeventCheckin from "./components/SubeventCheckin";
+
+function Events() {
+	const [event, setEvent] = useState<SelectProps.Option | null>(null);
+
+	const {
+		events,
+		loading: loadingEvents,
+		checkInParticipantSubevent,
+	} = useEvents();
+	const { participants, loading: loadingParticipants } = useParticipants();
+
+	const options = events.map(({ name, _id }) => ({ label: name, value: _id }));
+
+	const onConfirm = async (participant: Participant): Promise<boolean> => {
+		if (event !== null && event.value !== undefined) {
+			return await checkInParticipantSubevent(event.value, participant._id);
+		}
+		return false;
+	};
+
+	return (
+		<ContentLayout>
+			<Select
+				selectedOption={event}
+				onChange={({ detail }) => setEvent(detail.selectedOption)}
+				options={options}
+				statusType={loadingEvents ? "loading" : undefined}
+			/>
+			{event && !loadingParticipants && (
+				<SubeventCheckin participants={participants} onConfirm={onConfirm} />
+			)}
+		</ContentLayout>
+	);
+}
+
+export default Events;

apps/site/src/app/admin/events/components/SubeventCheckin.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback, useMemo, useState } from "react";
+
+import Button from "@cloudscape-design/components/button";
+import Container from "@cloudscape-design/components/container";
+import Input from "@cloudscape-design/components/input";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+
+import BadgeScanner from "@/lib/admin/BadgeScanner";
+import { Participant } from "@/lib/admin/useParticipants";
+
+interface SubeventCheckinProps {
+	participants: Participant[];
+	onConfirm: (participant: Participant) => Promise<boolean>;
+}
+
+function SubeventCheckin({ participants, onConfirm }: SubeventCheckinProps) {
+	const [badgeNumber, setBadgeNumber] = useState("");
+	const [showScanner, setShowScanner] = useState(true);
+	const [error, setError] = useState("");
+
+	const onScanSuccess = useCallback((decodedText: string) => {
+		console.log("Scanner found");
+		setBadgeNumber(decodedText);
+		setShowScanner(false);
+	}, []);
+
+	const participant = participants.filter(
+		(participant) => participant.badge_number === badgeNumber,
+	)[0];
+	const notFoundMessage = (
+		<p>
+			Participant could not be found, please note down the name of the
+			participant manually
+		</p>
+	);
+
+	const badgeScanner = useMemo(
+		() => <BadgeScanner onSuccess={onScanSuccess} onError={() => null} />,
+		[onScanSuccess],
+	);
+
+	const handleConfirm = async () => {
+		const okay = await onConfirm(participant);
+		if (okay) {
+			console.log("clearing badge number");
+			setBadgeNumber("");
+			setError("");
+		} else {
+			setError("checkin failed");
+		}
+	};
+
+	return (
+		<Container>
+			<SpaceBetween direction="horizontal" size="xs">
+				<Input
+					onChange={({ detail }) => setBadgeNumber(detail.value)}
+					value={badgeNumber}
+				/>
+				<Button
+					iconName="video-on"
+					variant="icon"
+					onClick={() => setShowScanner(true)}
+					iconAlt="Scan with camera"
+				/>
+			</SpaceBetween>
+			{showScanner && badgeScanner}
+			{badgeNumber !== "" && !participant && notFoundMessage}
+			{participant && (
+				<p>
+					Participant: {`${participant.first_name} ${participant.last_name}`}
+				</p>
+			)}
+			{error}
+			<Button onClick={handleConfirm}>Confirm</Button>
+		</Container>
+	);
+}
+
+export default SubeventCheckin;

apps/site/src/app/admin/events/page.tsx

@@ -0,0 +1 @@
+export { default as default } from "./Events";

apps/site/src/app/admin/layout/AdminSidebar.tsx

@@ -20,6 +20,7 @@ function AdminSidebar() {
 	const navigationItems: SideNavigationProps.Item[] = [
 		{ type: "link", text: "Dashboard", href: "/admin/dashboard" },
 		{ type: "link", text: "Participants", href: "/admin/participants" },
+		{ type: "link", text: "Events", href: "/admin/events" },
 		{ type: "divider" },
 		{ type: "link", text: "Back to main site", href: "/" },
 	];

apps/site/src/app/admin/layout/Breadcrumbs.tsx

@@ -13,6 +13,7 @@ interface PathTitles {
 const pathTitles: PathTitles = {
 	applicants: "Applicants",
 	participants: "Participants",
+	events: "Events",
 };
 
 const DEFAULT_ITEMS = [{ text: "IrvineHacks 2024", href: BASE_PATH }];

apps/site/src/lib/admin/BadgeScanner.tsx

@@ -22,7 +22,7 @@ function BadgeScanner(props: BadgeScannerProps) {
 	useEffect(() => {
 		const {
 			fps,
-			qrbox,
+			// qrbox,
 			aspectRatio,
 			disableFlip,
 			verbose,
@@ -34,7 +34,7 @@ function BadgeScanner(props: BadgeScannerProps) {
 			scannerRegionId,
 			{
 				fps: fps ?? 5,
-				qrbox: qrbox ?? 300,
+				// qrbox: qrbox ?? 300,
 				aspectRatio: aspectRatio ?? 1,
 				disableFlip: disableFlip ?? true,
 			},

apps/site/src/lib/admin/useEvents.ts

@@ -0,0 +1,37 @@
+import axios from "axios";
+import useSWR from "swr";
+
+export interface Event {
+	name: string;
+	_id: string;
+}
+
+const fetcher = async (url: string) => {
+	const res = await axios.get<Event[]>(url);
+	return res.data;
+};
+
+function useEvents() {
+	const { data, error, isLoading } = useSWR<Event[]>(
+		"/api/admin/events",
+		fetcher,
+	);
+
+	const checkInParticipantSubevent = async (
+		event: string,
+		uid: string,
+	): Promise<boolean> => {
+		const res = await axios.post(`/api/admin/event-checkin/${event}`, uid);
+		console.log(`Checked in ${uid} for ${event}`);
+		return res.status === 200;
+	};
+
+	return {
+		events: data || [],
+		loading: isLoading,
+		error,
+		checkInParticipantSubevent,
+	};
+}
+
+export default useEvents;