notkaramel/ECSESS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix styling with OH Schedule

Browse Source
This commit is contained in:
Antoine Phan
2025-07-19 18:41:22 -04:00
parent ded6eb6c9a
commit 613a24c7a2
1 changed files with 20 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/OHSchedule.svelte
View File

@@ -1,39 +1,42 @@
<script lang="ts"> <script lang="ts">
import type { OhCMSResponse } from '$lib/schemas'; import type { OfficeHour } from '$lib/schemas';
function parseTime(timeStr: string): number { function parseTime(timeStr: string): number {
let a = timeStr.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/i); let timeRegexMatch = timeStr.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/i);
if (!a) return 0; if (!timeRegexMatch) return 0;
let hours = parseInt(a[1], 10); let hours = parseInt(timeRegexMatch[1], 10);
let minutes = parseInt(a[2] || '0', 10); let minutes = parseInt(timeRegexMatch[2] || '0', 10);
let period = a[3]; let period = timeRegexMatch[3];
if (period.toUpperCase() === 'PM' && hours !== 12) hours += 12; if (period.toUpperCase() === 'PM' && hours !== 12) hours += 12;
if (period.toUpperCase() === 'AM' && hours === 12) hours = 0; if (period.toUpperCase() === 'AM' && hours === 12) hours = 0;
return Number(hours * 60 + minutes); // total minutes since midnight return Number(hours * 60 + minutes); // total minutes since midnight
} }
let { allOhs }: { allOhs: OhCMSResponse } = $props(); let { allOhs }: { allOhs: OfficeHour[] } = $props();
let sortedOHs = $state( let sortedOHs = allOhs.sort((a, b) => {
allOhs.sort((a, b) => {
return parseTime(a.startTime) - parseTime(b.startTime); return parseTime(a.startTime) - parseTime(b.startTime);
}) });
);
</script> </script>
<div class="grid min-w-2/3 grid-cols-5 gap-2 place-self-center"> <div class="grid min-w-2/3 grid-cols-5 gap-2 place-self-center">
{#each ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as day} {#each ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] as day}
<div> <div>
<p>- {day} -</p> <p class="text-center text-xl">{day}</p>
{#each sortedOHs.filter((OH) => OH.day == day) as OH} {#each sortedOHs.filter((OH) => OH.day == day) as OH}
<div <div
class=" class="
card w-64 grid h-38 grid-rows-[3fr_2fr_3fr] bg-ecsess-200 text-ecsess-black m-3 place-content-center rounded-xl bg-ecsess-200 text-ecsess-black m-2 grid h-36 max-w-md min-w-50
p-4 text-center" grid-rows-[2fr_4fr_3fr] place-content-center rounded-xl
p-3 text-center"
> >
<p class="text-lg">{OH.startTime} - {OH.endTime}</p> <p class="border-b-ecsess-600 border-b-2 text-lg">{OH.startTime} - {OH.endTime}</p>
<p class="text-2xl">{OH.member.name.split(" ")[0]}</p>
<p class="text-ecsess-800 place-self-center text-2xl font-bold">
{OH.member.name.split(' ')[0]}
</p>
<p class="text-sm italic">{OH.member.position}</p> <p class="text-sm italic">{OH.member.position}</p>
</div> </div>
{/each} {/each}