standardizes notification in html templates

This commit is contained in:
Michael Beck 2025-04-16 15:58:23 +02:00
parent 592375c67b
commit 3d67bbbdf7

View File

@ -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');
}
});