add loader on uploading installation report
This commit is contained in:
parent
a819e841f9
commit
328c657e0f
2 changed files with 91 additions and 1 deletions
|
|
@ -31,6 +31,60 @@
|
|||
.removal-checkbox:checked:focus {
|
||||
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
|
||||
}
|
||||
|
||||
/* Upload Loader Overlay */
|
||||
#uploadLoader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#uploadLoader.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.loader-content {
|
||||
background: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.loader-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 5px solid #f3f3f3;
|
||||
border-top: 5px solid #696cff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loader-text {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.loader-subtext {
|
||||
font-size: 0.9rem;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
|
|
@ -38,6 +92,15 @@
|
|||
|
||||
{% include '_toasts.html' %}
|
||||
|
||||
<!-- Upload Loader Overlay -->
|
||||
<div id="uploadLoader">
|
||||
<div class="loader-content">
|
||||
<div class="loader-spinner"></div>
|
||||
<div class="loader-text">در حال آپلود...</div>
|
||||
<div class="loader-subtext">لطفا تا بارگذاری کامل گزارش منتظر بمانید.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Instance Info Modal -->
|
||||
{% instance_info_modal instance %}
|
||||
|
||||
|
|
@ -516,7 +579,7 @@
|
|||
{% if user_is_installer %}
|
||||
<button type="submit" class="btn btn-success" form="installation-report-form">ثبت گزارش</button>
|
||||
{% endif %}
|
||||
{% if next_step and not edit_mode %}
|
||||
{% if next_step and not edit_mode and report %}
|
||||
<a href="{% url 'processes:step_detail' instance.id next_step.id %}" class="btn btn-primary">
|
||||
بعدی
|
||||
<i class="bx bx-chevron-left bx-sm me-sm-n2"></i>
|
||||
|
|
@ -638,6 +701,9 @@
|
|||
// Require date and show success toast on submit (persist across redirect)
|
||||
(function(){
|
||||
const form = document.querySelector('form[enctype]') || document.querySelector('form');
|
||||
const loader = document.getElementById('uploadLoader');
|
||||
const submitButton = document.querySelector('button[type="submit"][form="installation-report-form"]');
|
||||
|
||||
if (!form) return;
|
||||
form.addEventListener('submit', function(ev){
|
||||
const display = document.getElementById('id_visited_date_display');
|
||||
|
|
@ -663,8 +729,32 @@
|
|||
return false;
|
||||
}
|
||||
} catch(_) {}
|
||||
|
||||
// Show loader overlay when form is valid and submitting
|
||||
if (loader) {
|
||||
loader.classList.add('active');
|
||||
}
|
||||
|
||||
// Disable submit button to prevent double submission
|
||||
if (submitButton) {
|
||||
submitButton.disabled = true;
|
||||
submitButton.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>در حال ارسال...';
|
||||
}
|
||||
|
||||
try { sessionStorage.setItem('install_report_saved', '1'); } catch(_) {}
|
||||
}, false);
|
||||
|
||||
// Hide loader on back navigation or page show (in case of errors)
|
||||
window.addEventListener('pageshow', function(event) {
|
||||
if (loader) {
|
||||
loader.classList.remove('active');
|
||||
}
|
||||
if (submitButton) {
|
||||
submitButton.disabled = false;
|
||||
submitButton.innerHTML = 'ثبت گزارش';
|
||||
}
|
||||
});
|
||||
|
||||
// on load, if saved flag exists, show toast
|
||||
try {
|
||||
if (sessionStorage.getItem('install_report_saved') === '1') {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue