Upload index.html

Sorting by date asc/desc including model type, done by: https://huggingface.co/Symbiomatrix

(thanks! ❤️❤️❤️)

index.html

@@ -1346,6 +1346,8 @@
           <option value="name-desc">Name (Z-A)</option>
           <option value="date-desc">Update Date (Newest)</option>
           <option value="date-asc">Update Date (Oldest)</option>
+          <option value="daily-desc">Daily (Newest)</option>
+          <option value="daily-asc">Daily (Oldest)</option>
         </select>
       </div>
 
@@ -1603,9 +1605,34 @@
       currentPage = 1;
     }
 
-    function getPersonUploadDate(personKey) {
+    function getPersonUploadDate(personKey, selectedTypes = null, dateOnly = false) {
       const personData = uploadData.data[personKey];
-      return personData?.lastUpdated || null;
+      if (!personData || !personData.models) return null;
+      
+      // If no specific types requested, return the global lastUpdated
+      if (!selectedTypes) {
+        const dateStr = personData.lastUpdated;
+        return dateOnly && dateStr ? dateStr.split('T')[0] : dateStr;
+      }
+      
+      // Find the most recent upload date among selected model types
+      let mostRecentDate = null;
+      
+      for (const modelType of selectedTypes) {
+        const models = personData.models[modelType];
+        if (models && models.length > 0) {
+          // Models are typically sorted with newest first in the array
+          const latestModel = models[0];
+          if (latestModel.uploadedAt) {
+            const modelDate = latestModel.uploadedAt;
+            if (!mostRecentDate || modelDate > mostRecentDate) {
+              mostRecentDate = modelDate;
+            }
+          }
+        }
+      }
+      
+      return dateOnly && mostRecentDate ? mostRecentDate.split('T')[0] : mostRecentDate;
     }
 
     function isWithinPeriod(dateStr, period) {
@@ -1629,7 +1656,7 @@
       }
     }
 
