TMP - didnt work retrying

Author: rmuxnet

js/downloads.js

@@ -15,43 +15,92 @@ document.addEventListener('DOMContentLoaded', async () => {
     let devices, imagesData;
 
     if (cachedData) {
+      console.log('Using cached device data');
       ({ devices, imagesData } = cachedData);
     } else {
-      const [devicesRes, imagesRes] = await Promise.all([
-        fetch('https://raw.githubusercontent.com/AxionAOSP/official_devices/refs/heads/main/README.md'),
-        fetch('https://raw.githubusercontent.com/AxionAOSP/official_devices/refs/heads/main/OTA/device_images.json')
-      ]);
+      console.log('Fetching fresh device data...');
+      try {
+        const [devicesRes, imagesRes] = await Promise.all([
+          fetch('https://raw.githubusercontent.com/AxionAOSP/official_devices/main/README.md'),
+          fetch('https://raw.githubusercontent.com/AxionAOSP/official_devices/main/OTA/device_images.json')
+        ]);
+
+        if (!devicesRes.ok) {
+          throw new Error(`Failed to fetch devices: ${devicesRes.status} ${devicesRes.statusText}`);
+        }
 
-      const [devicesText, images] = await Promise.all([
-        devicesRes.text(),
-        imagesRes.json()
-      ]);
+        if (!imagesRes.ok) {
+          throw new Error(`Failed to fetch images: ${imagesRes.status} ${imagesRes.statusText}`);
+        }
+
+        const [devicesText, images] = await Promise.all([
+          devicesRes.text(),
+          imagesRes.json()
+        ]);
 
-      devices = processDevices(devicesText);
-      imagesData = images;
-      saveToCache('device_data', { devices, imagesData });
+        console.log('Data fetched successfully, processing...');
+        devices = processDevices(devicesText);
+        
+        if (!devices || devices.length === 0) {
+          throw new Error('No devices found after processing README');
+        }
+        
+        console.log(`Processed ${devices.length} devices successfully`);
+        imagesData = images;
+        saveToCache('device_data', { devices, imagesData });
+      } catch (fetchError) {
+        console.error('Fetch error:', fetchError);
+        throw fetchError; // Re-throw to be caught by outer try-catch
+      }
     }
 
     const deviceElements = await createDeviceElements(devices, imagesData);
+    console.log(`Created ${deviceElements.length} device elements`);
+    
     deviceElements.forEach(element => {
       element.style.display = 'none';
       grid.appendChild(element);
     });
 
+    // Show the first brand by default
+    const allBrands = [...new Set(devices.map(d => d.brand))];
+    if (allBrands.length > 0) {
+      const defaultBrand = allBrands[0];
+      document.querySelectorAll('.device-card').forEach(card => {
+        card.style.display = card.dataset.brand === defaultBrand ? 'block' : 'none';
+      });
+      
+      // Highlight the default brand button if exists
+      const defaultButton = document.querySelector(`.filter-btn[data-filter="${defaultBrand}"]`);
+      if (defaultButton) {
+        defaultButton.classList.add('active');
+      }
+    }
+
     initFilters();
     initSearch();
     initModalLogic();
 
   } catch (error) {
-    console.error('Error:', error);
+    console.error('Error loading devices:', error);
     grid.innerHTML = `
       <div class="error">
         <i class="fas fa-exclamation-triangle"></i>
         <p>Failed to load devices. Please check the 
            <a href="https://github.com/AxionAOSP/official_devices" target="_blank">official repository</a>.
         </p>
+        <button id="retryBtn" class="retry-button">
+          <i class="fas fa-sync"></i> Retry
+        </button>
       </div>
     `;
+    
+    // Add retry functionality
+    document.getElementById('retryBtn')?.addEventListener('click', () => {
+      // Clear cache and reload
+      localStorage.removeItem('device_data');
+      window.location.reload();
+    });
   } finally {
     loading.style.display = 'none';
   }
@@ -136,49 +185,78 @@ function processDevices(text) {
     const startIndex = text.indexOf(startMarker);
     const endIndex = text.indexOf(endMarker);
 
-    if (startIndex === -1 || endIndex === -1) {
-      console.error('Device table markers not found in README. Start:', startIndex, 'End:', endIndex);
+    if (startIndex === -1) {
+      console.error('Device section start marker not found in README');
       return [];
     }
-
-    const tableSection = text.slice(startIndex, endIndex).trim();
 
-    // Get table rows - skip header and separator rows
+    if (endIndex === -1) {
+      console.error('Device section end marker not found in README');
+      // Try to process just using the start marker if end marker is missing
+      const sectionText = text.slice(startIndex);
+      console.log('Attempting to process without end marker. Text sample:', 
+                 sectionText.substring(0, 200) + '...');
+    }
+    
+    // If endIndex is -1, this will go to the end of the text, which is fine as a fallback
+    const tableSection = text.slice(startIndex, endIndex !== -1 ? endIndex : undefined).trim();
+    
+    console.log('Table section extracted. Sample:', tableSection.substring(0, 200) + '...');
+    
+    // Get table rows - look for pipe character at start
     const rows = tableSection
       .split('\n')
-      .filter(line => line.trim().startsWith('|') && !line.includes('---'));
+      .filter(line => line.trim().startsWith('|'));
+    
+    console.log(`Found ${rows.length} total rows in table`);
 
-    // Skip the header row
+    // Need at least header + separator + 1 data row
+    if (rows.length < 3) {
+      console.error('Not enough rows found in device table');
+      return [];
+    }
+    
+    // Skip header and separator rows
     const dataRows = rows.slice(2);
 
-    console.log(`Found ${dataRows.length} device entries in README`);
+    console.log(`Processing ${dataRows.length} device entries`);
 
-    return dataRows
-      .map(line => {
-        // Split by pipe and clean up cells
-        const columns = line.split('|').map(col => col.trim()).filter(Boolean);
-        
-        if (columns.length < 2) {
-          console.warn('Invalid row format:', line);
+    const devices = dataRows
+      .map((line, index) => {
+        try {
+          // Split by pipe and clean up cells
+          const columns = line.split('|')
+            .map(col => col.trim())
+            .filter(Boolean);
+          
+          if (columns.length < 2) {
+            console.warn(`Row ${index} has insufficient columns:`, line);
+            return null;
+          }
+          
+          // Extract device name and codename
+          const name = columns[0].replace(/\*\*/g, '').trim();
+          const codename = columns[1].replace(/`/g, '').trim();
+          
+          if (!name || !codename) {
+            console.warn(`Row ${index} is missing name or codename:`, { name, codename, line });
+            return null;
+          }
+          
+          return {
+            name,
+            codename,
+            brand: getDeviceBrand(name),
+          };
+        } catch (rowError) {
+          console.error(`Error processing row ${index}:`, rowError, line);
           return null;
         }
-        
-        // Extract device name and codename
-        const name = columns[0].replace(/\*\*/g, '').trim();
-        const codename = columns[1].replace(/`/g, '').trim();
-        
-        if (!name || !codename) {
-          console.warn('Missing data in row:', line);
-          return null;
-        }
-        
-        return {
-          name,
-          codename,
-          brand: getDeviceBrand(name),
-        };
       })
       .filter(Boolean);
+    
+    console.log(`Successfully processed ${devices.length} devices`);
+    return devices;
   } catch (error) {
     console.error('Error processing devices:', error, error.stack);
     return [];
@@ -422,4 +500,24 @@ function getDeviceBrand(deviceName) {
 
   brandCache.set(deviceName, brand);
   return brand;
-}
+}
+
+// Add the retry button styling
+document.head.insertAdjacentHTML('beforeend', `
+  <style>
+    .retry-button {
+      margin-top: 15px;
+      padding: 8px 16px;
+      background: #2196F3;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      transition: background 0.3s;
+    }
+    .retry-button:hover {
+      background: #0b7dda;
+    }
+  </style>
+`);