add date to ticket page

components/buttons/button.tsx

@@ -52,7 +52,11 @@ const Button = ({
             {icon}
           </CTA>
         </Wrapper>
-        <div className={`absolute w-32 bg-white border border-gray-300 rounded-md text-center shadow-xl ${labelOnTop ? "bottom-12" : "top-12"} select-none scale-95 opacity-0 peer-hover:scale-100 peer-hover:opacity-100 transition z-50`}>
+        <div
+          className={`absolute w-32 bg-white border border-gray-300 rounded-md text-center shadow-xl ${
+            labelOnTop ? "bottom-12" : "top-12"
+          } select-none scale-95 opacity-0 peer-hover:scale-100 peer-hover:opacity-100 transition z-50`}
+        >
           {label}
         </div>
       </div>

components/faq/questions.ts

@@ -19,12 +19,12 @@ export const faqs: FAQ[] = [
   },
   {
     q: "How do timezones work for events without a time?",
-    a: "Events without a specific time of day set will always have the same date, regardless of timezone. Note that the event settings page may display an incorrect date if you're in a different timezone than when the date was selected."
-  }, 
+    a: "Events without a specific time of day set will always have the same date, regardless of timezone. Note that the event settings page may display an incorrect date if you're in a different timezone than when the date was selected.",
+  },
   {
     q: "How do timezones work for events with a time?",
-    a: "Events with a time of day set will always convert to the user's timezone that is viewing the event. The event settings page will do it's best to convert to the user's local timezone."
-  }
+    a: "Events with a time of day set will always convert to the user's timezone that is viewing the event. The event settings page will do it's best to convert to the user's local timezone.",
+  },
 ];
 
 export interface FAQ {

islands/components/pickers/dropdown.tsx

@@ -53,10 +53,12 @@ export default function Dropdown({
 
             return (
               <>
-              {option.link ? <a href={option.link}>{btn}</a> : btn}
-              {option.breakBelow && <div class="h-0.5 rounded-full bg-gray-200 px-2"/> }
+                {option.link ? <a href={option.link}>{btn}</a> : btn}
+                {option.breakBelow && (
+                  <div class="h-0.5 rounded-full bg-gray-200 px-2" />
+                )}
               </>
-            )
+            );
           })}
         </div>
       </div>

islands/components/pieces/ticket.tsx

@@ -4,6 +4,7 @@ import { useSignal } from "@preact/signals";
 import { useEffect } from "preact/hooks";
 import { qrcode } from "https://deno.land/x/[email protected]/mod.ts";
 import { QR } from "@/components/svgs/qr.tsx";
