updater sorter.js fuer client seite

content/search-results.php

@@ -44,12 +44,11 @@ $resultCount = count($results);
     <!-- Links: Seitenleiste für Filter und Suche -->
     <aside class="s-res-sidebar">
 
-        <!-- Sortierfuntion Box und Such Box-->
-         <form id="search-form-id" action="php/controller/search-results-controller.php" method="GET" class="s-res-sidebar-form">
-             <!-- Dieses Feld hält die aktuelle Seitenzahl für den Submit bereit -->
-             <input type="hidden" name="page" id="s-res-page-input" value="<?php echo $currentPage; ?>">
+        <form action="php/controller/search-results-controller.php" method="GET" id="search-form-id" class="s-res-sidebar-form">
+            
+            <input type="hidden" id="s-res-page-input" name="page" value="<?php echo $_GET['page'] ?? 1; ?>">
 
-             <div class="s-res-sidebar-box">
+            <div class="s-res-sidebar-box">
                 <h3 class="s-res-sidebar-title">Suche anpassen</h3>
                 <input type="search" id="site-search" name="q" placeholder="Suchen..." class="nav__search" value="<?php echo htmlspecialchars($query); ?>" maxlength="50" required>
                 <button type="submit" class="nav__search-button">Suchen</button>
@@ -60,20 +59,15 @@ $resultCount = count($results);
                 <?php $currentSort = $_SESSION['search_sort'] ?? 'alphabet'; ?>
                 <div class="s-res-filter-group">
                     <label class="s-res-filter-option">
-                        <input type="radio" name="sort" value="alphabet" <?php echo $currentSort === 'alphabet' ? 'checked' : ''; ?> onchange="this.form.submit()">
+                        <input type="radio" name="sort" value="alphabet" class="sort-radio" <?php echo $currentSort === 'alphabet' ? 'checked' : ''; ?>>
                         <span>Alphabetisch</span>
                     </label>
-                    <!-- Noch disabled, da likes noch nicht implementiert-->
                     <label class="s-res-filter-option">
-                        <input type="radio" name="sort" value="likes" <?php echo $currentSort === 'likes' ? 'checked' : ''; ?> disabled>
-                        <span style="color: #94a3b8;">Beliebtheit (Likes)</span>
-                    </label>
-                    <label class="s-res-filter-option">
-                        <input type="radio" name="sort" value="newest" <?php echo $currentSort === 'newest' ? 'checked' : ''; ?> onchange="this.form.submit()">
+                        <input type="radio" name="sort" value="newest" class="sort-radio" <?php echo $currentSort === 'newest' ? 'checked' : ''; ?>>
                         <span>Neueste Beiträge</span>
                     </label>
                     <label class="s-res-filter-option">
-                        <input type="radio" name="sort" value="oldest" <?php echo $currentSort === 'oldest' ? 'checked' : ''; ?> onchange="this.form.submit()">
+                        <input type="radio" name="sort" value="oldest" class="sort-radio" <?php echo $currentSort === 'oldest' ? 'checked' : ''; ?>>
                         <span>Älteste Beiträge</span>
                     </label>
                 </div>
@@ -155,4 +149,4 @@ $resultCount = count($results);
         </div>
     </main>
 
-</div>
+</div>

index.php

@@ -53,6 +53,7 @@ if ($pfad === "deleteAccount") {
         <link rel="stylesheet" href="css/message.css">
 
         <script src="js/paginator.js" async></script>
+        <script src="js/sorter.js" async></script>
 
         <title>EduForge</title>
     </head>

js/sorter.js

@@ -0,0 +1,45 @@
+
+function initClientSorter() {
+    const listContainer = document.querySelector('.s-res-list');
+    const sortRadios = document.querySelectorAll('.sort-radio');
+
+    // 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 sortValue = this.value;
+
+            cards.sort((a, b) => {
+                if (sortValue === 'alphabet') {
+                    // alphabetische sortierung
+                    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', initClientSorter);
+} else {
+    initClientSorter();
+}