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",
|
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
|
// Helper function to determine current academic term
|
||||||
function getCurrentTerm(): { start: Date; end: Date } {
|
function getCurrentTerm(): { start: Date; end: Date } {
|
||||||
const now = new 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 to apply filters to cached data
|
||||||
function filterEvents(events: Event[]): Event[] {
|
function filterEvents(events: Event[]): Event[] {
|
||||||
return events.filter((event) => {
|
return events.filter((event) => {
|
||||||
|
|
@ -944,13 +946,13 @@ declare global {
|
||||||
// Update events list
|
// Update events list
|
||||||
if (paginatedEvents.length === 0) {
|
if (paginatedEvents.length === 0) {
|
||||||
eventsList.innerHTML = `
|
eventsList.innerHTML = `
|
||||||
<div class="text-center py-8 text-base-content/70">
|
<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">
|
<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" />
|
<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>
|
</svg>
|
||||||
<p>No events found</p>
|
<p>No events found</p>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -988,38 +990,38 @@ declare global {
|
||||||
window[eventDataId] = event;
|
window[eventDataId] = event;
|
||||||
|
|
||||||
return `
|
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 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="flex items-center gap-4">
|
||||||
<div class="badge badge-lg p-3 badge-primary">
|
<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">
|
<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" />
|
<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>
|
</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>
|
||||||
<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("");
|
.join("");
|
||||||
|
|
||||||
|
|
@ -1219,6 +1221,68 @@ declare global {
|
||||||
fetchEvents();
|
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
|
// Initial fetch
|
||||||
fetchEvents();
|
fetchEvents();
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue