updater sorter.js fuer client seite

js/sorter.js

@@ -1,26 +1,45 @@
 
-function initSorter() {
+function initClientSorter() {
-    const form = document.getElementById('search-form-id');
+    const listContainer = document.querySelector('.s-res-list');
     const sortRadios = document.querySelectorAll('.sort-radio');
 
-    if (!form) return;
+    // wenn keine liste vorhanden, abbrechen
+    if (!listContainer || sortRadios.length === 0) return;
 
     sortRadios.forEach(radio => {
         radio.addEventListener('change', function() {
-            
+            const cards = Array.from(listContainer.querySelectorAll('.s-res-item'));
-            const pageInput = document.getElementById('s-res-page-input');
+            const sortValue = this.value;
-            if (pageInput) {
+
-                pageInput.value = '1';
+            cards.sort((a, b) => {
-            }
+                if (sortValue === 'alphabet') {
-            
+                    // alphabetische sortierung
-            form.submit();
+                    const titleA = a.querySelector('.s-res-link').textContent.trim().toLowerCase();
+                    const titleB = b.querySelector('.s-res-link').textContent.trim().toLowerCase();
+                    return titleA.localeCompare(titleB);
+                } 
+                else if (sortValue === 'newest' || sortValue === 'oldest') {
+                    // hoehere ID wird als neuer gesehen
+                    const urlA = a.querySelector('.s-res-link').getAttribute('href');
+                    const urlB = b.querySelector('.s-res-link').getAttribute('href');
+                    
+                    const idA = parseInt(urlA.match(/id=(\d+)/)[1], 10);
+                    const idB = parseInt(urlB.match(/id=(\d+)/)[1], 10);
+
+                    return sortValue === 'newest' ? idB - idA : idA - idB;
+                }
+                return 0;
+            });
+
+            listContainer.innerHTML = '';
+            cards.forEach(card => listContainer.appendChild(card));
         });
     });
 }
 
 // ist das DOM bereits vollständig aufgebaut?
 if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initSorter);
+    document.addEventListener('DOMContentLoaded', initClientSorter);
 } else {
-    initSorter();
+    initClientSorter();
 }