diff --git a/scipaperloader/static/js/common.js b/scipaperloader/static/js/common.js index 9647292..2b9c8af 100644 --- a/scipaperloader/static/js/common.js +++ b/scipaperloader/static/js/common.js @@ -3,36 +3,65 @@ */ /** - * Display a flash message to the user + * Display a flash message to the user as an overlay * @param {string} message - The message to display * @param {string} type - The type of message (success, error, warning, info) + * @param {number} duration - Duration in milliseconds (default: 5000) */ -function showFlashMessage(message, type) { - const flashContainer = document.createElement("div"); - flashContainer.className = `alert alert-${ - type === "error" ? "danger" : type - } alert-dismissible fade show`; - flashContainer.innerHTML = ` - ${message} - - `; +function showFlashMessage(message, type = "success", duration = 5000) { + const flashMsg = document.createElement("div"); + const normalizedType = type === "error" ? "danger" : type; + flashMsg.className = `flash-overlay flash-${normalizedType}`; + + // Get the appropriate icon based on type + const getIcon = (messageType) => { + switch (messageType) { + case "success": + return ''; + case "danger": + return ''; + case "warning": + return ''; + case "info": + return ''; + default: + return ''; + } + }; - // Use the existing client flash container at the top of the page - const clientFlashContainer = document.getElementById("clientFlashContainer"); - if (clientFlashContainer) { - clientFlashContainer.appendChild(flashContainer); - } else { - // Fallback to body if container not found - document.body.appendChild(flashContainer); - } + flashMsg.innerHTML = ` +
+ ${getIcon(normalizedType)} +
${message}
+ +
+ `; - // Auto dismiss after 5 seconds + // Handle stacking of multiple messages + const existingMessages = document.querySelectorAll('.flash-overlay'); + existingMessages.forEach((msg, index) => { + msg.style.setProperty('--flash-index', index + 1); + }); + + // Add to page + document.body.appendChild(flashMsg); + + // Auto dismiss setTimeout(() => { - flashContainer.classList.remove("show"); + flashMsg.classList.add("fade-out"); setTimeout(() => { - flashContainer.remove(); - }, 150); // Remove after fade out animation - }, 5000); + if (flashMsg.parentNode) { + flashMsg.remove(); + // Reposition remaining messages + const remainingMessages = document.querySelectorAll('.flash-overlay'); + remainingMessages.forEach((msg, index) => { + msg.style.setProperty('--flash-index', index); + }); + } + }, 300); + }, duration); + + return flashMsg; } /** diff --git a/scipaperloader/templates/base.html.jinja b/scipaperloader/templates/base.html.jinja index fb23fd1..9ea8b75 100644 --- a/scipaperloader/templates/base.html.jinja +++ b/scipaperloader/templates/base.html.jinja @@ -17,6 +17,8 @@
{% block content %}{% endblock content %}
{% include "footer.html.jinja" %} + + {% block scripts %}{% endblock scripts %} diff --git a/scipaperloader/templates/config/schedule.html.jinja b/scipaperloader/templates/config/schedule.html.jinja index ea873f3..c581699 100644 --- a/scipaperloader/templates/config/schedule.html.jinja +++ b/scipaperloader/templates/config/schedule.html.jinja @@ -49,7 +49,6 @@ -
diff --git a/scipaperloader/templates/index.html.jinja b/scipaperloader/templates/index.html.jinja index 2d67532..c098dfd 100644 --- a/scipaperloader/templates/index.html.jinja +++ b/scipaperloader/templates/index.html.jinja @@ -1,9 +1,15 @@ {% extends "base.html.jinja" %} + +{% include "partials/flash_messages.html.jinja" %} + {% block title %}Home - SciPaperLoader{% endblock title %} {% block content %} + +{% include "partials/flash_messages.html.jinja" %} +

Welcome to SciPaperLoader

Your paper scraping tool is ready.

@@ -66,4 +72,13 @@
+ + {% endblock content %} \ No newline at end of file diff --git a/scipaperloader/templates/logger.html.jinja b/scipaperloader/templates/logger.html.jinja index 09e9869..758955e 100644 --- a/scipaperloader/templates/logger.html.jinja +++ b/scipaperloader/templates/logger.html.jinja @@ -5,6 +5,9 @@ {% block content %}

Activity Logs

+ +{% include "partials/flash_messages.html.jinja" %} +
diff --git a/scipaperloader/templates/papers.html.jinja b/scipaperloader/templates/papers.html.jinja index 9e1dd49..0da68e9 100644 --- a/scipaperloader/templates/papers.html.jinja +++ b/scipaperloader/templates/papers.html.jinja @@ -4,6 +4,9 @@ {% block content %} + +{% include "partials/flash_messages.html.jinja" %} + {# --- Sort direction logic for each column --- #} {% set title_sort = 'asc' if sort_by != 'title' or sort_dir == 'desc' else 'desc' %} {% set journal_sort = 'asc' if sort_by != 'journal' or sort_dir == 'desc' else 'desc' %} diff --git a/scipaperloader/templates/partials/flash_messages.html.jinja b/scipaperloader/templates/partials/flash_messages.html.jinja index 88d9a74..5aedba0 100644 --- a/scipaperloader/templates/partials/flash_messages.html.jinja +++ b/scipaperloader/templates/partials/flash_messages.html.jinja @@ -1,93 +1,145 @@ - -{% with messages = get_flashed_messages(with_categories=true) %} -{% if messages %} -
- {% for category, message in messages %} - - {% endfor %} -
-{% endif %} -{% endwith %} - - -
+ + + + + + + + + + + + + + + + + +{% with messages = get_flashed_messages(with_categories=true) %} +{% if messages %} \ No newline at end of file + {% for category, message in messages %} + showFlashMessage({{ message| tojson }}, {{ (category if category != 'error' else 'danger')| tojson }}); + {% endfor %} + }); + +{% endif %} +{% endwith %} \ No newline at end of file diff --git a/scipaperloader/templates/scraper.html.jinja b/scipaperloader/templates/scraper.html.jinja index e49c935..e043fbc 100644 --- a/scipaperloader/templates/scraper.html.jinja +++ b/scipaperloader/templates/scraper.html.jinja @@ -317,7 +317,6 @@ src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"> - diff --git a/scipaperloader/templates/upload.html.jinja b/scipaperloader/templates/upload.html.jinja index 17675c9..c5b89e4 100644 --- a/scipaperloader/templates/upload.html.jinja +++ b/scipaperloader/templates/upload.html.jinja @@ -5,34 +5,10 @@ {% block content %}

Welcome to SciPaperLoader

-
+ +{% include "partials/flash_messages.html.jinja" %} -{% if success %} -
{{ success }}
-{% endif %} {% if error_message %} -
-

{{ error_message }}

- - - - - - - - - - {% for error in error_samples %} - - - - - - {% endfor %} - -
RowDOIError
{{ error.row }}{{ error.doi }}{{ error.error }}
- Download Full Error Log -
-{% endif %} +

@@ -113,17 +89,21 @@ const uploadFormHandler = new FormHandler('upload-form', { statusUrlTemplate: config.statusUrlTemplate, onSuccess: showResults, - onError: (error) => alert(`Error: ${error}`) + onError: (error) => showFlashMessage(`Upload failed: ${error}`, 'error') }); }); const showResults = (result) => { + // Show main success message as overlay const message = `Upload completed! Added: ${result.added}, Updated: ${result.updated}, Skipped: ${result.skipped}, Errors: ${result.error_count}`; + showFlashMessage(message, 'success'); - let resultHTML = `

${message}
`; + // Build detailed results HTML for the results container + let resultHTML = ''; // Add skipped records information if (result.skipped > 0) { + showFlashMessage(`${result.skipped} records were skipped`, 'info'); resultHTML += `

${result.skipped} records were skipped

@@ -154,6 +134,7 @@ // Existing error display code if (result.error_count > 0) { + showFlashMessage(`${result.error_count} errors occurred during upload`, 'warning'); resultHTML += `

Some errors occurred (${result.error_count} total)

@@ -187,6 +168,7 @@
`; } + // Display detailed results in container document.getElementById("results-container").innerHTML = resultHTML; };