move sorting to the database

frontend/app.js

@@ -25,6 +25,10 @@ let viewMode = 0; // 0: Street View, 1: Map View, 2: Satellite View
 let targetSyncTime = null;
 let idleAnimationId = null;
 
+// Pagination state
+let currentMyPage = 1;
+let currentPublicPage = 1;
+const KML_PAGE_LIMIT = 10;
 
 let apiKey = null;
 window.isGeneratingRoute = false;
@@ -156,8 +160,38 @@ function setupKMLBrowser() {
     document.getElementById('kmlUploadInput').addEventListener('change', handleKMLUpload);
 
     // Sort controls
-    document.getElementById('myFilesSortSelect').addEventListener('change', () => loadKMLFiles());
-    document.getElementById('publicFilesSortSelect').addEventListener('change', () => loadKMLFiles());
+    document.getElementById('myFilesSortSelect').addEventListener('change', () => {
+        currentMyPage = 1;
+        loadKMLFiles();
+    });
+    document.getElementById('publicFilesSortSelect').addEventListener('change', () => {
+        currentPublicPage = 1;
+        loadKMLFiles();
+    });
+
+    // Pagination buttons (My Files)
+    document.getElementById('prevMyPage').addEventListener('click', () => {
+        if (currentMyPage > 1) {
+            currentMyPage--;
+            loadKMLFiles();
+        }
+    });
+    document.getElementById('nextMyPage').addEventListener('click', () => {
+        currentMyPage++;
+        loadKMLFiles();
+    });
+
+    // Pagination buttons (Public Files)
+    document.getElementById('prevPublicPage').addEventListener('click', () => {
+        if (currentPublicPage > 1) {
+            currentPublicPage--;
+            loadKMLFiles();
+        }
+    });
+    document.getElementById('nextPublicPage').addEventListener('click', () => {
+        currentPublicPage++;
+        loadKMLFiles();
+    });
 }
 
 function openKMLBrowser() {
@@ -205,7 +239,19 @@ async function handleKMLUpload(e) {
 
 async function loadKMLFiles() {
     try {
-        const response = await fetch('/api/kml/list');
+        const mySort = document.getElementById('myFilesSortSelect').value;
+        const publicSort = document.getElementById('publicFilesSortSelect').value;
+
+        const params = new URLSearchParams({
+            my_page: currentMyPage,
+            my_limit: KML_PAGE_LIMIT,
+            my_sort_by: mySort,
+            public_page: currentPublicPage,
+            public_limit: KML_PAGE_LIMIT,
+            public_sort_by: publicSort
+        });
+
+        const response = await fetch(`/api/kml/list?${params.toString()}`);
         if (!response.ok) {
             console.error('Failed to load KML files');
             return;
@@ -216,8 +262,19 @@ async function loadKMLFiles() {
         // Render my files
         renderKMLFiles('myFilesList', data.my_files || [], true);
 
+        // Update my pagination UI
+        document.getElementById('myPageNum').textContent = `Page ${data.my_page}`;
+        document.getElementById('prevMyPage').disabled = data.my_page <= 1;
+        document.getElementById('nextMyPage').disabled = (data.my_page * KML_PAGE_LIMIT) >= data.my_total;
+
         // Render public files
         renderKMLFiles('publicFilesList', data.public_files || [], false);
+
+        // Update public pagination UI
+        document.getElementById('publicPageNum').textContent = `Page ${data.public_page}`;
+        document.getElementById('prevPublicPage').disabled = data.public_page <= 1;
+        document.getElementById('nextPublicPage').disabled = (data.public_page * KML_PAGE_LIMIT) >= data.public_total;
+
     } catch (error) {
         console.error('Error loading KML files:', error);
     }

frontend/index.html

@@ -153,14 +153,21 @@
                         <div class="sort-controls">
                             <label>Sort by:</label>
                             <select id="myFilesSortSelect">
-                                <option value="date">Newest First</option>
+                                <option value="date">Most Recent</option>
                                 <option value="distance">Distance</option>
+                                <option value="filename">Filename</option>
                             </select>
                         </div>
 
                         <div id="myFilesList" class="kml-file-list">
                             <p class="empty-message">No KML files uploaded yet</p>
                         </div>
+
+                        <div class="pagination-controls">
+                            <button id="prevMyPage" class="pagination-btn" disabled>&larr; Previous</button>
+                            <span id="myPageNum">Page 1</span>
+                            <button id="nextMyPage" class="pagination-btn">Next &rarr;</button>
+                        </div>
                     </div>
 
                     <!-- Public Files Tab -->
@@ -170,6 +177,7 @@
                             <select id="publicFilesSortSelect">
                                 <option value="votes">Highest Votes</option>
                                 <option value="date">Most Recent</option>
+                                <option value="distance">Distance</option>
                             </select>
                         </div>