standardizes notification in html templates

scipaperloader/templates/scraper.html.jinja

@@ -43,6 +43,9 @@
 <div class="container mt-4">
     <h1>Paper Scraper Control Panel</h1>
 
+    <!-- Include standardized flash messages -->
+    {% include "partials/flash_messages.html.jinja" %}
+
     <div class="row mb-4">
         <div class="col-md-6">
             <div class="card">
@@ -139,9 +142,6 @@
         </div>
     </div>
 </div>
-
-<!-- Notification template -->
-<div id="notificationContainer"></div>
 {% endblock content %}
 
 {% block scripts %}
@@ -223,16 +223,26 @@
 
     // Action functions
     function startScraper() {
+        console.log("Start button clicked - sending request to /scraper/start");
+
         fetch('/scraper/start', { method: 'POST' })
-            .then(response => response.json())
+            .then(response => {
+                console.log("Response received:", response);
+                return response.json();
+            })
             .then(data => {
+                console.log("Data received:", data);
                 if (data.success) {
-                    showNotification('Scraper started successfully', 'success');
+                    showFlashMessage('Scraper started successfully', 'success');
                     updateStatus();
                     setTimeout(() => { loadRecentActivity(); }, 1000);
                 } else {
-                    showNotification(data.message, 'danger');
+                    showFlashMessage(data.message, 'error');
                 }
+            })
+            .catch(error => {
+                console.error("Error starting scraper:", error);
+                showFlashMessage('Error starting scraper: ' + error.message, 'error');
             });
     }
 
@@ -241,11 +251,11 @@
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    showNotification(data.message, 'info');
+                    showFlashMessage(data.message, 'info');
                     updateStatus();
                     setTimeout(() => { loadRecentActivity(); }, 1000);
                 } else {
-                    showNotification(data.message, 'danger');
+                    showFlashMessage(data.message, 'error');
                 }
             });
     }
@@ -255,11 +265,11 @@
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    showNotification('Scraper stopped successfully', 'warning');
+                    showFlashMessage('Scraper stopped successfully', 'warning');
                     updateStatus();
                     setTimeout(() => { loadRecentActivity(); }, 1000);
                 } else {
-                    showNotification(data.message, 'danger');
+                    showFlashMessage(data.message, 'error');
                 }
             });
     }
@@ -277,9 +287,9 @@
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
-                    showNotification('Volume updated successfully', 'success');
+                    showFlashMessage('Volume updated successfully', 'success');
                 } else {
-                    showNotification(data.message, 'danger');
+                    showFlashMessage(data.message, 'error');
                 }
             });
     }
@@ -410,36 +420,6 @@
         });
     }
 
-    // Notification functions
-    function showNotification(message, type) {
-        if (!notificationsEnabled && type !== 'danger') {
-            return;
-        }
-
-        const container = document.getElementById('notificationContainer');
-        const notification = document.createElement('div');
-        notification.className = `alert alert-${type} notification shadow-sm`;
-        notification.innerHTML = `
-      ${message}
-      <button type="button" class="btn-close float-end" aria-label="Close"></button>
-    `;
-
-        container.appendChild(notification);
-
-        // Add close handler
-        notification.querySelector('.btn-close').addEventListener('click', () => {
-            notification.remove();
-        });
-
-        // Auto-close after 5 seconds
-        setTimeout(() => {
-            notification.classList.add('fade');
-            setTimeout(() => {
-                notification.remove();
-            }, 500);
-        }, 5000);
-    }
-
     // WebSocket for real-time notifications
     function setupWebSocket() {
         // If WebSocket is available, implement it here
@@ -461,9 +441,9 @@
                     data.forEach(log => {
                         const extraData = log.extra_data ? JSON.parse(log.extra_data) : {};
                         if (log.status === 'success') {
-                            showNotification(`New paper scraped: ${extraData.title || 'Unknown title'}`, 'success');
+                            showFlashMessage(`New paper scraped: ${extraData.title || 'Unknown title'}`, 'success');
                         } else if (log.status === 'error') {
-                            showNotification(`Failed to scrape paper: ${log.description}`, 'danger');
+                            showFlashMessage(`Failed to scrape paper: ${log.description}`, 'error');
                         }
                     });