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

standardizes notification in html templates

Browse Source
This commit is contained in:
Michael Beck 2025-04-16 15:58:42 +02:00
parent 3d67bbbdf7
commit 14f336fadf
2 changed files with 99 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -30,38 +30,6 @@
font-size: 0.7rem;
margin-top: 2px;
}
.flash-message {
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;
opacity: 1;
transition: opacity 5s ease-in-out;
}
.flash-message.success {
background-color: #d4edda;
border-color: #c3e6cb;
color: #155724;
}
.flash-message.error {
background-color: #f8d7da;
border-color: #f5c6cb;
color: #721c24;
}
.flash-message.fade {
opacity: 0;
}
</style>
<script>
@ -169,15 +137,6 @@
return String(h).padStart(2, "0") + ":00";
},
showFlashMessage(message, type = 'success') {
const flashMsg = document.createElement('div');
flashMsg.className = `flash-message ${type}`;
flashMsg.textContent = message;
document.body.appendChild(flashMsg);
setTimeout(() => flashMsg.classList.add('fade'), 2000);
setTimeout(() => flashMsg.remove(), 7000);
},
updateVolume() {
fetch('{{ url_for('config.api_update_config') }}', {
method: 'POST',
@ -192,14 +151,14 @@
.then(data => {
if (data.success) {
this.volume = parseFloat(this.volumeValue);
this.showFlashMessage('Volume updated successfully!');
showFlashMessage('Volume updated successfully!', 'success');
} else {
this.showFlashMessage(data.updates?.[0]?.message || 'Error updating volume', 'error');
showFlashMessage(data.updates?.[0]?.message || 'Error updating volume', 'error');
}
})
.catch(error => {
console.error('Error:', error);
this.showFlashMessage('Network error occurred', 'error');
showFlashMessage('Network error occurred', 'error');
});
},
@ -310,14 +269,14 @@
.then(response => response.json())
.then(data => {
if (data.success) {
this.showFlashMessage('Schedule updated successfully!');
showFlashMessage('Schedule updated successfully!', 'success');
} else {
this.showFlashMessage(data.updates?.[0]?.message || 'Error updating schedule', 'error');
showFlashMessage(data.updates?.[0]?.message || 'Error updating schedule', 'error');
}
})
.catch(error => {
console.error('Error:', error);
this.showFlashMessage('Network error occurred', 'error');
showFlashMessage('Network error occurred', 'error');
});
}
};

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

@ -0,0 +1,93 @@
<!-- 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>
<style>
.client-flash-message {
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;
opacity: 1;
transition: opacity 5s ease-in-out;
}
.client-flash-message.success {
background-color: #d4edda;
border-color: #c3e6cb;
color: #155724;
}
.client-flash-message.error {
background-color: #f8d7da;
border-color: #f5c6cb;
color: #721c24;
}
.client-flash-message.info {
background-color: #d1ecf1;
border-color: #bee5eb;
color: #0c5460;
}
.client-flash-message.warning {
background-color: #fff3cd;
border-color: #ffeeba;
color: #856404;
}
.client-flash-message.fade {
opacity: 0;
}
</style>
<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
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>