Update templates/index.html

templates/index.html

@@ -36,9 +36,9 @@
         {% for category, articles in categorized_articles.items() %}
         <div class="category-section">
             <div class="category-title">{{ category }}</div>
-            <div class="tiles" id="category-{{ category }}">
+            <div class="tiles" id="category-{{ category }}" data-last-update="0">
                 {% for article in articles %}
-                <div class="article-tile" data-published="{{ article.published }}">
+                <div class="article-tile" data-published="{{ article.published }}" data-id="{{ loop.index }}">
                     {% if article.image != "svg" %}
                     <img src="{{ article.image }}" alt="Article Image">
                     {% else %}
@@ -61,40 +61,69 @@
 
     {% if loading %}
     <script>
-        function checkLoadingStatus() {
-            fetch('/check_loading')
+        let lastUpdate = 0;
+
+        function updateArticles() {
+            fetch('/get_updates')
                 .then(response => response.json())
                 .then(data => {
-                    if (data.status === "complete") {
-                        // Soft refresh: fetch updated articles without full reload
-                        fetch('/')
-                            .then(response => response.text())
-                            .then(html => {
-                                const parser = new DOMParser();
-                                const doc = parser.parseFromString(html, 'text/html');
-                                const newCategories = doc.querySelectorAll('.category-section');
-                                newCategories.forEach(newCat => {
-                                    const catId = newCat.querySelector('.tiles').id;
-                                    const existingCat = document.getElementById(catId);
-                                    if (existingCat) {
-                                        existingCat.innerHTML = newCat.querySelector('.tiles').innerHTML;
+                    if (data.articles && data.last_update > lastUpdate) {
+                        lastUpdate = data.last_update;
+                        const newArticles = data.articles;
+                        for (const [category, articles] of Object.entries(newArticles)) {
+                            const tilesDiv = document.getElementById(`category-${category}`);
+                            if (tilesDiv) {
+                                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 (up to 10 total, keeping most recent)
+                                articles.forEach((article, index) => {
+                                    if (index < 10 && !currentIds.has(index.toString())) {
+                                        newHtml += `
+                                            <div class="article-tile" data-published="${article.published}" data-id="${index}">
+                                                ${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>
+                                        `;
                                     }
                                 });
-                                document.querySelector('.loading-message').style.display = 'none';
-                            })
-                            .catch(error => console.error('Error updating articles:', error));
-                    } else {
-                        setTimeout(checkLoadingStatus, 2000);  // Check every 2 seconds
+
+                                // Append new articles, maintaining limit of 10
+                                if (newHtml) {
+                                    tilesDiv.innerHTML += newHtml;
+                                    const allArticles = Array.from(tilesDiv.querySelectorAll('.article-tile'));
+                                    allArticles.sort((a, b) => new Date(b.dataset.published) - new Date(a.dataset.published));
+                                    tilesDiv.innerHTML = allArticles.slice(0, 10).map(a => a.outerHTML).join('');
+                                }
+                            }
+                        }
+                        document.querySelector('.loading-message').style.display = 'none';
                     }
+                    setTimeout(updateArticles, 2000);  // Check every 2 seconds
                 })
                 .catch(error => {
-                    console.error('Error checking loading status:', error);
-                    setTimeout(checkLoadingStatus, 2000);  // Retry on error
+                    console.error('Error updating articles:', error);
+                    setTimeout(updateArticles, 2000);  // Retry on error
                 });
         }
 
         document.addEventListener('DOMContentLoaded', () => {
-            checkLoadingStatus();
+            const tiles = document.querySelectorAll('.tiles');
+            tiles.forEach(tile => {
+                lastUpdate = Math.max(lastUpdate, parseFloat(tile.dataset.lastUpdate) || 0);
+            });
+            updateArticles();
         });
     </script>
     {% endif %}