diff --git a/src/components/profile/DefaultProfileView.astro b/src/components/profile/DefaultProfileView.astro index 91cf831..0d3bf51 100644 --- a/src/components/profile/DefaultProfileView.astro +++ b/src/components/profile/DefaultProfileView.astro @@ -90,21 +90,30 @@
-

Something here

-
+

Past Events

+
-
-
-
-
-
-
-
-
-
-
-
-
+ { + Array(3) + .fill(0) + .map(() => ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )) + }
@@ -287,10 +296,68 @@ location: string; } + // Function to render event card + function renderEventCard(event: Event, attendedEvents: string[]): string { + const isAttended = + Array.isArray(attendedEvents) && + attendedEvents.includes(event.event_id); + const hasFiles = + event.files && Array.isArray(event.files) && event.files.length > 0; + const isPastEvent = new Date(event.end_date) < new Date(); + + // Only show files button for past events + const filesButton = + hasFiles && isPastEvent + ? ` + + ` + : ""; + + return ` +
+
+
+
+

${event.event_name}

+
+

Starts: ${formatDate(event.start_date)}

+

Ends: ${formatDate(event.end_date)}

+ ${event.location ? `

📍 ${event.location}

` : ""} +
+ ${hasFiles && isPastEvent ? `
${filesButton}
` : ""} +
+ ${ + isAttended + ? ` +
+ + + + Attended +
+ ` + : "" + } +
+
+
+ `; + } + // Function to render events async function renderEvents() { const eventsList = document.getElementById("eventsList"); - if (!eventsList) return; + const pastEventsList = document.getElementById("pastEventsList"); + if (!eventsList || !pastEventsList) return; try { // Get current user's attended events with safe parsing @@ -318,6 +385,7 @@ // Clear loading skeletons eventsList.innerHTML = ""; + pastEventsList.innerHTML = ""; // Categorize events const now = new Date(); @@ -355,42 +423,6 @@ new Date(a.end_date).getTime() ); - // Function to render event card - function renderEventCard(event: Event): string { - const isAttended = - Array.isArray(attendedEvents) && - attendedEvents.includes(event.event_id); - - return ` -
-
-
-
-

${event.event_name}

-
-

Starts: ${formatDate(event.start_date)}

-

Ends: ${formatDate(event.end_date)}

- ${event.location ? `

📍 ${event.location}

` : ""} -
-
- ${ - isAttended - ? ` -
- - - - Attended -
- ` - : "" - } -
-
-
- `; - } - // Function to render section function renderSection( title: string, @@ -402,20 +434,31 @@

${title}

- ${events.map((event) => renderEventCard(event)).join("")} + ${events.map((event) => renderEventCard(event, attendedEvents)).join("")}
${showDivider ? '
' : ""}
`; } - // Render all sections + // Update main events list (left column) eventsList.innerHTML = ` ${renderSection("Upcoming Events", nextTwoEvents, nextTwoEvents.length > 0)} - ${renderSection("Currently Happening", currentEvents, currentEvents.length > 0)} - ${renderSection("Past Events", sortedPastEvents, false)} + ${renderSection("Currently Happening", currentEvents, false)} `; + // Update past events list (right column) + pastEventsList.innerHTML = + sortedPastEvents.length > 0 + ? sortedPastEvents + .map((event) => + renderEventCard(event, attendedEvents) + ) + .join("") + : `
+

No past events found

+
`; + // If no events at all if (events.items.length === 0) { eventsList.innerHTML = ` @@ -426,14 +469,38 @@ } } catch (err) { console.error("Failed to render events:", err); - eventsList.innerHTML = ` + const errorMessage = `

Failed to load events. Please try again later.

`; + eventsList.innerHTML = errorMessage; + pastEventsList.innerHTML = errorMessage; } } + // Add event listener for viewing files + const handleViewFiles = (e: Event) => { + if (e instanceof CustomEvent && "eventId" in e.detail) { + (async () => { + try { + const event = await pb + .collection("events") + .getOne(e.detail.eventId); + document.dispatchEvent( + new CustomEvent("showEventFiles", { + detail: { event }, + }) + ); + } catch (err) { + console.error("Failed to load event files:", err); + } + })(); + } + }; + + document.addEventListener("viewEventFiles", handleViewFiles); + // Initial render renderEvents();