OPML logic

static/js/app.js

@@ -1,20 +1,23 @@
-// Add at the beginning of the file
 document.addEventListener('DOMContentLoaded', function() {
     // Mobile menu functionality
     const hamburgerMenu = document.getElementById('hamburgerMenu');
     const sidebarClose = document.getElementById('sidebarClose');
     const sidebar = document.getElementById('sidebar');
+    const userMenuButton = document.getElementById('userMenuButton');
+    const userMenuDropdown = document.getElementById('userMenuDropdown');
 
-    // Add OPML import button handler
-    const importOpmlButton = document.getElementById('importOpmlButton');
-    importOpmlButton.addEventListener('click', function() {
-        console.log('OPML import button clicked - functionality coming soon!');
-    });
+    // Create a hidden file input for OPML upload
+    const opmlFileInput = document.createElement('input');
+    opmlFileInput.type = 'file';
+    opmlFileInput.accept = '.opml,.xml';
+    opmlFileInput.style.display = 'none';
+    document.body.appendChild(opmlFileInput);
 
     function toggleSidebar() {
         sidebar.classList.toggle('active');
     }
 
+    // Mobile menu handlers
     hamburgerMenu.addEventListener('click', toggleSidebar);
     sidebarClose.addEventListener('click', toggleSidebar);
 
@@ -28,6 +31,80 @@ document.addEventListener('DOMContentLoaded', function() {
             sidebar.classList.remove('active');
         }
     });
+
+    // OPML import handlers
+    opmlFileInput.addEventListener('change', async (e) => {
+        if (e.target.files.length > 0) {
+            const file = e.target.files[0];
+            const formData = new FormData();
+            formData.append('file', file);
+
+            try {
+                const response = await fetch('/import/opml', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (response.ok) {
+                    const result = await response.json();
+                    if (result.success) {
+                        alert('OPML import successful: ' + result.message);
+                        // Refresh the feed list if feeds were imported
+                        if (result.feeds_imported) {
+                            handleFeeds();
+                        }
+                    } else {
+                        alert('OPML import failed: ' + result.message);
+                    }
+                } else {
+                    alert('Failed to import OPML file. Please try again.');
+                }
+            } catch (error) {
+                console.error('OPML import failed:', error);
+                alert('Failed to import OPML file. Please try again.');
+            }
+        }
+        // Clear the input so the same file can be selected again
+        e.target.value = '';
+    });
+
+    // User menu handlers
+    userMenuButton.addEventListener('click', (e) => {
+        e.stopPropagation();
+        userMenuDropdown.classList.toggle('show');
+    });
+
+    document.addEventListener('click', (e) => {
+        if (!e.target.closest('.user-menu')) {
+            userMenuDropdown.classList.remove('show');
+        }
+    });
+
+    userMenuDropdown.addEventListener('click', (e) => {
+        e.stopPropagation();
+    });
+
+    document.getElementById('importOpmlButton').addEventListener('click', () => {
+        opmlFileInput.click();
+        userMenuDropdown.classList.remove('show');
+    });
+
+    document.getElementById('logoutButton').addEventListener('click', async () => {
+        try {
+            const response = await fetch('/logout', {
+                method: 'POST',
+            });
+
+            if (response.ok) {
+                window.location.href = '/login';
+            }
+        } catch (error) {
+            console.error('Logout failed:', error);
+        }
+    });
+
+    // Initialize feeds
+    handleFeeds();
 });
 
 // Fetch and display feeds
@@ -348,46 +425,6 @@ async function handleFeeds() {
     }
 }
 
-// Load feeds when page loads
-document.addEventListener('DOMContentLoaded', handleFeeds);
-
-// User menu functionality
-const userMenuButton = document.getElementById('userMenuButton');
-const userMenuDropdown = document.getElementById('userMenuDropdown');
-
-// Toggle menu on button click
-userMenuButton.addEventListener('click', (e) => {
-    e.stopPropagation();
-    userMenuDropdown.classList.toggle('show');
-});
-
-// Close menu when clicking outside
-document.addEventListener('click', (e) => {
-    if (!e.target.closest('.user-menu')) {
-        userMenuDropdown.classList.remove('show');
-    }
-});
-
-// Prevent menu from closing when clicking inside it
-userMenuDropdown.addEventListener('click', (e) => {
-    e.stopPropagation();
-});
-
-// Logout functionality
-document.getElementById('logoutButton').addEventListener('click', async () => {
-    try {
-        const response = await fetch('/logout', {
-            method: 'POST',
-        });
-
-        if (response.ok) {
-            window.location.href = '/login';
-        }
-    } catch (error) {
-        console.error('Logout failed:', error);
-    }
-});
-
 // Modal functionality
 const modal = document.getElementById('addFeedModal');
 const addFeedButton = document.getElementById('addFeedButton');