Checkpoint for implementing OH Schedule

src/components/OHBlock.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+    let { member, startTime, endTime } = $props();
+</script>
+
+<div class="card w-full bg-ecsess-200 text-ecsess-black max-w-md p-4 m-4 text-center rounded-xl">
+  <p>{member}</p>
+  <hr>
+  <p>{startTime} - {endTime}</p>
+</div>

src/components/OHSchedule.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import OhBlock from './OHBlock.svelte';
+	import type { OhCMSResponse } from '$lib/schemas';
+
+	function parseTime(timeStr: string) {
+		let a = timeStr.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/i);
+		if (!a) return;
+
+		let hours = parseInt(a[1], 10);
+		let minutes = parseInt(a[2] || '0', 10);
+		let period = a[3];
+
+		if (period.toUpperCase() === 'PM' && hours !== 12) hours += 12;
+		if (period.toUpperCase() === 'AM' && hours === 12) hours = 0;
+
+		return hours * 60 + minutes; // total minutes since midnight
+	}
+	let { allOhs }: { allOhs: OhCMSResponse } = $props();
+	let sortedOHs = $state(
+		allOhs.sort((a, b) => {
+			return parseTime(a.startTime) - parseTime(b.startTime);
+		})
+	);
+	const daysOfTheWeek = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'];
+</script>
+
+<div class="grid grid-cols-5 gap-8">
+	{#each daysOfTheWeek as DOTW}
+		<div>
+			{DOTW}
+			{#each sortedOHs.filter((OH) => OH.day == DOTW) as OH}
+				<OhBlock member={OH.host.name} startTime={OH.startTime} endTime={OH.endTime}></OhBlock>
+			{/each}
+		</div>
+	{/each}
+</div>

src/lib/schemas.ts

@@ -0,0 +1,42 @@
+export interface EventPost {
+	id: string;
+	title: string;
+	description: string;
+	date: string;
+	time: string;
+	location: string;
+	image: string;
+	link: string;
+	category: string;
+	payment: string; // event payment link (e.g., Zeffy)
+}
+
+export interface CouncilMember {
+	role: string;
+	name: string;
+	email: string;
+	image: string;
+	major: string;
+	year: string;
+}
+
+import type { InputValue } from '@portabletext/svelte';
+
+export type HomepageCMSResponse = {
+	description: InputValue;
+	councilPhoto: string;
+	faqs: {
+		question: string;
+		answer: string;
+	}[];
+};
+
+export type OhCMSResponse = {
+	day: string;
+	startTime: string;
+	endTime: string;
+	host: {
+		name: string;
+		position: string;
+	};
+}[];

src/lib/types.js

@@ -1,25 +0,0 @@
-/**
- * @typedef {Object} EventPost event object
- * @property {string} id - event id
- * @property {string} title - event title
- * @property {string} description - event description
- * @property {string} date - event date
- * @property {string} time - event time
- * @property {string} location - event location
- * @property {string} image - event image
- * @property {string} link - event link
- * @property {string} category - event category
- * @property {string} payment - event payment link (e.g., Zeffy)3
- */
-
-/**
- * @typedef {Object} CouncilMember
- * @property {string} role
- * @property {string} name
- * @property {string} email
- * @property {string} image
- * @property {string} major
- * @property {string} year
- */
-
-export {};

src/routes/+page.server.js

@@ -1,39 +0,0 @@
-import { getFromCMS } from 'utils/utils.js';
-
-const homepageQuery = `*[_type == "homepage"]{
-	"description": description[],
-	"councilPhoto": councilPhoto.asset->url,
-	"faqs": faqs[]{ question, answer },
-}[0]`;
-
-const ohQuery = `*[_type=="oh"].schedule[]{
-  day,
-  startTime,
-  endTime,
-  "host": member->name
-}`;
-
-export const load = async () => {
-	/**
-	 * @description Response data type based on the `homepageQuery` above.
-	 * Note that `description` is a rich/portable text type
-	 *
-	 * @type {{
-	 * 	description: import('@portabletext/svelte').InputValue,
-	 *  councilPhoto: string,
-	 * 	faqs: [{
-	 * 		question: string,
-	 * 		answer: string
-	 * 		}],
-	 * }}
-	 *
-	 */
-	let CMSresponse = await getFromCMS(homepageQuery);
-
-	return {
-		description: CMSresponse.description,
-		councilPhoto: CMSresponse.councilPhoto,
-		faqs: CMSresponse.faqs
-		// ohs: await getFromCMS(ohQuery),
-	};
-};

src/routes/+page.server.ts

@@ -0,0 +1,34 @@
+import { getFromCMS } from 'utils/utils.js';
+import type { HomepageCMSResponse, OhCMSResponse } from '$lib/schemas';
+
+const homepageQuery = `*[_type == "homepage"]{
+	"description": description[],
+	"councilPhoto": councilPhoto.asset->url,
+	"faqs": faqs[]{ question, answer },
+}[0]`;
+
+const ohQuery = `*[_type=="officeHours"]{
+  day,
+  startTime,
+  endTime,
+  "host": {
+    "name": member->name,
+    "position": member->position
+  }
+}`;
+
+export const load = async () => {
+	/**
+	 * @description Response data type based on the `homepageQuery` above.
+	 * Note that `description` is a rich/portable text type
+	 */
+	let homepageResp: HomepageCMSResponse = await getFromCMS(homepageQuery);
+	let officeHourResp: OhCMSResponse = await getFromCMS(ohQuery);
+
+	return {
+		description: homepageResp.description,
+		councilPhoto: homepageResp.councilPhoto,
+		faqs: homepageResp.faqs,
+		allOHs: officeHourResp
+	};
+};

src/routes/+page.svelte

@@ -2,6 +2,7 @@
 	import FaqAccordion from 'components/FAQAccordion.svelte';
 	import Section from 'components/Section.svelte';
 	import { PortableText } from '@portabletext/svelte';
+	import OhSchedule from 'components/OHSchedule.svelte';
 
 	/** loading things from the server side */
 	let { data } = $props();
@@ -34,6 +35,6 @@
 <Section>
 	<div>
 		<h1 class="text-2xl">Office Hours</h1>
-		<p>Under development</p>
+		<OhSchedule allOhs={data.allOHs}/>
 	</div>
 </Section>