+import { ClientDate } from "@/islands/events/viewing/dates.tsx";
 
 export default function Ticket({
   showTime,
@@ -51,7 +52,11 @@ export default function Ticket({
       <div class="grid gap-2 mt-4 font-medium ">
         <div>
           <div class="bg-gray-100 border px-1.5 rounded-md text-center">
-            {fmtDate(new Date(showTime.startDate!))}
+            {showTime.startTime ? (
+              fmtDate(new Date(showTime.startDate))
+            ) : (
+              <ClientDate date={showTime.startDate} />
+            )}
           </div>
         </div>
         <div class="flex justify-center">

islands/events/editing/showtimesettings.tsx

@@ -32,7 +32,9 @@ export default function ShowTimeSettings({
     const res = await fetch("/api/events/edit", {
       body: JSON.stringify({
         eventID,
-        newEventData: { showTimes: fixDate(currentState.value) } as Partial<Event>,
+        newEventData: {
+          showTimes: fixDate(currentState.value),
+        } as Partial<Event>,
       }),
       method: "POST",
     });

islands/events/viewing/dates.tsx

@@ -2,6 +2,5 @@ import { fmtDate } from "@/utils/dates.ts";
 
 // bit of a hack, bassiclly just takes the date, chops off the timezone, and gets the date wherever the user is
 export const ClientDate = ({ date }: { date: string }) => (
-	<>{fmtDate(new Date(date.split("GMT")[0]))}</>
-)
-
+  <>{fmtDate(new Date(date.split("GMT")[0]))}</>
+);

package.json

@@ -7,7 +7,8 @@
   ],
   "scripts": {
     "dev": "email dev",
-    "export": "email export"
+    "export": "email export",
+    "ionic:serve": "npm run dev"
   },
   "dependencies": {
     "@react-email/components": "^0.0.12",

routes/events/(pages)/attending/_layout.tsx

@@ -1,5 +1,5 @@
 import { defineLayout, RouteContext } from "$fresh/server.ts";
-import { Event, getUser, kv, Ticket, User } from "@/utils/db/kv.ts";
+import { Event, getUser, kv, ShowTime, Ticket, User } from "@/utils/db/kv.ts";
 
 export default defineLayout(
   async (req: Request, ctx: RouteContext<void, TicketContext>) => {
@@ -36,7 +36,7 @@ export default defineLayout(
 
       return {
         id: id as string,
-        date: new Date(showTime.startDate),
+        time: showTime,
         event: event,
       };
     });
@@ -77,7 +77,7 @@ export interface TicketContext {
     tickets: {
       id: string;
       event: Event;
-      date: Date;
+      time: ShowTime;
     }[];
     user: User;
   };

routes/events/(pages)/attending/index.tsx

@@ -5,6 +5,9 @@ import Scanner from "@/islands/events/scanning.tsx";
 import { badEventRequest } from "@/routes/events/[id]/_layout.tsx";
 import ImagekitImage from "@/components/imagekitimg.tsx";
 import CTA from "@/components/buttons/cta.tsx";
+import { fmtDate } from "@/utils/dates.ts";
+import { fmtTime } from "@/utils/dates.ts";
+import { ClientDate } from "@/islands/events/viewing/dates.tsx";
 
 export default defineRoute((req, ctx: RouteContext<void, TicketContext>) => {
   const { tickets, user } = ctx.state.data;
@@ -17,7 +20,20 @@ export default defineRoute((req, ctx: RouteContext<void, TicketContext>) => {
     <main className="px-4 max-w-screen-md w-full mx-auto flex flex-col gap-8 grow mb-10">
       <div class="grid md:grid-cols-2 gap-4">
         {tickets.map((ticket) => (
-          <div class="rounded-md border flex flex-col p-3">
+          <div class="rounded-md border flex flex-col p-4">
+            <div class="rounded-md border bg-gray-100 px-1 mb-4 font-medium mx-auto">
+              {ticket.time.startTime ? (
+                <>
+                  {fmtDate(new Date(ticket.time.startDate))}
+                  <span class="lowercase">
+                    {ticket.time.startTime &&
+                      ` at ${fmtTime(new Date(ticket.time.startTime))}`}
+                  </span>
+                </>
+              ) : (
+                <ClientDate date={ticket.time.startDate} />
+              )}
+            </div>
             <div class="relative">
               {ticket.event.banner.path ? (
                 <ImagekitImage
@@ -38,8 +54,12 @@ export default defineRoute((req, ctx: RouteContext<void, TicketContext>) => {
               )}
             </div>
             <div class=" mt-4 flex flex-col items-center grow">
-              <h3 class="text-xl font-bold text-center line-clamp-1 max-w-max">{ticket.event.name}</h3>
-              <p class="line-clamp-3 text-sm text-pretty text-center mt-2 mb-4">{ticket.event.summary}</p>
+              <h3 class="text-xl font-bold text-center line-clamp-1 max-w-max">
+                {ticket.event.name}
+              </h3>
+              <p class="line-clamp-3 text-sm text-pretty text-center mt-2 mb-4">
+                {ticket.event.summary}
+              </p>
               <CTA btnType="secondary" btnSize="sm" className="mt-auto">
                 View Ticket
               </CTA>

utils/dates.ts

@@ -34,4 +34,7 @@ export const fmtHour = (date: Date) => hourFmt.format(date);
 export const fmtTime = (date: Date) => timeFmt.format(date);
 // not an ideal solution
 export const getTimeZone = (date: Date) =>
-  date.toString().split("(")[1].slice(undefined, date.toString().split("(")[1].length - 1);
+  date
+    .toString()
+    .split("(")[1]
+    .slice(undefined, date.toString().split("(")[1].length - 1);

utils/db/kv.types.ts

@@ -30,6 +30,7 @@ export interface Event {
   published: boolean;
 }
 
+// known to users as Event Times
 export interface ShowTime {
   startDate: string;
   startTime?: string;

utils/event/fixDate.ts

@@ -1,21 +1,22 @@
 import { ShowTime } from "@/utils/db/kv.ts";
 
-export const fixDate = (showTimes: ShowTime[]) => showTimes.map((showTime) => {
-	if (!showTime.startTime) return showTime;
-	const date = new Date(showTime.startDate);
-	const time = new Date(showTime.startTime);
+export const fixDate = (showTimes: ShowTime[]) =>
+  showTimes.map((showTime) => {
+    if (!showTime.startTime) return showTime;
+    const date = new Date(showTime.startDate);
+    const time = new Date(showTime.startTime);
 
-	if (time) {
-		date.setHours(time.getHours());
-		date.setMinutes(time.getMinutes());
-	} else {
-		// remove the hours and just display as normal if user doesn't add a start date
-		date.setHours(0);
-		date.setMinutes(0);
-	}
+    if (time) {
+      date.setHours(time.getHours());
+      date.setMinutes(time.getMinutes());
+    } else {
+      // remove the hours and just display as normal if user doesn't add a start date
+      date.setHours(0);
+      date.setMinutes(0);
+    }
 
-	return {
-		...showTime,
-		startDate: date.toString(),
-	};
-})
+    return {
+      ...showTime,
+      startDate: date.toString(),
+    };
+  });

utils/imagekit/URL.ts

@@ -1,15 +1,15 @@
 import imagekit from "@/utils/imagekit/index.ts";
 
 export const getURL = (width: number, path: string) =>
-["png", "webp"].map((fmt) =>
-	imagekit!.url({
-		path,
-		transformation: [
-			{
-				width: width.toString(),
-				quality: "85",
-				format: fmt,
-			},
-		],
-	}),
-);
+  ["png", "webp"].map((fmt) =>
+    imagekit!.url({
+      path,
+      transformation: [
+        {
+          width: width.toString(),
+          quality: "85",
+          format: fmt,
+        },
+      ],
+    }),
+  );