Skip to content

Commit

Permalink
feat: add location to meeting index rows
Browse files Browse the repository at this point in the history
  • Loading branch information
@WhiteHoodHacker
WhiteHoodHacker committed Jan 8, 2025
1 parent 530e422 commit 0fe2498
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 99 deletions.
96 changes: 4 additions & 92 deletions sigpwny.com/src/components/Meeting/Countdown.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,96 +7,6 @@ export interface CountdownBadgeProps {
const props = Astro.props as CountdownBadgeProps;
---
<script>
// function initCountdownBadges() {
// const countdownBadges = document.querySelectorAll('.astro-countdown-badge');
// for (let i = 0; i < countdownBadges.length; i++) {
// const countdownBadge = countdownBadges[i];
// const timeStartStr = countdownBadge.getAttribute('data-time-start');
// const timeCloseStr = countdownBadge.getAttribute('data-time-close');
// if (!timeStartStr || !timeCloseStr) {
// continue;
// }
// const timeStart = parseInt(timeStartStr);
// const timeClose = parseInt(timeCloseStr);
// // updateCountdown(new Date(timeStart), new Date(timeClose));
// }
// }

// function getCountdownStatusType(start_date: Date, close_date: Date, now: Date) {
// if (now >= close_date) {
// return null;
// } else if (now >= start_date) {
// return {
// status: {
// type: 'Live',
// message: 'LIVE',
// },
// interval: 1000,
// };
// }

// const diff = start_date.getTime() - now.getTime();
// const days = Math.floor(diff / (1000 * 60 * 60 * 24));
// const hours = Math.floor(diff / (1000 * 60 * 60));
// const minutes = Math.floor(diff / (1000 * 60));

// const result = {
// status: {
// type: 'Complete',
// message: '',
// },
// interval: 1000,
// };

// if (days > 7) {
// result.status.type = 'Upcoming';
// result.status.message = 'SCHEDULED';
// result.interval = 1000 * 60 * 60; // Every hour
// } else if (days > 0) {
// result.status.type = 'Upcoming';
// result.status.message = `in ${days} day${days === 1 ? '' : 's'}`;
// result.interval = 1000 * 60 * 60; // Every hour
// } else if (hours > 0) {
// result.status.type = 'Upcoming';
// result.status.message = `in ${hours} hour${hours === 1 ? '' : 's'}`;
// result.interval = 1000 * 60; // Every minute
// } else if (minutes > 0) {
// result.status.type = 'Upcoming';
// result.status.message = `in ${minutes} min`;
// result.interval = 1000; // Every second
// } else {
// result.status.type = 'Upcoming';
// result.status.message = 'in <1 min';
// result.interval = 1000; // Every second
// }
// return result;
// }

// function updateCountdown(start_date: Date, close_date: Date) {
// const now = new Date();
// const result = getCountdownStatusType(start_date, close_date, now);
// const countdownElement = document.getElementById('countdown-badge');

// if (!result || !countdownElement) {
// countdownElement.style.display = 'none';
// return;
// }

// countdownElement.textContent = result.status.message;
// countdownElement.className = `inline-flex self-center px-1 text-sm font-mono select-none whitespace-nowrap rounded-md ${(() => {
// switch (result.status.type) {
// case 'Upcoming':
// return 'bg-gradient-to-r from-purple-500 to-blue-500';
// case 'Live':
// return 'bg-red-600';
// default:
// return 'hidden';
// }
// })()}`;

// setTimeout(() => updateCountdown(start_date, close_date), result.interval);
// }

class CountdownManager {
private timers: Map<Element, number>;

Expand All @@ -123,17 +33,18 @@ const props = Astro.props as CountdownBadgeProps;
const updateDisplay = () => {
const now = Date.now();

let baseClasses = 'astro-countdown-badge inline-flex self-center px-2 text-sm lg:text-base font-mono select-none whitespace-nowrap rounded-md ';
let baseClasses = 'astro-countdown-badge self-center px-2 text-sm lg:text-base font-mono select-none whitespace-nowrap rounded-md ';

// Handle closed state
if (now >= timeClose) {
baseClasses += 'hidden';
element.className = baseClasses;
element.style.display = 'none';
this.clearTimer(element);
return null;
}

element.style.display = 'inline-flex';

// Handle live state
if (now >= timeStart) {
baseClasses += 'bg-red-600';
Expand Down Expand Up @@ -196,6 +107,7 @@ const props = Astro.props as CountdownBadgeProps;

<div
class="astro-countdown-badge"
style={{display: 'none'}}
data-time-start={props.time_start.getTime()}
data-time-close={props.time_close.getTime()}
/>
29 changes: 22 additions & 7 deletions sigpwny.com/src/components/Meeting/Row.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ interface Props {
const { input, dateFormat } = Astro.props;
const meeting = input.data;
const dateFormatString = dateFormat || "ddd, MMM DD";
const time_close = dayjs(meeting.time_start).add(dayjs.duration(meeting.duration)).toDate();
const isMaybeUpcoming = dayjs().isBefore(time_close);
Expand All @@ -49,17 +48,28 @@ const profiles = await getProfilesFromNames(meeting.credit);
>
<div class="group grid grid-cols-[1fr_max-content] px-2 py-1 -mx-2 gap-x-4 rounded-lg hover:bg-surface-200">
<div class="flex flex-col lg:flex-row grow shrink min-w-0 gap-x-4 lg:items-center">
<div class="flex flex-row grow-0 shrink-0 gap-x-4 items-center">
<div class="flex flex-col-reverse lg:flex-row grow-0 shrink-0 gap-x-4 lg:items-center">
<time
class="font-mono cursor-default"
class:list={["font-mono cursor-default", { "min-w-[20ch]": !dateFormat }]}
datetime={convertDate(meeting.time_start, "YYYY-MM-DDTHH:mm:ssZ", meeting.timezone)}
aria-label={convertDate(meeting.time_start, "dddd, MMMM D, YYYY h:mm A zzz", meeting.timezone)}
title={convertDate(meeting.time_start, "dddd, MMMM Do, YYYY, h:mm A (zzz)", meeting.timezone)}
aria-label={convertDate(meeting.time_start, "dddd, MMMM Do, YYYY, h:mm A (zzz)", meeting.timezone)}
>
{convertDate(meeting.time_start, dateFormatString, meeting.timezone)}
{dateFormat
? convertDate(meeting.time_start, dateFormat, meeting.timezone)
: (
convertDate(meeting.time_start, "ddd MMM DD", meeting.timezone) +
", " +
(meeting.time_start.getMinutes() == 0
? convertDate(meeting.time_start, "h A", meeting.timezone)
: convertDate(meeting.time_start, "h:mm A", meeting.timezone)
)
)
}
</time>
<MeetingTypeBadge type={meeting.type} consistentWidth={true} />
</div>
<Link href={input.slug} class="truncate">
<Link href={input.slug} class="lg:truncate w-full">
<span>
{meeting.week_number != null ? (
<span
Expand All @@ -70,6 +80,11 @@ const profiles = await getProfilesFromNames(meeting.credit);
{meeting.title}
</span>
</Link>
{meeting.location ? (
<span class="flex grow-0 shrink-0 w-fit">
{meeting.location}
</span>
) : null}
</div>
<div class="hidden sm:flex flex-row grow-0 shrink-0 gap-x-4 items-center min-w-fit">
<div class="flex flex-row gap-x-2 items-center">
Expand Down Expand Up @@ -127,7 +142,7 @@ const profiles = await getProfilesFromNames(meeting.credit);
</span>
)}
</div>
<span class="hidden md:block">
<span class="hidden xl:block">
<PersonaGroup
profiles={profiles}
limit={3}
Expand Down

0 comments on commit 0fe2498

Please sign in to comment.