scanning progress + see ticket admin side

Co-Authored-By: Bloxs <[email protected]>
Wave-Studio · Dec 24, 2023 · a4f283e · a4f283e
1 parent 80c3396
commit a4f283e
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 35 deletions.
diff --git a/islands/components/pickers/dropdown.tsx b/islands/components/pickers/dropdown.tsx
@@ -7,34 +7,37 @@ export default function Dropdown({
   options,
   children,
   className,
-  isOpen
+  isOpen,
 }: {
   options: {
     content: ComponentChild;
     onClick?: () => void;
+    link?: string;
   }[];
   children: ComponentChild;
-  className?: string,
-  isOpen?: Signal<boolean>
+  className?: string;
+  isOpen?: Signal<boolean>;
 }) {
-
   const open = isOpen || useSignal(false);
-  
+
   const dropdown = useRef<HTMLDivElement>(null);
   useClickAway([dropdown], () => {
     open.value = false;
   });
   return (
     <>
-      <div className={`${className} relative flex flex-col items-end`} ref={dropdown}>
+      <div
+        className={`${className} relative flex flex-col items-end`}
+        ref={dropdown}
+      >
         <button onClick={() => (open.value = !open.value)}>{children}</button>
         <div
           className={`${
             open.value ? "block" : "hidden"
           } absolute p-2 bg-white border rounded-md shadow-xl top-10 select-none transition z-50 grow`}
         >
           {options.map((option) => {
-            return (
+            const o = (
               <button
                 onClick={() => {
                   open.value = false;
@@ -45,6 +48,12 @@ export default function Dropdown({
                 {option.content}
               </button>
             );
+
+            if (option.link) {
+              return <a href={option.link}>{o}</a>;
+            }
+
+            return o;
           })}
         </div>
       </div>

diff --git a/islands/events/scanning.tsx b/islands/events/scanning.tsx
@@ -18,7 +18,7 @@ export default function Scanner({
     | { code: string; status: "invalid" | "loading"; ticketData: null }
     | {
         code: string;
-        status: "used" | "valid";
+        status: "used" | "valid" | "inactive";
         ticketData: Ticket;
       }
     | null
@@ -51,8 +51,15 @@ export default function Scanner({
 
       try {
         const devices = await navigator.mediaDevices.getUserMedia({
-          video: true,
+          video: {
+            facingMode: 'environment',
+          },
         });
+
+        const videoDevices = (await navigator.mediaDevices.enumerateDevices()).filter((d) => d.kind == "videoinput");
+
+        console.log(videoDevices);
+
         const video = document.getElementById("camera") as HTMLVideoElement;
         const infoText = document.getElementById("scantext") as HTMLDivElement;
         let lastStr = infoText.innerText;
@@ -76,7 +83,7 @@ export default function Scanner({
             string,
             | { status: "loading" | "invalid"; checkedAt: number }
             | {
-                status: "valid" | "used";
+                status: "valid" | "used" | "inactive";
                 ticketData: Ticket;
                 checkedAt: number;
               }
@@ -152,20 +159,25 @@ export default function Scanner({
                   });
 
                   fetchCodeInfo(code.rawValue);
+                } else {
+                  const codeData = checkedCodes.get(code.rawValue)!;
+
+                  codeData.checkedAt = Date.now();
+                  checkedCodes.set(code.rawValue, codeData);
                 }
 
                 const codeData = checkedCodes.get(code.rawValue)!;
 
                 const ticketObj = {
                   code: code.rawValue,
                   status: codeData.status,
-                  // @ts-expect-error types
                   ticketData: Object.hasOwn(codeData, "ticketData")
-                    ? codeData.ticketData
+                    ? (codeData as { ticketData: Ticket }).ticketData
                     : null,
                 };
 
                 if (currentTicket.value != ticketObj) {
+                  // @ts-expect-error Types be like
                   currentTicket.value = ticketObj;
                 }
 
@@ -174,6 +186,7 @@ export default function Scanner({
                   loading: "gray",
                   valid: "green",
                   used: "orange",
+                  inactive: "blue",
                 }[codeData.status];
 
                 ctx.lineWidth = 10;
@@ -214,6 +227,11 @@ export default function Scanner({
                     updateStringIfChanged("Ticket already used!");
                     break;
                   }
+
+                  case "inactive": {
+                    updateStringIfChanged("Unactivated ticket!");
+                    break;
+                  }
                 }
               } else {
                 currentTicket.value = null;

diff --git a/islands/events/viewing/selectShowTime.tsx b/islands/events/viewing/selectShowTime.tsx
@@ -58,6 +58,26 @@ const SelectShowTime = ({
       >
         <h3 class="font-bold text-lg mb-2">Change</h3>
         <div class="grid gap-2">
+           {/* All event times button */}
+           {all && (
+            <button
+              onClick={() =>
+                typeof showTime == "string"
+                  ? setShowTime && setShowTime("0")
+                  : (showTime.value = "0")
+              }
+              class={`border transition select-none px-2 rounded-md font-medium whitespace-pre grid place-items-center h-8 ${
+                (typeof showTime == "string"
+                  ? "0" == showTime
+                  : "0" == showTime.value) &&
+                "border-theme-normal bg-theme-normal/5"
+              }`}
+              type="button"
+            >
+              <p class="flex">All Event Times</p>
+            </button>
+          )}
+
           {showTimes.map((time) => (
             <button
               onClick={() =>
@@ -81,25 +101,7 @@ const SelectShowTime = ({
               </p>
             </button>
           ))}
-          {/* All event times button */}
-          {all && (
-            <button
-              onClick={() =>
-                typeof showTime == "string"
-                  ? setShowTime && setShowTime("0")
-                  : (showTime.value = "0")
-              }
-              class={`border transition select-none px-2 rounded-md font-medium whitespace-pre grid place-items-center h-8 ${
-                (typeof showTime == "string"
-                  ? "0" == showTime
-                  : "0" == showTime.value) &&
-                "border-theme-normal bg-theme-normal/5"
-              }`}
-              type="button"
-            >
-              <p class="flex">All Event Times</p>
-            </button>
-          )}
+
         </div>
         <button
           type="button"

diff --git a/routes/events/[id]/(no-layout)/tickets/[tixid].tsx b/routes/events/[id]/(no-layout)/tickets/[tixid].tsx
@@ -13,7 +13,10 @@ export default defineRoute(
   async (req, ctx: RouteContext<void, EventContext>) => {
     const { event, eventID, user } = ctx.state.data;
     const ticketID = ctx.params.tixid;
-    const showTimeID = getShowtimeID(user?.data, eventID, ticketID);
+    const url = new URL(req.url);
+    const queryValue = url.searchParams.get("s");
+    // need to do perms checks here too
+    const showTimeID: string | undefined = queryValue || getShowtimeID(user?.data, eventID, ticketID);
     const id = `${eventID}_${showTimeID}_${ticketID}`;
 
     if (!showTimeID) return badEventRequest;
@@ -25,7 +28,7 @@ export default defineRoute(
     return (
       <>
         <Head>
-          <title>Your ticket - {event.name} - Events</title>
+          <title>{ticket.value.firstName}'s ticket - {event.name} - Events</title>
           <meta property="og:type" content="website" />
           <meta
             property="og:url"

diff --git a/routes/events/[id]/tickets.tsx b/routes/events/[id]/tickets.tsx
@@ -47,8 +47,6 @@ export default defineRoute(
       tickets = tickets.filter((ticket) => ticket.value.firstName.includes(queryValue) || ticket.value.lastName.includes(queryValue) || ticket.value.userEmail.includes(queryValue) || ticket.key[3])
     }
 
-    console.log(ticket.key[3])
-
     return (
       <main className="px-4 max-w-screen-md w-full mx-auto flex flex-col gap-2 grow mb-10 ">
         <EventHeader editPositon={1} role={user.role} />
@@ -78,6 +76,7 @@ export default defineRoute(
           <div class="grid md:grid-cols-2 gap-4">
             {tickets.map((ticket) => {
               const { value, key } = ticket;
+              const ticketID = (key[3] as string).split("_")[2]
               const time = event.showTimes.find((time) => time.id === key[2])!;
 
               return (
@@ -95,6 +94,7 @@ export default defineRoute(
                         options={[
                           {
                             content: "See Ticket",
+                            link: `./tickets/${ticketID}?s=${key[2] as string}`
                           },
                           {
                             content: "Delete Ticket",