Update templates/index.html

templates/index.html

@@ -30,7 +30,7 @@
         <form method="POST" action="/search" id="searchForm">
             <input type="text" name="search" class="search-bar" placeholder="Search news...">
         </form>
-        <button id="backButton" style="display: none; margin-top: 10px;" onclick="window.location.href='/back_to_main'">Back to Main</button>
+        <button id="backButton" style="display: none; margin-top: 10px;">Back to Main</button>
     </div>
     {% if loading %}
         <div class="loading-message">Fetching new RSS feeds in the background...</div>
@@ -63,10 +63,10 @@
         <div class="no-articles">No articles available yet. Loading new feeds...</div>
     {% endif %}
 
-    {% if loading %}
     <script>
         let lastUpdate = 0;
         let expandedCategories = new Set();
+
         function toggleCategory(category) {
             const spinner = document.getElementById(`spinner-${category}`);
             const tilesDiv = document.getElementById(`category-${category}`);
@@ -116,6 +116,7 @@
                     });
             }
         }
+
         function updateArticles() {
             fetch('/get_updates')
                 .then(response => response.json())
@@ -130,9 +131,7 @@
                                 const existingArticles = Array.from(tilesDiv.querySelectorAll('.article-tile'));
                                 let currentIds = new Set(existingArticles.map(a => a.dataset.id));
                                 let newHtml = '';
-                                // Sort new articles by published date
                                 articles.sort((a, b) => new Date(b.published) - new Date(a.published));
-                                // Add new articles to limited view (up to 10, keeping most recent)
                                 articles.slice(0, 10).forEach((article, index) => {
                                     if (!currentIds.has(index.toString())) {
                                         newHtml += `
@@ -150,13 +149,11 @@
                                         `;
                                     }
                                 });
-                                // Update limited view (up to 10)
                                 if (newHtml) {
                                     tilesDiv.innerHTML = (existingArticles.map(a => a.outerHTML).join('') + newHtml);
                                     const allLimited = Array.from(tilesDiv.querySelectorAll('.article-tile'));
                                     tilesDiv.innerHTML = allLimited.sort((a, b) => new Date(b.dataset.published) - new Date(a.dataset.published)).slice(0, 10).map(a => a.outerHTML).join('');
                                 }
-                                // Update expanded view if visible
                                 if (allTilesDiv.style.display === 'grid') {
                                     let allNewHtml = '';
                                     articles.forEach((article, index) => {
@@ -182,20 +179,21 @@
                         }
                         document.querySelector('.loading-message').style.display = 'none';
                     }
-                    setTimeout(updateArticles, 2000);  // Check every 2 seconds
+                    setTimeout(updateArticles, 2000);
                 })
                 .catch(error => {
                     console.error('Error updating articles:', error);
-                    setTimeout(updateArticles, 2000);  // Retry on error
+                    setTimeout(updateArticles, 2000);
                 });
         }
+
         document.addEventListener('DOMContentLoaded', () => {
             const tiles = document.querySelectorAll('.tiles');
             tiles.forEach(tile => {
                 lastUpdate = Math.max(lastUpdate, parseFloat(tile.dataset.lastUpdate) || 0);
             });
             updateArticles();
-            // Handle semantic search
+
             const form = document.getElementById('searchForm');
             const backButton = document.getElementById('backButton');
             form.addEventListener('submit', (event) => {
@@ -204,11 +202,16 @@
                     method: 'POST',
                     body: new FormData(form)
                 })
-                .then(response => response.json())
+                .then(response => {
+                    if (!response.ok) throw new Error('Network response was not ok');
+                    return response.json();
+                })
                 .then(data => {
                     if (data.has_articles) {
-                        document.querySelector('.search-container').style.display = 'none';
                         backButton.style.display = 'block';
+                        const existingContent = document.querySelectorAll('.category-section');
+                        existingContent.forEach(section => section.remove());
+
                         const categoriesHtml = Object.entries(data.categorized_articles).map(([cat, articles]) => `
                             <div class="category-section">
                                 <div class="category-title" onclick="toggleCategory('${cat}')">${cat} <span class="loading-spinner" id="spinner-${cat}"></span></div>
@@ -230,17 +233,7 @@
                                 <div class="tiles" id="all-${cat}" style="display: none;"></div>
                             </div>
                         `).join('');
-                        document.querySelector('body').innerHTML = `
-                            <h1>News Feed Hub</h1>
-                            <div class="search-container" style="display: none;">
-                                <form method="POST" action="/search" id="searchForm">
-                                    <input type="text" name="search" class="search-bar" placeholder="Search news...">
-                                </form>
-                                <button id="backButton" style="display: block; margin-top: 10px;" onclick="window.location.href='/back_to_main'">Back to Main</button>
-                            </div>
-                            ${categoriesHtml}
-                            ${loading ? '<div class="loading-message">Fetching new RSS feeds in the background...</div>' : ''}
-                        `;
+                        document.querySelector('.search-container').insertAdjacentHTML('afterend', categoriesHtml);
                     } else {
                         alert('No results found.');
                     }
@@ -250,8 +243,11 @@
                     alert('Failed to perform search. Please try again.');
                 });
             });
+
+            backButton.addEventListener('click', () => {
+                window.location.href = '/';
+            });
         });
     </script>
-    {% endif %}
 </body>
 </html>