From a080d7a0cedfe80fa7e99f007672106484fda4e1 Mon Sep 17 00:00:00 2001 From: Lukas <69743171+quick007@users.noreply.github.com> Date: Thu, 15 Feb 2024 23:18:35 -0800 Subject: [PATCH] add date to ticket page --- components/buttons/button.tsx | 6 +++- components/faq/questions.ts | 8 ++--- islands/components/pickers/dropdown.tsx | 8 +++-- islands/components/pieces/ticket.tsx | 7 ++++- islands/events/editing/showtimesettings.tsx | 4 ++- islands/events/viewing/dates.tsx | 5 ++- package.json | 3 +- routes/events/(pages)/attending/_layout.tsx | 6 ++-- routes/events/(pages)/attending/index.tsx | 26 +++++++++++++-- utils/dates.ts | 5 ++- utils/db/kv.types.ts | 1 + utils/event/fixDate.ts | 35 +++++++++++---------- utils/imagekit/URL.ts | 24 +++++++------- 13 files changed, 88 insertions(+), 50 deletions(-) diff --git a/components/buttons/button.tsx b/components/buttons/button.tsx index 6d1a307..2884a65 100644 --- a/components/buttons/button.tsx +++ b/components/buttons/button.tsx @@ -52,7 +52,11 @@ const Button = ({ {icon} -
+
{label}
diff --git a/components/faq/questions.ts b/components/faq/questions.ts index 1b627c7..8eb3087 100644 --- a/components/faq/questions.ts +++ b/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 { diff --git a/islands/components/pickers/dropdown.tsx b/islands/components/pickers/dropdown.tsx index 6665cc0..0c1a099 100644 --- a/islands/components/pickers/dropdown.tsx +++ b/islands/components/pickers/dropdown.tsx @@ -53,10 +53,12 @@ export default function Dropdown({ return ( <> - {option.link ? {btn} : btn} - {option.breakBelow &&
} + {option.link ? {btn} : btn} + {option.breakBelow && ( +
+ )} - ) + ); })}
diff --git a/islands/components/pieces/ticket.tsx b/islands/components/pieces/ticket.tsx index 0e525d0..87ea7ed 100644 --- a/islands/components/pieces/ticket.tsx +++ b/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/qrcode@v2.0.0/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({
- {fmtDate(new Date(showTime.startDate!))} + {showTime.startTime ? ( + fmtDate(new Date(showTime.startDate)) + ) : ( + + )}
diff --git a/islands/events/editing/showtimesettings.tsx b/islands/events/editing/showtimesettings.tsx index 18461c2..fb3a376 100644 --- a/islands/events/editing/showtimesettings.tsx +++ b/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, + newEventData: { + showTimes: fixDate(currentState.value), + } as Partial, }), method: "POST", }); diff --git a/islands/events/viewing/dates.tsx b/islands/events/viewing/dates.tsx index b2902db..2590fe3 100644 --- a/islands/events/viewing/dates.tsx +++ b/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]))} +); diff --git a/package.json b/package.json index e6f600e..2e36ee5 100644 --- a/package.json +++ b/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", diff --git a/routes/events/(pages)/attending/_layout.tsx b/routes/events/(pages)/attending/_layout.tsx index 2eae353..35ac032 100644 --- a/routes/events/(pages)/attending/_layout.tsx +++ b/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) => { @@ -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; }; diff --git a/routes/events/(pages)/attending/index.tsx b/routes/events/(pages)/attending/index.tsx index 67020d0..d9a972a 100644 --- a/routes/events/(pages)/attending/index.tsx +++ b/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) => { const { tickets, user } = ctx.state.data; @@ -17,7 +20,20 @@ export default defineRoute((req, ctx: RouteContext) => {
{tickets.map((ticket) => ( -
+
+
+ {ticket.time.startTime ? ( + <> + {fmtDate(new Date(ticket.time.startDate))} + + {ticket.time.startTime && + ` at ${fmtTime(new Date(ticket.time.startTime))}`} + + + ) : ( + + )} +
{ticket.event.banner.path ? ( ) => { )}
-

{ticket.event.name}

-

{ticket.event.summary}

+

+ {ticket.event.name} +

+

+ {ticket.event.summary} +

View Ticket diff --git a/utils/dates.ts b/utils/dates.ts index 48a0eb3..528ecb1 100644 --- a/utils/dates.ts +++ b/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); diff --git a/utils/db/kv.types.ts b/utils/db/kv.types.ts index a4441e6..4a879c2 100644 --- a/utils/db/kv.types.ts +++ b/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; diff --git a/utils/event/fixDate.ts b/utils/event/fixDate.ts index db1b3df..02e3f8c 100644 --- a/utils/event/fixDate.ts +++ b/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(), - }; -}) \ No newline at end of file + return { + ...showTime, + startDate: date.toString(), + }; + }); diff --git a/utils/imagekit/URL.ts b/utils/imagekit/URL.ts index 87cf86a..3c1b2aa 100644 --- a/utils/imagekit/URL.ts +++ b/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, + }, + ], + }), + );