93 lines
2.7 KiB
Django/Jinja
93 lines
2.7 KiB
Django/Jinja
<!-- 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> |