added reset on refresh
This commit is contained in:
chark1es
parent
6748434fd7
commit
83324134b3
1 changed files with 157 additions and 93 deletions
|
|
@ -687,6 +687,63 @@ declare global {
|
|||
hasFood: "all",
|
||||
};
|
||||
|
||||
// Add cache for events
|
||||
let cachedEvents: Event[] = [];
|
||||
let lastCacheUpdate = 0; // Will force a refresh on page load
|
||||
const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds
|
||||
|
||||
// Function to refresh cache
|
||||
async function refreshCache() {
|
||||
try {
|
||||
const now = Date.now();
|
||||
|
||||
// Always refresh on page load (when lastCacheUpdate is 0)
|
||||
if (
|
||||
lastCacheUpdate === 0 ||
|
||||
now - lastCacheUpdate >= CACHE_DURATION ||
|
||||
cachedEvents.length === 0
|
||||
) {
|
||||
auth.setUpdating(true);
|
||||
const response = await get.getAll<Event>("events");
|
||||
cachedEvents = response.map((event) =>
|
||||
Get.convertUTCToLocal(event)
|
||||
);
|
||||
lastCacheUpdate = now;
|
||||
|
||||
// Initialize year filter options from cache
|
||||
const years = new Set<number>();
|
||||
cachedEvents.forEach((event) => {
|
||||
const year = new Date(event.start_date).getFullYear();
|
||||
years.add(year);
|
||||
});
|
||||
|
||||
const yearFilter = document.getElementById(
|
||||
"yearFilter"
|
||||
) as HTMLSelectElement;
|
||||
if (yearFilter) {
|
||||
const sortedYears = Array.from(years).sort((a, b) => b - a);
|
||||
yearFilter.innerHTML =
|
||||
'<option value="all">All Years</option>' +
|
||||
sortedYears
|
||||
.map(
|
||||
(year) =>
|
||||
`<option value="${year}">${year}</option>`
|
||||
)
|
||||
.join("");
|
||||
|
||||
if (filterState.year !== "all") {
|
||||
yearFilter.value = filterState.year;
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to refresh cache:", error);
|
||||
throw error;
|
||||
} finally {
|
||||
auth.setUpdating(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Helper function to determine current academic term
|
||||
function getCurrentTerm(): { start: Date; end: Date } {
|
||||
const now = new Date();
|
||||
|
|
@ -759,61 +816,6 @@ declare global {
|
|||
}
|
||||
}
|
||||
|
||||
// Add cache for events
|
||||
let cachedEvents: Event[] = [];
|
||||
let lastCacheUpdate = 0;
|
||||
const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds
|
||||
|
||||
// Function to refresh cache
|
||||
async function refreshCache() {
|
||||
try {
|
||||
const now = Date.now();
|
||||
if (
|
||||
now - lastCacheUpdate < CACHE_DURATION &&
|
||||
cachedEvents.length > 0
|
||||
) {
|
||||
return; // Use cached data if it's fresh
|
||||
}
|
||||
|
||||
auth.setUpdating(true);
|
||||
const response = await get.getAll<Event>("events");
|
||||
cachedEvents = response.map((event) =>
|
||||
Get.convertUTCToLocal(event)
|
||||
);
|
||||
lastCacheUpdate = now;
|
||||
|
||||
// Initialize year filter options from cache
|
||||
const years = new Set<number>();
|
||||
cachedEvents.forEach((event) => {
|
||||
const year = new Date(event.start_date).getFullYear();
|
||||
years.add(year);
|
||||
});
|
||||
|
||||
const yearFilter = document.getElementById(
|
||||
"yearFilter"
|
||||
) as HTMLSelectElement;
|
||||
if (yearFilter) {
|
||||
const sortedYears = Array.from(years).sort((a, b) => b - a);
|
||||
yearFilter.innerHTML =
|
||||
'<option value="all">All Years</option>' +
|
||||
sortedYears
|
||||
.map(
|
||||
(year) => `<option value="${year}">${year}</option>`
|
||||
)
|
||||
.join("");
|
||||
|
||||
if (filterState.year !== "all") {
|
||||
yearFilter.value = filterState.year;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to refresh cache:", error);
|
||||
throw error;
|
||||
} finally {
|
||||
auth.setUpdating(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Function to apply filters to cached data
|
||||
function filterEvents(events: Event[]): Event[] {
|
||||
return events.filter((event) => {
|
||||
|
|
@ -944,13 +946,13 @@ declare global {
|
|||
// Update events list
|
||||
if (paginatedEvents.length === 0) {
|
||||
eventsList.innerHTML = `
|
||||
<div class="text-center py-8 text-base-content/70">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 opacity-50" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
|
||||
</svg>
|
||||
<p>No events found</p>
|
||||
</div>
|
||||
`;
|
||||
<div class="text-center py-8 text-base-content/70">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 opacity-50" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
|
||||
</svg>
|
||||
<p>No events found</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -988,38 +990,38 @@ declare global {
|
|||
window[eventDataId] = event;
|
||||
|
||||
return `
|
||||
<div class="flex items-center justify-between p-4 bg-base-200 rounded-xl hover:bg-base-300 transition-all duration-300">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="badge badge-lg p-3 badge-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
|
||||
</svg>
|
||||
<div class="flex items-center justify-between p-4 bg-base-200 rounded-xl hover:bg-base-300 transition-all duration-300">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="badge badge-lg p-3 badge-primary">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">${event.event_name}</h4>
|
||||
<p class="text-sm opacity-70">${dateStr}${detailsStr ? ` • ${detailsStr}` : ""}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-ghost btn-sm" onclick="window.openDetailsModal(window['${eventDataId}'])">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||||
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-sm" onclick="window.openEditModal(window['${eventDataId}'])">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-sm text-error" onclick="window.deleteEvent('${event.id}', '${event.event_name.replace(/'/g, "\\'")}')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold">${event.event_name}</h4>
|
||||
<p class="text-sm opacity-70">${dateStr}${detailsStr ? ` • ${detailsStr}` : ""}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn btn-ghost btn-sm" onclick="window.openDetailsModal(window['${eventDataId}'])">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
|
||||
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-sm" onclick="window.openEditModal(window['${eventDataId}'])">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="btn btn-ghost btn-sm text-error" onclick="window.deleteEvent('${event.id}', '${event.event_name.replace(/'/g, "\\'")}')">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
|
|
@ -1219,6 +1221,68 @@ declare global {
|
|||
fetchEvents();
|
||||
});
|
||||
|
||||
// Initial setup
|
||||
if (typeof window !== "undefined") {
|
||||
window.addEventListener("DOMContentLoaded", () => {
|
||||
// Reset all filters to defaults
|
||||
const timeFilterAll = document.querySelector(
|
||||
'input[name="timeFilter"][value="all"]'
|
||||
) as HTMLInputElement;
|
||||
if (timeFilterAll) {
|
||||
// Ensure the radio button is properly checked
|
||||
timeFilterAll.checked = true;
|
||||
filterState.time = "all";
|
||||
}
|
||||
|
||||
const yearFilter = document.getElementById(
|
||||
"yearFilter"
|
||||
) as HTMLSelectElement;
|
||||
if (yearFilter) yearFilter.value = "all";
|
||||
|
||||
const publishedFilter = document.getElementById(
|
||||
"publishedFilter"
|
||||
) as HTMLSelectElement;
|
||||
if (publishedFilter) publishedFilter.value = "all";
|
||||
|
||||
const hasFilesFilter = document.getElementById(
|
||||
"hasFilesFilter"
|
||||
) as HTMLSelectElement;
|
||||
if (hasFilesFilter) hasFilesFilter.value = "all";
|
||||
|
||||
const hasFoodFilter = document.getElementById(
|
||||
"hasFoodFilter"
|
||||
) as HTMLSelectElement;
|
||||
if (hasFoodFilter) hasFoodFilter.value = "all";
|
||||
|
||||
const searchInput = document.getElementById(
|
||||
"searchInput"
|
||||
) as HTMLInputElement;
|
||||
if (searchInput) searchInput.value = "";
|
||||
|
||||
const perPageSelect = document.getElementById(
|
||||
"perPageSelect"
|
||||
) as HTMLSelectElement;
|
||||
if (perPageSelect) perPageSelect.value = "5";
|
||||
|
||||
// Reset variables
|
||||
searchQuery = "";
|
||||
perPage = 5;
|
||||
currentPage = 1;
|
||||
|
||||
// Reset filter state
|
||||
filterState = {
|
||||
time: "all",
|
||||
year: "all",
|
||||
published: "all",
|
||||
hasFiles: "all",
|
||||
hasFood: "all",
|
||||
};
|
||||
|
||||
// Fetch events with reset filters
|
||||
fetchEvents();
|
||||
});
|
||||
}
|
||||
|
||||
// Initial fetch
|
||||
fetchEvents();
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue