update to web interface

nfoguard-web/static/js/app.js

@@ -514,17 +514,27 @@ function showEpisodesModal(data) {
                         </button>
                     </div>
                     <div class="table-container">
-                        <table class="data-table">
+                        <table class="data-table sortable-table">
                             <thead>
                                 <tr>
                                     <th width="40px">
                                         <input type="checkbox" id="select-all-checkbox" onchange="toggleSelectAll()">
                                     </th>
-                                    <th>Episode</th>
-                                    <th>Aired</th>
-                                    <th>Date Added</th>
-                                    <th>Source</th>
-                                    <th>Video</th>
+                                    <th class="sortable" onclick="sortTable('episodes-table-body', 1, 'text')" style="cursor: pointer;">
+                                        Episode <i class="fas fa-sort"></i>
+                                    </th>
+                                    <th class="sortable" onclick="sortTable('episodes-table-body', 2, 'date')" style="cursor: pointer;">
+                                        Aired <i class="fas fa-sort"></i>
+                                    </th>
+                                    <th class="sortable" onclick="sortTable('episodes-table-body', 3, 'date')" style="cursor: pointer;">
+                                        Date Added <i class="fas fa-sort"></i>
+                                    </th>
+                                    <th class="sortable" onclick="sortTable('episodes-table-body', 4, 'text')" style="cursor: pointer;">
+                                        Source <i class="fas fa-sort"></i>
+                                    </th>
+                                    <th class="sortable" onclick="sortTable('episodes-table-body', 5, 'text')" style="cursor: pointer;">
+                                        Video <i class="fas fa-sort"></i>
+                                    </th>
                                     <th>Actions</th>
                                 </tr>
                             </thead>
@@ -1952,3 +1962,101 @@ function updatePopulateProgress(status) {
         }
     }
 }
+
+// ==================== Table Sorting Functions ====================
+
+let sortDirections = {}; // Track sort direction for each table column
+
+function sortTable(tableBodyId, columnIndex, dataType) {
+    const tbody = document.getElementById(tableBodyId);
+    if (!tbody) return;
+
+    const sortKey = `${tableBodyId}-${columnIndex}`;
+
+    // Toggle sort direction
+    if (!sortDirections[sortKey]) {
+        sortDirections[sortKey] = 'asc';
+    } else {
+        sortDirections[sortKey] = sortDirections[sortKey] === 'asc' ? 'desc' : 'asc';
+    }
+
+    const rows = Array.from(tbody.querySelectorAll('tr'));
+
+    rows.sort((a, b) => {
+        const aCell = a.cells[columnIndex];
+        const bCell = b.cells[columnIndex];
+
+        if (!aCell || !bCell) return 0;
+
+        let aValue = aCell.textContent.trim();
+        let bValue = bCell.textContent.trim();
+
+        // Handle MISSING values - always sort to bottom
+        if (aValue === 'MISSING') return 1;
+        if (bValue === 'MISSING') return -1;
+
+        // Handle different data types
+        if (dataType === 'date') {
+            // Parse dates for comparison
+            aValue = aValue === '-' ? '' : aValue;
+            bValue = bValue === '-' ? '' : bValue;
+
+            if (!aValue && !bValue) return 0;
+            if (!aValue) return 1;
+            if (!bValue) return -1;
+
+            const aDate = new Date(aValue);
+            const bDate = new Date(bValue);
+
+            if (sortDirections[sortKey] === 'asc') {
+                return aDate - bDate;
+            } else {
+                return bDate - aDate;
+            }
+        } else if (dataType === 'number') {
+            const aNum = parseFloat(aValue) || 0;
+            const bNum = parseFloat(bValue) || 0;
+
+            if (sortDirections[sortKey] === 'asc') {
+                return aNum - bNum;
+            } else {
+                return bNum - aNum;
+            }
+        } else {
+            // Text comparison
+            if (sortDirections[sortKey] === 'asc') {
+                return aValue.localeCompare(bValue);
+            } else {
+                return bValue.localeCompare(aValue);
+            }
+        }
+    });
+
+    // Re-append sorted rows
+    rows.forEach(row => tbody.appendChild(row));
+
+    // Update sort icons
+    updateSortIcons(tableBodyId, columnIndex, sortDirections[sortKey]);
+}
+
+function updateSortIcons(tableBodyId, activeColumn, direction) {
+    // Find the table and update icons
+    const tbody = document.getElementById(tableBodyId);
+    if (!tbody) return;
+
+    const table = tbody.closest('table');
+    if (!table) return;
+
+    const headers = table.querySelectorAll('th.sortable');
+    headers.forEach((header, index) => {
+        const icon = header.querySelector('i');
+        if (!icon) return;
+
+        // +1 to account for checkbox column
+        if (index + 1 === activeColumn) {
+            icon.className = direction === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down';
+        } else {
+            icon.className = 'fas fa-sort';
+        }
+    });
+}