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> </label>
<div class="flex gap-2"> <div class="flex gap-2">
<input <input
type="text" type="password"
placeholder="Enter code" placeholder="Enter code"
class="input input-bordered flex-1" class="input input-bordered flex-1"
/> />
@ -103,6 +103,21 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
</div> </div>
</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 --> <!-- Upcoming Events -->
<div <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" 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( const upcomingEventsContainer = document.getElementById(
"upcomingEventsContainer" "upcomingEventsContainer"
); );
const ongoingEventsContainer = document.getElementById(
"ongoingEventsContainer"
);
const pastEventsContainer = document.getElementById( const pastEventsContainer = document.getElementById(
"pastEventsContainer" "pastEventsContainer"
); );
if (!upcomingEventsContainer || !pastEventsContainer) return; if (
!upcomingEventsContainer ||
!pastEventsContainer ||
!ongoingEventsContainer
)
return;
// Add 3 skeleton cards to each container initially // Add 3 skeleton cards to each container initially
const createSkeletonCard = () => { const createSkeletonCard = () => {
@ -607,6 +630,7 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
for (let i = 0; i < 3; i++) { for (let i = 0; i < 3; i++) {
upcomingEventsContainer.appendChild(createSkeletonCard()); upcomingEventsContainer.appendChild(createSkeletonCard());
ongoingEventsContainer.appendChild(createSkeletonCard());
pastEventsContainer.appendChild(createSkeletonCard()); pastEventsContainer.appendChild(createSkeletonCard());
} }
@ -619,11 +643,12 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
// Clear skeletons // Clear skeletons
upcomingEventsContainer.innerHTML = ""; upcomingEventsContainer.innerHTML = "";
ongoingEventsContainer.innerHTML = "";
pastEventsContainer.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 now = new Date();
const { upcoming, past } = events.reduce( const { upcoming, ongoing, past } = events.reduce(
(acc, event) => { (acc, event) => {
// Convert UTC dates to local time // Convert UTC dates to local time
const startDate = new Date(event.start_date); 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 // If end date is in past, it's past
acc.past.push(event); acc.past.push(event);
} else { } else {
// If start date is past but end date is future, it's in progress (show in upcoming) // If start date is past but end date is future, it's ongoing
acc.upcoming.push(event); acc.ongoing.push(event);
} }
return acc; 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) // Sort upcoming events by start date (closest first)
@ -674,6 +703,13 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
new Date(b.start_date).getTime() 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) // Sort past events by end date (most recent first)
past.sort( past.sort(
(a, b) => (a, b) =>
@ -681,86 +717,7 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
new Date(a.end_date).getTime() new Date(a.end_date).getTime()
); );
upcoming.forEach((event) => { const renderEventCard = (event: Event, container: HTMLElement) => {
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 startDate = new Date(event.start_date); const startDate = new Date(event.start_date);
const endDate = new Date(event.end_date); const endDate = new Date(event.end_date);
@ -832,8 +789,27 @@ import FilePreview from "./Officer_EventManagement/FilePreview";
</div> </div>
</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) { } catch (error) {
console.error("Failed to load events:", error); console.error("Failed to load events:", error);
// You might want to show an error message to the user here // You might want to show an error message to the user here