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

Things seems like they are working

Browse Source
This commit is contained in:
Antoine Phan
2025-10-13 23:10:37 -04:00
parent 9052b02e56
commit 95e53b5153
16 changed files with 110 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/officehour/OHBlock.svelte
View File

@@ -1,63 +1,23 @@
<script lang="ts">
import type { OfficeHour } from '$lib/schemas';
let { officeHour, compact = false, hideTime = false }: { officeHour: OfficeHour; compact?: boolean; hideTime?: boolean } = $props();
let { officeHour, isShortBlock }: { officeHour: OfficeHour; isShortBlock: boolean } = $props();
function parseTime(timeStr: string): number {
let timeRegexMatch = timeStr.match(/^(\d{1,2})(?::(\d{2}))?(AM|PM)$/i);
if (!timeRegexMatch) return 0;
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 hours * 60 + minutes;
function shortenPosition(position: string): string {
return position.replace(/Engineering Representative/gi, 'Rep.');
}
// Calculate duration in minutes
function getDuration(start: string, end: string): number {
return parseTime(end) - parseTime(start);
}
// Calculate dynamic height based on duration
// Base: 30 minutes = 3.5rem, scale proportionally
function getHeight(duration: number): string {
const baseMinutes = 30;
const baseHeight = 3.5; // Half of original 7rem
const heightRem = Math.max((duration / baseMinutes) * baseHeight, 2.5);
return `${heightRem}rem`;
}
const duration = getDuration(officeHour.startTime, officeHour.endTime);
const blockHeight = getHeight(duration);
// Shorten position name for display
const displayPosition = officeHour.member.position.replace(/Engineering Representative/gi, 'Rep.');
</script>
<div
class="bg-ecsess-200 text-ecsess-black grid place-content-center rounded-lg text-center h-full"
class:m-2={!compact && !hideTime}
class:m-0={hideTime}
class:p-2={!hideTime}
class:p-1={hideTime}
style={hideTime ? '' : `height: ${blockHeight};`}
class="bg-ecsess-100 text-ecsess-900 grid h-full place-content-center rounded-md text-center hover:bg-ecsess-200 border-ecsess-300 border shadow-md transition-all hover:shadow-lg"
>
{#if !hideTime}
<p class="border-b-ecsess-600 border-b-2 text-xs md:text-sm" class:lg:text-base={!compact} class:lg:text-sm={compact}>
{officeHour.startTime} - {officeHour.endTime}
</p>
{/if}
<p class="text-ecsess-800 font-extrabold text-base lg:text-lg">
<p class="text-base font-extrabold lg:text-lg">
{officeHour.member.name.split(' ')[0]}
</p>
<p class="italic text-xs">
{displayPosition}
</p>
{#if !isShortBlock}
<p class="text-ecsess-700 text-xs italic">
{shortenPosition(officeHour.member.position)}
</p>
{/if}
</div>