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