Invario/Inventarsystem
3
1
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects Releases 216 Wiki Activity

Enhance library items API with pagination support and improve loading mechanism in UI

Browse Source
This commit is contained in:
AIIrondev
2026-04-12 17:22:49 +02:00
parent daccf3334b
commit c078de0076
4 changed files with 346 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Web/templates/main.html
+37 -8
View File
@@ -724,8 +724,10 @@
// Add this line to define allItems globally
let allItems = [];
function loadItems() {
fetch("{{ url_for('get_items') }}")
const MAIN_ITEMS_PAGE_SIZE = 120;
function loadItems(offset = 0, append = false) {
fetch(`{{ url_for('get_items') }}?offset=${offset}&limit=${MAIN_ITEMS_PAGE_SIZE}`)
.then(response => response.json())
.then(data => {
const itemsContainer = document.querySelector('#items-container');
@@ -735,27 +737,39 @@
const filter3Values = new Set();
// Store all items data globally for filter rebuilding
allItems = data.items || [];
const pageItems = data.items || [];
allItems = append ? allItems.concat(pageItems) : pageItems;
// Clear the container first
itemsContainer.innerHTML = '';
if (!append) {
itemsContainer.innerHTML = '';
}
if (!data.items || data.items.length === 0) {
if (!append && (!pageItems || pageItems.length === 0)) {
itemsContainer.innerHTML = '<div class="no-items-message">Keine Objekte gefunden</div>';
return;
}
// Sort items by name in ascending order (A-Z)
data.items.sort((a, b) => {
pageItems.sort((a, b) => {
const nameA = a.Name ? a.Name.toLowerCase() : '';
const nameB = b.Name ? b.Name.toLowerCase() : '';
return nameA.localeCompare(nameB); // Ascending order
});
allItems.forEach(itemForFilters => {
const f1 = Array.isArray(itemForFilters.Filter) ? itemForFilters.Filter : (itemForFilters.Filter ? [itemForFilters.Filter] : []);
const f2 = Array.isArray(itemForFilters.Filter2) ? itemForFilters.Filter2 : (itemForFilters.Filter2 ? [itemForFilters.Filter2] : []);
const f3 = Array.isArray(itemForFilters.Filter3) ? itemForFilters.Filter3 : (itemForFilters.Filter3 ? [itemForFilters.Filter3] : []);
f1.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter1Values.add(value); });
f2.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter2Values.add(value); });
f3.forEach(value => { if (value && typeof value === 'string' && value.trim() !== '') filter3Values.add(value); });
});
const favoriteIds = new Set(data.favorites || []);
window.currentFavorites = favoriteIds;
try { sessionStorage.setItem('favoritesCache', JSON.stringify(Array.from(favoriteIds))); } catch(e){}
data.items.forEach(item => {
pageItems.forEach(item => {
try {
const card = document.createElement('div');
card.classList.add('item-card');
@@ -996,7 +1010,9 @@
populateFilterOptions('filter3-options', [...filter3Values].sort(), 3);
// Start display from leftmost position (first card, which is now Z)
itemsContainer.scrollLeft = 0;
if (!append) {
itemsContainer.scrollLeft = 0;
}
// Apply filters
applyFilters();
@@ -1011,9 +1027,22 @@
if (activeFilters.filter1.length > 0 || activeFilters.filter2.length > 0) {
rebuildFilter3Options();
}
if (data.has_more) {
const nextOffset = (data.offset || offset) + (data.count || pageItems.length);
const continueLoad = () => loadItems(nextOffset, true);
if ('requestIdleCallback' in window) {
requestIdleCallback(continueLoad, { timeout: 250 });
} else {
setTimeout(continueLoad, 0);
}
}
})
.catch(error => {
console.error('Error fetching items:', error);
if (append) {
return;
}
const itemsContainer = document.querySelector('#items-container');
itemsContainer.innerHTML =
'<div class="error-message">Fehler beim Laden der Objekte. Bitte versuchen Sie es später erneut.</div>';