From e8f6776aa71080d66472ee0deb2a0046ab52118f Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Mon, 17 Feb 2025 02:44:57 -0800
Subject: [PATCH] add hidden text codes

---
 src/components/dashboard/EventsSection.astro | 154 ++++++++-----------
 1 file changed, 65 insertions(+), 89 deletions(-)

diff --git a/src/components/dashboard/EventsSection.astro b/src/components/dashboard/EventsSection.astro
index 49bb506..4f9d274 100644
--- a/src/components/dashboard/EventsSection.astro
+++ b/src/components/dashboard/EventsSection.astro
@@ -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