35 lines
1.3 KiB
HTML
35 lines
1.3 KiB
HTML
{% set bs_class = {
|
|
'success': 'bg-success text-white',
|
|
'error': 'bg-danger text-white',
|
|
'warning': 'bg-warning text-dark',
|
|
'info': 'bg-info text-dark'
|
|
} %}
|
|
|
|
{% with messages = get_flashed_messages(with_categories=True) %}
|
|
{% if messages %}
|
|
<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1100;">
|
|
{% for category, message in messages %}
|
|
<div class="toast align-items-center {{ bs_class.get(category, 'bg-secondary text-white') }}" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="d-flex">
|
|
<div class="toast-body">
|
|
<strong class="me-2">{{ category|capitalize }}:</strong> {{ message }}
|
|
</div>
|
|
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<script>
|
|
// Show all toasts on page load
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
var toastElList = [].slice.call(document.querySelectorAll('.toast'));
|
|
toastElList.forEach(function (toastEl) {
|
|
// Autohide after 5s; tweak as needed
|
|
var t = new bootstrap.Toast(toastEl, { autohide: true, delay: 5000 });
|
|
t.show();
|
|
});
|
|
});
|
|
</script>
|
|
{% endif %}
|
|
{% endwith %} |