update

frontend/public/admin.js

@@ -313,3 +313,262 @@ async function loadClusteringStats() {
         document.getElementById('clusteringStats').innerHTML = `<div class="error">Error: ${error.message}</div>`;
     }
 }
+
+
+// Subscriber Management
+async function viewSubscribers() {
+    const listDiv = document.getElementById('subscriberList');
+    const messageDiv = document.getElementById('subscriberMessage');
+    
+    listDiv.innerHTML = '<p class="loading">Loading subscribers...</p>';
+    messageDiv.innerHTML = '';
+    
+    try {
+        const response = await fetch('/api/subscribers');
+        const data = await response.json();
+        
+        if (data.subscribers && data.subscribers.length > 0) {
+            let html = '<div style="max-height: 400px; overflow-y: auto; margin-top: 15px;">';
+            html += '<table style="width: 100%; border-collapse: collapse;">';
+            html += '<thead><tr style="background: #f5f5f5; position: sticky; top: 0;"><th style="padding: 10px; text-align: left;">Email</th><th style="padding: 10px; text-align: left;">Categories</th><th style="padding: 10px; text-align: left;">Status</th></tr></thead>';
+            html += '<tbody>';
+            
+            data.subscribers.forEach(sub => {
+                const categories = sub.categories ? sub.categories.join(', ') : 'All';
+                html += `<tr style="border-bottom: 1px solid #eee;">
+                    <td style="padding: 10px;">${sub.email}</td>
+                    <td style="padding: 10px;">${categories}</td>
+                    <td style="padding: 10px;"><span style="color: ${sub.status === 'active' ? 'green' : 'red'};">${sub.status}</span></td>
+                </tr>`;
+            });
+            
+            html += '</tbody></table></div>';
+            html += `<p style="margin-top: 10px; color: #666;">Total: ${data.total} subscribers</p>`;
+            listDiv.innerHTML = html;
+        } else {
+            listDiv.innerHTML = '<p style="color: #666;">No subscribers found.</p>';
+        }
+    } catch (error) {
+        listDiv.innerHTML = '<p style="color: red;">Failed to load subscribers</p>';
+    }
+}
+
+async function deleteAllSubscribers() {
+    const messageDiv = document.getElementById('subscriberMessage');
+    
+    if (!confirm('⚠️ Are you sure you want to delete ALL subscribers? This cannot be undone!')) {
+        return;
+    }
+    
+    if (!confirm('⚠️ FINAL WARNING: This will permanently delete all subscriber data. Continue?')) {
+        return;
+    }
+    
+    messageDiv.innerHTML = '<p class="loading">Deleting all subscribers...</p>';
+    
+    try {
+        const response = await fetch('/api/admin/subscribers/delete-all', {
+            method: 'DELETE'
+        });
+        
+        const data = await response.json();
+        
+        if (response.ok) {
+            messageDiv.innerHTML = `<p style="color: green;">✓ ${data.message}</p>`;
+            document.getElementById('subscriberList').innerHTML = '';
+            // Refresh stats
+            loadStats();
+        } else {
+            messageDiv.innerHTML = `<p style="color: red;">✗ ${data.error || 'Failed to delete subscribers'}</p>`;
+        }
+    } catch (error) {
+        messageDiv.innerHTML = '<p style="color: red;">✗ Network error</p>';
+    }
+}
+
+
+// RSS Feed Management
+async function exportRSSFeeds() {
+    const messageDiv = document.getElementById('rssFeedMessage');
+    messageDiv.innerHTML = '<p class="loading">Exporting RSS feeds...</p>';
+    
+    try {
+        const response = await fetch('/api/rss-feeds/export');
+        const data = await response.json();
+        
+        if (response.ok) {
+            // Create download
+            const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `rss-feeds-${new Date().toISOString().split('T')[0]}.json`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            
+            messageDiv.innerHTML = `<p style="color: green;">✓ Exported ${data.total} RSS feeds</p>`;
+        } else {
+            messageDiv.innerHTML = `<p style="color: red;">✗ ${data.error || 'Export failed'}</p>`;
+        }
+    } catch (error) {
+        messageDiv.innerHTML = '<p style="color: red;">✗ Network error</p>';
+    }
+}
+
+async function importRSSFeeds(event) {
+    const messageDiv = document.getElementById('rssFeedMessage');
+    const file = event.target.files[0];
+    
+    if (!file) return;
+    
+    messageDiv.innerHTML = '<p class="loading">Importing RSS feeds...</p>';
+    
+    try {
+        const text = await file.text();
+        const data = JSON.parse(text);
+        
+        const response = await fetch('/api/rss-feeds/import', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(data)
+        });
+        
+        const result = await response.json();
+        
+        if (response.ok) {
+            let html = `<p style="color: green;">✓ ${result.message}</p>`;
+            if (result.errors && result.errors.length > 0) {
+                html += '<details style="margin-top: 10px;"><summary>Show details</summary><ul>';
+                result.errors.forEach(err => {
+                    html += `<li style="color: orange;">${err}</li>`;
+                });
+                html += '</ul></details>';
+            }
+            messageDiv.innerHTML = html;
+            
+            // Refresh feed list if visible
+            if (document.getElementById('rssFeedList').innerHTML) {
+                viewRSSFeeds();
+            }
+        } else {
+            messageDiv.innerHTML = `<p style="color: red;">✗ ${result.error || 'Import failed'}</p>`;
+        }
+    } catch (error) {
+        messageDiv.innerHTML = `<p style="color: red;">✗ Error: ${error.message}</p>`;
+    }
+    
+    // Reset file input
+    event.target.value = '';
+}
+
+async function viewRSSFeeds() {
+    const listDiv = document.getElementById('rssFeedList');
+    const messageDiv = document.getElementById('rssFeedMessage');
+    
+    listDiv.innerHTML = '<p class="loading">Loading RSS feeds...</p>';
+    messageDiv.innerHTML = '';
+    
+    try {
+        const response = await fetch('/api/rss-feeds');
+        const data = await response.json();
+        
+        if (data.feeds && data.feeds.length > 0) {
+            let html = '<div style="max-height: 400px; overflow-y: auto; margin-top: 15px;">';
+            html += '<table style="width: 100%; border-collapse: collapse;">';
+            html += '<thead><tr style="background: #f5f5f5; position: sticky; top: 0;"><th style="padding: 10px; text-align: left;">Name</th><th style="padding: 10px; text-align: left;">Category</th><th style="padding: 10px; text-align: left;">URL</th><th style="padding: 10px; text-align: left;">Status</th></tr></thead>';
+            html += '<tbody>';
+            
+            data.feeds.forEach(feed => {
+                const statusColor = feed.active ? 'green' : 'gray';
+                const statusText = feed.active ? 'Active' : 'Inactive';
+                html += `<tr style="border-bottom: 1px solid #eee;">
+                    <td style="padding: 10px;">${feed.name}</td>
+                    <td style="padding: 10px;">${feed.category}</td>
+                    <td style="padding: 10px; font-size: 12px; max-width: 300px; overflow: hidden; text-overflow: ellipsis;">${feed.url}</td>
+                    <td style="padding: 10px;"><span style="color: ${statusColor};">${statusText}</span></td>
+                </tr>`;
+            });
+            
+            html += '</tbody></table></div>';
+            html += `<p style="margin-top: 10px; color: #666;">Total: ${data.total} feeds</p>`;
+            listDiv.innerHTML = html;
+        } else {
+            listDiv.innerHTML = '<p style="color: #666;">No RSS feeds found.</p>';
+        }
+    } catch (error) {
+        listDiv.innerHTML = '<p style="color: red;">Failed to load RSS feeds</p>';
+    }
+}
+
+
+// Recent Summarization Activity
+let autoRefreshInterval = null;
+
+async function loadRecentArticles() {
+    const container = document.getElementById('recentArticles');
+    
+    try {
+        const response = await fetch('/api/admin/recent-articles');
+        const data = await response.json();
+        
+        if (data.articles && data.articles.length > 0) {
+            let html = '<div style="max-height: 500px; overflow-y: auto;">';
+            html += '<table style="width: 100%; border-collapse: collapse; font-size: 14px;">';
+            html += '<thead><tr style="background: #f5f5f5; position: sticky; top: 0;"><th style="padding: 8px; text-align: left;">Time</th><th style="padding: 8px; text-align: left;">Title</th><th style="padding: 8px; text-align: left;">Source</th><th style="padding: 8px; text-align: left;">Category</th><th style="padding: 8px; text-align: right;">Words</th></tr></thead>';
+            html += '<tbody>';
+            
+            data.articles.forEach(article => {
+                const time = article.summarized_at ? new Date(article.summarized_at).toLocaleTimeString() : 'N/A';
+                const title = article.title_en || article.title;
+                const categoryColors = {
+                    'general': '#667eea',
+                    'local': '#f59e0b',
+                    'sports': '#10b981',
+                    'science': '#8b5cf6'
+                };
+                const categoryColor = categoryColors[article.category] || '#6b7280';
+                
+                html += `<tr style="border-bottom: 1px solid #eee;">
+                    <td style="padding: 8px; white-space: nowrap; color: #666;">${time}</td>
+                    <td style="padding: 8px; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${title}">${title}</td>
+                    <td style="padding: 8px;">${article.source}</td>
+                    <td style="padding: 8px;"><span style="background: ${categoryColor}; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">${article.category || 'N/A'}</span></td>
+                    <td style="padding: 8px; text-align: right;">${article.summary_word_count || 'N/A'}</td>
+                </tr>`;
+            });
+            
+            html += '</tbody></table></div>';
+            html += `<p style="margin-top: 10px; color: #666; font-size: 12px;">Last updated: ${new Date().toLocaleTimeString()}</p>`;
+            container.innerHTML = html;
+        } else {
+            container.innerHTML = '<p style="color: #666;">No summarized articles found.</p>';
+        }
+    } catch (error) {
+        container.innerHTML = '<p style="color: red;">Failed to load recent articles</p>';
+    }
+}
+
+function toggleAutoRefresh() {
+    const checkbox = document.getElementById('autoRefresh');
+    
+    if (checkbox.checked) {
+        // Start auto-refresh every 10 seconds
+        loadRecentArticles();
+        autoRefreshInterval = setInterval(loadRecentArticles, 10000);
+    } else {
+        // Stop auto-refresh
+        if (autoRefreshInterval) {
+            clearInterval(autoRefreshInterval);
+            autoRefreshInterval = null;
+        }
+    }
+}
+
+// Load recent articles on page load
+document.addEventListener('DOMContentLoaded', () => {
+    loadRecentArticles();
+});