I made cool schedule (#33)

* Schedule timeline * Mobile optimizations * Prettier formatted
acmutsa · Oct 24, 2024 · b24fe59 · b24fe59
1 parent 3c7d9df
commit b24fe59
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 32 deletions.
diff --git a/apps/bot/bot.ts b/apps/bot/bot.ts
@@ -151,9 +151,9 @@ app.get("/postMsgToServer", (h) => {
 			text: "Questions or issues? Contact an organizer :)",
 			iconURL: "https://static.acmutsa.org/Info_Simple.svg.png",
 		});
-		console.log(
-			`server type is: ${serverType}\nDev channel id is: ${process.env.DISCORD_DEV_VERIFY_CHANNEL_ID}\nProd channel id is: ${process.env.DISCORD_PROD_VERIFY_CHANNEL_ID}`,
-		);
+	console.log(
+		`server type is: ${serverType}\nDev channel id is: ${process.env.DISCORD_DEV_VERIFY_CHANNEL_ID}\nProd channel id is: ${process.env.DISCORD_PROD_VERIFY_CHANNEL_ID}`,
+	);
 	const channel = client.channels.cache.get(
 		serverType === "dev"
 			? (process.env.DISCORD_DEV_VERIFY_CHANNEL_ID as string)
@@ -239,25 +239,25 @@ app.post("/api/checkDiscordVerification", async (h) => {
 		return h.json({ success: false });
 	}
 
-	console.log("attempting to get member...")
+	console.log("attempting to get member...");
 
 	const member = guild.members.cache.get(verification.discordUserID);
 
 	if (!member) {
 		console.log("failed cause could not find member");
 		return h.json({ success: false });
 	}
-	console.log('got member');
+	console.log("got member");
 	// Holy waterfalling request
-	console.log('adding role');
+	console.log("adding role");
 	await member.roles.add(role);
-	console.log('added role');
-	console.log('adding group role');
+	console.log("added role");
+	console.log("adding group role");
 	await member.roles.add(userGroupRole);
-	console.log('added group role');
-	console.log('setting nickname');
+	console.log("added group role");
+	console.log("setting nickname");
 	await member.setNickname(user.firstName + " " + user.lastName);
-	console.log('set nickname');
+	console.log("set nickname");
 
 	return h.json({ success: true });
 });

diff --git a/apps/web/src/actions/discord-verify.ts b/apps/web/src/actions/discord-verify.ts
@@ -36,17 +36,14 @@ export const confirmVerifyDiscord = authenticatedAction
 			env.BOT_API_URL +
 			"/api/checkDiscordVerification?access=" +
 			env.INTERNAL_AUTH_KEY;
-			console.log("url is: ", url);
-		const res = await fetch(
-			url,
-			{
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify({ code }),
+		console.log("url is: ", url);
+		const res = await fetch(url, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
 			},
-		);
+			body: JSON.stringify({ code }),
+		});
 		let resJson = await res.json();
 		console.log(resJson);
 

