first commit
This commit is contained in:
commit
b71ea45681
898 changed files with 138202 additions and 0 deletions
184
templates/_toasts.html
Normal file
184
templates/_toasts.html
Normal file
|
|
@ -0,0 +1,184 @@
|
|||
{% 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');#}
|
||||
{# }#}
|
||||
{# });#}
|
||||
{#--> #}
|
||||
Loading…
Add table
Add a link
Reference in a new issue