work on tickets + scanning

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

Hide file tree

Showing 3 changed files with 90 additions and 22 deletions.
diff --git a/islands/events/scanning.tsx b/islands/events/scanning.tsx
@@ -4,6 +4,7 @@ import { IS_BROWSER } from "$fresh/runtime.ts";
 import { BarcodeDetector, DetectedBarcode } from "npm:barcode-detector";
 import { Ticket } from "@/utils/db/kv.types.ts";
 import { useSignal } from "@preact/signals";
+import Dropdown from "../components/pickers/dropdown.tsx";
 
 export default function Scanner({
   className,
@@ -17,12 +18,14 @@ export default function Scanner({
   const currentTicket = useSignal<
     | { code: string; status: "invalid" | "loading"; ticketData: null }
     | {
-        code: string;
-        status: "used" | "valid" | "inactive";
-        ticketData: Ticket;
-      }
+      code: string;
+      status: "used" | "valid" | "inactive";
+      ticketData: Ticket;
+    }
     | null
   >(null);
+  const cameraIds = useSignal<MediaDeviceInfo[]>([]);
+  const currentCamera = useSignal<string>("");
 
   useEffect(() => {
     (async () => {
@@ -52,11 +55,18 @@ export default function Scanner({
       try {
         const devices = await navigator.mediaDevices.getUserMedia({
           video: {
-            facingMode: 'environment',
+            facingMode: "environment",
           },
         });
 
-        const videoDevices = (await navigator.mediaDevices.enumerateDevices()).filter((d) => d.kind == "videoinput");
+        let currentCameraBeingRendered = devices.id;
+
+        currentCamera.value = devices.id;
+
+        const videoDevices = (await navigator.mediaDevices.enumerateDevices())
+          .filter((d) => d.kind == "videoinput");
+
+        cameraIds.value = videoDevices;
 
         console.log(videoDevices);
 
@@ -74,6 +84,11 @@ export default function Scanner({
         if (!video) return;
 
         video.srcObject = devices;
+
+        video.onerror = (e) => {
+          console.error(e);
+        }
+
         video.onloadedmetadata = () => {
           video.play();
           canvas.width = video.videoWidth;
@@ -83,10 +98,10 @@ export default function Scanner({
             string,
             | { status: "loading" | "invalid"; checkedAt: number }
             | {
-                status: "valid" | "used" | "inactive";
-                ticketData: Ticket;
-                checkedAt: number;
-              }
+              status: "valid" | "used" | "inactive";
+              ticketData: Ticket;
+              checkedAt: number;
+            }
           > = new Map();
 
           setInterval(() => {
@@ -103,6 +118,23 @@ export default function Scanner({
             }
           }, 5 * 1000);
 
+          const switchCamera = async (deviceId: string) => {
+            const devices = await navigator.mediaDevices.getUserMedia({
+              video: {
+                facingMode: "environment",
+                deviceId: deviceId,
+              },
+            });
+
+            ctx.filter = "blur(30px)";
+
+            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+
+            currentCameraBeingRendered = deviceId;
+
+            video.srcObject = devices;
+          }
+
           const fetchCodeInfo = async (code: string) => {
             const res = await fetch(`/api/events/fetch`, {
               method: "POST",
@@ -141,10 +173,10 @@ export default function Scanner({
               for (const code of codes) {
                 if (
                   code.boundingBox.width * code.boundingBox.height >
-                  largestCode.size
+                    largestCode.size
                 ) {
-                  largestCode.size =
-                    code.boundingBox.width * code.boundingBox.height;
+                  largestCode.size = code.boundingBox.width *
+                    code.boundingBox.height;
                   largestCode.code = code;
                 }
               }
@@ -239,8 +271,14 @@ export default function Scanner({
             }
           };
 
-          const loop = () => {
+          const loop = async () => {
+            if (currentCameraBeingRendered != currentCamera.value) {
+              await switchCamera(currentCamera.value);
+              return;
+            }
+
             ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+            ctx.filter = "";
 
             lookForBarcodes();
 
@@ -265,6 +303,8 @@ export default function Scanner({
         playsInline={true}
         muted={true}
         className="border-none"
+        width={1920}
+        height={1080}
       />
       {error.value}
       <div class="flex flex-col items-center max-w-full relative">
@@ -275,6 +315,17 @@ export default function Scanner({
         >
           Bring a ticket code into view
         </div>
+        <Dropdown
+          options={cameraIds.value.map(({ deviceId, label }) => ({
+            content: label,
+            onClick: () => {
+              if (currentCamera.value == deviceId) return;
+              currentCamera.value = deviceId;
+            },
+          }))}
+        >
+          <h1>Market pire</h1>
+        </Dropdown>
       </div>
     </>
   );

diff --git a/routes/events/[id]/(no-layout)/tickets/[tixid].tsx b/routes/events/[id]/(no-layout)/tickets/[tixid].tsx
@@ -15,8 +15,13 @@ export default defineRoute(
     const ticketID = ctx.params.tixid;
     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);
+
+    if (!user || user.role == undefined || user.role > 2) {
+      return badEventRequest;
+    }
+
+    const sid = getShowtimeID(user?.data, eventID, ticketID)
+    const showTimeID: string | undefined = queryValue || sid;
     const id = `${eventID}_${showTimeID}_${ticketID}`;
 
     if (!showTimeID) return badEventRequest;
@@ -58,11 +63,12 @@ export default defineRoute(
         <div className="flex flex-col min-h-screen">
           <main className="px-4 max-w-screen-md w-full mx-auto flex flex-col gap-8 grow mb-10 items-center mt-10 md:mt-24">
             <h1 class="font-extrabold text-2xl text-center">Your Ticket</h1>
+            <div class="rounded-md px-6 pt-2 pb-4 border-2 border-theme-normal text-center">
             <TicketComponent
               id={id}
               showTime={event.showTimes.find((s) => s.id == showTimeID)!}
               tickets={1}
-            />
+            /></div>
           </main>
           <Footer includeWave={false} />
         </div>

diff --git a/routes/events/[id]/tickets.tsx b/routes/events/[id]/tickets.tsx
@@ -25,6 +25,7 @@ export default defineRoute(
     const queryValue = url.searchParams.get("q");
     const showTimeID = url.searchParams.get("id") ?? event.showTimes[0].id;
     const page = url.searchParams.get("p") ?? 0;
+    const cursor = url.searchParams.get("c");
     let sortValue = parseInt(url.searchParams.get("s") ?? "0");
 
     if (isNaN(sortValue) || sortValue > 4 || sortValue < 0) {
@@ -36,15 +37,25 @@ export default defineRoute(
 
     const request = ["ticket", eventID];
     if (showTimeID !== "0") request.push(showTimeID);
-    const pageSize = 1
-    const tix = kv.list<Ticket>({ prefix: request, })
+    const pageSize = 1;
+    const tix = kv.list<Ticket>({ prefix: request, }, { limit: pageSize, cursor: cursor || undefined });
     let tickets: Deno.KvEntry<Ticket>[] = [];
     for await (const ticket of tix) {
       tickets.push(ticket);
     }
 
+    console.log(tix.cursor);
+    console.log(await tix.next())
+
+
     if (queryValue) {
-      tickets = tickets.filter((ticket) => ticket.value.firstName.includes(queryValue) || ticket.value.lastName.includes(queryValue) || ticket.value.userEmail.includes(queryValue) || ticket.key[3])
+      tickets = tickets.filter(
+        (ticket) =>
+          ticket.value.firstName.includes(queryValue) ||
+          ticket.value.lastName.includes(queryValue) ||
+          ticket.value.userEmail.includes(queryValue) ||
+          ticket.key[3],
+      );
     }
 
     return (
@@ -76,7 +87,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 ticketID = (key[3] as string).split("_")[2];
               const time = event.showTimes.find((time) => time.id === key[2])!;
 
               return (
@@ -94,7 +105,7 @@ export default defineRoute(
                         options={[
                           {
                             content: "See Ticket",
-                            link: `./tickets/${ticketID}?s=${key[2] as string}`
+                            link: `./tickets/${ticketID}?s=${key[2] as string}`,
                           },
                           {
                             content: "Delete Ticket",