Update templates/index.html

templates/index.html

@@ -80,76 +80,103 @@
     <script>
         let lastUpdate = 0;
         let expandedCategories = new Set();
+
+        // Restore expanded categories from session storage if available
+        document.addEventListener('DOMContentLoaded', () => {
+            const storedExpanded = sessionStorage.getItem('expandedCategories');
+            if (storedExpanded) {
+                expandedCategories = new Set(JSON.parse(storedExpanded));
+                expandedCategories.forEach(category => {
+                    toggleCategory(category, false); // Expand without fetching
+                });
+            }
+        });
+
         function getArticleKey(article) {
             return `${article.title}|${article.link}|${article.published}`;
         }
-        function toggleCategory(category) {
+
+        function toggleCategory(category, fetchData = true) {
             const spinner = document.getElementById(`spinner-${category}`);
             const tilesDiv = document.getElementById(`category-${category}`);
             const allTilesDiv = document.getElementById(`all-${category}`);
+
             if (expandedCategories.has(category)) {
                 tilesDiv.style.display = 'grid';
                 allTilesDiv.style.display = 'none';
                 expandedCategories.delete(category);
             } else {
-                spinner.style.display = 'inline-block';
-                fetch(`/get_all_articles/${category}`)
-                    .then(response => response.json())
-                    .then(data => {
-                        spinner.style.display = 'none';
-                        if (data.articles.length > 0) {
-                            let html = '';
-                            const seenKeys = new Set();
-                            data.articles.sort((a, b) => new Date(b.published) - new Date(a.published));
-                            data.articles.forEach((article, index) => {
-                                const key = getArticleKey(article);
-                                if (!seenKeys.has(key)) {
-                                    seenKeys.add(key);
-                                    html += `
-                                        <div class="article-tile" data-published="${article.published}" data-id="${index}" data-key="${key}">
-                                            ${article.image !== "svg" ? `<img src="${article.image}" alt="Article Image">` : `
-                                                <svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
-                                                    <rect width="100%" height="100%" fill="#e0e0e0"/>
-                                                    <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666">No Image</text>
-                                                </svg>
-                                            `}
-                                            <div class="title"><a href="${article.link}" target="_blank">${article.title}</a></div>
-                                            <div class="description">${article.description}</div>
-                                            <div class="published">Published: ${article.published}</div>
-                                        </div>
-                                    `;
-                                } else {
-                                    console.warn(`Duplicate article skipped in category ${category}: ${key}`);
-                                }
-                            });
-                            tilesDiv.style.display = 'none';
-                            allTilesDiv.innerHTML = html;
-                            allTilesDiv.style.display = 'grid';
-                            expandedCategories.add(category);
-                        } else {
-                            alert(`No additional articles found for ${category}.`);
-                        }
-                    })
-                    .catch(error => {
-                        spinner.style.display = 'none';
-                        console.error(`Error loading all articles for ${category}:`, error);
-                        alert(`Failed to load all articles for ${category}. Please try again.`);
-                    });
+                if (fetchData) {
+                    spinner.style.display = 'inline-block';
+                    fetch(`/get_all_articles/${category}`)
+                        .then(response => response.json())
+                        .then(data => {
+                            spinner.style.display = 'none';
+                            if (data.articles.length > 0) {
+                                let html = '';
+                                const seenKeys = new Set();
+                                data.articles.sort((a, b) => new Date(b.published) - new Date(a.published));
+                                data.articles.forEach((article, index) => {
+                                    const key = getArticleKey(article);
+                                    if (!seenKeys.has(key)) {
+                                        seenKeys.add(key);
+                                        html += `
+                                            <div class="article-tile" data-published="${article.published}" data-id="${index}" data-key="${key}">
+                                                ${article.image !== "svg" ? `<img src="${article.image}" alt="Article Image">` : `
+                                                    <svg width="100%" height="150" xmlns="http://www.w3.org/2000/svg">
+                                                        <rect width="100%" height="100%" fill="#e0e0e0"/>
+                                                        <text x="50%" y="50%" text-anchor="middle" dy=".3em" fill="#666">No Image</text>
+                                                    </svg>
+                                                `}
+                                                <div class="title"><a href="${article.link}" target="_blank">${article.title}</a></div>
+                                                <div class="description">${article.description}</div>
+                                                <div class="published">Published: ${article.published}</div>
+                                            </div>
+                                        `;
+                                    } else {
+                                        console.warn(`Duplicate article skipped in category ${category}: ${key}`);
+                                    }
+                                });
+                                tilesDiv.style.display = 'none';
+                                allTilesDiv.innerHTML = html;
+                                allTilesDiv.style.display = 'grid';
+                                expandedCategories.add(category);
+                            } else {
+                                alert(`No additional articles found for ${category}.`);
+                            }
+                        })
+                        .catch(error => {
+                            spinner.style.display = 'none';
+                            console.error(`Error loading all articles for ${category}:`, error);
+                            alert(`Failed to load all articles for ${category}. Please try again.`);
+                        });
+                } else {
+                    tilesDiv.style.display = 'none';
+                    allTilesDiv.style.display = 'grid';
+                    expandedCategories.add(category);
+                }
             }
+
+            // Save expanded categories to session storage
+            sessionStorage.setItem('expandedCategories', JSON.stringify([...expandedCategories]));
         }
+
         function updateArticles() {
             fetch('/get_updates')
                 .then(response => response.json())
                 .then(data => {
-                    if (data.articles && data.last_update > lastUpdate) {
+                    if (data.has_updates && data.last_update > lastUpdate) {
                         lastUpdate = data.last_update;
                         const newArticles = data.articles;
+
+                        // Store the current scroll position and expanded categories
+                        const scrollPosition = window.scrollY;
+
                         for (const [category, articles] of Object.entries(newArticles)) {
                             const tilesDiv = document.getElementById(`category-${category}`);
                             const allTilesDiv = document.getElementById(`all-${category}`);
                             if (tilesDiv) {
                                 const existingArticles = Array.from(tilesDiv.querySelectorAll('.article-tile'));
-                                let currentIds = new Set(existingArticles.map(a => a.dataset.id));
                                 let currentKeys = new Set(existingArticles.map(a => a.dataset.key));
                                 let newHtml = '';
                                 articles.sort((a, b) => new Date(b.published) - new Date(a.published));
@@ -173,11 +200,17 @@
                                         console.warn(`Duplicate article skipped in update for ${category}: ${key}`);
                                     }
                                 });
+
                                 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('');
+                                    tilesDiv.innerHTML = allLimited
+                                        .sort((a, b) => new Date(b.dataset.published) - new Date(a.dataset.published))
+                                        .slice(0, 10)
+                                        .map(a => a.outerHTML)
+                                        .join('');
                                 }
+
                                 if (allTilesDiv.style.display === 'grid') {
                                     let allNewHtml = '';
                                     const allSeenKeys = new Set(Array.from(allTilesDiv.querySelectorAll('.article-tile')).map(a => a.dataset.key));
@@ -204,26 +237,39 @@
                                     });
                                     allTilesDiv.innerHTML = (Array.from(allTilesDiv.querySelectorAll('.article-tile')).map(a => a.outerHTML).join('') + allNewHtml);
                                     const allExpanded = Array.from(allTilesDiv.querySelectorAll('.article-tile'));
-                                    allTilesDiv.innerHTML = allExpanded.sort((a, b) => new Date(b.dataset.published) - new Date(a.dataset.published)).map(a => a.outerHTML).join('');
+                                    allTilesDiv.innerHTML = allExpanded
+                                        .sort((a, b) => new Date(b.dataset.published) - new Date(a.dataset.published))
+                                        .map(a => a.outerHTML)
+                                        .join('');
                                 }
                             }
                         }
