js/filter.js

@@ -1,35 +1,115 @@
+
+let currentClientPage = 1;
+const itemsPerPage = 10;
+
 function initFilter() {
     const filterSelect = document.getElementById('category-filter');
     const listContainer = document.querySelector('.s-res-list');
 
     if (!filterSelect || !listContainer) return;
 
+    updateVisibility();
+
     filterSelect.addEventListener('change', function() {
-        const selectedCategory = this.value.toLowerCase().trim();
-        const cards = listContainer.querySelectorAll('.s-res-item');
+        currentClientPage = 1; // Bei Filterwechsel zurück auf Seite 1
+        updateVisibility();
+    });
 
-        console.log("--- FILTER GESTARTET ---");
-        console.log("Ausgewählt im Dropdown (kleingeschrieben): '" + selectedCategory + "'");
 
-        cards.forEach(card => {
-            const cardCategory = (card.getAttribute('data-category') || '').toLowerCase().trim();
-            const articleTitle = card.querySelector('.s-res-link')?.textContent.trim() || 'Unbekannt';
+    const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
+    pageButtons.forEach(button => {
+        button.addEventListener('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
 
-            console.log(`Prüfe Artikel "${articleTitle}": Karte hat '${cardCategory}' vs Dropdown '${selectedCategory}'`);
-
-            if (selectedCategory === 'all' || cardCategory === selectedCategory) {
-                card.style.display = 'flex';
-                console.log("-> TREFFER (wird angezeigt)");
-            } else {
-                card.style.display = 'none';
-                console.log("-> KEIN TREFFER (wird ausgeblendet)");
+            const targetPage = this.getAttribute('data-page');
+            if (targetPage) {
+                currentClientPage = parseInt(targetPage, 10);
+                updateVisibility();
             }
-        });
+        }, true);
     });
 }
 
+function updateVisibility() {
+    const filterSelect = document.getElementById('category-filter');
+    const listContainer = document.querySelector('.s-res-list');
+    const selectedCategory = filterSelect.value.toLowerCase().trim();
+    const cards = listContainer.querySelectorAll('.s-res-item');
+
+    // filtern
+    let visibleCards = [];
+    cards.forEach(card => {
+        const cardCategory = (card.getAttribute('data-category') || '').toLowerCase().trim();
+        
+        if (selectedCategory === 'all' || cardCategory.includes(selectedCategory) || selectedCategory.includes(cardCategory)) {
+            visibleCards.push(card);
+        } else {
+            card.style.display = 'none';
+        }
+    });
+
+    // nur 10 karten anzeigen
+    const totalVisible = visibleCards.length;
+    const totalPages = Math.max(1, ceil(totalVisible / itemsPerPage));
+    
+    // aktuelle seite validieren
+    if (currentClientPage < 1) currentClientPage = 1;
+    if (currentClientPage > totalPages) currentClientPage = totalPages;
+
+    const startOffset = (currentClientPage - 1) * itemsPerPage;
+    const endOffset = startOffset + itemsPerPage;
+
+    visibleCards.forEach((card, index) => {
+        if (index >= startOffset && index < endOffset) {
+            card.style.display = 'flex';
+        } else {
+            card.style.display = 'none';
+        }
+    });
+
+    // update der seitenzahl
+    updatePaginatorUI(currentClientPage, totalPages);
+}
+
+function updatePaginatorUI(currentPage, totalPages) {
+    const pageButtons = document.querySelectorAll('.s-res-page-navigation .s-res-page-btn');
+    
+    pageButtons.forEach(button => {
+        const targetPage = button.getAttribute('data-page');
+        
+        if (button.textContent.includes('«')) {
+            button.setAttribute('data-page', currentPage - 1);
+            button.disabled = (currentPage <= 1);
+        } else if (button.textContent.includes('»')) {
+            button.setAttribute('data-page', currentPage + 1);
+            button.disabled = (currentPage >= totalPages);
+        } else {
+            const pageNum = parseInt(button.textContent.trim(), 10);
+            
+            // Falls es die Seite im neuen Filter gar nicht mehr gibt -> Button verstecken
+            if (pageNum > totalPages) {
+                button.style.display = 'none';
+            } else {
+                button.style.display = 'inline-block';
+                if (pageNum === currentPage) {
+                    button.classList.add('s-res-page-btn-active');
+                } else {
+                    button.classList.remove('s-res-page-btn-active');
+                }
+            }
+        }
+    });
+}
+
+// Hilfsfunktion für Math.ceil in JS
+function ceil(val) { return Math.ceil(val); }
+
+// ist das DOM bereits vollständig aufgebaut?
 if (document.readyState === 'loading') {
+    // Falls noch geladen wird, auf das Event warten
     document.addEventListener('DOMContentLoaded', initFilter);
 } else {
+    // Falls das HTML bereits komplett da ist, sofort ausführen
     initFilter();
 }