Enh(viewer): Allow to filter by date

Author: klieret

codeclash/viewer/static/css/picker.css

@@ -37,6 +37,7 @@
 .filter-controls {
   display: flex;
   align-items: center;
+  gap: 0.75rem;
 }
 
 #clear-filters {
@@ -190,6 +191,65 @@
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
 
+/* Active Filters Badge */
+.active-filters-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-right: 1rem;
+  flex-wrap: wrap;
+}
+
+.filter-label {
+  font-size: 0.9rem;
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.filter-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  background-color: var(--accent-color);
+  color: #000000;
+  padding: 0.375rem 0.625rem;
+  border-radius: 1rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.filter-badge i {
+  font-size: 0.9rem;
+}
+
+.filter-badge-close {
+  background: none;
+  border: none;
+  color: #000000;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 0.125rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+}
+
+.filter-badge-close:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+  transform: scale(1.1);
+}
+
+.filter-badge-close i {
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
 .table-header {
   background-color: var(--bg-tertiary);
   padding: 1rem;
@@ -565,6 +625,22 @@
   background-color: var(--accent-color);
 }
 
+.date-text.clickable-filter:hover {
+  filter: brightness(1.2);
+  background-color: var(--accent-hover);
+  color: #000000;
+  font-weight: 600;
+}
+
+.date-text.date-selected {
+  background-color: var(--accent-color);
+  color: #000000;
+  font-weight: 700;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
 .action-cell {
   display: flex;
   justify-content: center;

codeclash/viewer/static/js/picker.js

@@ -629,6 +629,12 @@ document.addEventListener("DOMContentLoaded", function () {
   // Initialize filters
   initializeFilters();
 
+  // Add listener to game filter to save changes
+  const gameFilter = document.getElementById("game-filter");
+  if (gameFilter) {
+    gameFilter.addEventListener("change", saveFilters);
+  }
+
   // Close model dropdown when clicking outside
   document.addEventListener("click", (event) => {
     const dropdown = document.getElementById("model-filter-dropdown");
@@ -921,6 +927,7 @@ let allGameRows = [];
 let uniqueGames = new Set();
 let uniqueModels = new Set();
 let selectedModels = new Set();
+let selectedDate = null;
 
 function shouldRowBeVisible(row) {
   const gameFilter =
@@ -952,6 +959,22 @@ function shouldRowBeVisible(row) {
       }
     }
 
+    // Check date filter - if a date is selected, row must match that date
+    if (selectedDate) {
+      const dateElement = row.querySelector(".date-text");
+      if (dateElement) {
+        const dateText = dateElement.textContent.trim();
+        // Extract just the YYYY-MM-DD part
+        const rowDate = dateText.split(" ")[0];
+        if (rowDate !== selectedDate) {
+          return false;
+        }
+      } else {
+        // Row has no date, so it doesn't match
+        return false;
+      }
+    }
+
     return true;
   } else {
     // For intermediate folders, check if any child game folders should be visible
@@ -988,6 +1011,13 @@ function initializeFilters() {
   // Populate filter dropdowns
   populateGameFilter();
   populateModelFilter();
+
+  // Load saved filters from localStorage
+  const hasFilters = loadFilters();
+  if (hasFilters) {
+    // Apply the loaded filters
+    applyFilters();
+  }
 }
 
 function populateGameFilter() {
@@ -1070,7 +1100,10 @@ function applyFilters() {
 function clearFilters() {
   document.getElementById("game-filter").value = "";
   selectedModels.clear();
+  selectedDate = null;
   updateModelFilterDisplay();
+  updateDateFilterDisplay();
+  saveFilters();
 
   // Reapply the current folder states without any filters
   applyFilters();
@@ -1080,6 +1113,7 @@ function setGameFilter(gameName) {
   const gameFilter = document.getElementById("game-filter");
   if (gameFilter) {
     gameFilter.value = gameName;
+    saveFilters();
     applyFilters();
   }
 }
@@ -1094,13 +1128,15 @@ function toggleModelSelection(event, modelName) {
   }
 
   updateModelFilterDisplay();
+  saveFilters();
   applyFilters();
 }
 
 function clearModelSelection(event) {
   event.stopPropagation();
   selectedModels.clear();
   updateModelFilterDisplay();
+  saveFilters();
   applyFilters();
 }
 
@@ -1154,6 +1190,120 @@ function handleModelTagClick(event, modelName) {
   toggleModelSelection(event, modelName);
 }
 
+function handleDateClick(event, dateText) {
+  event.stopPropagation();
+  // Extract just the YYYY-MM-DD part
+  const date = dateText.trim().split(" ")[0];
+
+  // Toggle date filter - if already selected, clear it
+  if (selectedDate === date) {
+    selectedDate = null;
+  } else {
+    selectedDate = date;
+  }
+
+  updateDateFilterDisplay();
+  saveFilters();
+  applyFilters();
+}
+
+function updateDateFilterDisplay() {
+  // Find all date cells and update their styling
+  const dateCells = document.querySelectorAll(".date-text");
+  dateCells.forEach((cell) => {
+    const cellDate = cell.textContent.trim().split(" ")[0];
+    if (selectedDate && cellDate === selectedDate) {
+      cell.classList.add("date-selected");
+    } else {
+      cell.classList.remove("date-selected");
+    }
+  });
+
+  // Update the filter badge
+  const badge = document.getElementById("date-filter-badge");
+  const badgeText = document.getElementById("date-filter-text");
+  const container = document.getElementById("active-filters-container");
+
+  if (selectedDate) {
+    if (badgeText) badgeText.textContent = selectedDate;
+    if (badge) badge.style.display = "inline-flex";
+    if (container) container.style.display = "flex";
+  } else {
+    if (badge) badge.style.display = "none";
+    // Hide container if no filters are active
+    if (container && !hasActiveFilters()) {
+      container.style.display = "none";
+    }
+  }
+}
+
+function hasActiveFilters() {
+  return (
+    selectedDate !== null ||
+    selectedModels.size > 0 ||
+    (document.getElementById("game-filter")?.value || "") !== ""
+  );
+}
+
+function clearDateFilter(event) {
+  if (event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  selectedDate = null;
+  updateDateFilterDisplay();
+  saveFilters();
+  applyFilters();
+}
+
+// Filter persistence
+const FILTERS_KEY = "picker_filters";
+
+function saveFilters() {
+  const filters = {
+    game: document.getElementById("game-filter")?.value || "",
+    models: Array.from(selectedModels),
+    date: selectedDate,
+  };
+  try {
+    localStorage.setItem(FILTERS_KEY, JSON.stringify(filters));
+  } catch (e) {
+    console.error("Failed to save filters:", e);
+  }
+}
+
+function loadFilters() {
+  try {
+    const stored = localStorage.getItem(FILTERS_KEY);
+    if (stored) {
+      const filters = JSON.parse(stored);
+
+      // Restore game filter
+      const gameFilter = document.getElementById("game-filter");
+      if (gameFilter && filters.game) {
+        gameFilter.value = filters.game;
+      }
+
+      // Restore model filter
+      if (filters.models && Array.isArray(filters.models)) {
+        filters.models.forEach((model) => selectedModels.add(model));
+        updateModelFilterDisplay();
+      }
+
+      // Restore date filter
+      if (filters.date) {
+        selectedDate = filters.date;
+        updateDateFilterDisplay();
+      }
+
+      return true;
+    }
+  } catch (e) {
+    console.error("Failed to load filters:", e);
+  }
+  return false;
+}
+
 // Sorting functionality
 let currentSort = { column: null, ascending: true };
 

codeclash/viewer/templates/picker.html

@@ -26,6 +26,16 @@
             </div>
             <div class="right-controls">
                 <div class="filter-controls">
+                    <div id="active-filters-container" class="active-filters-container" style="display: none;">
+                        <span class="filter-label">Active filters:</span>
+                        <span id="date-filter-badge" class="filter-badge" style="display: none;">
+                            <i class="bi bi-calendar"></i>
+                            <span id="date-filter-text"></span>
+                            <button class="filter-badge-close" onclick="clearDateFilter(event)" title="Clear date filter">
+                                <i class="bi bi-x"></i>
+                            </button>
+                        </span>
+                    </div>
                     <button id="clear-filters" onclick="clearFilters()" title="Clear all filters">
                         <i class="bi bi-x-circle"></i> Clear Filters
                     </button>
@@ -47,6 +57,13 @@
             </div>
             <div class="right-controls">
                 <div class="filter-controls">
+                    <div id="active-filters-container" class="active-filters-container" style="display: none;">
+                        <span class="filter-label">Active filters:</span>
+                        <span id="date-filter-badge" class="filter-badge" style="display: none;">
+                            <i class="bi bi-calendar"></i>
+                            <span id="date-filter-text"></span>
+                        </span>
+                    </div>
                     <button id="clear-filters" disabled title="Not available in static mode">
                         <i class="bi bi-x-circle"></i> Clear Filters
                     </button>
@@ -117,7 +134,7 @@
 
                 <div class="date-cell">
                     {% if game.is_game and game.created_timestamp %}
-                    <span class="date-text">{{ game.created_timestamp|format_timestamp }}</span>
+                    <span class="date-text clickable-filter" onclick="handleDateClick(event, '{{ game.created_timestamp|format_timestamp }}')" title="Click to filter by this date">{{ game.created_timestamp|format_timestamp }}</span>
                     {% else %}
                     <span class="date-unknown">-</span>
                     {% endif %}