+
+                        // Restore scroll position
+                        window.scrollTo(0, scrollPosition);
                     }
-                    setTimeout(updateArticles, 2000);
+
+                    // Schedule the next update
+                    setTimeout(updateArticles, 30000); // Poll every 30 seconds
                 })
                 .catch(error => {
                     console.error('Error updating articles:', error);
-                    setTimeout(updateArticles, 2000);
+                    setTimeout(updateArticles, 30000);
                 });
         }
+
         function checkLoadingStatus() {
             fetch('/check_loading')
                 .then(response => response.json())
                 .then(data => {
                     if (data.status === 'complete') {
-                        window.location.reload(); // Refresh the page when loading is complete
+                        const loadingContainer = document.getElementById('loadingContainer');
+                        if (loadingContainer) {
+                            loadingContainer.style.display = 'none';
+                        }
+                        updateArticles(); // Start polling for updates
                     } else {
-                        setTimeout(checkLoadingStatus, 2000); // Check again after 2 seconds
+                        setTimeout(checkLoadingStatus, 2000);
                     }
                 })
                 .catch(error => {
@@ -231,16 +277,18 @@
                     setTimeout(checkLoadingStatus, 2000);
                 });
         }
+
         document.addEventListener('DOMContentLoaded', () => {
             const tiles = document.querySelectorAll('.tiles');
             tiles.forEach(tile => {
                 lastUpdate = Math.max(lastUpdate, parseFloat(tile.dataset.lastUpdate) || 0);
             });
-            updateArticles();
+
             // Start checking loading status if loading is active
             if (document.getElementById('loadingContainer')) {
                 checkLoadingStatus();
             }
+
             const form = document.getElementById('searchForm');
             const backButton = document.getElementById('backButton');
             form.addEventListener('submit', (event) => {
@@ -301,6 +349,7 @@
                     alert('Failed to perform search. Please try again.');
                 });
             });
+
             backButton.addEventListener('click', () => {
                 window.location.href = '/';
             });