ticket page updates

Wave-Studio · Feb 8, 2024 · 80c4ba4 · 80c4ba4
1 parent 9f4192a
commit 80c4ba4
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 16 deletions.
diff --git a/components/layout/footer.tsx b/components/layout/footer.tsx
@@ -21,7 +21,7 @@ const Footer = ({ includeWave = true }: { includeWave?: boolean }) => {
   ];
 
   return (
-    <div class="flex flex-col items-center text-sm">
+    <div class="flex flex-col items-center text-sm print:hidden">
       {includeWave && (
         <p class="flex font-bold">
           a{" "}

diff --git a/fresh.gen.ts b/fresh.gen.ts
@@ -77,6 +77,7 @@ import * as $events_viewing_availability from "./islands/events/viewing/availabi
 import * as $events_viewing_register from "./islands/events/viewing/register.tsx";
 import * as $events_viewing_selectShowTime from "./islands/events/viewing/selectShowTime.tsx";
 import * as $events_viewing_showtimes from "./islands/events/viewing/showtimes.tsx";
+import * as $events_viewing_ticketActions from "./islands/events/viewing/ticketActions.tsx";
 import * as $loginForm from "./islands/loginForm.tsx";
 import * as $queueManagement from "./islands/queueManagement.tsx";
 import * as $tickets_filters from "./islands/tickets/filters.tsx";
@@ -176,6 +177,7 @@ const manifest = {
     "./islands/events/viewing/selectShowTime.tsx":
       $events_viewing_selectShowTime,
     "./islands/events/viewing/showtimes.tsx": $events_viewing_showtimes,
+    "./islands/events/viewing/ticketActions.tsx": $events_viewing_ticketActions,
     "./islands/loginForm.tsx": $loginForm,
     "./islands/queueManagement.tsx": $queueManagement,
     "./islands/tickets/filters.tsx": $tickets_filters,

diff --git a/islands/components/peices/ticket.tsx b/islands/components/peices/ticket.tsx
@@ -3,17 +3,18 @@ import { fmtDate, fmtTime } from "@/utils/dates.ts";
 import { useSignal } from "@preact/signals";
 import { useEffect } from "preact/hooks";
 import { qrcode } from "https://deno.land/x/[email protected]/mod.ts";
-import { asset } from "$fresh/runtime.ts";
 import { QR } from "@/components/svgs/qr.tsx";
 
 export default function Ticket({
   showTime,
   id,
   tickets,
+  venue,
 }: {
   tickets: number;
   showTime: ShowTime;
   id: string;
+  venue?: string;
 }) {
   const qr = useSignal<undefined | string>(undefined);
 
@@ -41,39 +42,36 @@ export default function Ticket({
       <div class="bg-gray-100 border font-semibold text-gray-700 px-1.5 text-sm rounded-md w-max mt-4 mb-2 ">
         {tickets} ticket{tickets > 1 && "s"}
       </div>
+
       {qr.value != undefined ? (
         <img src={qr.value} alt="QR Code" width={232} />
       ) : (
         <QR />
       )}
-      <p class="text-xs text-gray-500 text-center mt-4">
-        ID: {id.split("_")[2]}
-      </p>
-      <div class="grid gap-2">
+      <div class="grid gap-2 mt-4 font-medium ">
         <div>
-          <h5 class="font-medium mb-0.5 mt-4 text-sm text-center">
-            Event Date & Time
-          </h5>
-          <div class="bg-gray-100 border font-medium px-1.5 rounded-md text-center">
+          <div class="bg-gray-100 border px-1.5 rounded-md text-center">
             {fmtDate(new Date(showTime.startDate!))}
           </div>
         </div>
         <div class="flex justify-center">
           {showTime.startTime && (
-            <div class="lowercase bg-gray-100 border font-medium px-1.5 rounded-md">
+            <div class="lowercase bg-gray-100 border px-1.5 rounded-md">
               {fmtTime(new Date(showTime.startTime))}
             </div>
           )}
           {showTime.endTime && (
             <>
               <p class="px-3">-</p>
-              <div class="lowercase bg-gray-100 border font-medium px-1.5 rounded-md">
+              <div class="lowercase bg-gray-100 border px-1.5 rounded-md">
                 {fmtTime(new Date(showTime.endTime))}
               </div>
             </>
           )}
         </div>
       </div>
+
+
     </div>
   );
 }
diff --git a/islands/events/viewing/ticketActions.tsx b/islands/events/viewing/ticketActions.tsx
@@ -0,0 +1,14 @@
+import Button from "@/components/buttons/button.tsx";
+import Printer from "$tabler/printer.tsx"
+import Trash from "$tabler/trash.tsx"
+
+const TicketActions = () => {
+  return (
+    <div class="flex gap-4 print:hidden">
+      <Button icon={<Printer class="size-6" />} label="Print Ticket" onClick={() => print()} />
+      <Button icon={<Trash class="size-6" />} label="Release Ticket" />
+    </div>
+  );
+};
+
+export default TicketActions;
diff --git a/routes/events/[id]/(no-layout)/tickets/[tixid].tsx b/routes/events/[id]/(no-layout)/tickets/[tixid].tsx
@@ -8,6 +8,8 @@ import { Ticket, kv } from "@/utils/db/kv.ts";
 import { Head } from "$fresh/runtime.ts";
 import Footer from "@/components/layout/footer.tsx";
 import TicketComponent from "@/islands/components/peices/ticket.tsx";
+import CTA from "@/components/buttons/cta.tsx";
+import TicketActions from "@/islands/events/viewing/ticketActions.tsx";
 
 export default defineRoute(
   async (req, ctx: RouteContext<void, EventContext>) => {
@@ -38,6 +40,23 @@ export default defineRoute(
 
     if (!ticket.value) return badEventRequest;
 
+    const Indent = ({ className }: { className: string }) => (
+      <svg
+        width="124"
+        height="34"
+        viewBox="0 0 124 34"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        class={`absolute text-theme-normal  mx-auto z-10 right-0 left-0 bg-white ${className}`}
+      >
+        <path
+          d="M124 1.00001C92.0003 1.00001 124 1.00001 102 1C97.582 1 94.103 4.63735 93.013 8.91905C89.683 22 76.94 30 62 30C47.06 30 35 21.5 30.987 8.91905C29.897 4.63734 26.418 1 22 1C17.582 1 -1.52588e-05 0.999995 -1.52588e-05 0.999995"
+          stroke="currentColor"
+          strokeWidth={2}
+        />
+      </svg>
+    );
+
     return (
       <>
         <Head>
@@ -70,17 +89,35 @@ export default defineRoute(
           <meta name="theme-color" content="#DC6843" />
         </Head>
 
-        <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">{ticket.value.firstName}'s Ticket</h1>
-            <div class="rounded-md px-6 pt-2 pb-4 border-2 border-theme-normal text-center">
+        <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-4 md:mt-16 print:justify-center print:gap-12">
+            <h1 class="font-extrabold text-2xl text-center print:block">
+              {ticket.value.firstName}'s Ticket
+            </h1>
+            <div class="rounded-lg px-6 pt-8 pb-12 border-2 border-theme-normal text-center relative print:block">
+              <Indent className="-top-[2px]" />
               <TicketComponent
                 id={id}
                 showTime={event.showTimes.find((s) => s.id == showTimeID)!}
                 tickets={1}
+                venue={event.venue}
               />
+              <Indent className="-bottom-[2px] rotate-180" />
             </div>
+            <a href={`/events/${eventID}`} class="print:hidden">
+              <CTA btnType="cta" btnSize="sm">
+                View Event
+              </CTA>
+            </a>
+            <TicketActions />
           </main>
+          <p class="text-center max-w-sm mx-auto mb-4 text-sm px-4 print:hidden">
+            This event was made with{" "}
+            <a className="font-medium underline" href="/">
+              Events
+            </a>
+            , a simple and easy to use event booking platform.
+          </p>
           <Footer includeWave={false} />
         </div>
         {/* Print buttons and whatnot */}