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

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

@ -7,228 +7,214 @@ import EventLoad from "./EventsSection/EventLoad";
--- ---
<div id="" class=""> <div id="" class="">
<div class="mb-4 sm:mb-6 px-4 sm:px-6"> <div class="mb-4 sm:mb-6 px-4 sm:px-6">
<h2 class="text-xl sm:text-2xl font-bold">Events</h2> <h2 class="text-xl sm:text-2xl font-bold">Events</h2>
<p class="opacity-70 text-sm sm:text-base"> <p class="opacity-70 text-sm sm:text-base">
View and manage your IEEE UCSD events View and manage your IEEE UCSD events
</p> </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> </div>
<div <!-- Event Registration Card -->
class="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6 px-4 sm:px-6" <div class="w-full">
> <div
<!-- Event Check-in Card --> class="card bg-base-100 shadow-xl border border-base-200 opacity-50 cursor-not-allowed relative group h-full"
<div class="w-full"> >
<EventCheckIn client:load /> <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>
<div class="card-body p-4 sm:p-6">
<!-- Event Registration Card --> <h3 class="card-title text-base sm:text-lg mb-3 sm:mb-4">
<div class="w-full"> Event Registration
<div </h3>
class="card bg-base-100 shadow-xl border border-base-200 opacity-50 cursor-not-allowed relative group h-full" <div class="form-control w-full">
> <label class="label">
<div <span class="label-text text-sm sm:text-base"
class="absolute inset-0 bg-base-100 opacity-0 group-hover:opacity-90 transition-opacity duration-300 flex items-center justify-center z-10" >Select an event to register</span
> >
<span </label>
class="text-base-content font-medium text-sm sm:text-base" <div class="flex flex-col sm:flex-row gap-2">
>Coming Soon</span <select
> class="select select-bordered flex-1 text-sm sm:text-base h-10 min-h-[2.5rem] w-full"
</div> disabled
<div class="card-body p-4 sm:p-6"> >
<h3 class="card-title text-base sm:text-lg mb-3 sm:mb-4"> <option disabled selected>Pick an event</option>
Event Registration <option>Technical Workshop - Web Development</option>
</h3> <option>Professional Development Workshop</option>
<div class="form-control w-full"> <option>Social Event - Game Night</option>
<label class="label"> </select>
<span class="label-text text-sm sm:text-base" <button
>Select an event to register</span class="btn btn-primary text-sm sm:text-base h-10 min-h-[2.5rem] w-full sm:w-[100px]"
> disabled>Register</button
</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>
</div> </div>
</div>
<EventLoad client:load /> <EventLoad client:load />
</div> </div>
<!-- Event Details Modal --> <!-- Event Details Modal -->
<dialog id="eventDetailsModal" class="modal"> <dialog id="eventDetailsModal" class="modal">
<div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6"> <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 justify-between items-center mb-3 sm:mb-4">
<div class="flex items-center gap-2 sm:gap-3"> <div class="flex items-center gap-2 sm:gap-3">
<h3 class="font-bold text-base sm:text-lg" id="modalTitle"> <h3 class="font-bold text-base sm:text-lg" id="modalTitle">
Event Files Event Files
</h3> </h3>
<button <button
id="downloadAllBtn" id="downloadAllBtn"
class="btn btn-primary btn-sm gap-1 text-xs sm:text-sm" class="btn btn-primary btn-sm gap-1 text-xs sm:text-sm"
onclick="window.downloadAllFiles()" onclick="window.downloadAllFiles()"
> >
<Icon <iconify-icon
icon="heroicons:arrow-down-tray-20-solid" 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
Download All </button>
</button> </div>
</div> <button
<button class="btn btn-circle btn-ghost btn-sm sm:btn-md"
class="btn btn-circle btn-ghost btn-sm sm:btn-md" onclick="window.closeEventDetailsModal()"
onclick="window.closeEventDetailsModal()" >
> <iconify-icon icon="heroicons:x-mark" className="h-4 w-4 sm:h-6 sm:w-6"
<Icon ></iconify-icon>
icon="heroicons:x-mark" </button>
className="h-4 w-4 sm:h-6 sm:w-6"
/>
</button>
</div>
<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> <div id="filesContent" class="space-y-3 sm:space-y-4">
</form> <!-- Files list will be populated here -->
</div>
</div>
<form method="dialog" class="modal-backdrop">
<button onclick="window.closeEventDetailsModal()">close</button>
</form>
</dialog> </dialog>
<!-- Universal File Preview Modal --> <!-- Universal File Preview Modal -->
<dialog id="filePreviewModal" class="modal"> <dialog id="filePreviewModal" class="modal">
<div class="modal-box max-w-[90vw] sm:max-w-4xl p-4 sm:p-6"> <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 justify-between items-center mb-3 sm:mb-4">
<div class="flex items-center gap-2 sm:gap-3"> <div class="flex items-center gap-2 sm:gap-3">
<button <button
class="btn btn-ghost btn-sm text-xs sm:text-sm" class="btn btn-ghost btn-sm text-xs sm:text-sm"
onclick="window.closeFilePreviewEvents()">Close</button onclick="window.closeFilePreviewEvents()">Close</button
> >
<h3 <h3
class="font-bold text-base sm:text-lg truncate" class="font-bold text-base sm:text-lg truncate"
id="previewFileName" id="previewFileName"
> >
</h3> </h3>
</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> </div>
<form method="dialog" class="modal-backdrop"> <div class="relative" id="previewContainer">
<button onclick="window.closeFilePreviewEvents()">close</button> <div
</form> 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>
</dialog> </dialog>
<script> <script>
import JSZip from "jszip"; import JSZip from "jszip";
// Toast management system // Toast management system
const createToast = ( const createToast = (
message: string, message: string,
type: "success" | "error" | "warning" = "success" type: "success" | "error" | "warning" = "success",
) => { ) => {
let toastContainer = document.querySelector(".toast-container"); let toastContainer = document.querySelector(".toast-container");
if (!toastContainer) { if (!toastContainer) {
toastContainer = document.createElement("div"); toastContainer = document.createElement("div");
toastContainer.className = toastContainer.className = "toast-container fixed bottom-4 right-4 z-50";
"toast-container fixed bottom-4 right-4 z-50"; document.body.appendChild(toastContainer);
document.body.appendChild(toastContainer); }
}
const existingToasts = document.querySelectorAll( const existingToasts = document.querySelectorAll(".toast-container .toast");
".toast-container .toast" if (existingToasts.length >= 2) {
); const oldestToast = existingToasts[0];
if (existingToasts.length >= 2) { oldestToast.classList.add("toast-exit");
const oldestToast = existingToasts[0]; setTimeout(() => oldestToast.remove(), 150);
oldestToast.classList.add("toast-exit"); }
setTimeout(() => oldestToast.remove(), 150);
}
// Update positions of existing toasts // Update positions of existing toasts
existingToasts.forEach((t) => { existingToasts.forEach((t) => {
const toast = t as HTMLElement; const toast = t as HTMLElement;
const currentIndex = parseInt( const currentIndex = parseInt(toast.getAttribute("data-index") || "0");
toast.getAttribute("data-index") || "0" toast.setAttribute("data-index", (currentIndex + 1).toString());
); });
toast.setAttribute("data-index", (currentIndex + 1).toString());
});
const toast = document.createElement("div"); const toast = document.createElement("div");
toast.className = "toast translate-x-full"; toast.className = "toast translate-x-full";
toast.setAttribute("data-index", "0"); toast.setAttribute("data-index", "0");
// Update alert styling based on type // Update alert styling based on type
const alertClass = const alertClass =
type === "success" type === "success"
? "alert-success bg-success text-success-content" ? "alert-success bg-success text-success-content"
: type === "error" : type === "error"
? "alert-error bg-error text-error-content" ? "alert-error bg-error text-error-content"
: "alert-warning bg-warning text-warning-content"; : "alert-warning bg-warning text-warning-content";
toast.innerHTML = ` toast.innerHTML = `
<div class="alert ${alertClass} shadow-lg min-w-[300px]"> <div class="alert ${alertClass} shadow-lg min-w-[300px]">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
${ ${
type === "success" 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" : type === "error"
? '<Icon icon="heroicons:x-circle" 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>'
: '<Icon icon="heroicons:exclamation-triangle" class="stroke-current shrink-0 h-6 w-6"></Icon>' : '<iconify-icon icon="heroicons:exclamation-triangle" class="stroke-current shrink-0 w-6"></iconify-icon>'
} }
<span>${message}</span> <span>${message}</span>
</div> </div>
</div> </div>
`; `;
toastContainer.appendChild(toast); toastContainer.appendChild(toast);
// Force a reflow to ensure the animation triggers // Force a reflow to ensure the animation triggers
toast.offsetHeight; toast.offsetHeight;
// Add the transition class and remove transform // Add the transition class and remove transform
toast.classList.add("transition-all", "duration-300", "ease-out"); toast.classList.add("transition-all", "duration-300", "ease-out");
requestAnimationFrame(() => { requestAnimationFrame(() => {
toast.classList.remove("translate-x-full"); toast.classList.remove("translate-x-full");
}); });
// Setup exit animation // Setup exit animation
setTimeout(() => { setTimeout(() => {
toast.classList.add("toast-exit"); toast.classList.add("toast-exit");
setTimeout(() => toast.remove(), 150); setTimeout(() => toast.remove(), 150);
}, 3000); }, 3000);
}; };
// Add styles to the document // Add styles to the document
const style = document.createElement("style"); const style = document.createElement("style");
style.textContent = ` style.textContent = `
.toast-container { .toast-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -257,115 +243,123 @@ import EventLoad from "./EventsSection/EventLoad";
transform: translateY(-0.025rem); transform: translateY(-0.025rem);
} }
`; `;
document.head.appendChild(style); document.head.appendChild(style);
// Add helper functions for file preview // Add helper functions for file preview
function getFileType(filename: string): string { function getFileType(filename: string): string {
const extension = filename.split(".").pop()?.toLowerCase(); const extension = filename.split(".").pop()?.toLowerCase();
const mimeTypes: { [key: string]: string } = { const mimeTypes: { [key: string]: string } = {
pdf: "application/pdf", pdf: "application/pdf",
jpg: "image/jpeg", jpg: "image/jpeg",
jpeg: "image/jpeg", jpeg: "image/jpeg",
png: "image/png", png: "image/png",
gif: "image/gif", gif: "image/gif",
mp4: "video/mp4", mp4: "video/mp4",
mp3: "audio/mpeg", mp3: "audio/mpeg",
txt: "text/plain", txt: "text/plain",
doc: "application/msword", doc: "application/msword",
docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document", docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
xls: "application/vnd.ms-excel", xls: "application/vnd.ms-excel",
xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
json: "application/json", json: "application/json",
}; };
return mimeTypes[extension || ""] || "application/octet-stream"; 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 },
}),
);
}
};
// 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");
if (modal && previewFileName && previewContent) {
console.log("Resetting preview and closing modal");
// Reset the preview state
window.dispatchEvent(
new CustomEvent("filePreviewStateChange", {
detail: { url: "", filename: "" },
}),
);
// Reset the UI
previewFileName.textContent = "";
// Close the modal
modal.close();
}
};
// 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);
};
// 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;
} }
// Universal file preview function for events section // Reset state
window.previewFileEvents = function (url: string, filename: string) { window.currentEventId = event.id;
console.log("previewFileEvents called with:", { url, filename }); if (filesContent) filesContent.classList.remove("hidden");
const modal = document.getElementById(
"filePreviewModal"
) as HTMLDialogElement;
const previewFileName = document.getElementById("previewFileName");
const previewContent = document.getElementById("previewContent");
if (modal && previewFileName && previewContent) { // Populate files content
console.log("Found all required elements"); if (event.files && Array.isArray(event.files) && event.files.length > 0) {
// Update the filename display const baseUrl = "https://pocketbase.ieeeucsd.org";
previewFileName.textContent = filename; const collectionId = "events";
const recordId = event.id;
// Show the modal filesContent.innerHTML = `
modal.showModal();
// Dispatch state change event
window.dispatchEvent(
new CustomEvent("filePreviewStateChange", {
detail: { url, filename },
})
);
}
};
// 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");
if (modal && previewFileName && previewContent) {
console.log("Resetting preview and closing modal");
// Reset the preview state
window.dispatchEvent(
new CustomEvent("filePreviewStateChange", {
detail: { url: "", filename: "" },
})
);
// Reset the UI
previewFileName.textContent = "";
// Close the modal
modal.close();
}
};
// 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);
};
// 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;
// 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 = `
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="table table-zebra w-full"> <table class="table table-zebra w-full">
<thead> <thead>
@ -376,144 +370,144 @@ import EventLoad from "./EventsSection/EventLoad";
</thead> </thead>
<tbody> <tbody>
${event.files ${event.files
.map((file: string) => { .map((file: string) => {
const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${file}`; const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${file}`;
const fileType = getFileType(file); const fileType = getFileType(file);
const previewData = JSON.stringify({ const previewData = JSON.stringify({
url: fileUrl, url: fileUrl,
name: file, name: file,
}).replace(/'/g, "\\'"); }).replace(/'/g, "\\'");
return ` return `
<tr> <tr>
<td>${file}</td> <td>${file}</td>
<td class="text-right"> <td class="text-right">
<button class="btn btn-ghost btn-sm" onclick='window.showFilePreviewEvents(${previewData})'> <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> </button>
<a href="${fileUrl}" download="${file}" class="btn btn-ghost btn-sm"> <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> </a>
</td> </td>
</tr> </tr>
`; `;
}) })
.join("")} .join("")}
</tbody> </tbody>
</table> </table>
</div> </div>
`; `;
} else { } else {
filesContent.innerHTML = ` filesContent.innerHTML = `
<div class="text-center py-8 text-base-content/70"> <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> <p>No files attached to this event</p>
</div> </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);
});
modal.showModal(); await Promise.all(filePromises);
};
// Add downloadAllFiles function // Generate and download zip
window.downloadAllFiles = async function () { const zipBlob = await zip.generateAsync({ type: "blob" });
const downloadBtn = document.getElementById( const downloadUrl = URL.createObjectURL(zipBlob);
"downloadAllBtn" const link = document.createElement("a");
) as HTMLButtonElement; link.href = downloadUrl;
if (!downloadBtn) return; link.download = `${event.event_name}_files.zip`;
const originalBtnContent = downloadBtn.innerHTML; document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(downloadUrl);
try { // Show success message
// Show loading state createToast("Files downloaded successfully!", "success");
downloadBtn.innerHTML = } catch (error: any) {
'<span class="loading loading-spinner loading-xs"></span> Preparing...'; console.error("Failed to download files:", error);
downloadBtn.disabled = true; createToast(
error?.message || "Failed to download files. Please try again.",
"error",
);
} finally {
// Reset button state
downloadBtn.innerHTML = originalBtnContent;
downloadBtn.disabled = false;
}
};
const zip = new JSZip(); // Close event details modal
window.closeEventDetailsModal = function () {
const modal = document.getElementById(
"eventDetailsModal",
) as HTMLDialogElement;
const filesContent = document.getElementById("filesContent");
// Get current event files if (modal) {
const baseUrl = "https://pocketbase.ieeeucsd.org"; // Reset the files content
const collectionId = "events"; if (filesContent) {
const recordId = window.currentEventId; filesContent.innerHTML = "";
}
// Get the current event from the window object // Reset any other state if needed
const eventDataId = `event_${window.currentEventId}`; window.currentEventId = "";
const event = window[eventDataId];
if (!event || !event.files || event.files.length === 0) { // Close the modal
throw new Error("No files available to download"); modal.close();
} }
};
// Download each file and add to zip // Make helper functions available globally
const filePromises = event.files.map(async (filename: string) => { window.showFilePreview = window.showFilePreviewEvents;
const fileUrl = `${baseUrl}/api/files/${collectionId}/${recordId}/${filename}`; window.handlePreviewError = function () {
const response = await fetch(fileUrl); const previewContent = document.getElementById("previewContent");
if (!response.ok) { if (previewContent) {
throw new Error(`Failed to download ${filename}`); previewContent.innerHTML = `
}
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
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;
}
};
// 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"> <div class="alert alert-error">
<Icon icon="heroicons:x-circle" className="h-6 w-6" /> <Icon icon="heroicons:x-circle" className="h-6 w-6" />
<span>Failed to load file preview</span> <span>Failed to load file preview</span>
</div> </div>
`; `;
} }
}; };
</script> </script>