2093 lines
72 KiB
Text
2093 lines
72 KiB
Text
---
|
||
import { Icon } from "astro-icon/components";
|
||
import { Get } from "../../scripts/pocketbase/Get";
|
||
import { Authentication } from "../../scripts/pocketbase/Authentication";
|
||
import EventEditor from "./Officer_EventManagement/EventEditor";
|
||
import FilePreview from "./universal/FilePreview";
|
||
import Attendees from "./Officer_EventManagement/Attendees";
|
||
import type { Event, AttendeeEntry } from "../../schemas/pocketbase";
|
||
import { DataSyncService } from "../../scripts/database/DataSyncService";
|
||
import toast from "react-hot-toast";
|
||
|
||
// Get instances
|
||
const get = Get.getInstance();
|
||
const auth = Authentication.getInstance();
|
||
|
||
interface ListResponse<T> {
|
||
page: number;
|
||
perPage: number;
|
||
totalItems: number;
|
||
totalPages: number;
|
||
items: T[];
|
||
}
|
||
|
||
// Initialize variables
|
||
let eventResponse: ListResponse<Event> = {
|
||
page: 1,
|
||
perPage: 5,
|
||
totalItems: 0,
|
||
totalPages: 0,
|
||
items: [],
|
||
};
|
||
let upcomingEvents: Event[] = [];
|
||
|
||
// Fetch events
|
||
try {
|
||
if (auth.isAuthenticated()) {
|
||
eventResponse = await get.getList<Event>("events", 1, 5, "", "-start_date");
|
||
upcomingEvents = eventResponse.items;
|
||
}
|
||
} catch (error) {
|
||
console.error("Failed to fetch events:", error);
|
||
}
|
||
|
||
const totalEvents = eventResponse.totalItems;
|
||
const totalPages = eventResponse.totalPages;
|
||
const currentPage = eventResponse.page;
|
||
---
|
||
|
||
<div>
|
||
<div
|
||
class="mb-4 md:mb-6 flex flex-col md:flex-row md:justify-between md:items-center gap-2"
|
||
>
|
||
<div>
|
||
<h2 class="text-xl md:text-2xl font-bold">Event Management</h2>
|
||
<p class="text-sm md:text-base opacity-70">
|
||
Manage and create IEEE UCSD events
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats Cards -->
|
||
<div
|
||
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 md:gap-6 mb-6 md:mb-8"
|
||
>
|
||
<div
|
||
class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform"
|
||
>
|
||
<div class="stat p-4 md:p-6">
|
||
<div class="stat-title text-sm md:text-base font-medium opacity-80">
|
||
Total Events
|
||
</div>
|
||
<div
|
||
class="stat-value text-primary text-2xl md:text-3xl"
|
||
id="totalEvents"
|
||
>
|
||
-
|
||
</div>
|
||
<div class="stat-desc flex items-center gap-2 mt-1">
|
||
<div class="badge badge-primary badge-sm" id="quarterLabel">
|
||
Current Academic Term
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-secondary transition-all duration-300 hover:-translate-y-1 transform"
|
||
>
|
||
<div class="stat p-4 md:p-6">
|
||
<div class="stat-title text-sm md:text-base font-medium opacity-80">
|
||
Unique Attendees
|
||
</div>
|
||
<div
|
||
class="stat-value text-secondary text-2xl md:text-3xl"
|
||
id="uniqueAttendees"
|
||
>
|
||
-
|
||
</div>
|
||
<div class="stat-desc flex items-center gap-2 mt-1">
|
||
<div class="badge badge-secondary badge-sm">
|
||
Current Academic Term
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-accent transition-all duration-300 hover:-translate-y-1 transform sm:col-span-2 md:col-span-1"
|
||
>
|
||
<div class="stat p-4 md:p-6">
|
||
<div class="stat-title text-sm md:text-base font-medium opacity-80">
|
||
Recurring Attendees
|
||
</div>
|
||
<div
|
||
class="stat-value text-accent text-2xl md:text-3xl"
|
||
id="recurringAttendees"
|
||
>
|
||
-
|
||
</div>
|
||
<div class="stat-desc flex items-center gap-2 mt-1">
|
||
<div class="badge badge-accent badge-sm">
|
||
Current Quarter (<span id="quarterName">-</span>)
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Events List -->
|
||
<div
|
||
class="card bg-base-100 shadow-lg border border-base-200 hover:border-primary transition-all duration-300"
|
||
>
|
||
<div class="card-body p-4 md:p-6">
|
||
<h3
|
||
class="card-title text-lg md:text-xl font-bold flex flex-col md:flex-row md:items-center gap-3"
|
||
>
|
||
<div class="flex items-center gap-2">
|
||
<div class="badge badge-primary p-3">
|
||
<Icon name="heroicons:calendar" class="h-5 w-5" />
|
||
</div>
|
||
Events List
|
||
</div>
|
||
<div class="flex-1 flex flex-wrap gap-2 md:justify-end">
|
||
<button
|
||
class="btn btn-ghost btn-sm md:btn-md gap-2"
|
||
onclick="window.refreshEvents()"
|
||
>
|
||
<Icon name="heroicons:arrow-path" class="h-4 w-4 md:h-5 md:w-5" />
|
||
Refresh
|
||
</button>
|
||
<button
|
||
class="btn btn-primary btn-sm md:btn-md gap-2"
|
||
onclick="window.openEditModal()"
|
||
>
|
||
<Icon name="heroicons:plus" class="h-4 w-4 md:h-5 md:w-5" />
|
||
Add New Event
|
||
</button>
|
||
</div>
|
||
</h3>
|
||
|
||
<div class="divider my-2 md:my-4"></div>
|
||
|
||
<!-- Filter Controls -->
|
||
<div class="mb-4">
|
||
<!-- All Filters -->
|
||
<div class="flex flex-wrap gap-4">
|
||
<div class="form-control w-full sm:w-auto">
|
||
<label class="label">
|
||
<span class="label-text text-sm md:text-base font-medium"
|
||
>Time Filter</span
|
||
>
|
||
</label>
|
||
<div class="join m-1">
|
||
<input
|
||
type="radio"
|
||
name="timeFilter"
|
||
value="all"
|
||
class="join-item btn btn-xs md:btn-sm"
|
||
checked
|
||
aria-label="All Events"
|
||
/>
|
||
<input
|
||
type="radio"
|
||
name="timeFilter"
|
||
value="ongoing"
|
||
class="join-item btn btn-xs md:btn-sm"
|
||
aria-label="Ongoing"
|
||
/>
|
||
<input
|
||
type="radio"
|
||
name="timeFilter"
|
||
value="upcoming"
|
||
class="join-item btn btn-xs md:btn-sm"
|
||
aria-label="Upcoming"
|
||
/>
|
||
<input
|
||
type="radio"
|
||
name="timeFilter"
|
||
value="past"
|
||
class="join-item btn btn-xs md:btn-sm"
|
||
aria-label="Past"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Other filters with similar responsive adjustments -->
|
||
<div class="form-control w-full sm:w-auto">
|
||
<label class="label">
|
||
<span class="label-text text-sm md:text-base font-medium"
|
||
>Year</span
|
||
>
|
||
</label>
|
||
<div class="dropdown">
|
||
<label
|
||
tabindex="0"
|
||
class="btn btn-sm m-1 w-[180px] justify-between items-center"
|
||
>
|
||
<div class="flex-1 text-left truncate">
|
||
<span id="yearFilterLabel">All Years</span>
|
||
</div>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="h-4 w-4 flex-shrink-0 ml-2"
|
||
viewBox="0 0 20 20"
|
||
fill="currentColor"
|
||
>
|
||
<path
|
||
fill-rule="evenodd"
|
||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||
clip-rule="evenodd"></path>
|
||
</svg>
|
||
</label>
|
||
<div
|
||
tabindex="0"
|
||
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
|
||
>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">All Years</span>
|
||
<input
|
||
type="checkbox"
|
||
class="checkbox"
|
||
value="all"
|
||
checked
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div id="yearCheckboxes" class="space-y-1">
|
||
<!-- Year checkboxes will be populated dynamically -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-control w-full sm:w-auto">
|
||
<label class="label">
|
||
<span class="label-text text-sm md:text-base font-medium"
|
||
>Quarter</span
|
||
>
|
||
</label>
|
||
<div class="dropdown">
|
||
<label
|
||
tabindex="0"
|
||
class="btn btn-sm m-1 w-[180px] justify-between items-center"
|
||
>
|
||
<div class="flex-1 text-left truncate">
|
||
<span id="quarterFilterLabel">All Quarters</span>
|
||
</div>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="h-4 w-4 flex-shrink-0 ml-2"
|
||
viewBox="0 0 20 20"
|
||
fill="currentColor"
|
||
>
|
||
<path
|
||
fill-rule="evenodd"
|
||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||
clip-rule="evenodd"></path>
|
||
</svg>
|
||
</label>
|
||
<div
|
||
id="quarterDropdownContent"
|
||
tabindex="0"
|
||
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
|
||
>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">All Quarters</span>
|
||
<input
|
||
type="checkbox"
|
||
class="checkbox"
|
||
value="all"
|
||
checked
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">Fall</span>
|
||
<input type="checkbox" class="checkbox" value="fall" />
|
||
</label>
|
||
</div>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">Winter</span>
|
||
<input type="checkbox" class="checkbox" value="winter" />
|
||
</label>
|
||
</div>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">Spring</span>
|
||
<input type="checkbox" class="checkbox" value="spring" />
|
||
</label>
|
||
</div>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">Summer</span>
|
||
<input type="checkbox" class="checkbox" value="summer" />
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-control w-full sm:w-auto">
|
||
<label class="label">
|
||
<span class="label-text text-sm md:text-base font-medium"
|
||
>Published</span
|
||
>
|
||
</label>
|
||
<div class="dropdown">
|
||
<label
|
||
tabindex="0"
|
||
class="btn btn-sm m-1 w-[140px] justify-between"
|
||
>
|
||
<span id="publishedFilterLabel">All</span>
|
||
<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="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||
clip-rule="evenodd"></path>
|
||
</svg>
|
||
</label>
|
||
<div
|
||
tabindex="0"
|
||
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
|
||
>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">All</span>
|
||
<input
|
||
type="radio"
|
||
name="publishedFilter"
|
||
class="radio"
|
||
value="all"
|
||
checked
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">Yes</span>
|
||
<input
|
||
type="radio"
|
||
name="publishedFilter"
|
||
class="radio"
|
||
value="yes"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">No</span>
|
||
<input
|
||
type="radio"
|
||
name="publishedFilter"
|
||
class="radio"
|
||
value="no"
|
||
/>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-control w-full sm:w-auto">
|
||
<label class="label">
|
||
<span class="label-text text-sm md:text-base font-medium"
|
||
>Has Files</span
|
||
>
|
||
</label>
|
||
<div class="dropdown">
|
||
<label
|
||
tabindex="0"
|
||
class="btn btn-sm m-1 w-[140px] justify-between"
|
||
>
|
||
<span id="hasFilesFilterLabel">All</span>
|
||
<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="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||
clip-rule="evenodd"></path>
|
||
</svg>
|
||
</label>
|
||
<div
|
||
tabindex="0"
|
||
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
|
||
>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">All</span>
|
||
<input
|
||
type="radio"
|
||
name="hasFilesFilter"
|
||
class="radio"
|
||
value="all"
|
||
checked
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">Yes</span>
|
||
<input
|
||
type="radio"
|
||
name="hasFilesFilter"
|
||
class="radio"
|
||
value="yes"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">No</span>
|
||
<input
|
||
type="radio"
|
||
name="hasFilesFilter"
|
||
class="radio"
|
||
value="no"
|
||
/>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-control w-full sm:w-auto">
|
||
<label class="label">
|
||
<span class="label-text text-sm md:text-base font-medium"
|
||
>Has Food</span
|
||
>
|
||
</label>
|
||
<div class="dropdown">
|
||
<label
|
||
tabindex="0"
|
||
class="btn btn-sm m-1 w-[140px] justify-between"
|
||
>
|
||
<span id="hasFoodFilterLabel">All</span>
|
||
<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="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||
clip-rule="evenodd"></path>
|
||
</svg>
|
||
</label>
|
||
<div
|
||
tabindex="0"
|
||
class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
|
||
>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">All</span>
|
||
<input
|
||
type="radio"
|
||
name="hasFoodFilter"
|
||
class="radio"
|
||
value="all"
|
||
checked
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">Yes</span>
|
||
<input
|
||
type="radio"
|
||
name="hasFoodFilter"
|
||
class="radio"
|
||
value="yes"
|
||
/>
|
||
</label>
|
||
</div>
|
||
<div class="form-control">
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">No</span>
|
||
<input
|
||
type="radio"
|
||
name="hasFoodFilter"
|
||
class="radio"
|
||
value="no"
|
||
/>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Search and Per Page Controls -->
|
||
<div class="flex flex-col sm:flex-row gap-4 mb-4">
|
||
<div class="form-control flex-1">
|
||
<div class="join w-full">
|
||
<div class="join-item bg-base-200 flex items-center px-3">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="h-4 w-4 md:h-5 md:w-5 opacity-70"
|
||
viewBox="0 0 20 20"
|
||
fill="currentColor"
|
||
>
|
||
<path
|
||
fill-rule="evenodd"
|
||
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
|
||
clip-rule="evenodd"></path>
|
||
</svg>
|
||
</div>
|
||
<input
|
||
type="text"
|
||
id="searchInput"
|
||
placeholder="Search events..."
|
||
class="input input-bordered join-item w-full text-sm md:text-base"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="form-control w-full sm:w-auto">
|
||
<div class="join">
|
||
<div
|
||
class="join-item bg-base-200 flex items-center px-3 text-sm md:text-base"
|
||
>
|
||
Per Page
|
||
</div>
|
||
<select
|
||
id="perPageSelect"
|
||
class="select select-bordered join-item text-sm md:text-base"
|
||
>
|
||
<option value="5">5</option>
|
||
<option value="10">10</option>
|
||
<option value="25">25</option>
|
||
<option value="50">50</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Event Items -->
|
||
<div class="space-y-3 md:space-y-4" id="eventsList">
|
||
<!-- Event items will be populated here with responsive classes -->
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="flex justify-center mt-4 md:mt-6" id="paginationContainer">
|
||
<div class="join">
|
||
<button class="join-item btn btn-xs md:btn-sm" id="firstPageBtn"
|
||
>«</button
|
||
>
|
||
<button class="join-item btn btn-xs md:btn-sm" id="prevPageBtn"
|
||
>‹</button
|
||
>
|
||
<button class="join-item btn btn-xs md:btn-sm"
|
||
>Page <span id="currentPageNumber">1</span></button
|
||
>
|
||
<button class="join-item btn btn-xs md:btn-sm" id="nextPageBtn"
|
||
>›</button
|
||
>
|
||
<button class="join-item btn btn-xs md:btn-sm" id="lastPageBtn"
|
||
>»</button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<EventEditor
|
||
client:load
|
||
onEventSaved={() => {
|
||
// Reset cache timestamp to force refresh
|
||
window.lastCacheUpdate = 0;
|
||
// Refresh events list
|
||
window.fetchEvents?.();
|
||
}}
|
||
/>
|
||
|
||
<!-- Event Details Modal -->
|
||
<dialog id="eventDetailsModal" class="modal">
|
||
<div class="modal-box max-w-4xl">
|
||
<div class="flex justify-between items-center mb-4">
|
||
<h3 class="font-bold text-lg">Event Details</h3>
|
||
<button
|
||
class="btn btn-circle btn-ghost"
|
||
onclick="eventDetailsModal.close()"
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="h-6 w-6"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M6 18L18 6M6 6l12 12"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="tabs tabs-boxed mb-4">
|
||
<button class="tab tab-active" data-tab="files">Files</button>
|
||
<button class="tab" data-tab="attendees">Attendees</button>
|
||
</div>
|
||
|
||
<div id="filesContent" class="space-y-4">
|
||
<!-- Files list will be populated here -->
|
||
</div>
|
||
|
||
<div id="attendeesContent" class="space-y-4 hidden">
|
||
<Attendees client:load />
|
||
</div>
|
||
</div>
|
||
<form method="dialog" class="modal-backdrop">
|
||
<button onclick="window.closeEventDetailsModal()">close</button>
|
||
</form>
|
||
</dialog>
|
||
|
||
<!-- Universal File Preview Modal -->
|
||
<dialog id="filePreviewModal" class="modal">
|
||
<div class="modal-box max-w-4xl">
|
||
<div class="flex justify-end mb-4">
|
||
<button
|
||
class="btn btn-ghost btn-sm"
|
||
onclick="window.closeFilePreviewOfficer()"
|
||
type="button"
|
||
>
|
||
Close
|
||
</button>
|
||
</div>
|
||
<div class="relative" id="previewContainer">
|
||
<div
|
||
id="previewLoadingSpinner"
|
||
class="absolute inset-0 flex items-center justify-center bg-base-200 bg-opacity-50 hidden"
|
||
>
|
||
<span class="loading loading-spinner loading-lg"></span>
|
||
</div>
|
||
<div id="previewContent" class="w-full">
|
||
<FilePreview client:load />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<form method="dialog" class="modal-backdrop">
|
||
<button type="button">close</button>
|
||
</form>
|
||
</dialog>
|
||
|
||
<!-- Add a separate Attendees Modal -->
|
||
<dialog id="attendeesModal" class="modal">
|
||
<div class="modal-box max-w-4xl">
|
||
<div class="flex justify-between items-center mb-4">
|
||
<h3 class="font-bold text-lg" id="attendeesModalTitle"></h3>
|
||
<button class="btn btn-circle btn-ghost" onclick="attendeesModal.close()">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
class="h-6 w-6"
|
||
fill="none"
|
||
viewBox="0 0 24 24"
|
||
stroke="currentColor"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M6 18L18 6M6 6l12 12"></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
<div id="attendeesModalContent">
|
||
<Attendees client:load />
|
||
</div>
|
||
</div>
|
||
<form method="dialog" class="modal-backdrop">
|
||
<button>close</button>
|
||
</form>
|
||
</dialog>
|
||
<script>
|
||
import { Get } from "../../scripts/pocketbase/Get";
|
||
import { Authentication } from "../../scripts/pocketbase/Authentication";
|
||
import { Update } from "../../scripts/pocketbase/Update";
|
||
import { FileManager } from "../../scripts/pocketbase/FileManager";
|
||
import { SendLog } from "../../scripts/pocketbase/SendLog";
|
||
import { DataSyncService } from "../../scripts/database/DataSyncService";
|
||
import FilePreview from "./universal/FilePreview";
|
||
import toast from "react-hot-toast";
|
||
|
||
// Add file storage
|
||
const selectedFileStorage = new Map<string, File>();
|
||
const filesToDelete = new Set<string>(); // Add storage for files to delete
|
||
|
||
interface AttendeeEntry {
|
||
user_id: string;
|
||
time_checked_in: string;
|
||
food: string;
|
||
}
|
||
|
||
interface Event {
|
||
id: string;
|
||
event_name: string;
|
||
event_description: string;
|
||
event_code: string;
|
||
location: string;
|
||
files: string[];
|
||
points_to_reward: number;
|
||
start_date: string;
|
||
end_date: string;
|
||
published: boolean;
|
||
has_food: boolean;
|
||
attendees: AttendeeEntry[];
|
||
}
|
||
|
||
const get = Get.getInstance();
|
||
const auth = Authentication.getInstance();
|
||
const update = Update.getInstance();
|
||
const fileManager = FileManager.getInstance();
|
||
const sendLog = SendLog.getInstance();
|
||
|
||
let currentPage = 1;
|
||
let totalPages = 0;
|
||
let searchQuery = "";
|
||
let perPage = 5;
|
||
let quarterlyStats = {
|
||
totalEvents: 0,
|
||
uniqueAttendees: 0,
|
||
recurringAttendees: 0,
|
||
};
|
||
|
||
// Add filter state
|
||
let filterState = {
|
||
time: "all",
|
||
year: ["all"],
|
||
quarter: ["all"],
|
||
published: "all",
|
||
hasFiles: "all",
|
||
hasFood: "all",
|
||
};
|
||
|
||
// Add cache for events
|
||
let cachedEvents: Event[] = [];
|
||
let lastCacheUpdate = 0; // Will force a refresh on page load
|
||
const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds
|
||
|
||
// Function to refresh cache
|
||
async function refreshCache() {
|
||
try {
|
||
const now = Date.now();
|
||
|
||
if (
|
||
lastCacheUpdate === 0 ||
|
||
now - lastCacheUpdate >= CACHE_DURATION ||
|
||
cachedEvents.length === 0
|
||
) {
|
||
auth.setUpdating(true);
|
||
const response = await get.getAll<Event>("events");
|
||
cachedEvents = response.map((event) => Get.convertUTCToLocal(event));
|
||
lastCacheUpdate = now;
|
||
|
||
// Initialize year filter options from cache
|
||
const years = new Set<number>();
|
||
cachedEvents.forEach((event) => {
|
||
const year = new Date(event.start_date).getFullYear();
|
||
years.add(year);
|
||
});
|
||
|
||
const yearCheckboxes = document.getElementById("yearCheckboxes");
|
||
if (yearCheckboxes) {
|
||
const sortedYears = Array.from(years).sort((a, b) => b - a);
|
||
yearCheckboxes.innerHTML = sortedYears
|
||
.map(
|
||
(year) => `
|
||
<label class="label cursor-pointer">
|
||
<span class="label-text">${year}</span>
|
||
<input type="checkbox" class="checkbox" value="${year}" />
|
||
</label>
|
||
`,
|
||
)
|
||
.join("");
|
||
|
||
// Add event listeners to checkboxes
|
||
const allYearsCheckbox = document.querySelector(
|
||
'input[type="checkbox"][value="all"]',
|
||
) as HTMLInputElement;
|
||
const yearInputs = Array.from(
|
||
yearCheckboxes.querySelectorAll('input[type="checkbox"]'),
|
||
) as HTMLInputElement[];
|
||
|
||
if (allYearsCheckbox) {
|
||
allYearsCheckbox.addEventListener("change", (e) => {
|
||
const target = e.target as HTMLInputElement;
|
||
if (target.checked) {
|
||
yearInputs.forEach((input) => {
|
||
input.checked = false;
|
||
});
|
||
filterState.year = ["all"];
|
||
document.getElementById("yearFilterLabel")!.textContent =
|
||
"All Years";
|
||
}
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
});
|
||
}
|
||
|
||
yearInputs.forEach((input) => {
|
||
input.addEventListener("change", () => {
|
||
const checkedYears = yearInputs
|
||
.filter((inp) => inp.checked)
|
||
.map((inp) => inp.value);
|
||
|
||
if (checkedYears.length === 0) {
|
||
allYearsCheckbox.checked = true;
|
||
filterState.year = ["all"];
|
||
document.getElementById("yearFilterLabel")!.textContent =
|
||
"All Years";
|
||
} else {
|
||
allYearsCheckbox.checked = false;
|
||
filterState.year = checkedYears;
|
||
document.getElementById("yearFilterLabel")!.textContent =
|
||
checkedYears.length === 1
|
||
? checkedYears[0]
|
||
: `${checkedYears.length} Years Selected`;
|
||
}
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
});
|
||
});
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error("Failed to refresh cache:", error);
|
||
throw error;
|
||
} finally {
|
||
auth.setUpdating(false);
|
||
}
|
||
}
|
||
|
||
// Helper function to determine current academic term
|
||
function getCurrentTerm(): { start: Date; end: Date } {
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
let start: Date, end: Date;
|
||
|
||
// If we're before September, term started last year
|
||
if (now.getMonth() < 8) {
|
||
// Before September
|
||
start = new Date(year - 1, 8, 1); // Sept 1 of last year
|
||
end = new Date(year, 8, 0); // Aug 31 of current year
|
||
} else {
|
||
start = new Date(year, 8, 1); // Sept 1 of current year
|
||
end = new Date(year + 1, 8, 0); // Aug 31 of next year
|
||
}
|
||
|
||
return { start, end };
|
||
}
|
||
|
||
// Helper function to determine current quarter
|
||
function getCurrentQuarter(): { start: Date; end: Date } {
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = now.getMonth();
|
||
let start: Date, end: Date;
|
||
|
||
// Determine quarter (0-based months: 0-11)
|
||
// Q1: Sept-Dec (8-11)
|
||
// Q2: Jan-Mar (0-2)
|
||
// Q3: Mar-Jun (2-5)
|
||
// Q4: Jun-Sept (5-8)
|
||
|
||
if (month >= 8) {
|
||
// Q1: Sept-Dec
|
||
start = new Date(year, 8, 1);
|
||
end = new Date(year, 11, 31);
|
||
} else if (month < 2) {
|
||
// Q2: Jan-Mar
|
||
start = new Date(year, 0, 1);
|
||
end = new Date(year, 2, 31);
|
||
} else if (month < 5) {
|
||
// Q3: Mar-Jun
|
||
start = new Date(year, 2, 1);
|
||
end = new Date(year, 5, 30);
|
||
} else {
|
||
// Q4: Jun-Sept
|
||
start = new Date(year, 5, 1);
|
||
end = new Date(year, 8, 0); // End on Aug 31
|
||
}
|
||
|
||
return { start, end };
|
||
}
|
||
|
||
// Helper function to get quarter name
|
||
function getQuarterName(): string {
|
||
const month = new Date().getMonth();
|
||
|
||
if (month >= 8) {
|
||
// Sept-Dec
|
||
return "Fall";
|
||
} else if (month < 2) {
|
||
// Jan-Mar
|
||
return "Winter";
|
||
} else if (month < 5) {
|
||
// Mar-Jun
|
||
return "Spring";
|
||
} else {
|
||
// Jun-Sept
|
||
return "Summer";
|
||
}
|
||
}
|
||
|
||
// Function to apply filters to cached data
|
||
function filterEvents(events: Event[]): Event[] {
|
||
return events.filter((event) => {
|
||
const now = new Date().toISOString();
|
||
const eventStart = new Date(event.start_date).toISOString();
|
||
const eventEnd = new Date(event.end_date).toISOString();
|
||
|
||
// Time filter
|
||
if (filterState.time === "upcoming" && eventStart <= now) return false;
|
||
if (filterState.time === "past" && eventEnd >= now) return false;
|
||
if (
|
||
filterState.time === "ongoing" &&
|
||
(eventStart > now || eventEnd < now)
|
||
)
|
||
return false;
|
||
|
||
// Year filter
|
||
if (!filterState.year.includes("all")) {
|
||
const eventStartDate = new Date(event.start_date);
|
||
const eventEndDate = new Date(event.end_date);
|
||
const eventStartYear = eventStartDate.getFullYear().toString();
|
||
const eventEndYear = eventEndDate.getFullYear().toString();
|
||
|
||
// Check if either the start year or end year matches any selected year
|
||
const yearMatches = filterState.year.some(
|
||
(year) => year === eventStartYear || year === eventEndYear,
|
||
);
|
||
if (!yearMatches) return false;
|
||
}
|
||
|
||
// Quarter filter
|
||
if (!filterState.quarter.includes("all")) {
|
||
const eventDate = new Date(event.start_date);
|
||
const month = eventDate.getMonth();
|
||
let isInSelectedQuarter = false;
|
||
|
||
for (const quarter of filterState.quarter) {
|
||
let isInQuarter = false;
|
||
switch (quarter) {
|
||
case "fall":
|
||
isInQuarter = month >= 8 && month <= 11; // Sept-Dec
|
||
break;
|
||
case "winter":
|
||
isInQuarter = month >= 0 && month <= 2; // Jan-Mar
|
||
break;
|
||
case "spring":
|
||
isInQuarter = month >= 2 && month <= 5; // Mar-Jun
|
||
break;
|
||
case "summer":
|
||
isInQuarter = month >= 5 && month <= 8; // Jun-Sept
|
||
break;
|
||
}
|
||
if (isInQuarter) {
|
||
isInSelectedQuarter = true;
|
||
break;
|
||
}
|
||
}
|
||
if (!isInSelectedQuarter) return false;
|
||
}
|
||
|
||
// Published filter
|
||
if (filterState.published !== "all") {
|
||
if ((filterState.published === "yes") !== event.published) return false;
|
||
}
|
||
|
||
// Has Files filter
|
||
if (filterState.hasFiles !== "all") {
|
||
const hasFiles = event.files && event.files.length > 0;
|
||
if ((filterState.hasFiles === "yes") !== hasFiles) return false;
|
||
}
|
||
|
||
// Has Food filter
|
||
if (filterState.hasFood !== "all") {
|
||
if ((filterState.hasFood === "yes") !== event.has_food) return false;
|
||
}
|
||
|
||
// Search query
|
||
if (searchQuery) {
|
||
const searchLower = searchQuery.toLowerCase();
|
||
const searchTerms = searchLower.split(/\s+/).filter(Boolean);
|
||
|
||
return (
|
||
searchTerms.length === 0 || // If no search terms, return true
|
||
searchTerms.every(
|
||
(term) =>
|
||
event.event_name.toLowerCase().includes(term) ||
|
||
event.event_code.toLowerCase().includes(term) ||
|
||
event.location.toLowerCase().includes(term) ||
|
||
event.event_description.toLowerCase().includes(term),
|
||
)
|
||
);
|
||
}
|
||
|
||
return true;
|
||
});
|
||
}
|
||
|
||
// Fetch and display events using cached data
|
||
async function fetchEvents() {
|
||
const eventsList = document.getElementById("eventsList");
|
||
const paginationContainer = document.getElementById("paginationContainer");
|
||
if (!eventsList || !paginationContainer) return;
|
||
|
||
try {
|
||
if (!auth.isAuthenticated()) {
|
||
eventsList.innerHTML = `
|
||
<div class="text-center py-8 text-base-content/70">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 opacity-50" viewBox="0 0 20 20" fill="currentColor">
|
||
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
|
||
</svg>
|
||
<p>Please log in to view events</p>
|
||
</div>
|
||
`;
|
||
paginationContainer.classList.add("hidden");
|
||
return;
|
||
}
|
||
|
||
// Refresh cache if needed
|
||
await refreshCache();
|
||
|
||
// Apply filters to cached data
|
||
const filteredEvents = filterEvents(cachedEvents);
|
||
|
||
// Sort events by start date (newest first)
|
||
filteredEvents.sort(
|
||
(a, b) =>
|
||
new Date(b.start_date).getTime() - new Date(a.start_date).getTime(),
|
||
);
|
||
|
||
// Calculate pagination
|
||
const totalItems = filteredEvents.length;
|
||
totalPages = Math.ceil(totalItems / perPage);
|
||
const startIndex = (currentPage - 1) * perPage;
|
||
const endIndex = startIndex + perPage;
|
||
const paginatedEvents = filteredEvents.slice(startIndex, endIndex);
|
||
|
||
// Update pagination UI
|
||
const firstPageBtn = document.getElementById(
|
||
"firstPageBtn",
|
||
) as HTMLButtonElement;
|
||
const prevPageBtn = document.getElementById(
|
||
"prevPageBtn",
|
||
) as HTMLButtonElement;
|
||
const nextPageBtn = document.getElementById(
|
||
"nextPageBtn",
|
||
) as HTMLButtonElement;
|
||
const lastPageBtn = document.getElementById(
|
||
"lastPageBtn",
|
||
) as HTMLButtonElement;
|
||
const currentPageNumber = document.getElementById("currentPageNumber");
|
||
|
||
if (firstPageBtn) firstPageBtn.disabled = currentPage <= 1;
|
||
if (prevPageBtn) prevPageBtn.disabled = currentPage <= 1;
|
||
if (nextPageBtn) nextPageBtn.disabled = currentPage >= totalPages;
|
||
if (lastPageBtn) lastPageBtn.disabled = currentPage >= totalPages;
|
||
if (currentPageNumber)
|
||
currentPageNumber.textContent = currentPage.toString();
|
||
|
||
// Show/hide pagination based on total pages
|
||
if (totalPages <= 1) {
|
||
paginationContainer.classList.add("hidden");
|
||
} else {
|
||
paginationContainer.classList.remove("hidden");
|
||
}
|
||
|
||
// Update events list
|
||
if (paginatedEvents.length === 0) {
|
||
eventsList.innerHTML = `
|
||
<div class="text-center py-8 text-base-content/70">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 opacity-50" viewBox="0 0 20 20" fill="currentColor">
|
||
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
|
||
</svg>
|
||
<p>No events found</p>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
eventsList.innerHTML = paginatedEvents
|
||
.map((event) => {
|
||
// Safely parse and format the date
|
||
let dateStr = "Invalid date";
|
||
try {
|
||
const date = new Date(event.start_date);
|
||
if (!isNaN(date.getTime())) {
|
||
dateStr = date.toLocaleDateString("en-US", {
|
||
month: "long",
|
||
day: "numeric",
|
||
year: "numeric",
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
});
|
||
}
|
||
} catch (e) {
|
||
console.error("Error formatting date:", e);
|
||
}
|
||
|
||
const locationStr = event.location ? `${event.location}` : "";
|
||
const codeStr = event.event_code ? `${event.event_code}` : "";
|
||
const detailsStr = [locationStr, codeStr]
|
||
.filter(Boolean)
|
||
.join(" | code: ");
|
||
|
||
// Store event data in a global map using the event ID as key
|
||
const eventDataId = `event_${event.id}`;
|
||
window[eventDataId] = event;
|
||
|
||
return `
|
||
<div class="flex flex-col sm:flex-row sm:items-center justify-between p-3 md:p-4 bg-base-200 rounded-xl hover:bg-base-300 transition-all duration-300 gap-3">
|
||
<div class="flex items-start sm:items-center gap-3 md:gap-4">
|
||
<div class="badge badge-lg p-3 badge-primary">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" viewBox="0 0 20 20" fill="currentColor">
|
||
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
|
||
</svg>
|
||
</div>
|
||
<div class="min-w-0">
|
||
<h4 class="font-semibold text-sm md:text-base truncate">${event.event_name}</h4>
|
||
<p class="text-xs md:text-sm opacity-70 truncate">${dateStr}${detailsStr ? ` • ${detailsStr}` : ""}</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex flex-wrap gap-2 justify-end">
|
||
|
||
<button class="btn btn-ghost btn-xs md:btn-sm" onclick="window.openAttendeesModal(window['${eventDataId}'])">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" viewBox="0 0 20 20" fill="currentColor">
|
||
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z" />
|
||
</svg>
|
||
</button>
|
||
<button class="btn btn-ghost btn-xs md:btn-sm" onclick="window.openEditModal(window['${eventDataId}'])">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" viewBox="0 0 20 20" fill="currentColor">
|
||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||
</svg>
|
||
</button>
|
||
<button class="btn btn-ghost btn-xs md:btn-sm text-error" onclick="window.deleteEvent('${event.id}', '${event.event_name.replace(/'/g, "\\'")}')">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 md:h-5 md:w-5" viewBox="0 0 20 20" fill="currentColor">
|
||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
})
|
||
.join("");
|
||
|
||
// Calculate and update stats using cached data
|
||
await calculateQuarterlyStats();
|
||
} catch (error) {
|
||
console.error("Failed to fetch events:", error);
|
||
eventsList.innerHTML = `
|
||
<div class="alert alert-error">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
<span>Failed to load events. Please try refreshing the page.</span>
|
||
</div>
|
||
`;
|
||
paginationContainer.classList.add("hidden");
|
||
}
|
||
}
|
||
|
||
// Calculate quarterly stats using cached data
|
||
async function calculateQuarterlyStats() {
|
||
try {
|
||
const { start: termStart, end: termEnd } = getCurrentTerm();
|
||
const { start: quarterStart, end: quarterEnd } = getCurrentQuarter();
|
||
|
||
// Update quarter name in UI
|
||
const quarterNameEl = document.getElementById("quarterName");
|
||
if (quarterNameEl) {
|
||
quarterNameEl.textContent = getQuarterName();
|
||
}
|
||
|
||
// Filter events for current term and quarter
|
||
const termEvents = cachedEvents.filter((event) => {
|
||
const eventDate = new Date(event.start_date);
|
||
return eventDate >= termStart && eventDate <= termEnd;
|
||
});
|
||
|
||
const quarterEvents = cachedEvents.filter((event) => {
|
||
const eventDate = new Date(event.start_date);
|
||
return eventDate >= quarterStart && eventDate <= quarterEnd;
|
||
});
|
||
|
||
// Calculate stats
|
||
quarterlyStats.totalEvents = termEvents.length;
|
||
|
||
const termAttendees = new Map<string, number>();
|
||
termEvents.forEach((event) => {
|
||
event.attendees?.forEach((attendee) => {
|
||
const count = termAttendees.get(attendee.user_id) || 0;
|
||
termAttendees.set(attendee.user_id, count + 1);
|
||
});
|
||
});
|
||
|
||
quarterlyStats.uniqueAttendees = termAttendees.size;
|
||
|
||
const quarterAttendees = new Map<string, number>();
|
||
quarterEvents.forEach((event) => {
|
||
event.attendees?.forEach((attendee) => {
|
||
const count = quarterAttendees.get(attendee.user_id) || 0;
|
||
quarterAttendees.set(attendee.user_id, count + 1);
|
||
});
|
||
});
|
||
|
||
quarterlyStats.recurringAttendees = Array.from(
|
||
quarterAttendees.values(),
|
||
).filter((count) => count > 1).length;
|
||
|
||
// Update the UI
|
||
const totalEventsEl = document.getElementById("totalEvents");
|
||
const uniqueAttendeesEl = document.getElementById("uniqueAttendees");
|
||
const recurringAttendeesEl =
|
||
document.getElementById("recurringAttendees");
|
||
|
||
if (totalEventsEl)
|
||
totalEventsEl.textContent = quarterlyStats.totalEvents.toString();
|
||
if (uniqueAttendeesEl)
|
||
uniqueAttendeesEl.textContent =
|
||
quarterlyStats.uniqueAttendees.toString();
|
||
if (recurringAttendeesEl)
|
||
recurringAttendeesEl.textContent =
|
||
quarterlyStats.recurringAttendees.toString();
|
||
} catch (error) {
|
||
console.error("Failed to calculate quarterly stats:", error);
|
||
}
|
||
}
|
||
|
||
// Add pagination event listeners
|
||
document.getElementById("firstPageBtn")?.addEventListener("click", () => {
|
||
if (currentPage > 1) {
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
}
|
||
});
|
||
|
||
document.getElementById("prevPageBtn")?.addEventListener("click", () => {
|
||
if (currentPage > 1) {
|
||
currentPage--;
|
||
fetchEvents();
|
||
}
|
||
});
|
||
|
||
document.getElementById("nextPageBtn")?.addEventListener("click", () => {
|
||
if (currentPage < totalPages) {
|
||
currentPage++;
|
||
fetchEvents();
|
||
}
|
||
});
|
||
|
||
document.getElementById("lastPageBtn")?.addEventListener("click", () => {
|
||
if (currentPage < totalPages) {
|
||
currentPage = totalPages;
|
||
fetchEvents();
|
||
}
|
||
});
|
||
|
||
// Add filter event listeners
|
||
// Time filter
|
||
document.querySelectorAll('input[name="timeFilter"]').forEach((radio) => {
|
||
radio.addEventListener("change", (e) => {
|
||
const target = e.target as HTMLInputElement;
|
||
filterState.time = target.value;
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
});
|
||
});
|
||
|
||
// Year filter
|
||
document.getElementById("yearCheckboxes")?.addEventListener("change", (e) => {
|
||
const target = e.target as HTMLInputElement;
|
||
if (!target.matches('input[type="checkbox"]')) return;
|
||
|
||
const allYearsCheckbox = target
|
||
.closest(".dropdown-content")
|
||
?.querySelector(
|
||
'input[type="checkbox"][value="all"]',
|
||
) as HTMLInputElement;
|
||
|
||
const yearInputs = Array.from(
|
||
target
|
||
.closest(".dropdown-content")
|
||
?.querySelectorAll('#yearCheckboxes input[type="checkbox"]') || [],
|
||
) as HTMLInputElement[];
|
||
|
||
if (target.value === "all" && target.checked) {
|
||
yearInputs.forEach((input) => {
|
||
input.checked = false;
|
||
});
|
||
filterState.year = ["all"];
|
||
document.getElementById("yearFilterLabel")!.textContent = "All Years";
|
||
} else {
|
||
const checkedYears = yearInputs
|
||
.filter((inp) => inp.checked)
|
||
.map((inp) => inp.value);
|
||
|
||
if (checkedYears.length === 0) {
|
||
allYearsCheckbox.checked = true;
|
||
filterState.year = ["all"];
|
||
document.getElementById("yearFilterLabel")!.textContent = "All Years";
|
||
} else {
|
||
allYearsCheckbox.checked = false;
|
||
filterState.year = checkedYears;
|
||
document.getElementById("yearFilterLabel")!.textContent =
|
||
checkedYears.length === 1
|
||
? checkedYears[0]
|
||
: `${checkedYears.length} Years Selected`;
|
||
}
|
||
}
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
});
|
||
|
||
// Add event listener for "All Years" checkbox
|
||
document
|
||
.querySelector('input[type="checkbox"][value="all"]')
|
||
?.addEventListener("change", (e) => {
|
||
const target = e.target as HTMLInputElement;
|
||
const yearInputs = Array.from(
|
||
document.querySelectorAll('#yearCheckboxes input[type="checkbox"]'),
|
||
) as HTMLInputElement[];
|
||
|
||
if (target.checked) {
|
||
yearInputs.forEach((input) => {
|
||
input.checked = false;
|
||
});
|
||
filterState.year = ["all"];
|
||
document.getElementById("yearFilterLabel")!.textContent = "All Years";
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
}
|
||
});
|
||
|
||
// Quarter filter
|
||
document
|
||
.getElementById("quarterDropdownContent")
|
||
?.addEventListener("change", (e) => {
|
||
const target = e.target as HTMLInputElement;
|
||
if (!target.matches('input[type="checkbox"]')) return;
|
||
|
||
const allQuartersCheckbox = target
|
||
.closest("#quarterDropdownContent")
|
||
?.querySelector(
|
||
'input[type="checkbox"][value="all"]',
|
||
) as HTMLInputElement;
|
||
|
||
const quarterInputs = Array.from(
|
||
target
|
||
.closest("#quarterDropdownContent")
|
||
?.querySelectorAll('input[type="checkbox"]') || [],
|
||
).filter(
|
||
(inp) => (inp as HTMLInputElement).value !== "all",
|
||
) as HTMLInputElement[];
|
||
|
||
if (target.value === "all" && target.checked) {
|
||
quarterInputs.forEach((input) => {
|
||
input.checked = false;
|
||
});
|
||
filterState.quarter = ["all"];
|
||
document.getElementById("quarterFilterLabel")!.textContent =
|
||
"All Quarters";
|
||
} else {
|
||
const checkedQuarters = quarterInputs
|
||
.filter((inp) => inp.checked)
|
||
.map((inp) => inp.value);
|
||
|
||
if (checkedQuarters.length === 0) {
|
||
allQuartersCheckbox.checked = true;
|
||
filterState.quarter = ["all"];
|
||
document.getElementById("quarterFilterLabel")!.textContent =
|
||
"All Quarters";
|
||
} else {
|
||
allQuartersCheckbox.checked = false;
|
||
filterState.quarter = checkedQuarters;
|
||
document.getElementById("quarterFilterLabel")!.textContent =
|
||
checkedQuarters.length === 1
|
||
? checkedQuarters[0].charAt(0).toUpperCase() +
|
||
checkedQuarters[0].slice(1)
|
||
: `${checkedQuarters.length} Quarters Selected`;
|
||
}
|
||
}
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
});
|
||
|
||
// Published filter
|
||
document
|
||
.querySelectorAll('input[name="publishedFilter"]')
|
||
.forEach((radio: Element) => {
|
||
(radio as HTMLInputElement).addEventListener("change", (e) => {
|
||
const target = e.target as HTMLInputElement;
|
||
filterState.published = target.value;
|
||
document.getElementById("publishedFilterLabel")!.textContent =
|
||
target.parentElement?.querySelector(".label-text")?.textContent ||
|
||
"All";
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
});
|
||
});
|
||
|
||
// Has Files filter
|
||
document
|
||
.querySelectorAll('input[name="hasFilesFilter"]')
|
||
.forEach((radio: Element) => {
|
||
(radio as HTMLInputElement).addEventListener("change", (e) => {
|
||
const target = e.target as HTMLInputElement;
|
||
filterState.hasFiles = target.value;
|
||
document.getElementById("hasFilesFilterLabel")!.textContent =
|
||
target.parentElement?.querySelector(".label-text")?.textContent ||
|
||
"All";
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
});
|
||
});
|
||
|
||
// Has Food filter
|
||
document
|
||
.querySelectorAll('input[name="hasFoodFilter"]')
|
||
.forEach((radio: Element) => {
|
||
(radio as HTMLInputElement).addEventListener("change", (e) => {
|
||
const target = e.target as HTMLInputElement;
|
||
filterState.hasFood = target.value;
|
||
document.getElementById("hasFoodFilterLabel")!.textContent =
|
||
target.parentElement?.querySelector(".label-text")?.textContent ||
|
||
"All";
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
});
|
||
});
|
||
|
||
// Search input with instant search (no debounce needed for cached data)
|
||
const searchInput = document.getElementById("searchInput");
|
||
if (searchInput) {
|
||
// Add input event for instant search
|
||
searchInput.addEventListener("input", (e) => {
|
||
const target = e.target as HTMLInputElement;
|
||
searchQuery = target.value.trim();
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
});
|
||
|
||
// Clear search on Escape key
|
||
searchInput.addEventListener("keydown", (e) => {
|
||
if (e.key === "Escape") {
|
||
(e.target as HTMLInputElement).value = "";
|
||
searchQuery = "";
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
}
|
||
});
|
||
}
|
||
|
||
// Per page select
|
||
document.getElementById("perPageSelect")?.addEventListener("change", (e) => {
|
||
const target = e.target as HTMLSelectElement;
|
||
perPage = parseInt(target.value);
|
||
currentPage = 1;
|
||
fetchEvents();
|
||
});
|
||
|
||
// Initial setup
|
||
if (typeof window !== "undefined") {
|
||
window.addEventListener("DOMContentLoaded", () => {
|
||
// Reset all filters to defaults
|
||
const timeFilterAll = document.querySelector(
|
||
'input[name="timeFilter"][value="all"]',
|
||
) as HTMLInputElement;
|
||
if (timeFilterAll) {
|
||
// Ensure the radio button is properly checked
|
||
timeFilterAll.checked = true;
|
||
filterState.time = "all";
|
||
}
|
||
|
||
// Reset year filter
|
||
const yearAllCheckbox = document.querySelector(
|
||
'input[type="checkbox"][value="all"]',
|
||
) as HTMLInputElement;
|
||
const yearCheckboxes = document.querySelectorAll(
|
||
'#yearCheckboxes input[type="checkbox"]',
|
||
);
|
||
if (yearAllCheckbox && yearCheckboxes) {
|
||
yearAllCheckbox.checked = true;
|
||
yearCheckboxes.forEach((checkbox: Element) => {
|
||
(checkbox as HTMLInputElement).checked = false;
|
||
});
|
||
filterState.year = ["all"];
|
||
document.getElementById("yearFilterLabel")!.textContent = "All Years";
|
||
}
|
||
|
||
// Reset quarter filter
|
||
const quarterAllCheckbox = document.querySelector(
|
||
'#quarterDropdownContent input[type="checkbox"][value="all"]',
|
||
) as HTMLInputElement;
|
||
const quarterCheckboxes = document.querySelectorAll(
|
||
'#quarterDropdownContent input[type="checkbox"]:not([value="all"])',
|
||
);
|
||
if (quarterAllCheckbox && quarterCheckboxes) {
|
||
quarterAllCheckbox.checked = true;
|
||
quarterCheckboxes.forEach((checkbox: Element) => {
|
||
(checkbox as HTMLInputElement).checked = false;
|
||
});
|
||
filterState.quarter = ["all"];
|
||
document.getElementById("quarterFilterLabel")!.textContent =
|
||
"All Quarters";
|
||
}
|
||
|
||
const publishedFilter = document.getElementById(
|
||
"publishedFilter",
|
||
) as HTMLSelectElement;
|
||
if (publishedFilter) publishedFilter.value = "all";
|
||
|
||
const hasFilesFilter = document.getElementById(
|
||
"hasFilesFilter",
|
||
) as HTMLSelectElement;
|
||
if (hasFilesFilter) hasFilesFilter.value = "all";
|
||
|
||
const hasFoodFilter = document.getElementById(
|
||
"hasFoodFilter",
|
||
) as HTMLSelectElement;
|
||
if (hasFoodFilter) hasFoodFilter.value = "all";
|
||
|
||
const searchInput = document.getElementById(
|
||
"searchInput",
|
||
) as HTMLInputElement;
|
||
if (searchInput) searchInput.value = "";
|
||
|
||
const perPageSelect = document.getElementById(
|
||
"perPageSelect",
|
||
) as HTMLSelectElement;
|
||
if (perPageSelect) perPageSelect.value = "5";
|
||
|
||
// Reset variables
|
||
searchQuery = "";
|
||
perPage = 5;
|
||
currentPage = 1;
|
||
|
||
// Reset filter state
|
||
filterState = {
|
||
time: "all",
|
||
year: ["all"],
|
||
quarter: ["all"],
|
||
published: "all",
|
||
hasFiles: "all",
|
||
hasFood: "all",
|
||
};
|
||
|
||
// Fetch events with reset filters
|
||
fetchEvents();
|
||
});
|
||
}
|
||
|
||
// Initial fetch
|
||
fetchEvents();
|
||
|
||
// Update the previewFileInEditModal function
|
||
window.previewFileInEditModal = async function (
|
||
url: string,
|
||
filename: string,
|
||
) {
|
||
const editFormSection = document.getElementById("editFormSection");
|
||
const previewSection = document.getElementById("editModalPreviewSection");
|
||
const editFilePreview = document.getElementById("editFilePreview");
|
||
const previewFileName = document.getElementById("editPreviewFileName");
|
||
const loadingSpinner = document.getElementById("editLoadingSpinner");
|
||
|
||
if (
|
||
!editFormSection ||
|
||
!previewSection ||
|
||
!editFilePreview ||
|
||
!previewFileName ||
|
||
!loadingSpinner
|
||
)
|
||
return;
|
||
|
||
// Hide form and show preview section
|
||
editFormSection.classList.add("hidden");
|
||
previewSection.classList.remove("hidden");
|
||
previewFileName.textContent = filename;
|
||
|
||
// Show loading spinner
|
||
loadingSpinner.classList.remove("hidden");
|
||
|
||
try {
|
||
// Dispatch a custom event to update the FilePreview
|
||
const event = new CustomEvent("updateFilePreview", {
|
||
detail: { url, filename },
|
||
});
|
||
editFilePreview.dispatchEvent(event);
|
||
} finally {
|
||
// Hide loading spinner
|
||
loadingSpinner.classList.add("hidden");
|
||
}
|
||
};
|
||
|
||
// Update the showFilePreview function
|
||
window.showFilePreview = function (file: { url: string; name: string }) {
|
||
// console.log("showFilePreview called with:", file);
|
||
window.previewFile(file.url, file.name);
|
||
};
|
||
|
||
// Add backToEditForm function
|
||
window.backToEditForm = function () {
|
||
const editFormSection = document.getElementById("editFormSection");
|
||
const previewSection = document.getElementById("editModalPreviewSection");
|
||
const editFilePreview = document.getElementById("editFilePreview");
|
||
const previewFileName = document.getElementById("editPreviewFileName");
|
||
|
||
if (
|
||
editFormSection &&
|
||
previewSection &&
|
||
editFilePreview &&
|
||
previewFileName
|
||
) {
|
||
editFormSection.classList.remove("hidden");
|
||
previewSection.classList.add("hidden");
|
||
// Reset the preview
|
||
const event = new CustomEvent("updateFilePreview", {
|
||
detail: { url: "", filename: "" },
|
||
});
|
||
editFilePreview.dispatchEvent(event);
|
||
previewFileName.textContent = "";
|
||
}
|
||
};
|
||
|
||
// Universal file preview function
|
||
window.previewFile = function (url: string, filename: string) {
|
||
// console.log("previewFile called with:", { url, filename });
|
||
const modal = document.getElementById(
|
||
"filePreviewModal",
|
||
) as HTMLDialogElement;
|
||
const filePreview = document.getElementById("officerFilePreview") as any;
|
||
const previewFileName = document.getElementById("previewFileName");
|
||
|
||
if (filePreview && modal && previewFileName) {
|
||
// console.log("Found all required elements");
|
||
// Update the filename display
|
||
previewFileName.textContent = filename;
|
||
|
||
// Show the modal
|
||
modal.showModal();
|
||
|
||
// Update the preview component
|
||
// console.log("Dispatching updateFilePreview event");
|
||
const event = new CustomEvent("updateFilePreview", {
|
||
detail: { url, filename },
|
||
});
|
||
filePreview.dispatchEvent(event);
|
||
} else {
|
||
console.error("Missing required elements:", {
|
||
modal: !!modal,
|
||
filePreview: !!filePreview,
|
||
previewFileName: !!previewFileName,
|
||
});
|
||
}
|
||
};
|
||
|
||
// Close file preview
|
||
window.closeFilePreview = function () {
|
||
// console.log("closeFilePreview called");
|
||
const modal = document.getElementById(
|
||
"filePreviewModal",
|
||
) as HTMLDialogElement;
|
||
const filePreview = document.getElementById("officerFilePreview") as any;
|
||
const previewFileName = document.getElementById("previewFileName");
|
||
|
||
if (modal && filePreview && previewFileName) {
|
||
// console.log("Resetting preview and closing modal");
|
||
// Reset the preview
|
||
const event = new CustomEvent("updateFilePreview", {
|
||
detail: { url: "", filename: "" },
|
||
});
|
||
filePreview.dispatchEvent(event);
|
||
previewFileName.textContent = "";
|
||
modal.close();
|
||
}
|
||
};
|
||
|
||
// Close event details modal
|
||
window.closeEventDetailsModal = function () {
|
||
const modal = document.getElementById(
|
||
"eventDetailsModal",
|
||
) as HTMLDialogElement;
|
||
const filesContent = document.getElementById("filesContent");
|
||
const attendeesContent = document.getElementById("attendeesContent");
|
||
|
||
if (modal) {
|
||
// Reset tab states
|
||
if (filesContent && attendeesContent) {
|
||
filesContent.classList.remove("hidden");
|
||
attendeesContent.classList.add("hidden");
|
||
}
|
||
|
||
// Close the modal
|
||
modal.close();
|
||
}
|
||
};
|
||
|
||
// Update all file preview buttons to use the universal preview
|
||
function updateFilePreviewButtons(files: string[], eventId: string) {
|
||
return files
|
||
.map((filename) => {
|
||
const fileUrl = fileManager.getFileUrl("events", eventId, filename);
|
||
const previewData = JSON.stringify({
|
||
url: fileUrl,
|
||
name: filename,
|
||
}).replace(/'/g, "\\'");
|
||
return `
|
||
<div class="flex items-center justify-between p-2 bg-base-200 rounded-lg${filesToDelete.has(filename) ? " opacity-50" : ""}" data-filename="${filename}">
|
||
<div class="flex items-center gap-2 flex-1 min-w-0">
|
||
<span class="truncate">${filename}</span>
|
||
</div>
|
||
<div class="flex gap-2 flex-shrink-0">
|
||
<button type="button" class="btn btn-ghost btn-xs" onclick='window.showFilePreviewOfficer(${previewData})'>
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
|
||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
|
||
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
|
||
</svg>
|
||
</button>
|
||
<div class="text-error">
|
||
${
|
||
filesToDelete.has(filename)
|
||
? `<button type="button" class="btn btn-ghost btn-xs" onclick="window.undoDeleteFile('${eventId}', '${filename}')">Undo</button>`
|
||
: `<button type="button" class="btn btn-ghost btn-xs text-error" onclick="window.deleteFile('${eventId}', '${filename}')">
|
||
<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="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
||
</svg>
|
||
</button>`
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
})
|
||
.join("");
|
||
}
|
||
|
||
// Add file input change handler to show selected files
|
||
document
|
||
.getElementById("editEventFiles")
|
||
?.addEventListener("change", function (e) {
|
||
const fileInput = e.target as HTMLInputElement;
|
||
const newFiles = document.getElementById("newFiles");
|
||
|
||
if (newFiles && fileInput.files) {
|
||
// Get existing files if any
|
||
const existingFiles = newFiles.querySelectorAll(".file-item");
|
||
const existingFilesArray = Array.from(existingFiles).map((item) => {
|
||
const nameSpan = item.querySelector(".file-name");
|
||
return nameSpan ? nameSpan.textContent : "";
|
||
});
|
||
|
||
// Store new files in the storage and update UI
|
||
Array.from(fileInput.files)
|
||
.filter((file) => !existingFilesArray.includes(file.name))
|
||
.forEach((file) => {
|
||
selectedFileStorage.set(file.name, file);
|
||
const fileDiv = document.createElement("div");
|
||
fileDiv.className =
|
||
"flex items-center justify-between p-2 bg-base-200 rounded-lg file-item";
|
||
fileDiv.innerHTML = `
|
||
<span class="truncate file-name">${file.name}</span>
|
||
<div class="flex gap-2">
|
||
<div class="badge badge-primary">New</div>
|
||
<button type="button" class="btn btn-ghost btn-xs text-error" onclick="this.closest('.file-item').remove(); selectedFileStorage.delete('${file.name}');">
|
||
<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="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
`;
|
||
newFiles.appendChild(fileDiv);
|
||
});
|
||
}
|
||
|
||
// Clear the file input
|
||
fileInput.value = "";
|
||
});
|
||
|
||
// Clear both storages when modal is closed
|
||
document.getElementById("editEventModal")?.addEventListener("close", () => {
|
||
selectedFileStorage.clear();
|
||
filesToDelete.clear();
|
||
});
|
||
|
||
// Add delete file handler
|
||
window.deleteFile = async function (eventId: string, filename: string) {
|
||
if (!confirm("Are you sure you want to remove this file?")) return;
|
||
|
||
try {
|
||
// Add file to deletion set
|
||
filesToDelete.add(filename);
|
||
|
||
// Update the UI to show file as pending deletion
|
||
const currentFiles = document.getElementById("currentFiles");
|
||
if (currentFiles) {
|
||
const fileElement = currentFiles.querySelector(
|
||
`[data-filename="${filename}"]`,
|
||
);
|
||
if (fileElement) {
|
||
fileElement.classList.add("opacity-50");
|
||
const deleteButton = fileElement.querySelector(".text-error");
|
||
if (deleteButton) {
|
||
deleteButton.innerHTML = `
|
||
<button type="button" class="btn btn-ghost btn-xs" onclick="window.undoDeleteFile('${eventId}', '${filename}')">
|
||
Undo
|
||
</button>
|
||
`;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Show success toast
|
||
toast.success(
|
||
`File "${filename}" marked for deletion. Save changes to confirm.`,
|
||
{
|
||
icon: "🗑️",
|
||
},
|
||
);
|
||
} catch (error) {
|
||
console.error("Failed to stage file deletion:", error);
|
||
toast.error("Failed to stage file deletion. Please try again.");
|
||
}
|
||
};
|
||
|
||
// Add undo delete function
|
||
window.undoDeleteFile = function (eventId: string, filename: string) {
|
||
filesToDelete.delete(filename);
|
||
|
||
// Update the UI to show file as restored
|
||
const currentFiles = document.getElementById("currentFiles");
|
||
if (currentFiles) {
|
||
const fileElement = currentFiles.querySelector(
|
||
`[data-filename="${filename}"]`,
|
||
);
|
||
if (fileElement) {
|
||
fileElement.classList.remove("opacity-50");
|
||
const undoButton = fileElement.querySelector(".text-error");
|
||
if (undoButton) {
|
||
undoButton.innerHTML = `
|
||
<button type="button" class="btn btn-ghost btn-xs text-error" onclick="window.deleteFile('${eventId}', '${filename}')">
|
||
<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="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
||
</svg>
|
||
</button>
|
||
`;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Show success toast
|
||
toast.success(`Restored file "${filename}"`, {
|
||
icon: "↩️",
|
||
});
|
||
};
|
||
|
||
// Create a custom event for file preview state management
|
||
const FILE_PREVIEW_STATE_CHANGE = "filePreviewStateChange";
|
||
|
||
// Universal file preview function for officer section
|
||
window.previewFileOfficer = function (url: string, filename: string) {
|
||
const modal = document.getElementById(
|
||
"filePreviewModal",
|
||
) as HTMLDialogElement;
|
||
|
||
if (!modal) {
|
||
console.error("Modal element not found");
|
||
return;
|
||
}
|
||
|
||
// Dispatch state change event before showing modal
|
||
window.dispatchEvent(
|
||
new CustomEvent(FILE_PREVIEW_STATE_CHANGE, {
|
||
detail: { url, filename },
|
||
}),
|
||
);
|
||
|
||
// Show modal after event dispatch
|
||
requestAnimationFrame(() => {
|
||
modal.showModal();
|
||
});
|
||
};
|
||
|
||
// Close file preview for officer section
|
||
window.closeFilePreviewOfficer = function () {
|
||
const modal = document.getElementById(
|
||
"filePreviewModal",
|
||
) as HTMLDialogElement;
|
||
const previewContent = document.getElementById("previewContent");
|
||
|
||
if (!modal || !previewContent) {
|
||
console.error("Required elements not found");
|
||
return;
|
||
}
|
||
|
||
// Reset the preview content
|
||
const filePreview = previewContent.querySelector("astro-island");
|
||
if (filePreview) {
|
||
const component = filePreview.querySelector("[data-astro-cid]");
|
||
if (component) {
|
||
component.setAttribute("url", "");
|
||
component.setAttribute("filename", "");
|
||
}
|
||
}
|
||
|
||
// Dispatch cleanup event
|
||
window.dispatchEvent(
|
||
new CustomEvent(FILE_PREVIEW_STATE_CHANGE, {
|
||
detail: { url: "", filename: "" },
|
||
}),
|
||
);
|
||
|
||
// Close modal after cleanup
|
||
requestAnimationFrame(() => {
|
||
modal.close();
|
||
});
|
||
};
|
||
|
||
// Update the showFilePreview function for officer section
|
||
window.showFilePreviewOfficer = async function (file: {
|
||
url: string;
|
||
name: string;
|
||
}) {
|
||
if (!file || !file.url || !file.name) {
|
||
console.error("Invalid file data provided");
|
||
toast.error("Invalid file data provided");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// Extract event ID from the URL
|
||
const urlParts = file.url.split("/");
|
||
const eventId = urlParts[urlParts.length - 2]; // Event ID is second to last in the URL
|
||
|
||
// Fetch fresh event data to ensure we have the latest file information
|
||
const freshEvent = await get.getOne<Event>("events", eventId);
|
||
|
||
// Verify the file still exists in the event
|
||
if (!freshEvent.files.includes(file.name)) {
|
||
throw new Error("File no longer exists in the event");
|
||
}
|
||
|
||
// Get fresh URL from FileManager to ensure we have the latest
|
||
const freshUrl = fileManager.getFileUrl("events", eventId, file.name);
|
||
|
||
// Show the preview with fresh URL
|
||
window.previewFileOfficer(freshUrl, file.name);
|
||
} catch (error) {
|
||
console.error("Failed to fetch fresh file data:", error);
|
||
toast.error(
|
||
"Failed to load file preview. The file may have been deleted or modified.",
|
||
);
|
||
}
|
||
};
|
||
|
||
// Make helper functions available globally
|
||
window.updateFilePreviewButtons = updateFilePreviewButtons;
|
||
|
||
// Add openAttendeesModal function
|
||
window.openAttendeesModal = function (event: Event) {
|
||
// console.log("Opening attendees modal for event:", event.id);
|
||
|
||
const modal = document.getElementById(
|
||
"attendeesModal",
|
||
) as HTMLDialogElement;
|
||
const modalTitle = document.getElementById("attendeesModalTitle");
|
||
|
||
if (!modal || !modalTitle) {
|
||
console.error("Missing required elements");
|
||
return;
|
||
}
|
||
|
||
// Set modal title
|
||
modalTitle.textContent = `Attendees - ${event.event_name}`;
|
||
|
||
// Dispatch custom event with event data
|
||
window.dispatchEvent(
|
||
new CustomEvent("updateAttendees", {
|
||
detail: {
|
||
eventId: event.id,
|
||
eventName: event.event_name,
|
||
},
|
||
}),
|
||
);
|
||
|
||
// Show modal
|
||
modal.showModal();
|
||
};
|
||
|
||
// Add event listeners when the document loads
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const modal = document.getElementById(
|
||
"filePreviewModal",
|
||
) as HTMLDialogElement;
|
||
if (modal) {
|
||
// Handle modal close via backdrop
|
||
modal.addEventListener("click", (e) => {
|
||
const modalDimensions = modal.getBoundingClientRect();
|
||
if (
|
||
e.clientX < modalDimensions.left ||
|
||
e.clientX > modalDimensions.right ||
|
||
e.clientY < modalDimensions.top ||
|
||
e.clientY > modalDimensions.bottom
|
||
) {
|
||
window.closeFilePreviewOfficer();
|
||
}
|
||
});
|
||
|
||
// Prevent modal content clicks from closing
|
||
const modalContent = modal.querySelector(".modal-box");
|
||
if (modalContent) {
|
||
modalContent.addEventListener("click", (e) => {
|
||
e.stopPropagation();
|
||
});
|
||
}
|
||
|
||
// Handle escape key
|
||
modal.addEventListener("cancel", (e) => {
|
||
e.preventDefault();
|
||
window.closeFilePreviewOfficer();
|
||
});
|
||
}
|
||
});
|
||
|
||
// Make refreshEvents available globally
|
||
window.refreshEvents = async function () {
|
||
try {
|
||
// Reset cache timestamp to force refresh
|
||
lastCacheUpdate = 0;
|
||
// Show loading state
|
||
const eventsList = document.getElementById("eventsList");
|
||
if (eventsList) {
|
||
eventsList.innerHTML = `
|
||
<div class="text-center py-8 text-base-content/70">
|
||
<Icon name="heroicons:arrow-path" class="h-12 w-12 mx-auto mb-4 opacity-50 animate-spin" />
|
||
<p>Refreshing events...</p>
|
||
</div>
|
||
`;
|
||
}
|
||
// Fetch events with reset cache
|
||
await fetchEvents();
|
||
} catch (error) {
|
||
console.error("Failed to refresh events:", error);
|
||
// Show error message
|
||
const eventsList = document.getElementById("eventsList");
|
||
if (eventsList) {
|
||
eventsList.innerHTML = `
|
||
<div class="alert alert-error">
|
||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
<span>Failed to refresh events. Please try again.</span>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
};
|
||
</script>
|