Webmaster/ieeeucsd-org
3
1
Fork 0
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

show files if its a past event

Browse source
This commit is contained in:
chark1es 2025-01-31 23:35:33 -08:00
parent 5f00e88c68
commit 2b5bde9f42
1 changed files with 123 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

179
src/components/profile/DefaultProfileView.astro
View file

@ -90,21 +90,30 @@
<!-- Right Column - Profile Information --> <!-- Right Column - Profile Information -->
<div class="card bg-base-200 shadow-xl h-full"> <div class="card bg-base-200 shadow-xl h-full">
<div class="card-body p-6"> <div class="card-body p-6">
<h2 class="card-title text-2xl mb-6">Something here</h2> <h2 class="card-title text-2xl mb-6">Past Events</h2>
<div class="space-y-4"> <div id="pastEventsList" class="space-y-4 overflow-y-auto">
<!-- Loading Skeletons --> <!-- Loading Skeletons -->
<div class="space-y-2 animate-pulse"> {
<div class="h-6 bg-base-300 rounded w-1/3"></div> Array(3)
<div class="h-4 bg-base-300 rounded w-2/3 opacity-70"></div> .fill(0)
</div> .map(() => (
<div class="space-y-2 animate-pulse"> <div class="card bg-base-100 shadow-sm animate-pulse">
<div class="h-6 bg-base-300 rounded w-1/2"></div> <div class="card-body p-4">
<div class="h-4 bg-base-300 rounded w-3/4 opacity-70"></div> <div class="flex justify-between items-start">
</div> <div class="space-y-3 w-full">
<div class="space-y-2 animate-pulse"> <div class="h-6 bg-base-300 rounded w-3/4" />
<div class="h-6 bg-base-300 rounded w-2/5"></div> <div class="space-y-2">
<div class="h-4 bg-base-300 rounded w-1/2 opacity-70"></div> <div class="h-4 bg-base-300 rounded w-1/2 opacity-70" />
</div> <div class="h-4 bg-base-300 rounded w-2/3 opacity-70" />
<div class="h-4 bg-base-300 rounded w-1/3 opacity-70" />
</div>
</div>
<div class="h-6 w-20 bg-base-300 rounded" />
</div>
</div>
</div>
))
}
</div> </div>
</div> </div>
</div> </div>
@ -287,10 +296,68 @@
location: string; 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
? `
<button
class="btn btn-ghost btn-xs view-files"
data-event-id="${event.id}"
onclick="document.dispatchEvent(new CustomEvent('viewEventFiles', { detail: { eventId: '${event.id}' } }))"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" />
</svg>
${event.files.length} File${event.files.length > 1 ? "s" : ""}
</button>
`
: "";
return `
<div class="card bg-base-100 shadow-sm">
<div class="card-body p-4">
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium text-lg">${event.event_name}</h3>
<div class="text-sm opacity-70 space-y-1">
<p>Starts: ${formatDate(event.start_date)}</p>
<p>Ends: ${formatDate(event.end_date)}</p>
${event.location ? `<p class="text-xs">📍 ${event.location}</p>` : ""}
</div>
${hasFiles && isPastEvent ? `<div class="mt-2">${filesButton}</div>` : ""}
</div>
${
isAttended
? `
<div class="badge badge-success gap-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
Attended
</div>
`
: ""
}
</div>
</div>
</div>
`;
}
// Function to render events // Function to render events
async function renderEvents() { async function renderEvents() {
const eventsList = document.getElementById("eventsList"); const eventsList = document.getElementById("eventsList");
if (!eventsList) return; const pastEventsList = document.getElementById("pastEventsList");
if (!eventsList || !pastEventsList) return;
try { try {
// Get current user's attended events with safe parsing // Get current user's attended events with safe parsing
@ -318,6 +385,7 @@
// Clear loading skeletons // Clear loading skeletons
eventsList.innerHTML = ""; eventsList.innerHTML = "";
pastEventsList.innerHTML = "";
// Categorize events // Categorize events
const now = new Date(); const now = new Date();
@ -355,42 +423,6 @@
new Date(a.end_date).getTime() 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 `
<div class="card bg-base-100 shadow-sm">
<div class="card-body p-4">
<div class="flex justify-between items-start">
<div>
<h3 class="font-medium text-lg">${event.event_name}</h3>
<div class="text-sm opacity-70 space-y-1">
<p>Starts: ${formatDate(event.start_date)}</p>
<p>Ends: ${formatDate(event.end_date)}</p>
${event.location ? `<p class="text-xs">📍 ${event.location}</p>` : ""}
</div>
</div>
${
isAttended
? `
<div class="badge badge-success gap-1">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
Attended
</div>
`
: ""
}
</div>
</div>
</div>
`;
}
// Function to render section // Function to render section
function renderSection( function renderSection(
title: string, title: string,
@ -402,20 +434,31 @@
<div class="space-y-4"> <div class="space-y-4">
<h3 class="text-lg font-medium text-base-content/70">${title}</h3> <h3 class="text-lg font-medium text-base-content/70">${title}</h3>
<div class="space-y-4"> <div class="space-y-4">
${events.map((event) => renderEventCard(event)).join("")} ${events.map((event) => renderEventCard(event, attendedEvents)).join("")}
</div> </div>
${showDivider ? '<div class="divider"></div>' : ""} ${showDivider ? '<div class="divider"></div>' : ""}
</div> </div>
`; `;
} }
// Render all sections // Update main events list (left column)
eventsList.innerHTML = ` eventsList.innerHTML = `
${renderSection("Upcoming Events", nextTwoEvents, nextTwoEvents.length > 0)} ${renderSection("Upcoming Events", nextTwoEvents, nextTwoEvents.length > 0)}
${renderSection("Currently Happening", currentEvents, currentEvents.length > 0)} ${renderSection("Currently Happening", currentEvents, false)}
${renderSection("Past Events", sortedPastEvents, false)}
`; `;
// Update past events list (right column)
pastEventsList.innerHTML =
sortedPastEvents.length > 0
? sortedPastEvents
.map((event) =>
renderEventCard(event, attendedEvents)
)
.join("")
: `<div class="text-center py-8 opacity-70">
<p>No past events found</p>
</div>`;
// If no events at all // If no events at all
if (events.items.length === 0) { if (events.items.length === 0) {
eventsList.innerHTML = ` eventsList.innerHTML = `
@ -426,14 +469,38 @@
} }
} catch (err) { } catch (err) {
console.error("Failed to render events:", err); console.error("Failed to render events:", err);
eventsList.innerHTML = ` const errorMessage = `
<div class="text-center py-8 text-error"> <div class="text-center py-8 text-error">
<p>Failed to load events. Please try again later.</p> <p>Failed to load events. Please try again later.</p>
</div> </div>
`; `;
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 // Initial render
renderEvents(); renderEvents();
</script> </script>