diff --git a/apps/web/src/app/dash/pass/page.tsx b/apps/web/src/app/dash/pass/page.tsx
@@ -63,7 +63,7 @@ function EventPass({ qrPayload, user, clerk, guild }: EventPassProps) {
 					<h1 className="mt-2 text-center text-4xl font-bold">
 						{user.firstName}
 					</h1>
-					<div className="flex flex-col w-full items-center justify-center space-y-3 pt-2">
+					<div className="flex w-full flex-col items-center justify-center space-y-3 pt-2">
 						<h3 className="text-center font-mono text-sm">
 							@{user.hackerTag}
 						</h3>

diff --git a/apps/web/src/app/dash/schedule/page.tsx b/apps/web/src/app/dash/schedule/page.tsx
@@ -6,13 +6,44 @@ import { getAllEvents } from "db/functions";
 import { headers } from "next/headers";
 import { VERCEL_IP_TIMEZONE_HEADER_KEY } from "@/lib/constants";
 import { getClientTimeZone } from "@/lib/utils/client/shared";
+import { Badge } from "@/components/shadcn/ui/badge";
+import c from "config";
 export default async function Page() {
 	const sched = await getAllEvents();
+
+	const currentEvent = sched.filter((e) => {
+		const currentTime = new Date();
+		return !(e.startTime < currentTime && e.endTime > currentTime);
+	})[0];
 	const userTimeZoneHeaderKey = headers().get(VERCEL_IP_TIMEZONE_HEADER_KEY);
 	const userTimeZone = getClientTimeZone(userTimeZoneHeaderKey);
 	return (
 		<>
-			<h1 className="mx-auto my-8 w-3/4 text-8xl font-black">Schedule</h1>
+			<div className="mx-auto my-8 flex h-fit w-10/12 flex-wrap items-center justify-between gap-y-4 md:my-16 md:w-3/4">
+				<h1 className="mx-auto w-fit text-center text-5xl font-black md:ml-0 md:text-8xl">
+					Schedule
+				</h1>
+				<div className="h-full w-full rounded-md border border-muted p-4 md:w-fit">
+					<h3 className="text-sm font-black">Current</h3>
+					<div>
+						<p>
+							{currentEvent?.title || "No current events"}{" "}
+							<Badge
+								variant={"outline"}
+								className="h-fit"
+								style={{
+									borderColor: (
+										c.eventTypes as Record<string, string>
+									)[currentEvent?.type],
+								}}
+							>
+								<p className="text-sm">{currentEvent.type}</p>
+							</Badge>
+						</p>
+					</div>
+				</div>
+			</div>
+
 			<Suspense fallback={<Loading />}>
 				{/* <UserScheduleView /> */}
 				<ScheduleTimeline schedule={sched} timezone={userTimeZone} />

diff --git a/apps/web/src/app/dash/schedule/schedule-timeline.tsx b/apps/web/src/app/dash/schedule/schedule-timeline.tsx
@@ -39,13 +39,16 @@ export default function ScheduleTimeline({
 	timezone,
 }: ScheduleTimelineProps) {
 	return (
-		<div className="mx-auto mt-5 w-3/4">
+		<div className="mx-auto mt-5 w-11/12 md:w-3/4">
 			<table className="p-4">
 				<tbody>
 					{Array.from(splitByDay(schedule).entries()).map(
 						([dayName, arr]): ReactNode => (
 							<>
-								<tr key={dayName + " title"} className="py-8">
+								<tr
+									key={dayName + " title"}
+									className="py-16 md:py-8"
+								>
 									<td></td>
 									<td
 										className="w-1"
@@ -55,7 +58,7 @@ export default function ScheduleTimeline({
 										}}
 									></td>
 									<td>
-										<h2 className="ml-16 w-full border-b py-4 text-6xl font-black">
+										<h2 className="ml-4 w-full py-4 text-4xl font-black md:ml-16 md:border-b md:text-6xl">
 											{dayName}
 										</h2>
 									</td>
@@ -101,8 +104,8 @@ export function EventRow({ event, userTimeZone }: EventRowProps) {
 	const color = (c.eventTypes as Record<string, string>)[event.type];
 	return (
 		<Link href={href} legacyBehavior>
-			<tr className="cursor-pointer text-center text-xl text-foreground">
-				<td className="pr-16">{`${startTimeFormatted} - ${endTimeFormatted}`}</td>
+			<tr className="md:py-none cursor-pointer py-24 text-center text-xl text-foreground">
+				<td className="pr-4 text-sm md:pr-16 md:text-xl">{`${startTimeFormatted} - ${endTimeFormatted}`}</td>
 				<td
 					className={"relative h-20 w-1"}
 					style={{
@@ -130,8 +133,8 @@ export function EventRow({ event, userTimeZone }: EventRowProps) {
 						</div>
 					)}
 				</td>
-				<td className="pl-16">
-					<div className="flex flex-wrap items-center justify-start gap-x-2 text-left text-3xl">
+				<td className="pl-4 md:pl-16">
+					<div className="md:py-none flex flex-wrap items-center justify-start gap-x-2 py-4 text-left text-3xl">
 						{event.title}{" "}
 						<Badge
 							variant={"outline"}

diff --git a/apps/web/src/components/dash/overview/ServerBubbles.tsx b/apps/web/src/components/dash/overview/ServerBubbles.tsx
@@ -32,9 +32,7 @@ export function TitleBubble() {
 		<div className="relative col-span-1 !col-start-1 !row-start-1 aspect-video h-full w-full overflow-hidden rounded-xl border border-hackathon p-5 sm:col-span-2 sm:row-span-2 lg:!col-start-auto lg:!row-start-auto lg:aspect-auto">
 			<GradientHero />
 			<div className="relative z-20 flex h-full w-full flex-col items-center justify-center gap-y-2 rounded-xl">
-
 				<h1 className="text-6xl font-black text-white xs:text-7xl">
-
 					{c.hackathonName}
 				</h1>
 				<h2 className="text-center font-mono text-xs text-white sm:text-sm">