-    function sortModels(models, sortBy) {
+    function sortModels(models, sortBy, selectedTypes = null) {
       const sorted = [...models];
       
       switch (sortBy) {
@@ -1639,20 +1666,50 @@
         case 'name-desc':
           sorted.sort((a, b) => b.key.localeCompare(a.key));
           break;
-        case 'date-desc':
+        case 'date-desc':  // "Update Date (Newest)"
           sorted.sort((a, b) => {
-            const dateA = getPersonUploadDate(a.key) || '1970-01-01';
-            const dateB = getPersonUploadDate(b.key) || '1970-01-01';
+            const dateA = getPersonUploadDate(a.key, selectedTypes) || '1970-01-01';
+            const dateB = getPersonUploadDate(b.key, selectedTypes) || '1970-01-01';
             return dateB.localeCompare(dateA);
           });
           break;
-        case 'date-asc':
+        case 'date-asc':   // "Update Date (Oldest)"
           sorted.sort((a, b) => {
-            const dateA = getPersonUploadDate(a.key) || '2100-01-01';
-            const dateB = getPersonUploadDate(b.key) || '2100-01-01';
+            const dateA = getPersonUploadDate(a.key, selectedTypes) || '2100-01-01';
+            const dateB = getPersonUploadDate(b.key, selectedTypes) || '2100-01-01';
             return dateA.localeCompare(dateB);
           });
           break;
+        case 'daily-desc':  // "Daily (Newest)" - Group by date, newest days first, then A-Z
+          sorted.sort((a, b) => {
+            // Get just the date portion (YYYY-MM-DD) for grouping
+            const dateA = getPersonUploadDate(a.key, selectedTypes, true) || '1970-01-01';
+            const dateB = getPersonUploadDate(b.key, selectedTypes, true) || '1970-01-01';
+            
+            // First, sort by date descending (newest days first)
+            if (dateB !== dateA) {
+              return dateB.localeCompare(dateA);
+            }
+            
+            // If same date, sort by name A-Z
+            return a.key.localeCompare(b.key);
+          });
+          break;
+        case 'daily-asc':   // "Daily (Oldest)" - Group by date, oldest days first, then A-Z
+          sorted.sort((a, b) => {
+            // Get just the date portion (YYYY-MM-DD) for grouping
+            const dateA = getPersonUploadDate(a.key, selectedTypes, true) || '2100-01-01';
+            const dateB = getPersonUploadDate(b.key, selectedTypes, true) || '2100-01-01';
+            
+            // First, sort by date ascending (oldest days first)
+            if (dateA !== dateB) {
+              return dateA.localeCompare(dateB);
+            }
+            
+            // If same date, sort by name A-Z
+            return a.key.localeCompare(b.key);
+          });
+          break;
       }
       
       return sorted;
@@ -1734,6 +1791,7 @@
 
     function renderCurrentPage() {
       const pageSize = getPageSize();
+      const sortBy = getSortBy();
       const contentDiv = document.getElementById('mainContent');
       contentDiv.innerHTML = '';
 
@@ -1746,7 +1804,39 @@
         pageItems = filteredResults.slice(start, end);
       }
 
+      // Get selected types for date calculation
+      const selectedTypes = getSelectedTypes();
+      const showAllTypes = selectedTypes.length === 0;
+      
+      let lastDate = null;
+      
       pageItems.forEach((element) => {
+        // Get the date for this element (respecting selected types)
+        const dateStr = showAllTypes 
+          ? getPersonUploadDate(element.key, null, true)
+          : getPersonUploadDate(element.key, selectedTypes, true);
+        
+        // Add date header if doing daily sort and date changed
+        if (sortBy.startsWith('daily-') && dateStr && dateStr !== lastDate) {
+          const formattedDate = formatDateForDisplay(dateStr);
+          const dateHeader = document.createElement('div');
+          dateHeader.className = 'date-header';
+          dateHeader.style.cssText = `
+            grid-column: 1 / -1;
+            margin: 20px 0 10px;
+            padding: 12px 16px;
+            background: var(--card-bg);
+            border-radius: 12px;
+            border-left: 4px solid var(--accent-blue);
+            font-weight: 600;
+            color: var(--accent-blue);
+            font-size: 16px;
+            box-shadow: 0 2px 8px var(--shadow-color);
+          `;
+          dateHeader.innerHTML = `📅 ${formattedDate}`;
+          contentDiv.appendChild(dateHeader);
+          lastDate = dateStr;
+        }
         const card = document.createElement('div');
         card.className = 'element';
         
@@ -1775,6 +1865,49 @@
 
       updatePaginationControls();
     }
+    
+    // Helper function to get selected types
+    function getSelectedTypes() {
+      const selectedTypes = [];
+      if (document.getElementById('selectedLocon').checked) selectedTypes.push('locon');
+      if (document.getElementById('selectedLora').checked) selectedTypes.push('lora');
+      if (document.getElementById('selectedEmbedding').checked) selectedTypes.push('embedding');
+      if (document.getElementById('selectedFlux').checked) selectedTypes.push('flux');
+      if (document.getElementById('selectedWan').checked) selectedTypes.push('wan');
+      if (document.getElementById('selectedSdxl').checked) selectedTypes.push('sdxl');
+      if (document.getElementById('selectedZimage').checked) selectedTypes.push('zimage');
+      if (document.getElementById('selectedQwen').checked) selectedTypes.push('qwen');
+      if (document.getElementById('selectedLtx').checked) selectedTypes.push('ltx');
+      if (document.getElementById('selectedKlein9').checked) selectedTypes.push('klein9');
+      return selectedTypes;
+    }
+    
+    // Helper function to format date for display
+    function formatDateForDisplay(dateStr) {
+      if (!dateStr) return 'Unknown Date';
+      const date = new Date(dateStr);
+      const today = new Date();
+      const yesterday = new Date(today);
+      yesterday.setDate(yesterday.getDate() - 1);
+      
+      // Check if it's today
+      if (date.toDateString() === today.toDateString()) {
+        return 'Today';
+      }
+      
+      // Check if it's yesterday
+      if (date.toDateString() === yesterday.toDateString()) {
+        return 'Yesterday';
+      }
+      
+      // Otherwise format normally
+      return date.toLocaleDateString('en-US', { 
+        weekday: 'long', 
+        year: 'numeric', 
+        month: 'long', 
+        day: 'numeric' 
+      });
+    }
 
     function getPersonUpdateTooltip(personKey) {
       const personData = uploadData.data?.[personKey];
@@ -2339,6 +2472,11 @@
       const periodFilter = getPeriodFilter();
       const pageSize = getPageSize();
 
+      // Get which model types are selected
+      const selectedTypes = getSelectedTypes();
+      
+      // If no types are selected, we should show all types
+      const showAllTypes = selectedTypes.length === 0;
       // Filter by search term and type
       let filtered = presenceModels.filter((element) => {
         return (
@@ -2347,16 +2485,31 @@
         );
       });
 
-      // Filter by period
+      // Filter by period - use the appropriate date based on selected types
       if (periodFilter !== 'all') {
         filtered = filtered.filter((element) => {
-          const uploadDate = getPersonUploadDate(element.key);
-          return isWithinPeriod(uploadDate, periodFilter);
+          // Get the appropriate date based on what we're showing
+          const relevantDate = showAllTypes 
+            ? getPersonUploadDate(element.key)  // Global date when showing all types
+            : getPersonUploadDate(element.key, selectedTypes);  // Date only for selected types
+          
+          // If showing selected types only, and person has no models of those types,
+          // they shouldn't appear in the results at all
+          if (!showAllTypes && !relevantDate) {
+            return false;
+          }
+          
+          return isWithinPeriod(relevantDate, periodFilter);
         });
       }
 
-      // Sort
-      filtered = sortModels(filtered, sortBy);
+      // Sort - pass selectedTypes when sorting by date
+      const isSortingByDate = sortBy.includes('date') || sortBy.includes('daily');
+      filtered = sortModels(
+        filtered, 
+        sortBy, 
+        (isSortingByDate && !showAllTypes) ? selectedTypes : null
+      );
 
       // Store for pagination
       filteredResults = filtered;