184 lines
9.4 KiB
HTML
184 lines
9.4 KiB
HTML
{% load static %}
|
|
|
|
<!-- Toast Container -->
|
|
<div class="toast-container position-fixed top-0 start-0 p-3" style="z-index: 2000;">
|
|
<!-- Django Messages Toast -->
|
|
{% if messages %}
|
|
{% for message in messages %}
|
|
<div class="bs-toast toast fade {% if message.tags == 'error' %}bg-danger{% elif message.tags == 'success' %}bg-success{% elif message.tags == 'warning' %}bg-warning{% else %}bg-blue{% endif %} text-white border-0" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header">
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body d-flex align-items-center">
|
|
{% if message.tags == 'error' %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-circle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
|
|
<path d="M12 8v4"></path>
|
|
<path d="M12 16h.01"></path>
|
|
</svg>
|
|
{% elif message.tags == 'success' %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
|
|
<path d="M9 12l2 2l4 -4"></path>
|
|
</svg>
|
|
{% elif message.tags == 'warning' %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M12 9v4"></path>
|
|
<path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path>
|
|
<path d="M12 16h.01"></path>
|
|
</svg>
|
|
{% else %}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
|
|
<path d="M12 9h.01"></path>
|
|
<path d="M11 12h1v4h1"></path>
|
|
</svg>
|
|
{% endif %}
|
|
{{ message }}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
|
|
<!-- JavaScript/AJAX Toast Template -->
|
|
<div id="js-toast-template" class="bs-toast toast fade" role="alert" aria-live="assertive" aria-atomic="true" style="display: none;">
|
|
<div class="toast-header">
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body d-flex align-items-center">
|
|
<!-- Icon will be inserted here -->
|
|
<!-- Message will be inserted here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Function to show toast from JavaScript/AJAX
|
|
window.showToast = function(message, type = 'success') {
|
|
// Clone the template
|
|
const toastTemplate = document.getElementById('js-toast-template').cloneNode(true);
|
|
|
|
// Set message and style
|
|
const toastBody = toastTemplate.querySelector('.toast-body');
|
|
toastBody.textContent = message;
|
|
|
|
// Add icon based on type
|
|
let iconHtml = '';
|
|
switch(type) {
|
|
case 'success':
|
|
iconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-check me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
|
|
<path d="M9 12l2 2l4 -4"></path>
|
|
</svg>`;
|
|
break;
|
|
case 'danger':
|
|
iconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-circle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
|
|
<path d="M12 8v4"></path>
|
|
<path d="M12 16h.01"></path>
|
|
</svg>`;
|
|
break;
|
|
case 'warning':
|
|
iconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-alert-triangle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M12 9v4"></path>
|
|
<path d="M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z"></path>
|
|
<path d="M12 16h.01"></path>
|
|
</svg>`;
|
|
break;
|
|
default:
|
|
iconHtml = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-info-circle me-2" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path>
|
|
<path d="M12 9h.01"></path>
|
|
<path d="M11 12h1v4h1"></path>
|
|
</svg>`;
|
|
}
|
|
toastBody.innerHTML = iconHtml + message;
|
|
|
|
// Set background color
|
|
toastTemplate.classList.remove('bg-success', 'bg-danger', 'bg-warning', 'bg-blue');
|
|
toastTemplate.classList.add(`bg-${type}`);
|
|
toastTemplate.style.display = 'block';
|
|
|
|
// Add to container
|
|
document.querySelector('.toast-container').appendChild(toastTemplate);
|
|
|
|
// Initialize and show toast
|
|
const toast = new bootstrap.Toast(toastTemplate, {
|
|
autohide: true,
|
|
delay: 6000
|
|
});
|
|
toast.show();
|
|
|
|
// Remove from DOM after hiding
|
|
toastTemplate.addEventListener('hidden.bs.toast', function () {
|
|
this.remove();
|
|
});
|
|
}
|
|
|
|
// Initialize Django message toasts
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const djangoToasts = document.querySelectorAll('.toast:not(#js-toast-template)');
|
|
djangoToasts.forEach(toast => {
|
|
const bsToast = new bootstrap.Toast(toast, {
|
|
autohide: true,
|
|
delay: 6000
|
|
});
|
|
bsToast.show();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{#<!-- Usage Examples -->#}
|
|
{#<!--#}
|
|
{#1. Django Messages (in views.py):#}
|
|
{# from django.contrib import messages#}
|
|
{# #}
|
|
{# # Success message#}
|
|
{# messages.success(request, 'عملیات با موفقیت انجام شد')#}
|
|
{# #}
|
|
{# # Error message#}
|
|
{# messages.error(request, 'خطا در انجام عملیات')#}
|
|
{# #}
|
|
{# # Warning message#}
|
|
{# messages.warning(request, 'هشدار: این عملیات قابل بازگشت نیست')#}
|
|
{# #}
|
|
{# # Info message#}
|
|
{# messages.info(request, 'اطلاعات جدید در دسترس است')#}
|
|
{##}
|
|
{#2. JavaScript/AJAX Messages:#}
|
|
{# // Success toast#}
|
|
{# showToast('عملیات با موفقیت انجام شد', 'success');#}
|
|
{# #}
|
|
{# // Error toast#}
|
|
{# showToast('خطا در انجام عملیات', 'danger');#}
|
|
{# #}
|
|
{# // Warning toast#}
|
|
{# showToast('هشدار: این عملیات قابل بازگشت نیست', 'warning');#}
|
|
{# #}
|
|
{# // Info toast#}
|
|
{# showToast('اطلاعات جدید در دسترس است', 'blue');#}
|
|
{##}
|
|
{#3. AJAX Example:#}
|
|
{# $.ajax({#}
|
|
{# url: '/your-endpoint/',#}
|
|
{# method: 'POST',#}
|
|
{# success: function(response) {#}
|
|
{# if (response.success) {#}
|
|
{# showToast('عملیات با موفقیت انجام شد', 'success');#}
|
|
{# } else {#}
|
|
{# showToast(response.error || 'خطا در انجام عملیات', 'danger');#}
|
|
{# }#}
|
|
{# },#}
|
|
{# error: function() {#}
|
|
{# showToast('خطا در ارتباط با سرور', 'danger');#}
|
|
{# }#}
|
|
{# });#}
|
|
{#--> #}
|