news sort control in sidebar

public/admin.php

@@ -334,9 +334,9 @@ $counts['total'] = count($all_contributions);
                                         <i class="fa-solid fa-trash"></i> Löschen
                                     </button>
 
-                                    <a class="btn btn-map" href="index.php" target="_blank">
+                                    <!-- <a class="btn btn-map" href="index.php" target="_blank">
                                         <i class="fa-solid fa-map-location-dot"></i> Karte
-                                    </a>
+                                    </a> -->
                                 </div>
                             </div>
                         </div>

public/index.php

@@ -195,6 +195,14 @@ $news_items = $stmt->fetchAll();
                             <input type="text" id="news-search-input" placeholder="Neuigkeiten durchsuchen..." class="form-input" oninput="filterNews()">
                         </div>
 
+                        <div class="list-controls">
+                            <select id="news-sort" class="form-input list-sort-select" onchange="sortNews()">
+                                <option value="date-desc">Neueste zuerst</option>
+                                <option value="date-asc">Älteste zuerst</option>
+                            </select>
+                            <span class="list-count"><?= count($news_items) ?> Neuigkeiten</span>
+                        </div>
+
                         <!-- News Items Container -->
                         <div id="news-list">
                             <?php if (empty($news_items)): ?>
@@ -202,9 +210,10 @@ $news_items = $stmt->fetchAll();
                             <?php else: ?>
                                 <?php foreach ($news_items as $news): ?>
                                     <div class="news-item"
-                                         data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
-                                         data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
-                                         data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>">
+                                        data-title="<?= htmlspecialchars(strtolower($news['title'])) ?>"
+                                        data-content="<?= htmlspecialchars(strtolower($news['content'])) ?>"
+                                        data-author="<?= htmlspecialchars(strtolower($news['author_name'])) ?>"
+                                        data-date="<?= $news['published_at'] ?>">
                                         <h3><?= htmlspecialchars($news['title']) ?></h3>
                                         <p><?= nl2br(htmlspecialchars($news['content'])) ?></p>
                                         <span class="news-date">

public/js/app.js

@@ -1159,6 +1159,21 @@ function filterNews() {
     });
 }
 
+// Sorts News Items in Sidebar by Date
+function sortNews() {
+    var sortBy = document.getElementById('news-sort').value;
+    var container = document.getElementById('news-list');
+    var items = Array.from(container.querySelectorAll('.news-item'));
+
+    items.sort(function (a, b) {
+        if (sortBy === 'date-desc') return new Date(b.dataset.date) - new Date(a.dataset.date);
+        if (sortBy === 'date-asc')  return new Date(a.dataset.date) - new Date(b.dataset.date);
+        return 0;
+    });
+
+    items.forEach(function (item) { container.appendChild(item); });
+}
+
 // Loads and Displays Comments forContributions in Popups
 function loadComments(contributionId) {
     apiCall({

public/styles.css

@@ -678,6 +678,7 @@ select.form-input { cursor: pointer; }
 
 .list-sort-select {
     width: auto;
+    min-width:185px;
     padding: 6px var(--space-sm);
     font-size: var(--font-sm);
     flex-shrink: 0;