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

add hidden text codes

Browse source
This commit is contained in:
chark1es 2025-02-17 02:44:57 -08:00
parent 6c2417aa20
commit e8f6776aa7
1 changed files with 65 additions and 89 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
src/components/dashboard/EventsSection.astro
View file

@ -23,7 +23,7 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
</label>
<div class="flex gap-2">
<input
type="text"
type="password"
placeholder="Enter code"
class="input input-bordered flex-1"
/>
@ -103,6 +103,21 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
</div>
</div>
<!-- Ongoing Events -->
<div
class="card bg-base-100 shadow-xl border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
>
<div class="card-body">
<h3 class="card-title mb-4">Ongoing Events</h3>
<div
id="ongoingEventsContainer"
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
>
<!-- Ongoing events will be dynamically inserted here -->
</div>
</div>
</div>
<!-- Upcoming Events -->
<div
class="card bg-base-100 shadow-xl border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform mb-6"
@ -566,10 +581,18 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
const upcomingEventsContainer = document.getElementById(
"upcomingEventsContainer"
);
const ongoingEventsContainer = document.getElementById(
"ongoingEventsContainer"
);
const pastEventsContainer = document.getElementById(
"pastEventsContainer"
);
if (!upcomingEventsContainer || !pastEventsContainer) return;
if (
!upcomingEventsContainer ||
!pastEventsContainer ||
!ongoingEventsContainer
)
return;
// Add 3 skeleton cards to each container initially
const createSkeletonCard = () => {
@ -607,6 +630,7 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
for (let i = 0; i < 3; i++) {
upcomingEventsContainer.appendChild(createSkeletonCard());
ongoingEventsContainer.appendChild(createSkeletonCard());
pastEventsContainer.appendChild(createSkeletonCard());
}
@ -619,11 +643,12 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
// Clear skeletons
upcomingEventsContainer.innerHTML = "";
ongoingEventsContainer.innerHTML = "";
pastEventsContainer.innerHTML = "";
// Split events into upcoming and past based on start and end dates
// Split events into upcoming, ongoing, and past based on start and end dates
const now = new Date();
const { upcoming, past } = events.reduce(
const { upcoming, ongoing, past } = events.reduce(
(acc, event) => {
// Convert UTC dates to local time
const startDate = new Date(event.start_date);
@ -659,12 +684,16 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
// If end date is in past, it's past
acc.past.push(event);
} else {
// If start date is past but end date is future, it's in progress (show in upcoming)
acc.upcoming.push(event);
// If start date is past but end date is future, it's ongoing
acc.ongoing.push(event);
}
return acc;
},
{ upcoming: [] as Event[], past: [] as Event[] }
{
upcoming: [] as Event[],
ongoing: [] as Event[],
past: [] as Event[],
}
);
// Sort upcoming events by start date (closest first)
@ -674,6 +703,13 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
new Date(b.start_date).getTime()
);
// Sort ongoing events by end date (ending soonest first)
ongoing.sort(
(a, b) =>
new Date(a.end_date).getTime() -
new Date(b.end_date).getTime()
);
// Sort past events by end date (most recent first)
past.sort(
(a, b) =>
@ -681,86 +717,7 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
new Date(a.end_date).getTime()
);
upcoming.forEach((event) => {
const startDate = new Date(event.start_date);
const endDate = new Date(event.end_date);
const card = document.createElement("div");
card.className =
"card bg-base-200 shadow-lg hover:shadow-xl transition-all duration-300 relative overflow-hidden";
card.innerHTML = `
<div class="card-body p-5">
<div class="flex flex-col h-full">
<div class="flex items-start justify-between gap-3 mb-2">
<div class="flex-1">
<h3 class="card-title text-lg font-semibold mb-1 line-clamp-2">${event.event_name}</h3>
<div class="flex items-center gap-2 text-sm text-base-content/70">
<div class="badge badge-primary badge-sm">${event.points_to_reward} pts</div>
</div>
</div>
<div class="text-right shrink-0 text-base-content/80">
<div class="text-sm font-medium">
${startDate.toLocaleDateString(
"en-US",
{
weekday: "short",
month: "short",
day: "numeric",
}
)}
</div>
<div class="text-xs mt-0.5 opacity-75">
${startDate.toLocaleTimeString(
"en-US",
{
hour: "numeric",
minute: "2-digit",
}
)}
</div>
</div>
</div>
<div class="text-sm text-base-content/70 mb-3 line-clamp-2">
${event.description || "No description available"}
</div>
<div class="flex items-center justify-between">
<div class="flex items-start gap-2.5 text-base-content/80">
<Icon name="mdi:map-marker" class="w-4 h-4 text-primary shrink-0 mt-0.5" />
<span class="text-sm leading-tight truncate max-w-[200px]">${event.location}</span>
</div>
${(() => {
const endDate = Get.isUTCDateString(
event.end_date
)
? new Date(event.end_date)
: new Date();
const now = new Date();
return endDate < now &&
event.files &&
event.files.length > 0
? `
<button onclick="window.openDetailsModal(window['event_${event.id}'])" class="btn btn-sm btn-primary w-[90px] inline-flex items-center justify-center">
<div class="flex items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
<polyline points="14 2 14 8 20 8" />
</svg>
<span>Files</span>
</div>
</button>
`
: "";
})()}
</div>
</div>
</div>
`;
upcomingEventsContainer.appendChild(card);
});
past.forEach((event) => {
const renderEventCard = (event: Event, container: HTMLElement) => {
const startDate = new Date(event.start_date);
const endDate = new Date(event.end_date);
@ -832,8 +789,27 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
</div>
</div>
`;
pastEventsContainer.appendChild(card);
});
container.appendChild(card);
};
// Render all event types
upcoming.forEach((event) =>
renderEventCard(event, upcomingEventsContainer)
);
ongoing.forEach((event) =>
renderEventCard(event, ongoingEventsContainer)
);
past.forEach((event) =>
renderEventCard(event, pastEventsContainer)
);
// Hide sections if they have no events
if (upcoming.length === 0)
upcomingEventsContainer.parentElement?.classList.add("hidden");
if (ongoing.length === 0)
ongoingEventsContainer.parentElement?.classList.add("hidden");
if (past.length === 0)
pastEventsContainer.parentElement?.classList.add("hidden");
} catch (error) {
console.error("Failed to load events:", error);
// You might want to show an error message to the user here