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

fix toast

Browse source
This commit is contained in:
chark1es 2025-02-18 20:02:32 -08:00
parent 1d9a54c85f
commit 64e989664c
1 changed files with 388 additions and 394 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -30,8 +30,7 @@ import EventLoad from "./EventsSection/EventLoad";
<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"
<span class="text-base-content font-medium text-sm sm:text-base"
>Coming Soon</span
>
</div>
@ -51,12 +50,8 @@ import EventLoad from "./EventsSection/EventLoad";
disabled
>
<option disabled selected>Pick an event</option>
<option
>Technical Workshop - Web Development</option
>
<option
>Professional Development Workshop</option
>
<option>Technical Workshop - Web Development</option>
<option>Professional Development Workshop</option>
<option>Social Event - Game Night</option>
</select>
<button
@ -86,10 +81,9 @@ import EventLoad from "./EventsSection/EventLoad";
class="btn btn-primary btn-sm gap-1 text-xs sm:text-sm"
onclick="window.downloadAllFiles()"
>
<Icon
<iconify-icon
icon="heroicons:arrow-down-tray-20-solid"
className="h-3 w-3 sm:h-4 sm:w-4"
/>
className="h-3 w-3 sm:h-4 sm:w-4"></iconify-icon>
Download All
</button>
</div>
@ -97,10 +91,8 @@ import EventLoad from "./EventsSection/EventLoad";
class="btn btn-circle btn-ghost btn-sm sm:btn-md"
onclick="window.closeEventDetailsModal()"
>
<Icon
icon="heroicons:x-mark"
className="h-4 w-4 sm:h-6 sm:w-6"
/>
<iconify-icon icon="heroicons:x-mark" className="h-4 w-4 sm:h-6 sm:w-6"
></iconify-icon>
</button>
</div>
@ -134,8 +126,7 @@ import EventLoad from "./EventsSection/EventLoad";
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>
<span class="loading loading-spinner loading-md sm:loading-lg"></span>
</div>
<div id="previewContent" class="w-full">
<FilePreview client:load isModal={true} />
@ -153,19 +144,16 @@ import EventLoad from "./EventsSection/EventLoad";
// Toast management system
const createToast = (
message: string,
type: "success" | "error" | "warning" = "success"
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";
toastContainer.className = "toast-container fixed bottom-4 right-4 z-50";
document.body.appendChild(toastContainer);
}
const existingToasts = document.querySelectorAll(
".toast-container .toast"
);
const existingToasts = document.querySelectorAll(".toast-container .toast");
if (existingToasts.length >= 2) {
const oldestToast = existingToasts[0];
oldestToast.classList.add("toast-exit");
@ -175,9 +163,7 @@ import EventLoad from "./EventsSection/EventLoad";
// Update positions of existing toasts
existingToasts.forEach((t) => {
const toast = t as HTMLElement;
const currentIndex = parseInt(
toast.getAttribute("data-index") || "0"
);
const currentIndex = parseInt(toast.getAttribute("data-index") || "0");
toast.setAttribute("data-index", (currentIndex + 1).toString());
});
@ -198,10 +184,10 @@ import EventLoad from "./EventsSection/EventLoad";
<div class="flex items-center gap-2">
${
type === "success"
? '<Icon icon="heroicons:check-circle" class="stroke-current shrink-0 h-6 w-6"></Icon>'
? '<iconify-icon icon="heroicons:check-circle" class="stroke-current shrink-0 h-6 w-6"></iconify-icon>'
: type === "error"
? '<Icon icon="heroicons:x-circle" class="stroke-current shrink-0 h-6 w-6"></Icon>'
: '<Icon icon="heroicons:exclamation-triangle" class="stroke-current shrink-0 h-6 w-6"></Icon>'
? '<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>
@ -285,7 +271,7 @@ import EventLoad from "./EventsSection/EventLoad";
window.previewFileEvents = function (url: string, filename: string) {
console.log("previewFileEvents called with:", { url, filename });
const modal = document.getElementById(
"filePreviewModal"
"filePreviewModal",
) as HTMLDialogElement;
const previewFileName = document.getElementById("previewFileName");
const previewContent = document.getElementById("previewContent");
@ -302,7 +288,7 @@ import EventLoad from "./EventsSection/EventLoad";
window.dispatchEvent(
new CustomEvent("filePreviewStateChange", {
detail: { url, filename },
})
}),
);
}
};
@ -311,7 +297,7 @@ import EventLoad from "./EventsSection/EventLoad";
window.closeFilePreviewEvents = function () {
console.log("closeFilePreviewEvents called");
const modal = document.getElementById(
"filePreviewModal"
"filePreviewModal",
) as HTMLDialogElement;
const previewFileName = document.getElementById("previewFileName");
const previewContent = document.getElementById("previewContent");
@ -322,7 +308,7 @@ import EventLoad from "./EventsSection/EventLoad";
window.dispatchEvent(
new CustomEvent("filePreviewStateChange", {
detail: { url: "", filename: "" },
})
}),
);
// Reset the UI
@ -345,22 +331,30 @@ import EventLoad from "./EventsSection/EventLoad";
// Update the openDetailsModal function to use the events-specific preview
window.openDetailsModal = function (event: any) {
const modal = document.getElementById(
"eventDetailsModal"
"eventDetailsModal",
) as HTMLDialogElement;
const filesContent = document.getElementById(
"filesContent"
"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
) {
if (event.files && Array.isArray(event.files) && event.files.length > 0) {
const baseUrl = "https://pocketbase.ieeeucsd.org";
const collectionId = "events";
const recordId = event.id;
@ -388,10 +382,10 @@ import EventLoad from "./EventsSection/EventLoad";
<td>${file}</td>
<td class="text-right">
<button class="btn btn-ghost btn-sm" onclick='window.showFilePreviewEvents(${previewData})'>
<Icon icon="heroicons:document" className="h-4 w-4" />
<iconify-icon icon="heroicons:document" className="h-4 w-4" />
</button>
<a href="${fileUrl}" download="${file}" class="btn btn-ghost btn-sm">
<Icon icon="heroicons:arrow-down-tray-20-solid" className="h-4 w-4" />
<iconify-icon icon="heroicons:arrow-down-tray-20-solid" className="h-4 w-4" />
</a>
</td>
</tr>
@ -405,7 +399,7 @@ import EventLoad from "./EventsSection/EventLoad";
} else {
filesContent.innerHTML = `
<div class="text-center py-8 text-base-content/70">
<Icon icon="heroicons:document-duplicate" className="h-12 w-12 mx-auto mb-4 opacity-50" />
<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>
`;
@ -417,7 +411,7 @@ import EventLoad from "./EventsSection/EventLoad";
// Add downloadAllFiles function
window.downloadAllFiles = async function () {
const downloadBtn = document.getElementById(
"downloadAllBtn"
"downloadAllBtn",
) as HTMLButtonElement;
if (!downloadBtn) return;
const originalBtnContent = downloadBtn.innerHTML;
@ -473,7 +467,7 @@ import EventLoad from "./EventsSection/EventLoad";
console.error("Failed to download files:", error);
createToast(
error?.message || "Failed to download files. Please try again.",
"error"
"error",
);
} finally {
// Reset button state
@ -485,7 +479,7 @@ import EventLoad from "./EventsSection/EventLoad";
// Close event details modal
window.closeEventDetailsModal = function () {
const modal = document.getElementById(
"eventDetailsModal"
"eventDetailsModal",
) as HTMLDialogElement;
const filesContent = document.getElementById("filesContent");