mischbeck/SciPaperLoader
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixes flash messages

Browse Source
This commit is contained in:
Michael Beck 2025-06-11 23:44:01 +02:00
parent e2ae95cea0
commit d730137d20
9 changed files with 210 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
scipaperloader/static/js/common.js
View File

@ -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}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
`;
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 '<svg class="flash-icon" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>';
case "danger":
return '<svg class="flash-icon" role="img" aria-label="Error:"><use xlink:href="#x-circle-fill"/></svg>';
case "warning":
return '<svg class="flash-icon" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>';
case "info":
return '<svg class="flash-icon" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>';
default:
return '<svg class="flash-icon" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>';
}
};
// 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 = `
<div class="flash-content">
${getIcon(normalizedType)}
<div class="flash-message">${message}</div>
<button type="button" class="flash-close" onclick="this.parentElement.parentElement.remove()">×</button>
</div>
`;
// 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;
}
/**

2
scipaperloader/templates/base.html.jinja
View File

@ -17,6 +17,8 @@
<main class="container my-5">{% block content %}{% endblock content %}</main>
{% include "footer.html.jinja" %}
<!-- Include common utilities globally -->
<script src="{{ url_for('static', filename='js/common.js') }}"></script>
{% block scripts %}{% endblock scripts %}
</body>

1
scipaperloader/templates/config/schedule.html.jinja
View File

@ -49,7 +49,6 @@
</script>
<!-- Load config handler for modular functionality -->
<script src="{{ url_for('static', filename='js/common.js') }}"></script>
<script src="{{ url_for('static', filename='js/config-handler.js') }}"></script>
<div x-data="configHandler.createScheduleManager()" class="tab-pane active">

15
scipaperloader/templates/index.html.jinja
View File

@ -1,9 +1,15 @@
{% extends "base.html.jinja" %}
<!-- Include flash messages template -->
{% include "partials/flash_messages.html.jinja" %}
{% block title %}Home - SciPaperLoader{% endblock title %}
{% block content %}
<!-- Include flash messages template -->
{% include "partials/flash_messages.html.jinja" %}
<div class="container text-center">
<h1 class="display-4">Welcome to SciPaperLoader</h1>
<p class="lead">Your paper scraping tool is ready.</p>
@ -66,4 +72,13 @@
</div>
</div>
</div>
<script>
function testMultipleMessages() {
showFlashMessage('First message - Success!', 'success');
setTimeout(() => showFlashMessage('Second message - Warning!', 'warning'), 500);
setTimeout(() => showFlashMessage('Third message - Info!', 'info'), 1000);
setTimeout(() => showFlashMessage('Fourth message - Error!', 'error'), 1500);
}
</script>
{% endblock content %}

3
scipaperloader/templates/logger.html.jinja
View File

@ -5,6 +5,9 @@
{% block content %}
<h1>Activity Logs</h1>
<!-- Include flash messages template -->
{% include "partials/flash_messages.html.jinja" %}
<form method="get" class="mb-3">
<div class="row g-2">
<div class="col-md-3">

3
scipaperloader/templates/papers.html.jinja
View File

@ -4,6 +4,9 @@
{% block content %}
<!-- Include flash messages template -->
{% 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' %}

196
scipaperloader/templates/partials/flash_messages.html.jinja
View File

@ -1,93 +1,145 @@
<!-- Server-side flash messages from Flask -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="server-flash-messages">
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<!-- JavaScript flash message container for client-side messages -->
<div id="clientFlashContainer"></div>
<!-- SVG Icons for Flash Messages -->
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
</symbol>
<symbol id="info-fill" viewBox="0 0 16 16">
<path
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</symbol>
<symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
<path
d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
</symbol>
<symbol id="x-circle-fill" viewBox="0 0 16 16">
<path
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
</symbol>
</svg>
<!-- CSS styles for flash overlay messages -->
<style>
.client-flash-message {
.flash-overlay {
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
width: 300px;
text-align: center;
font-weight: bold;
padding: 12px;
margin-bottom: 20px;
border-radius: 6px;
top: 20px;
right: 20px;
z-index: 9999;
max-width: 420px;
opacity: 1;
transition: opacity 5s ease-in-out;
transition: all 0.3s ease-in-out;
transform: translateX(0);
margin-bottom: 10px;
}
.client-flash-message.success {
background-color: #d4edda;
border-color: #c3e6cb;
color: #155724;
.flash-content {
padding: 16px 20px;
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
display: flex;
align-items: flex-start;
font-weight: 500;
border-left: 4px solid;
position: relative;
}
.client-flash-message.error {
.flash-icon {
width: 20px;
height: 20px;
margin-right: 12px;
margin-top: 1px;
flex-shrink: 0;
}
.flash-message {
flex: 1;
line-height: 1.4;
}
.flash-close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
padding: 0;
margin-left: 12px;
opacity: 0.6;
line-height: 1;
font-weight: bold;
flex-shrink: 0;
margin-top: -2px;
}
.flash-close:hover {
opacity: 1;
}
.flash-success .flash-content {
background-color: #d1e7dd;
border-left-color: #198754;
color: #0f5132;
}
.flash-danger .flash-content {
background-color: #f8d7da;
border-color: #f5c6cb;
border-left-color: #dc3545;
color: #721c24;
}
.client-flash-message.info {
background-color: #d1ecf1;
border-color: #bee5eb;
color: #0c5460;
}
.client-flash-message.warning {
.flash-warning .flash-content {
background-color: #fff3cd;
border-color: #ffeeba;
color: #856404;
border-left-color: #ffc107;
color: #664d03;
}
.client-flash-message.fade {
.flash-info .flash-content {
background-color: #cff4fc;
border-left-color: #0dcaf0;
color: #055160;
}
.flash-overlay.fade-out {
opacity: 0;
transform: translateX(100%);
}
/* Stack multiple flash messages with smooth transitions */
.flash-overlay {
/* Dynamic positioning will be set by JavaScript */
}
/* Ensure proper z-index stacking */
.flash-overlay:nth-child(1) {
z-index: 9999;
}
.flash-overlay:nth-child(2) {
z-index: 9998;
}
.flash-overlay:nth-child(3) {
z-index: 9997;
}
.flash-overlay:nth-child(4) {
z-index: 9996;
}
.flash-overlay:nth-child(5) {
z-index: 9995;
}
</style>
<!-- Server-side flash messages from Flask -->
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<script>
// Global flash message function that can be used from anywhere
function showFlashMessage(message, type = 'success', duration = 5000) {
const flashMsg = document.createElement('div');
flashMsg.className = `client-flash-message ${type}`;
flashMsg.textContent = message;
const container = document.getElementById('clientFlashContainer');
container.appendChild(flashMsg);
// Apply fade effect after some time
setTimeout(() => flashMsg.classList.add('fade'), duration - 3000);
// Remove element after duration
setTimeout(() => flashMsg.remove(), duration);
return flashMsg;
}
// Initialize toast messages if Bootstrap is used
// Convert server-side flash messages to overlay messages
document.addEventListener('DOMContentLoaded', function () {
// Initialize any Bootstrap toasts if they exist
if (typeof bootstrap !== 'undefined' && bootstrap.Toast) {
const toastElList = [].slice.call(document.querySelectorAll('.toast'));
toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl);
});
}
});
</script>
{% for category, message in messages %}
showFlashMessage({{ message| tojson }}, {{ (category if category != 'error' else 'danger')| tojson }});
{% endfor %}
});
</script>
{% endif %}
{% endwith %}
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

1
scipaperloader/templates/scraper.html.jinja
View File

@ -317,7 +317,6 @@
src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<!-- Modular JavaScript files -->
<script src="{{ url_for('static', filename='js/common.js') }}"></script>
<script src="{{ url_for('static', filename='js/chart.js') }}"></script>
<script src="{{ url_for('static', filename='js/scraper-control.js') }}"></script>
<script src="{{ url_for('static', filename='js/paper-processor.js') }}"></script>

40
scipaperloader/templates/upload.html.jinja
View File

@ -5,34 +5,10 @@
{% block content %}
<h1>Welcome to SciPaperLoader</h1>
<div id="results-container"></div>
<!-- Include flash messages template -->
{% include "partials/flash_messages.html.jinja" %}
{% if success %}
<div class="alert alert-success mt-3">{{ success }}</div>
{% endif %} {% if error_message %}
<div class="alert alert-warning mt-3">
<h4>{{ error_message }}</h4>
<table class="table table-sm table-bordered">
<thead>
<tr>
<th>Row</th>
<th>DOI</th>
<th>Error</th>
</tr>
</thead>
<tbody>
{% for error in error_samples %}
<tr>
<td>{{ error.row }}</td>
<td>{{ error.doi }}</td>
<td>{{ error.error }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<a href="{{ url_for('upload.download_error_log') }}" class="btn btn-outline-secondary">Download Full Error Log</a>
</div>
{% endif %}
<div id="results-container"></div>
<div class="alert alert-info">
<p>
@ -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 = `<div class="alert alert-success">${message}</div>`;
// 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 += `
<div class="alert alert-info">
<h4>${result.skipped} records were skipped</h4>
@ -154,6 +134,7 @@
// Existing error display code
if (result.error_count > 0) {
showFlashMessage(`${result.error_count} errors occurred during upload`, 'warning');
resultHTML += `
<div class="alert alert-warning">
<h4>Some errors occurred (${result.error_count} total)</h4>
@ -187,6 +168,7 @@
</div>`;
}
// Display detailed results in container
document.getElementById("results-container").innerHTML = resultHTML;
};
</script>