Fix toast hydration
This commit is contained in:
chark1es
parent
eb77c00540
commit
ef3e8f38d6
9 changed files with 855 additions and 931 deletions
|
|
@ -2,362 +2,297 @@
|
|||
import FilePreview from "./universal/FilePreview";
|
||||
import EventCheckIn from "./EventsSection/EventCheckIn";
|
||||
import EventLoad from "./EventsSection/EventLoad";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { Get } from "../../scripts/pocketbase/Get";
|
||||
import { toast } from "react-hot-toast";
|
||||
---
|
||||
|
||||
<div id="" class="">
|
||||
<div class="mb-4 sm:mb-6 px-4 sm:px-6">
|
||||
<h2 class="text-xl sm:text-2xl font-bold">Events</h2>
|
||||
<p class="opacity-70 text-sm sm:text-base">
|
||||
View and manage your IEEE UCSD events
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6 px-4 sm:px-6"
|
||||
>
|
||||
<!-- Event Check-in Card -->
|
||||
<div class="w-full">
|
||||
<EventCheckIn client:load />
|
||||
<div class="mb-4 sm:mb-6 px-4 sm:px-6">
|
||||
<h2 class="text-xl sm:text-2xl font-bold">Events</h2>
|
||||
<p class="opacity-70 text-sm sm:text-base">
|
||||
View and manage your IEEE UCSD events
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Event Registration Card -->
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="card bg-base-100 shadow-xl border border-base-200 opacity-50 cursor-not-allowed relative group h-full"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-base-100 opacity-0 group-hover:opacity-90 transition-opacity duration-300 flex items-center justify-center z-10"
|
||||
>
|
||||
<span class="text-base-content font-medium text-sm sm:text-base"
|
||||
>Coming Soon</span
|
||||
>
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6 px-4 sm:px-6"
|
||||
>
|
||||
<!-- Event Check-in Card -->
|
||||
<div class="w-full">
|
||||
<EventCheckIn client:load />
|
||||
</div>
|
||||
<div class="card-body p-4 sm:p-6">
|
||||
<h3 class="card-title text-base sm:text-lg mb-3 sm:mb-4">
|
||||
Event Registration
|
||||
</h3>
|
||||
<div class="form-control w-full">
|
||||
<label class="label">
|
||||
<span class="label-text text-sm sm:text-base"
|
||||
>Select an event to register</span
|
||||
>
|
||||
</label>
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
<select
|
||||
class="select select-bordered flex-1 text-sm sm:text-base h-10 min-h-[2.5rem] w-full"
|
||||
disabled
|
||||
>
|
||||
<option disabled selected>Pick an event</option>
|
||||
<option>Technical Workshop - Web Development</option>
|
||||
<option>Professional Development Workshop</option>
|
||||
<option>Social Event - Game Night</option>
|
||||
</select>
|
||||
<button
|
||||
class="btn btn-primary text-sm sm:text-base h-10 min-h-[2.5rem] w-full sm:w-[100px]"
|
||||
disabled>Register</button
|
||||
>
|
||||
|
||||
<!-- Event Registration Card -->
|
||||
<div class="w-full">
|
||||
<div
|
||||
class="card bg-base-100 shadow-xl border border-base-200 opacity-50 cursor-not-allowed relative group h-full"
|
||||
>
|
||||
<div
|
||||
class="absolute inset-0 bg-base-100 opacity-0 group-hover:opacity-90 transition-opacity duration-300 flex items-center justify-center z-10"
|
||||
>
|
||||
<span
|
||||
class="text-base-content font-medium text-sm sm:text-base"
|
||||
>Coming Soon</span
|
||||
>
|
||||
</div>
|
||||
<div class="card-body p-4 sm:p-6">
|
||||
<h3 class="card-title text-base sm:text-lg mb-3 sm:mb-4">
|
||||
Event Registration
|
||||
</h3>
|
||||
<div class="form-control w-full">
|
||||
<label class="label">
|
||||
<span class="label-text text-sm sm:text-base"
|
||||
>Select an event to register</span
|
||||
>
|
||||
</label>
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
<select
|
||||
class="select select-bordered flex-1 text-sm sm:text-base h-10 min-h-[2.5rem] w-full"
|
||||
disabled
|
||||
>
|
||||
<option disabled selected>Pick an event</option>
|
||||
<option
|
||||
>Technical Workshop - Web Development</option
|
||||
>
|
||||
<option
|
||||
>Professional Development Workshop</option
|
||||
>
|
||||
<option>Social Event - Game Night</option>
|
||||
</select>
|
||||
<button
|
||||
class="btn btn-primary text-sm sm:text-base h-10 min-h-[2.5rem] w-full sm:w-[100px]"
|
||||
disabled>Register</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<EventLoad client:load />
|
||||
<EventLoad client:load />
|
||||
</div>
|
||||
|
||||
<!-- Event Details Modal -->
|
||||
<dialog id="eventDetailsModal" class="modal">
|
||||
<div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6">
|
||||
<div class="flex justify-between items-center mb-3 sm:mb-4">
|
||||
<div class="flex items-center gap-2 sm:gap-3">
|
||||
<h3 class="font-bold text-base sm:text-lg" id="modalTitle">
|
||||
Event Files
|
||||
</h3>
|
||||
<button
|
||||
id="downloadAllBtn"
|
||||
class="btn btn-primary btn-sm gap-1 text-xs sm:text-sm"
|
||||
onclick="window.downloadAllFiles()"
|
||||
>
|
||||
<iconify-icon
|
||||
icon="heroicons:arrow-down-tray-20-solid"
|
||||
className="h-3 w-3 sm:h-4 sm:w-4"></iconify-icon>
|
||||
Download All
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-circle btn-ghost btn-sm sm:btn-md"
|
||||
onclick="window.closeEventDetailsModal()"
|
||||
>
|
||||
<iconify-icon icon="heroicons:x-mark" className="h-4 w-4 sm:h-6 sm:w-6"
|
||||
></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6">
|
||||
<div class="flex justify-between items-center mb-3 sm:mb-4">
|
||||
<div class="flex items-center gap-2 sm:gap-3">
|
||||
<h3 class="font-bold text-base sm:text-lg" id="modalTitle">
|
||||
Event Files
|
||||
</h3>
|
||||
<button
|
||||
id="downloadAllBtn"
|
||||
class="btn btn-primary btn-sm gap-1 text-xs sm:text-sm"
|
||||
onclick="window.downloadAllFiles()"
|
||||
>
|
||||
<iconify-icon
|
||||
icon="heroicons:arrow-down-tray-20-solid"
|
||||
className="h-3 w-3 sm:h-4 sm:w-4"></iconify-icon>
|
||||
Download All
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-circle btn-ghost btn-sm sm:btn-md"
|
||||
onclick="window.closeEventDetailsModal()"
|
||||
>
|
||||
<iconify-icon
|
||||
icon="heroicons:x-mark"
|
||||
className="h-4 w-4 sm:h-6 sm:w-6"></iconify-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="filesContent" class="space-y-3 sm:space-y-4">
|
||||
<!-- Files list will be populated here -->
|
||||
<div id="filesContent" class="space-y-3 sm:space-y-4">
|
||||
<!-- Files list will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button onclick="window.closeEventDetailsModal()">close</button>
|
||||
</form>
|
||||
<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-[90vw] sm:max-w-4xl p-4 sm:p-6">
|
||||
<div class="flex justify-between items-center mb-3 sm:mb-4">
|
||||
<div class="flex items-center gap-2 sm:gap-3">
|
||||
<button
|
||||
class="btn btn-ghost btn-sm text-xs sm:text-sm"
|
||||
onclick="window.closeFilePreviewEvents()">Close</button
|
||||
>
|
||||
<h3
|
||||
class="font-bold text-base sm:text-lg truncate"
|
||||
id="previewFileName"
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
<div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6">
|
||||
<div class="flex justify-between items-center mb-3 sm:mb-4">
|
||||
<div class="flex items-center gap-2 sm:gap-3">
|
||||
<button
|
||||
class="btn btn-ghost btn-sm text-xs sm:text-sm"
|
||||
onclick="window.closeFilePreviewEvents()">Close</button
|
||||
>
|
||||
<h3
|
||||
class="font-bold text-base sm:text-lg truncate"
|
||||
id="previewFileName"
|
||||
>
|
||||
</h3>
|
||||
</div>
|
||||
</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-md sm:loading-lg"
|
||||
></span>
|
||||
</div>
|
||||
<div id="previewContent" class="w-full">
|
||||
<FilePreview client:load isModal={true} />
|
||||
</div>
|
||||
</div>
|
||||
</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-md sm:loading-lg"></span>
|
||||
</div>
|
||||
<div id="previewContent" class="w-full">
|
||||
<FilePreview client:load isModal={true} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button onclick="window.closeFilePreviewEvents()">close</button>
|
||||
</form>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button onclick="window.closeFilePreviewEvents()">close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<script>
|
||||
import JSZip from "jszip";
|
||||
import { toast } from "react-hot-toast";
|
||||
import JSZip from "jszip";
|
||||
|
||||
// Toast management system
|
||||
const createToast = (
|
||||
message: string,
|
||||
type: "success" | "error" | "warning" = "success",
|
||||
) => {
|
||||
let toastContainer = document.querySelector(".toast-container");
|
||||
if (!toastContainer) {
|
||||
toastContainer = document.createElement("div");
|
||||
toastContainer.className = "toast-container fixed bottom-4 right-4 z-50";
|
||||
document.body.appendChild(toastContainer);
|
||||
// Add styles to the document
|
||||
const style = document.createElement("style");
|
||||
style.textContent = `
|
||||
/* Custom styles for the event details modal */
|
||||
.event-details-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
const existingToasts = document.querySelectorAll(".toast-container .toast");
|
||||
if (existingToasts.length >= 2) {
|
||||
const oldestToast = existingToasts[0];
|
||||
oldestToast.classList.add("toast-exit");
|
||||
setTimeout(() => oldestToast.remove(), 150);
|
||||
}
|
||||
|
||||
// Update positions of existing toasts
|
||||
existingToasts.forEach((t) => {
|
||||
const toast = t as HTMLElement;
|
||||
const currentIndex = parseInt(toast.getAttribute("data-index") || "0");
|
||||
toast.setAttribute("data-index", (currentIndex + 1).toString());
|
||||
});
|
||||
|
||||
const toast = document.createElement("div");
|
||||
toast.className = "toast translate-x-full";
|
||||
toast.setAttribute("data-index", "0");
|
||||
|
||||
// Update alert styling based on type
|
||||
const alertClass =
|
||||
type === "success"
|
||||
? "alert-success bg-success text-success-content"
|
||||
: type === "error"
|
||||
? "alert-error bg-error text-error-content"
|
||||
: "alert-warning bg-warning text-warning-content";
|
||||
|
||||
toast.innerHTML = `
|
||||
<div class="alert ${alertClass} shadow-lg min-w-[300px]">
|
||||
<div class="flex items-center gap-2">
|
||||
${
|
||||
type === "success"
|
||||
? '<iconify-icon icon="heroicons:check-circle" class="stroke-current shrink-0 h-6 w-6"></iconify-icon>'
|
||||
: type === "error"
|
||||
? '<iconify-icon icon="heroicons:x-circle" class="stroke-current shrink-0 h-6 w-6"></iconify-icon>'
|
||||
: '<iconify-icon icon="heroicons:exclamation-triangle" class="stroke-current shrink-0 w-6"></iconify-icon>'
|
||||
}
|
||||
<span>${message}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
toastContainer.appendChild(toast);
|
||||
|
||||
// Force a reflow to ensure the animation triggers
|
||||
toast.offsetHeight;
|
||||
|
||||
// Add the transition class and remove transform
|
||||
toast.classList.add("transition-all", "duration-300", "ease-out");
|
||||
requestAnimationFrame(() => {
|
||||
toast.classList.remove("translate-x-full");
|
||||
});
|
||||
|
||||
// Setup exit animation
|
||||
setTimeout(() => {
|
||||
toast.classList.add("toast-exit");
|
||||
setTimeout(() => toast.remove(), 150);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// Add styles to the document
|
||||
const style = document.createElement("style");
|
||||
style.textContent = `
|
||||
.toast-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
pointer-events: none;
|
||||
}
|
||||
.toast {
|
||||
pointer-events: auto;
|
||||
transform: translateX(0);
|
||||
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
}
|
||||
.toast-exit {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
.toast.translate-x-full {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.toast-container .toast {
|
||||
transform: translateY(calc((1 - attr(data-index number)) * -0.25rem));
|
||||
}
|
||||
.toast-container .toast[data-index="0"] {
|
||||
transform: translateY(0);
|
||||
}
|
||||
.toast-container .toast[data-index="1"] {
|
||||
transform: translateY(-0.025rem);
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.event-details-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Remove custom toast styles since we're using react-hot-toast */
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Add helper functions for file preview
|
||||
function getFileType(filename: string): string {
|
||||
const extension = filename.split(".").pop()?.toLowerCase();
|
||||
const mimeTypes: { [key: string]: string } = {
|
||||
pdf: "application/pdf",
|
||||
jpg: "image/jpeg",
|
||||
jpeg: "image/jpeg",
|
||||
png: "image/png",
|
||||
gif: "image/gif",
|
||||
mp4: "video/mp4",
|
||||
mp3: "audio/mpeg",
|
||||
txt: "text/plain",
|
||||
doc: "application/msword",
|
||||
docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
xls: "application/vnd.ms-excel",
|
||||
xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
json: "application/json",
|
||||
// Add helper functions for file preview
|
||||
function getFileType(filename: string): string {
|
||||
const extension = filename.split(".").pop()?.toLowerCase();
|
||||
const mimeTypes: { [key: string]: string } = {
|
||||
pdf: "application/pdf",
|
||||
jpg: "image/jpeg",
|
||||
jpeg: "image/jpeg",
|
||||
png: "image/png",
|
||||
gif: "image/gif",
|
||||
mp4: "video/mp4",
|
||||
mp3: "audio/mpeg",
|
||||
txt: "text/plain",
|
||||
doc: "application/msword",
|
||||
docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
||||
xls: "application/vnd.ms-excel",
|
||||
xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
json: "application/json",
|
||||
};
|
||||
|
||||
return mimeTypes[extension || ""] || "application/octet-stream";
|
||||
}
|
||||
|
||||
// Universal file preview function for events section
|
||||
window.previewFileEvents = function (url: string, filename: string) {
|
||||
console.log("previewFileEvents called with:", { url, filename });
|
||||
const modal = document.getElementById(
|
||||
"filePreviewModal"
|
||||
) as HTMLDialogElement;
|
||||
const previewFileName = document.getElementById("previewFileName");
|
||||
const previewContent = document.getElementById("previewContent");
|
||||
|
||||
if (modal && previewFileName && previewContent) {
|
||||
console.log("Found all required elements");
|
||||
// Update the filename display
|
||||
previewFileName.textContent = filename;
|
||||
|
||||
// Show the modal
|
||||
modal.showModal();
|
||||
|
||||
// Dispatch state change event
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("filePreviewStateChange", {
|
||||
detail: { url, filename },
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return mimeTypes[extension || ""] || "application/octet-stream";
|
||||
}
|
||||
// Close file preview for events section
|
||||
window.closeFilePreviewEvents = function () {
|
||||
console.log("closeFilePreviewEvents called");
|
||||
const modal = document.getElementById(
|
||||
"filePreviewModal"
|
||||
) as HTMLDialogElement;
|
||||
const previewFileName = document.getElementById("previewFileName");
|
||||
const previewContent = document.getElementById("previewContent");
|
||||
|
||||
// Universal file preview function for events section
|
||||
window.previewFileEvents = function (url: string, filename: string) {
|
||||
console.log("previewFileEvents called with:", { url, filename });
|
||||
const modal = document.getElementById(
|
||||
"filePreviewModal",
|
||||
) as HTMLDialogElement;
|
||||
const previewFileName = document.getElementById("previewFileName");
|
||||
const previewContent = document.getElementById("previewContent");
|
||||
if (modal && previewFileName && previewContent) {
|
||||
console.log("Resetting preview and closing modal");
|
||||
// Reset the preview state
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("filePreviewStateChange", {
|
||||
detail: { url: "", filename: "" },
|
||||
})
|
||||
);
|
||||
|
||||
if (modal && previewFileName && previewContent) {
|
||||
console.log("Found all required elements");
|
||||
// Update the filename display
|
||||
previewFileName.textContent = filename;
|
||||
// Reset the UI
|
||||
previewFileName.textContent = "";
|
||||
|
||||
// Show the modal
|
||||
modal.showModal();
|
||||
// Close the modal
|
||||
modal.close();
|
||||
}
|
||||
};
|
||||
|
||||
// Dispatch state change event
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("filePreviewStateChange", {
|
||||
detail: { url, filename },
|
||||
}),
|
||||
);
|
||||
}
|
||||
};
|
||||
// Update the showFilePreview function for events section
|
||||
window.showFilePreviewEvents = function (file: {
|
||||
url: string;
|
||||
name: string;
|
||||
}) {
|
||||
console.log("showFilePreviewEvents called with:", file);
|
||||
window.previewFileEvents(file.url, file.name);
|
||||
};
|
||||
|
||||
// Close file preview for events section
|
||||
window.closeFilePreviewEvents = function () {
|
||||
console.log("closeFilePreviewEvents called");
|
||||
const modal = document.getElementById(
|
||||
"filePreviewModal",
|
||||
) as HTMLDialogElement;
|
||||
const previewFileName = document.getElementById("previewFileName");
|
||||
const previewContent = document.getElementById("previewContent");
|
||||
// Update the openDetailsModal function to use the events-specific preview
|
||||
window.openDetailsModal = function (event: any) {
|
||||
const modal = document.getElementById(
|
||||
"eventDetailsModal"
|
||||
) as HTMLDialogElement;
|
||||
const filesContent = document.getElementById(
|
||||
"filesContent"
|
||||
) as HTMLDivElement;
|
||||
|
||||
if (modal && previewFileName && previewContent) {
|
||||
console.log("Resetting preview and closing modal");
|
||||
// Reset the preview state
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("filePreviewStateChange", {
|
||||
detail: { url: "", filename: "" },
|
||||
}),
|
||||
);
|
||||
// Check if event has ended
|
||||
const eventEndDate = new Date(event.end_date);
|
||||
const now = new Date();
|
||||
|
||||
// Reset the UI
|
||||
previewFileName.textContent = "";
|
||||
if (eventEndDate > now) {
|
||||
toast("Files are only available after the event has ended.", {
|
||||
icon: "⚠️",
|
||||
style: {
|
||||
borderRadius: "10px",
|
||||
background: "#FFC107",
|
||||
color: "#000",
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Close the modal
|
||||
modal.close();
|
||||
}
|
||||
};
|
||||
// Reset state
|
||||
window.currentEventId = event.id;
|
||||
if (filesContent) filesContent.classList.remove("hidden");
|
||||
|
||||
// Update the showFilePreview function for events section
|
||||
window.showFilePreviewEvents = function (file: {
|
||||
url: string;
|
||||
name: string;
|
||||
}) {
|
||||
console.log("showFilePreviewEvents called with:", file);
|
||||
window.previewFileEvents(file.url, file.name);
|
||||
};
|
||||
// Populate files content
|
||||
if (
|
||||
event.files &&
|
||||
Array.isArray(event.files) &&
|
||||
event.files.length > 0
|
||||
) {
|
||||
const baseUrl = "https://pocketbase.ieeeucsd.org";
|
||||
const collectionId = "events";
|
||||
const recordId = event.id;
|
||||
|
||||
// Update the openDetailsModal function to use the events-specific preview
|
||||
window.openDetailsModal = function (event: any) {
|
||||
const modal = document.getElementById(
|
||||
"eventDetailsModal",
|
||||
) as HTMLDialogElement;
|
||||
const filesContent = document.getElementById(
|
||||
"filesContent",
|
||||
) as HTMLDivElement;
|
||||
|
||||
// Check if event has ended
|
||||
const eventEndDate = new Date(event.end_date);
|
||||
const now = new Date();
|
||||
|
||||
if (eventEndDate > now) {
|
||||
createToast(
|
||||
"Files are only available after the event has ended.",
|
||||
"warning",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Reset state
|
||||
window.currentEventId = event.id;
|
||||
if (filesContent) filesContent.classList.remove("hidden");
|
||||
|
||||
// Populate files content
|
||||
if (event.files && Array.isArray(event.files) && event.files.length > 0) {
|
||||
const baseUrl = "https://pocketbase.ieeeucsd.org";
|
||||
const collectionId = "events";
|
||||
const recordId = event.id;
|
||||
|
||||
filesContent.innerHTML = `
|
||||
filesContent.innerHTML = `
|
||||
<div class="overflow-x-auto">
|
||||
<table class="table table-zebra w-full">
|
||||
<thead>
|
||||
|
|
@ -368,14 +303,14 @@ import EventLoad from "./EventsSection/EventLoad";
|
|||
</thead>
|
||||
<tbody>
|
||||
${event.files
|
||||
.map((file: string) => {
|
||||
const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${file}`;
|
||||
const fileType = getFileType(file);
|
||||
const previewData = JSON.stringify({
|
||||
url: fileUrl,
|
||||
name: file,
|
||||
}).replace(/'/g, "\\'");
|
||||
return `
|
||||
.map((file: string) => {
|
||||
const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${file}`;
|
||||
const fileType = getFileType(file);
|
||||
const previewData = JSON.stringify({
|
||||
url: fileUrl,
|
||||
name: file,
|
||||
}).replace(/'/g, "\\'");
|
||||
return `
|
||||
<tr>
|
||||
<td>${file}</td>
|
||||
<td class="text-right">
|
||||
|
|
@ -388,124 +323,123 @@ import EventLoad from "./EventsSection/EventLoad";
|
|||
</td>
|
||||
</tr>
|
||||
`;
|
||||
})
|
||||
.join("")}
|
||||
})
|
||||
.join("")}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
filesContent.innerHTML = `
|
||||
} else {
|
||||
filesContent.innerHTML = `
|
||||
<div class="text-center py-8 text-base-content/70">
|
||||
<iconify-icon icon="heroicons:document-duplicate" className="h-12 w-12 mx-auto mb-4 opacity-50" />
|
||||
<p>No files attached to this event</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
modal.showModal();
|
||||
};
|
||||
|
||||
// Add downloadAllFiles function
|
||||
window.downloadAllFiles = async function () {
|
||||
const downloadBtn = document.getElementById(
|
||||
"downloadAllBtn",
|
||||
) as HTMLButtonElement;
|
||||
if (!downloadBtn) return;
|
||||
const originalBtnContent = downloadBtn.innerHTML;
|
||||
|
||||
try {
|
||||
// Show loading state
|
||||
downloadBtn.innerHTML =
|
||||
'<span class="loading loading-spinner loading-xs"></span> Preparing...';
|
||||
downloadBtn.disabled = true;
|
||||
|
||||
const zip = new JSZip();
|
||||
|
||||
// Get current event files
|
||||
const baseUrl = "https://pocketbase.ieeeucsd.org";
|
||||
const collectionId = "events";
|
||||
const recordId = window.currentEventId;
|
||||
|
||||
// Get the current event from the window object
|
||||
const eventDataId = `event_${window.currentEventId}`;
|
||||
const event = window[eventDataId];
|
||||
|
||||
if (!event || !event.files || event.files.length === 0) {
|
||||
throw new Error("No files available to download");
|
||||
}
|
||||
|
||||
// Download each file and add to zip
|
||||
const filePromises = event.files.map(async (filename: string) => {
|
||||
const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${filename}`;
|
||||
const response = await fetch(fileUrl);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to download ${filename}`);
|
||||
}
|
||||
const blob = await response.blob();
|
||||
zip.file(filename, blob);
|
||||
});
|
||||
|
||||
await Promise.all(filePromises);
|
||||
modal.showModal();
|
||||
};
|
||||
|
||||
// Generate and download zip
|
||||
const zipBlob = await zip.generateAsync({ type: "blob" });
|
||||
const downloadUrl = URL.createObjectURL(zipBlob);
|
||||
const link = document.createElement("a");
|
||||
link.href = downloadUrl;
|
||||
link.download = `${event.event_name}_files.zip`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(downloadUrl);
|
||||
// Add downloadAllFiles function
|
||||
window.downloadAllFiles = async function () {
|
||||
const downloadBtn = document.getElementById(
|
||||
"downloadAllBtn"
|
||||
) as HTMLButtonElement;
|
||||
if (!downloadBtn) return;
|
||||
const originalBtnContent = downloadBtn.innerHTML;
|
||||
|
||||
// Show success message
|
||||
createToast("Files downloaded successfully!", "success");
|
||||
} catch (error: any) {
|
||||
console.error("Failed to download files:", error);
|
||||
createToast(
|
||||
error?.message || "Failed to download files. Please try again.",
|
||||
"error",
|
||||
);
|
||||
} finally {
|
||||
// Reset button state
|
||||
downloadBtn.innerHTML = originalBtnContent;
|
||||
downloadBtn.disabled = false;
|
||||
}
|
||||
};
|
||||
try {
|
||||
// Show loading state
|
||||
downloadBtn.innerHTML =
|
||||
'<span class="loading loading-spinner loading-xs"></span> Preparing...';
|
||||
downloadBtn.disabled = true;
|
||||
|
||||
// Close event details modal
|
||||
window.closeEventDetailsModal = function () {
|
||||
const modal = document.getElementById(
|
||||
"eventDetailsModal",
|
||||
) as HTMLDialogElement;
|
||||
const filesContent = document.getElementById("filesContent");
|
||||
const zip = new JSZip();
|
||||
|
||||
if (modal) {
|
||||
// Reset the files content
|
||||
if (filesContent) {
|
||||
filesContent.innerHTML = "";
|
||||
}
|
||||
// Get current event files
|
||||
const baseUrl = "https://pocketbase.ieeeucsd.org";
|
||||
const collectionId = "events";
|
||||
const recordId = window.currentEventId;
|
||||
|
||||
// Reset any other state if needed
|
||||
window.currentEventId = "";
|
||||
// Get the current event from the window object
|
||||
const eventDataId = `event_${window.currentEventId}`;
|
||||
const event = window[eventDataId];
|
||||
|
||||
// Close the modal
|
||||
modal.close();
|
||||
}
|
||||
};
|
||||
if (!event || !event.files || event.files.length === 0) {
|
||||
throw new Error("No files available to download");
|
||||
}
|
||||
|
||||
// Make helper functions available globally
|
||||
window.showFilePreview = window.showFilePreviewEvents;
|
||||
window.handlePreviewError = function () {
|
||||
const previewContent = document.getElementById("previewContent");
|
||||
if (previewContent) {
|
||||
previewContent.innerHTML = `
|
||||
// Download each file and add to zip
|
||||
const filePromises = event.files.map(async (filename: string) => {
|
||||
const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${filename}`;
|
||||
const response = await fetch(fileUrl);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to download ${filename}`);
|
||||
}
|
||||
const blob = await response.blob();
|
||||
zip.file(filename, blob);
|
||||
});
|
||||
|
||||
await Promise.all(filePromises);
|
||||
|
||||
// Generate and download zip
|
||||
const zipBlob = await zip.generateAsync({ type: "blob" });
|
||||
const downloadUrl = URL.createObjectURL(zipBlob);
|
||||
const link = document.createElement("a");
|
||||
link.href = downloadUrl;
|
||||
link.download = `${event.event_name}_files.zip`;
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
URL.revokeObjectURL(downloadUrl);
|
||||
|
||||
// Show success message
|
||||
toast.success("Files downloaded successfully!");
|
||||
} catch (error: any) {
|
||||
console.error("Failed to download files:", error);
|
||||
toast.error(
|
||||
error?.message || "Failed to download files. Please try again."
|
||||
);
|
||||
} finally {
|
||||
// Reset button state
|
||||
downloadBtn.innerHTML = originalBtnContent;
|
||||
downloadBtn.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Close event details modal
|
||||
window.closeEventDetailsModal = function () {
|
||||
const modal = document.getElementById(
|
||||
"eventDetailsModal"
|
||||
) as HTMLDialogElement;
|
||||
const filesContent = document.getElementById("filesContent");
|
||||
|
||||
if (modal) {
|
||||
// Reset the files content
|
||||
if (filesContent) {
|
||||
filesContent.innerHTML = "";
|
||||
}
|
||||
|
||||
// Reset any other state if needed
|
||||
window.currentEventId = "";
|
||||
|
||||
// Close the modal
|
||||
modal.close();
|
||||
}
|
||||
};
|
||||
|
||||
// Make helper functions available globally
|
||||
window.showFilePreview = window.showFilePreviewEvents;
|
||||
window.handlePreviewError = function () {
|
||||
const previewContent = document.getElementById("previewContent");
|
||||
if (previewContent) {
|
||||
previewContent.innerHTML = `
|
||||
<div class="alert alert-error">
|
||||
<Icon icon="heroicons:x-circle" className="h-6 w-6" />
|
||||
<span>Failed to load file preview</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { SendLog } from "../../../scripts/pocketbase/SendLog";
|
|||
import { DataSyncService } from "../../../scripts/database/DataSyncService";
|
||||
import { Collections } from "../../../schemas/pocketbase/schema";
|
||||
import { Icon } from "@iconify/react";
|
||||
import toast from "react-hot-toast";
|
||||
import type { Event, AttendeeEntry } from "../../../schemas/pocketbase";
|
||||
|
||||
// Extended Event interface with additional properties needed for this component
|
||||
|
|
@ -17,77 +18,6 @@ interface ExtendedEvent extends Event {
|
|||
// When fetching events, UTC dates are converted to local time.
|
||||
// When saving events, local dates are converted back to UTC.
|
||||
|
||||
// Toast management system
|
||||
const createToast = (
|
||||
message: string,
|
||||
type: "success" | "error" | "warning" = "success"
|
||||
) => {
|
||||
let toastContainer = document.querySelector(".toast-container");
|
||||
if (!toastContainer) {
|
||||
toastContainer = document.createElement("div");
|
||||
toastContainer.className = "toast-container fixed bottom-4 right-4 z-50";
|
||||
document.body.appendChild(toastContainer);
|
||||
}
|
||||
|
||||
const existingToasts = document.querySelectorAll(".toast-container .toast");
|
||||
if (existingToasts.length >= 2) {
|
||||
const oldestToast = existingToasts[0];
|
||||
oldestToast.classList.add("toast-exit");
|
||||
setTimeout(() => oldestToast.remove(), 150);
|
||||
}
|
||||
|
||||
// Update positions of existing toasts
|
||||
existingToasts.forEach((t) => {
|
||||
const toast = t as HTMLElement;
|
||||
const currentIndex = parseInt(toast.getAttribute("data-index") || "0");
|
||||
toast.setAttribute("data-index", (currentIndex + 1).toString());
|
||||
});
|
||||
|
||||
const toast = document.createElement("div");
|
||||
toast.className = "toast translate-x-full";
|
||||
toast.setAttribute("data-index", "0");
|
||||
|
||||
// Update alert styling based on type
|
||||
const alertClass =
|
||||
type === "success"
|
||||
? "alert-success bg-success text-success-content"
|
||||
: type === "error"
|
||||
? "alert-error bg-error text-error-content"
|
||||
: "alert-warning bg-warning text-warning-content";
|
||||
|
||||
const iconName = type === "success"
|
||||
? "heroicons:check-circle"
|
||||
: type === "error"
|
||||
? "heroicons:x-circle"
|
||||
: "heroicons:exclamation-triangle";
|
||||
|
||||
toast.innerHTML = `
|
||||
<div class="alert ${alertClass} shadow-lg min-w-[300px]">
|
||||
<div class="flex items-center gap-2">
|
||||
<iconify-icon icon="${iconName}" width="20" height="20"></iconify-icon>
|
||||
<span>${message}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
toastContainer.appendChild(toast);
|
||||
|
||||
// Force a reflow to ensure the animation triggers
|
||||
toast.offsetHeight;
|
||||
|
||||
// Add the transition class and remove transform
|
||||
toast.classList.add("transition-all", "duration-300", "ease-out");
|
||||
requestAnimationFrame(() => {
|
||||
toast.classList.remove("translate-x-full");
|
||||
});
|
||||
|
||||
// Setup exit animation
|
||||
setTimeout(() => {
|
||||
toast.classList.add("toast-exit");
|
||||
setTimeout(() => toast.remove(), 150);
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
const EventCheckIn = () => {
|
||||
const [currentCheckInEvent, setCurrentCheckInEvent] = useState<Event | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
|
@ -101,7 +31,7 @@ const EventCheckIn = () => {
|
|||
|
||||
const currentUser = auth.getCurrentUser();
|
||||
if (!currentUser) {
|
||||
createToast("You must be logged in to check in to events", "error");
|
||||
toast.error("You must be logged in to check in to events");
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -151,7 +81,7 @@ const EventCheckIn = () => {
|
|||
await completeCheckIn(event, null);
|
||||
}
|
||||
} catch (error: any) {
|
||||
createToast(error?.message || "Failed to check in to event", "error");
|
||||
toast.error(error?.message || "Failed to check in to event");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -171,7 +101,7 @@ const EventCheckIn = () => {
|
|||
const userId = auth.getUserId();
|
||||
|
||||
if (!userId) {
|
||||
createToast("You must be logged in to check in to an event", "error");
|
||||
toast.error("You must be logged in to check in to an event");
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -184,7 +114,14 @@ const EventCheckIn = () => {
|
|||
);
|
||||
|
||||
if (isAlreadyCheckedIn) {
|
||||
createToast("You are already checked in to this event", "warning");
|
||||
toast("You are already checked in to this event", {
|
||||
icon: '⚠️',
|
||||
style: {
|
||||
borderRadius: '10px',
|
||||
background: '#FFC107',
|
||||
color: '#000',
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -243,12 +180,11 @@ const EventCheckIn = () => {
|
|||
}
|
||||
|
||||
// Show success message with points if awarded
|
||||
createToast(
|
||||
toast.success(
|
||||
`Successfully checked in to ${event.event_name}${event.points_to_reward > 0
|
||||
? ` (+${event.points_to_reward} points!)`
|
||||
: ""
|
||||
}`,
|
||||
"success"
|
||||
}`
|
||||
);
|
||||
|
||||
// Log the check-in
|
||||
|
|
@ -265,7 +201,7 @@ const EventCheckIn = () => {
|
|||
setFoodInput("");
|
||||
}
|
||||
} catch (error: any) {
|
||||
createToast(error?.message || "Failed to check in to event", "error");
|
||||
toast.error(error?.message || "Failed to check in to event");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -296,7 +232,14 @@ const EventCheckIn = () => {
|
|||
input.value = "";
|
||||
});
|
||||
} else {
|
||||
createToast("Please enter an event code", "warning");
|
||||
toast("Please enter an event code", {
|
||||
icon: '⚠️',
|
||||
style: {
|
||||
borderRadius: '10px',
|
||||
background: '#FFC107',
|
||||
color: '#000',
|
||||
},
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,10 @@ import { Get } from "../../scripts/pocketbase/Get";
|
|||
import EventRequestForm from "./Officer_EventRequestForm/EventRequestForm";
|
||||
import UserEventRequests from "./Officer_EventRequestForm/UserEventRequests";
|
||||
import { Collections } from "../../schemas/pocketbase/schema";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import { Icon } from "astro-icon/components";
|
||||
import { Create } from "../../scripts/pocketbase/Create";
|
||||
import { Update } from "../../scripts/pocketbase/Update";
|
||||
import { toast } from "react-hot-toast";
|
||||
|
||||
// Import the EventRequest type from UserEventRequests to ensure consistency
|
||||
import type { EventRequest as UserEventRequest } from "./Officer_EventRequestForm/UserEventRequests";
|
||||
|
|
@ -118,8 +121,9 @@ if (auth.isAuthenticated()) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Toast container for notifications -->
|
||||
<Toaster client:load position="bottom-right" />
|
||||
<div class="dashboard-section hidden" id="eventRequestFormSection">
|
||||
<!-- ... existing code ... -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Import the DataSyncService for client-side use
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
---
|
||||
import { Authentication } from "../../scripts/pocketbase/Authentication";
|
||||
import { Get } from "../../scripts/pocketbase/Get";
|
||||
import { Toaster } from "react-hot-toast";
|
||||
import { toast } from "react-hot-toast";
|
||||
import EventRequestManagementTable from "./Officer_EventRequestManagement/EventRequestManagementTable";
|
||||
import type { EventRequest } from "../../schemas/pocketbase";
|
||||
import { Collections } from "../../schemas/pocketbase/schema";
|
||||
import { Icon } from "astro-icon/components";
|
||||
|
||||
// Get instances
|
||||
const get = Get.getInstance();
|
||||
|
|
@ -152,9 +153,6 @@ try {
|
|||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
<!-- Toast container for notifications -->
|
||||
<Toaster client:load position="bottom-right" />
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { Authentication } from '../../../scripts/pocketbase/Authentication';
|
||||
import { DataSyncService } from '../../../scripts/database/DataSyncService';
|
||||
|
|
@ -7,7 +7,6 @@ import ReceiptForm from './ReceiptForm';
|
|||
import { toast } from 'react-hot-toast';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import FilePreview from '../universal/FilePreview';
|
||||
import ToastProvider from './ToastProvider';
|
||||
import type { ItemizedExpense, Reimbursement, Receipt } from '../../../schemas/pocketbase';
|
||||
|
||||
interface ReceiptFormData {
|
||||
|
|
@ -310,7 +309,6 @@ export default function ReimbursementForm() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<ToastProvider />
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { FileManager } from '../../../scripts/pocketbase/FileManager';
|
|||
import FilePreview from '../universal/FilePreview';
|
||||
import { toast } from 'react-hot-toast';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import ToastProvider from './ToastProvider';
|
||||
import type { ItemizedExpense, Reimbursement, Receipt } from '../../../schemas/pocketbase';
|
||||
import { DataSyncService } from '../../../scripts/database/DataSyncService';
|
||||
import { Collections } from '../../../schemas/pocketbase/schema';
|
||||
|
|
@ -355,7 +354,6 @@ export default function ReimbursementList() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<ToastProvider />
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
import { Toaster } from 'react-hot-toast';
|
||||
|
||||
export default function ToastProvider() {
|
||||
return (
|
||||
<Toaster
|
||||
position="top-center"
|
||||
reverseOrder={false}
|
||||
toastOptions={{
|
||||
duration: 5000,
|
||||
style: {
|
||||
background: '#333',
|
||||
color: '#fff',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
31
src/components/dashboard/universal/ToastProvider.tsx
Normal file
31
src/components/dashboard/universal/ToastProvider.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import React from 'react';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
|
||||
// Centralized toast provider to ensure consistent rendering
|
||||
export default function ToastProvider() {
|
||||
return (
|
||||
<Toaster
|
||||
position="bottom-right"
|
||||
toastOptions={{
|
||||
duration: 4000,
|
||||
style: {
|
||||
background: '#333',
|
||||
color: '#fff',
|
||||
borderRadius: '8px',
|
||||
padding: '12px',
|
||||
},
|
||||
success: {
|
||||
style: {
|
||||
background: 'green',
|
||||
},
|
||||
},
|
||||
error: {
|
||||
style: {
|
||||
background: 'red',
|
||||
},
|
||||
duration: 5000,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -9,6 +9,7 @@ import { SendLog } from "../scripts/pocketbase/SendLog";
|
|||
import { hasAccess, type OfficerStatus } from "../utils/roleAccess";
|
||||
import { OfficerTypes } from "../schemas/pocketbase/schema";
|
||||
import { initAuthSync } from "../scripts/database/initAuthSync";
|
||||
import ToastProvider from "../components/dashboard/universal/ToastProvider";
|
||||
|
||||
const title = "Dashboard";
|
||||
|
||||
|
|
@ -365,449 +366,485 @@ console.log("Available components:", Object.keys(components)); // Debug log
|
|||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
import { Authentication } from "../scripts/pocketbase/Authentication";
|
||||
import { Get } from "../scripts/pocketbase/Get";
|
||||
import { SendLog } from "../scripts/pocketbase/SendLog";
|
||||
import { hasAccess, type OfficerStatus } from "../utils/roleAccess";
|
||||
import { OfficerTypes } from "../schemas/pocketbase/schema";
|
||||
import { initAuthSync } from "../scripts/database/initAuthSync";
|
||||
<!-- Centralized Toast Provider -->
|
||||
<ToastProvider client:load />
|
||||
|
||||
const auth = Authentication.getInstance();
|
||||
const get = Get.getInstance();
|
||||
const logger = SendLog.getInstance();
|
||||
<script>
|
||||
import { Authentication } from "../scripts/pocketbase/Authentication";
|
||||
import { Get } from "../scripts/pocketbase/Get";
|
||||
import { SendLog } from "../scripts/pocketbase/SendLog";
|
||||
import { hasAccess, type OfficerStatus } from "../utils/roleAccess";
|
||||
import { OfficerTypes } from "../schemas/pocketbase/schema";
|
||||
import { initAuthSync } from "../scripts/database/initAuthSync";
|
||||
|
||||
// Initialize page state
|
||||
const pageLoadingState = document.getElementById("pageLoadingState");
|
||||
const pageErrorState = document.getElementById("pageErrorState");
|
||||
const notAuthenticatedState = document.getElementById(
|
||||
"notAuthenticatedState"
|
||||
);
|
||||
const mainContent = document.getElementById("mainContent");
|
||||
const sidebar = document.querySelector("aside");
|
||||
const auth = Authentication.getInstance();
|
||||
const get = Get.getInstance();
|
||||
const logger = SendLog.getInstance();
|
||||
|
||||
// User profile elements
|
||||
const userInitials = document.getElementById("userInitials");
|
||||
const userName = document.getElementById("userName");
|
||||
const userRole = document.getElementById("userRole");
|
||||
// Initialize page state
|
||||
const pageLoadingState =
|
||||
document.getElementById("pageLoadingState");
|
||||
const pageErrorState = document.getElementById("pageErrorState");
|
||||
const notAuthenticatedState = document.getElementById(
|
||||
"notAuthenticatedState"
|
||||
);
|
||||
const mainContent = document.getElementById("mainContent");
|
||||
const sidebar = document.querySelector("aside");
|
||||
|
||||
// Function to update section visibility based on role
|
||||
const updateSectionVisibility = (officerStatus: OfficerStatus) => {
|
||||
// Special handling for sponsor role
|
||||
if (officerStatus === "sponsor") {
|
||||
// Hide all sections first
|
||||
document
|
||||
.querySelectorAll("[data-role-required]")
|
||||
.forEach((element) => {
|
||||
element.classList.add("hidden");
|
||||
});
|
||||
// User profile elements
|
||||
const userInitials = document.getElementById("userInitials");
|
||||
const userName = document.getElementById("userName");
|
||||
const userRole = document.getElementById("userRole");
|
||||
|
||||
// Only show sponsor sections
|
||||
document
|
||||
.querySelectorAll('[data-role-required="sponsor"]')
|
||||
.forEach((element) => {
|
||||
element.classList.remove("hidden");
|
||||
});
|
||||
return;
|
||||
}
|
||||
// Function to update section visibility based on role
|
||||
const updateSectionVisibility = (officerStatus: OfficerStatus) => {
|
||||
// Special handling for sponsor role
|
||||
if (officerStatus === "sponsor") {
|
||||
// Hide all sections first
|
||||
document
|
||||
.querySelectorAll("[data-role-required]")
|
||||
.forEach((element) => {
|
||||
element.classList.add("hidden");
|
||||
});
|
||||
|
||||
// For non-sponsor roles, handle normally
|
||||
document.querySelectorAll("[data-role-required]").forEach((element) => {
|
||||
const requiredRole = element.getAttribute(
|
||||
"data-role-required"
|
||||
) as OfficerStatus;
|
||||
|
||||
// Skip elements that don't have a role requirement
|
||||
if (!requiredRole || requiredRole === "none") {
|
||||
element.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if user has permission for this role
|
||||
const hasPermission = hasAccess(officerStatus, requiredRole);
|
||||
|
||||
// Only show elements if user has permission
|
||||
element.classList.toggle("hidden", !hasPermission);
|
||||
});
|
||||
};
|
||||
|
||||
// Handle navigation
|
||||
const handleNavigation = () => {
|
||||
const navButtons = document.querySelectorAll(".dashboard-nav-btn");
|
||||
const sections = document.querySelectorAll(".dashboard-section");
|
||||
const mainContentDiv = document.getElementById("mainContent");
|
||||
|
||||
// Ensure mainContent is visible
|
||||
if (mainContentDiv) {
|
||||
mainContentDiv.classList.remove("hidden");
|
||||
}
|
||||
|
||||
navButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const sectionKey = button.getAttribute("data-section");
|
||||
|
||||
// Handle logout button
|
||||
if (sectionKey === "logout") {
|
||||
auth.logout();
|
||||
window.location.reload();
|
||||
// Only show sponsor sections
|
||||
document
|
||||
.querySelectorAll('[data-role-required="sponsor"]')
|
||||
.forEach((element) => {
|
||||
element.classList.remove("hidden");
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove active class from all buttons
|
||||
navButtons.forEach((btn) => {
|
||||
btn.classList.remove("active", "bg-base-200");
|
||||
});
|
||||
// For non-sponsor roles, handle normally
|
||||
document
|
||||
.querySelectorAll("[data-role-required]")
|
||||
.forEach((element) => {
|
||||
const requiredRole = element.getAttribute(
|
||||
"data-role-required"
|
||||
) as OfficerStatus;
|
||||
|
||||
// Add active class to clicked button
|
||||
button.classList.add("active", "bg-base-200");
|
||||
// Skip elements that don't have a role requirement
|
||||
if (!requiredRole || requiredRole === "none") {
|
||||
element.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
// Hide all sections
|
||||
sections.forEach((section) => {
|
||||
section.classList.add("hidden");
|
||||
});
|
||||
// Check if user has permission for this role
|
||||
const hasPermission = hasAccess(
|
||||
officerStatus,
|
||||
requiredRole
|
||||
);
|
||||
|
||||
// Show selected section
|
||||
const sectionId = `${sectionKey}Section`;
|
||||
const targetSection = document.getElementById(sectionId);
|
||||
if (targetSection) {
|
||||
targetSection.classList.remove("hidden");
|
||||
console.log(`Showing section: ${sectionId}`); // Debug log
|
||||
}
|
||||
|
||||
// Close mobile sidebar if needed
|
||||
if (window.innerWidth < 1024 && sidebar) {
|
||||
sidebar.classList.add("-translate-x-full");
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
const overlay = document.getElementById("sidebarOverlay");
|
||||
overlay?.remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Display user profile information and handle role-based access
|
||||
const updateUserProfile = async (user: { id: string }) => {
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
const extendedUser = await get.getOne("users", user.id, {
|
||||
fields: [
|
||||
"id",
|
||||
"name",
|
||||
"member_type",
|
||||
"officer_status",
|
||||
"expand.member_type",
|
||||
],
|
||||
});
|
||||
|
||||
const displayName = extendedUser.name || "Unknown User";
|
||||
const displayRole = extendedUser.member_type || "Member";
|
||||
|
||||
// Map the officer type from the database to our OfficerStatus type
|
||||
let officerStatus: OfficerStatus = "";
|
||||
|
||||
// Get the officer record for this user if it exists
|
||||
const officerRecords = await get.getList(
|
||||
"officers",
|
||||
1,
|
||||
50,
|
||||
`user="${user.id}"`,
|
||||
"",
|
||||
{
|
||||
fields: ["id", "type"],
|
||||
}
|
||||
);
|
||||
|
||||
if (officerRecords && officerRecords.items.length > 0) {
|
||||
const officerType = officerRecords.items[0].type;
|
||||
|
||||
// Map the officer type to our OfficerStatus
|
||||
switch (officerType) {
|
||||
case OfficerTypes.ADMINISTRATOR:
|
||||
officerStatus = "administrator";
|
||||
break;
|
||||
case OfficerTypes.EXECUTIVE:
|
||||
officerStatus = "executive";
|
||||
break;
|
||||
case OfficerTypes.GENERAL:
|
||||
officerStatus = "general";
|
||||
break;
|
||||
case OfficerTypes.HONORARY:
|
||||
officerStatus = "honorary";
|
||||
break;
|
||||
case OfficerTypes.PAST:
|
||||
officerStatus = "past";
|
||||
break;
|
||||
default:
|
||||
officerStatus = "";
|
||||
}
|
||||
} else if (extendedUser.member_type === "Sponsor") {
|
||||
officerStatus = "sponsor";
|
||||
} else {
|
||||
officerStatus = "none";
|
||||
}
|
||||
|
||||
const initials = (extendedUser.name || "U")
|
||||
.split(" ")
|
||||
.map((n: string) => n[0])
|
||||
.join("")
|
||||
.toUpperCase();
|
||||
|
||||
// Update profile display
|
||||
if (userName) userName.textContent = displayName;
|
||||
if (userRole) userRole.textContent = displayRole;
|
||||
if (userInitials) userInitials.textContent = initials;
|
||||
|
||||
// Update section visibility based on role
|
||||
updateSectionVisibility(officerStatus);
|
||||
} catch (error) {
|
||||
console.error("Error fetching user profile:", error);
|
||||
const fallbackValues = {
|
||||
name: "Unknown User",
|
||||
role: "Member",
|
||||
initials: "?",
|
||||
// Only show elements if user has permission
|
||||
element.classList.toggle("hidden", !hasPermission);
|
||||
});
|
||||
};
|
||||
|
||||
if (userName) userName.textContent = fallbackValues.name;
|
||||
if (userRole) userRole.textContent = fallbackValues.role;
|
||||
if (userInitials)
|
||||
userInitials.textContent = fallbackValues.initials;
|
||||
// Handle navigation
|
||||
const handleNavigation = () => {
|
||||
const navButtons =
|
||||
document.querySelectorAll(".dashboard-nav-btn");
|
||||
const sections =
|
||||
document.querySelectorAll(".dashboard-section");
|
||||
const mainContentDiv = document.getElementById("mainContent");
|
||||
|
||||
updateSectionVisibility("" as OfficerStatus);
|
||||
}
|
||||
};
|
||||
// Ensure mainContent is visible
|
||||
if (mainContentDiv) {
|
||||
mainContentDiv.classList.remove("hidden");
|
||||
}
|
||||
|
||||
// Mobile sidebar toggle
|
||||
const mobileSidebarToggle = document.getElementById("mobileSidebarToggle");
|
||||
if (mobileSidebarToggle && sidebar) {
|
||||
const toggleSidebar = () => {
|
||||
const isOpen = !sidebar.classList.contains("-translate-x-full");
|
||||
navButtons.forEach((button) => {
|
||||
button.addEventListener("click", () => {
|
||||
const sectionKey = button.getAttribute("data-section");
|
||||
|
||||
if (isOpen) {
|
||||
sidebar.classList.add("-translate-x-full");
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
const overlay = document.getElementById("sidebarOverlay");
|
||||
overlay?.remove();
|
||||
} else {
|
||||
sidebar.classList.remove("-translate-x-full");
|
||||
document.body.classList.add("overflow-hidden");
|
||||
const overlay = document.createElement("div");
|
||||
overlay.id = "sidebarOverlay";
|
||||
overlay.className =
|
||||
"fixed inset-0 bg-black bg-opacity-50 z-40 xl:hidden";
|
||||
overlay.addEventListener("click", toggleSidebar);
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
};
|
||||
// Handle logout button
|
||||
if (sectionKey === "logout") {
|
||||
auth.logout();
|
||||
window.location.reload();
|
||||
return;
|
||||
}
|
||||
|
||||
mobileSidebarToggle.addEventListener("click", toggleSidebar);
|
||||
}
|
||||
// Remove active class from all buttons
|
||||
navButtons.forEach((btn) => {
|
||||
btn.classList.remove("active", "bg-base-200");
|
||||
});
|
||||
|
||||
// Function to initialize the page
|
||||
const initializePage = async () => {
|
||||
try {
|
||||
// Initialize auth sync for IndexedDB
|
||||
await initAuthSync();
|
||||
// Add active class to clicked button
|
||||
button.classList.add("active", "bg-base-200");
|
||||
|
||||
// Check if user is authenticated
|
||||
if (!auth.isAuthenticated()) {
|
||||
console.log("User not authenticated");
|
||||
if (pageLoadingState) pageLoadingState.classList.add("hidden");
|
||||
if (notAuthenticatedState)
|
||||
notAuthenticatedState.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
// Hide all sections
|
||||
sections.forEach((section) => {
|
||||
section.classList.add("hidden");
|
||||
});
|
||||
|
||||
if (pageLoadingState) pageLoadingState.classList.remove("hidden");
|
||||
if (pageErrorState) pageErrorState.classList.add("hidden");
|
||||
if (notAuthenticatedState)
|
||||
notAuthenticatedState.classList.add("hidden");
|
||||
// Show selected section
|
||||
const sectionId = `${sectionKey}Section`;
|
||||
const targetSection =
|
||||
document.getElementById(sectionId);
|
||||
if (targetSection) {
|
||||
targetSection.classList.remove("hidden");
|
||||
console.log(`Showing section: ${sectionId}`); // Debug log
|
||||
}
|
||||
|
||||
// Show loading states
|
||||
const userProfileSkeleton = document.getElementById(
|
||||
"userProfileSkeleton"
|
||||
);
|
||||
const userProfileSignedOut = document.getElementById(
|
||||
"userProfileSignedOut"
|
||||
);
|
||||
const userProfileSummary =
|
||||
document.getElementById("userProfileSummary");
|
||||
const menuLoadingSkeleton = document.getElementById(
|
||||
"menuLoadingSkeleton"
|
||||
);
|
||||
const actualMenu = document.getElementById("actualMenu");
|
||||
|
||||
if (userProfileSkeleton)
|
||||
userProfileSkeleton.classList.remove("hidden");
|
||||
if (userProfileSummary) userProfileSummary.classList.add("hidden");
|
||||
if (userProfileSignedOut)
|
||||
userProfileSignedOut.classList.add("hidden");
|
||||
if (menuLoadingSkeleton)
|
||||
menuLoadingSkeleton.classList.remove("hidden");
|
||||
if (actualMenu) actualMenu.classList.add("hidden");
|
||||
|
||||
const user = auth.getCurrentUser();
|
||||
await updateUserProfile(user);
|
||||
|
||||
// Show actual profile and hide skeleton
|
||||
if (userProfileSkeleton)
|
||||
userProfileSkeleton.classList.add("hidden");
|
||||
if (userProfileSummary)
|
||||
userProfileSummary.classList.remove("hidden");
|
||||
|
||||
// Hide all sections first
|
||||
document
|
||||
.querySelectorAll(".dashboard-section")
|
||||
.forEach((section) => {
|
||||
section.classList.add("hidden");
|
||||
// Close mobile sidebar if needed
|
||||
if (window.innerWidth < 1024 && sidebar) {
|
||||
sidebar.classList.add("-translate-x-full");
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
const overlay =
|
||||
document.getElementById("sidebarOverlay");
|
||||
overlay?.remove();
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Show appropriate default section based on role
|
||||
// Get the officer record for this user if it exists
|
||||
let officerStatus: OfficerStatus = "none";
|
||||
// Display user profile information and handle role-based access
|
||||
const updateUserProfile = async (user: { id: string }) => {
|
||||
if (!user) return;
|
||||
|
||||
try {
|
||||
const officerRecords = await get.getList(
|
||||
"officers",
|
||||
1,
|
||||
50,
|
||||
`user="${user.id}"`,
|
||||
"",
|
||||
{
|
||||
fields: ["id", "type"],
|
||||
}
|
||||
);
|
||||
|
||||
if (officerRecords && officerRecords.items.length > 0) {
|
||||
const officerType = officerRecords.items[0].type;
|
||||
|
||||
// Map the officer type to our OfficerStatus
|
||||
switch (officerType) {
|
||||
case OfficerTypes.ADMINISTRATOR:
|
||||
officerStatus = "administrator";
|
||||
break;
|
||||
case OfficerTypes.EXECUTIVE:
|
||||
officerStatus = "executive";
|
||||
break;
|
||||
case OfficerTypes.GENERAL:
|
||||
officerStatus = "general";
|
||||
break;
|
||||
case OfficerTypes.HONORARY:
|
||||
officerStatus = "honorary";
|
||||
break;
|
||||
case OfficerTypes.PAST:
|
||||
officerStatus = "past";
|
||||
break;
|
||||
default:
|
||||
officerStatus = "none";
|
||||
}
|
||||
} else {
|
||||
try {
|
||||
const extendedUser = await get.getOne("users", user.id, {
|
||||
fields: ["member_type"],
|
||||
fields: [
|
||||
"id",
|
||||
"name",
|
||||
"member_type",
|
||||
"officer_status",
|
||||
"expand.member_type",
|
||||
],
|
||||
});
|
||||
|
||||
if (extendedUser.member_type === "Sponsor") {
|
||||
const displayName = extendedUser.name || "Unknown User";
|
||||
const displayRole = extendedUser.member_type || "Member";
|
||||
|
||||
// Map the officer type from the database to our OfficerStatus type
|
||||
let officerStatus: OfficerStatus = "";
|
||||
|
||||
// Get the officer record for this user if it exists
|
||||
const officerRecords = await get.getList(
|
||||
"officers",
|
||||
1,
|
||||
50,
|
||||
`user="${user.id}"`,
|
||||
"",
|
||||
{
|
||||
fields: ["id", "type"],
|
||||
}
|
||||
);
|
||||
|
||||
if (officerRecords && officerRecords.items.length > 0) {
|
||||
const officerType = officerRecords.items[0].type;
|
||||
|
||||
// Map the officer type to our OfficerStatus
|
||||
switch (officerType) {
|
||||
case OfficerTypes.ADMINISTRATOR:
|
||||
officerStatus = "administrator";
|
||||
break;
|
||||
case OfficerTypes.EXECUTIVE:
|
||||
officerStatus = "executive";
|
||||
break;
|
||||
case OfficerTypes.GENERAL:
|
||||
officerStatus = "general";
|
||||
break;
|
||||
case OfficerTypes.HONORARY:
|
||||
officerStatus = "honorary";
|
||||
break;
|
||||
case OfficerTypes.PAST:
|
||||
officerStatus = "past";
|
||||
break;
|
||||
default:
|
||||
officerStatus = "";
|
||||
}
|
||||
} else if (extendedUser.member_type === "Sponsor") {
|
||||
officerStatus = "sponsor";
|
||||
} else {
|
||||
officerStatus = "none";
|
||||
}
|
||||
|
||||
const initials = (extendedUser.name || "U")
|
||||
.split(" ")
|
||||
.map((n: string) => n[0])
|
||||
.join("")
|
||||
.toUpperCase();
|
||||
|
||||
// Update profile display
|
||||
if (userName) userName.textContent = displayName;
|
||||
if (userRole) userRole.textContent = displayRole;
|
||||
if (userInitials) userInitials.textContent = initials;
|
||||
|
||||
// Update section visibility based on role
|
||||
updateSectionVisibility(officerStatus);
|
||||
} catch (error) {
|
||||
console.error("Error fetching user profile:", error);
|
||||
const fallbackValues = {
|
||||
name: "Unknown User",
|
||||
role: "Member",
|
||||
initials: "?",
|
||||
};
|
||||
|
||||
if (userName) userName.textContent = fallbackValues.name;
|
||||
if (userRole) userRole.textContent = fallbackValues.role;
|
||||
if (userInitials)
|
||||
userInitials.textContent = fallbackValues.initials;
|
||||
|
||||
updateSectionVisibility("" as OfficerStatus);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error determining officer status:", error);
|
||||
officerStatus = "none";
|
||||
};
|
||||
|
||||
// Mobile sidebar toggle
|
||||
const mobileSidebarToggle = document.getElementById(
|
||||
"mobileSidebarToggle"
|
||||
);
|
||||
if (mobileSidebarToggle && sidebar) {
|
||||
const toggleSidebar = () => {
|
||||
const isOpen =
|
||||
!sidebar.classList.contains("-translate-x-full");
|
||||
|
||||
if (isOpen) {
|
||||
sidebar.classList.add("-translate-x-full");
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
const overlay =
|
||||
document.getElementById("sidebarOverlay");
|
||||
overlay?.remove();
|
||||
} else {
|
||||
sidebar.classList.remove("-translate-x-full");
|
||||
document.body.classList.add("overflow-hidden");
|
||||
const overlay = document.createElement("div");
|
||||
overlay.id = "sidebarOverlay";
|
||||
overlay.className =
|
||||
"fixed inset-0 bg-black bg-opacity-50 z-40 xl:hidden";
|
||||
overlay.addEventListener("click", toggleSidebar);
|
||||
document.body.appendChild(overlay);
|
||||
}
|
||||
};
|
||||
|
||||
mobileSidebarToggle.addEventListener("click", toggleSidebar);
|
||||
}
|
||||
|
||||
let defaultSection;
|
||||
let defaultButton;
|
||||
// Function to initialize the page
|
||||
const initializePage = async () => {
|
||||
try {
|
||||
// Initialize auth sync for IndexedDB
|
||||
await initAuthSync();
|
||||
|
||||
if (officerStatus === "sponsor") {
|
||||
defaultSection = document.getElementById(
|
||||
"sponsorDashboardSection"
|
||||
);
|
||||
defaultButton = document.querySelector(
|
||||
'[data-section="sponsorDashboard"]'
|
||||
);
|
||||
} else if (officerStatus === "administrator") {
|
||||
defaultSection = document.getElementById(
|
||||
"adminDashboardSection"
|
||||
);
|
||||
defaultButton = document.querySelector(
|
||||
'[data-section="adminDashboard"]'
|
||||
);
|
||||
} else {
|
||||
defaultSection = document.getElementById("profileSection");
|
||||
defaultButton = document.querySelector(
|
||||
'[data-section="profile"]'
|
||||
);
|
||||
}
|
||||
// Check if user is authenticated
|
||||
if (!auth.isAuthenticated()) {
|
||||
console.log("User not authenticated");
|
||||
if (pageLoadingState)
|
||||
pageLoadingState.classList.add("hidden");
|
||||
if (notAuthenticatedState)
|
||||
notAuthenticatedState.classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
|
||||
if (defaultSection) {
|
||||
defaultSection.classList.remove("hidden");
|
||||
}
|
||||
if (defaultButton) {
|
||||
defaultButton.classList.add("active", "bg-base-200");
|
||||
}
|
||||
if (pageLoadingState)
|
||||
pageLoadingState.classList.remove("hidden");
|
||||
if (pageErrorState) pageErrorState.classList.add("hidden");
|
||||
if (notAuthenticatedState)
|
||||
notAuthenticatedState.classList.add("hidden");
|
||||
|
||||
// Initialize navigation
|
||||
handleNavigation();
|
||||
// Show loading states
|
||||
const userProfileSkeleton = document.getElementById(
|
||||
"userProfileSkeleton"
|
||||
);
|
||||
const userProfileSignedOut = document.getElementById(
|
||||
"userProfileSignedOut"
|
||||
);
|
||||
const userProfileSummary =
|
||||
document.getElementById("userProfileSummary");
|
||||
const menuLoadingSkeleton = document.getElementById(
|
||||
"menuLoadingSkeleton"
|
||||
);
|
||||
const actualMenu = document.getElementById("actualMenu");
|
||||
|
||||
// Show actual menu and hide skeleton
|
||||
if (menuLoadingSkeleton)
|
||||
menuLoadingSkeleton.classList.add("hidden");
|
||||
if (actualMenu) actualMenu.classList.remove("hidden");
|
||||
if (userProfileSkeleton)
|
||||
userProfileSkeleton.classList.remove("hidden");
|
||||
if (userProfileSummary)
|
||||
userProfileSummary.classList.add("hidden");
|
||||
if (userProfileSignedOut)
|
||||
userProfileSignedOut.classList.add("hidden");
|
||||
if (menuLoadingSkeleton)
|
||||
menuLoadingSkeleton.classList.remove("hidden");
|
||||
if (actualMenu) actualMenu.classList.add("hidden");
|
||||
|
||||
// Show main content and hide loading
|
||||
if (mainContent) mainContent.classList.remove("hidden");
|
||||
if (pageLoadingState) pageLoadingState.classList.add("hidden");
|
||||
} catch (error) {
|
||||
console.error("Error initializing dashboard:", error);
|
||||
if (pageLoadingState) pageLoadingState.classList.add("hidden");
|
||||
if (pageErrorState) pageErrorState.classList.remove("hidden");
|
||||
}
|
||||
};
|
||||
const user = auth.getCurrentUser();
|
||||
await updateUserProfile(user);
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
document.addEventListener("DOMContentLoaded", initializePage);
|
||||
// Show actual profile and hide skeleton
|
||||
if (userProfileSkeleton)
|
||||
userProfileSkeleton.classList.add("hidden");
|
||||
if (userProfileSummary)
|
||||
userProfileSummary.classList.remove("hidden");
|
||||
|
||||
// Handle login button click
|
||||
document
|
||||
.querySelector(".login-button")
|
||||
?.addEventListener("click", async () => {
|
||||
try {
|
||||
if (pageLoadingState)
|
||||
pageLoadingState.classList.remove("hidden");
|
||||
if (notAuthenticatedState)
|
||||
notAuthenticatedState.classList.add("hidden");
|
||||
await auth.login();
|
||||
} catch (error) {
|
||||
console.error("Login error:", error);
|
||||
if (pageLoadingState) pageLoadingState.classList.add("hidden");
|
||||
if (pageErrorState) pageErrorState.classList.remove("hidden");
|
||||
}
|
||||
});
|
||||
// Hide all sections first
|
||||
document
|
||||
.querySelectorAll(".dashboard-section")
|
||||
.forEach((section) => {
|
||||
section.classList.add("hidden");
|
||||
});
|
||||
|
||||
// Handle logout button click
|
||||
document.getElementById("logoutButton")?.addEventListener("click", () => {
|
||||
auth.logout();
|
||||
window.location.reload();
|
||||
});
|
||||
// Show appropriate default section based on role
|
||||
// Get the officer record for this user if it exists
|
||||
let officerStatus: OfficerStatus = "none";
|
||||
|
||||
// Handle responsive sidebar
|
||||
if (sidebar) {
|
||||
if (window.innerWidth < 1024) {
|
||||
sidebar.classList.add("-translate-x-full");
|
||||
}
|
||||
try {
|
||||
const officerRecords = await get.getList(
|
||||
"officers",
|
||||
1,
|
||||
50,
|
||||
`user="${user.id}"`,
|
||||
"",
|
||||
{
|
||||
fields: ["id", "type"],
|
||||
}
|
||||
);
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
if (window.innerWidth >= 1024) {
|
||||
const overlay = document.getElementById("sidebarOverlay");
|
||||
if (overlay) {
|
||||
overlay.remove();
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
if (officerRecords && officerRecords.items.length > 0) {
|
||||
const officerType = officerRecords.items[0].type;
|
||||
|
||||
// Map the officer type to our OfficerStatus
|
||||
switch (officerType) {
|
||||
case OfficerTypes.ADMINISTRATOR:
|
||||
officerStatus = "administrator";
|
||||
break;
|
||||
case OfficerTypes.EXECUTIVE:
|
||||
officerStatus = "executive";
|
||||
break;
|
||||
case OfficerTypes.GENERAL:
|
||||
officerStatus = "general";
|
||||
break;
|
||||
case OfficerTypes.HONORARY:
|
||||
officerStatus = "honorary";
|
||||
break;
|
||||
case OfficerTypes.PAST:
|
||||
officerStatus = "past";
|
||||
break;
|
||||
default:
|
||||
officerStatus = "none";
|
||||
}
|
||||
} else {
|
||||
const extendedUser = await get.getOne(
|
||||
"users",
|
||||
user.id,
|
||||
{
|
||||
fields: ["member_type"],
|
||||
}
|
||||
);
|
||||
|
||||
if (extendedUser.member_type === "Sponsor") {
|
||||
officerStatus = "sponsor";
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"Error determining officer status:",
|
||||
error
|
||||
);
|
||||
officerStatus = "none";
|
||||
}
|
||||
|
||||
let defaultSection;
|
||||
let defaultButton;
|
||||
|
||||
if (officerStatus === "sponsor") {
|
||||
defaultSection = document.getElementById(
|
||||
"sponsorDashboardSection"
|
||||
);
|
||||
defaultButton = document.querySelector(
|
||||
'[data-section="sponsorDashboard"]'
|
||||
);
|
||||
} else if (officerStatus === "administrator") {
|
||||
defaultSection = document.getElementById(
|
||||
"adminDashboardSection"
|
||||
);
|
||||
defaultButton = document.querySelector(
|
||||
'[data-section="adminDashboard"]'
|
||||
);
|
||||
} else {
|
||||
defaultSection =
|
||||
document.getElementById("profileSection");
|
||||
defaultButton = document.querySelector(
|
||||
'[data-section="profile"]'
|
||||
);
|
||||
}
|
||||
|
||||
if (defaultSection) {
|
||||
defaultSection.classList.remove("hidden");
|
||||
}
|
||||
if (defaultButton) {
|
||||
defaultButton.classList.add("active", "bg-base-200");
|
||||
}
|
||||
|
||||
// Initialize navigation
|
||||
handleNavigation();
|
||||
|
||||
// Show actual menu and hide skeleton
|
||||
if (menuLoadingSkeleton)
|
||||
menuLoadingSkeleton.classList.add("hidden");
|
||||
if (actualMenu) actualMenu.classList.remove("hidden");
|
||||
|
||||
// Show main content and hide loading
|
||||
if (mainContent) mainContent.classList.remove("hidden");
|
||||
if (pageLoadingState)
|
||||
pageLoadingState.classList.add("hidden");
|
||||
} catch (error) {
|
||||
console.error("Error initializing dashboard:", error);
|
||||
if (pageLoadingState)
|
||||
pageLoadingState.classList.add("hidden");
|
||||
if (pageErrorState)
|
||||
pageErrorState.classList.remove("hidden");
|
||||
}
|
||||
sidebar.classList.remove("-translate-x-full");
|
||||
};
|
||||
|
||||
// Initialize when DOM is loaded
|
||||
document.addEventListener("DOMContentLoaded", initializePage);
|
||||
|
||||
// Handle login button click
|
||||
document
|
||||
.querySelector(".login-button")
|
||||
?.addEventListener("click", async () => {
|
||||
try {
|
||||
if (pageLoadingState)
|
||||
pageLoadingState.classList.remove("hidden");
|
||||
if (notAuthenticatedState)
|
||||
notAuthenticatedState.classList.add("hidden");
|
||||
await auth.login();
|
||||
} catch (error) {
|
||||
console.error("Login error:", error);
|
||||
if (pageLoadingState)
|
||||
pageLoadingState.classList.add("hidden");
|
||||
if (pageErrorState)
|
||||
pageErrorState.classList.remove("hidden");
|
||||
}
|
||||
});
|
||||
|
||||
// Handle logout button click
|
||||
document
|
||||
.getElementById("logoutButton")
|
||||
?.addEventListener("click", () => {
|
||||
auth.logout();
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
// Handle responsive sidebar
|
||||
if (sidebar) {
|
||||
if (window.innerWidth < 1024) {
|
||||
sidebar.classList.add("-translate-x-full");
|
||||
}
|
||||
|
||||
window.addEventListener("resize", () => {
|
||||
if (window.innerWidth >= 1024) {
|
||||
const overlay =
|
||||
document.getElementById("sidebarOverlay");
|
||||
if (overlay) {
|
||||
overlay.remove();
|
||||
document.body.classList.remove("overflow-hidden");
|
||||
}
|
||||
sidebar.classList.remove("-translate-x-full");
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue