add loader on uploading installation report
This commit is contained in:
parent
a819e841f9
commit
328c657e0f
2 changed files with 91 additions and 1 deletions
BIN
db.sqlite3
BIN
db.sqlite3
Binary file not shown.
|
|
@ -31,6 +31,60 @@
|
||||||
.removal-checkbox:checked:focus {
|
.removal-checkbox:checked:focus {
|
||||||
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
|
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>
|
</style>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
@ -38,6 +92,15 @@
|
||||||
|
|
||||||
{% include '_toasts.html' %}
|
{% 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_info_modal instance %}
|
{% instance_info_modal instance %}
|
||||||
|
|
||||||
|
|
@ -516,7 +579,7 @@
|
||||||
{% if user_is_installer %}
|
{% if user_is_installer %}
|
||||||
<button type="submit" class="btn btn-success" form="installation-report-form">ثبت گزارش</button>
|
<button type="submit" class="btn btn-success" form="installation-report-form">ثبت گزارش</button>
|
||||||
{% endif %}
|
{% 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">
|
<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>
|
<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)
|
// Require date and show success toast on submit (persist across redirect)
|
||||||
(function(){
|
(function(){
|
||||||
const form = document.querySelector('form[enctype]') || document.querySelector('form');
|
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;
|
if (!form) return;
|
||||||
form.addEventListener('submit', function(ev){
|
form.addEventListener('submit', function(ev){
|
||||||
const display = document.getElementById('id_visited_date_display');
|
const display = document.getElementById('id_visited_date_display');
|
||||||
|
|
@ -663,8 +729,32 @@
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
} catch(_) {}
|
} 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(_) {}
|
try { sessionStorage.setItem('install_report_saved', '1'); } catch(_) {}
|
||||||
}, false);
|
}, 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
|
// on load, if saved flag exists, show toast
|
||||||
try {
|
try {
|
||||||
if (sessionStorage.getItem('install_report_saved') === '1') {
|
if (sessionStorage.getItem('install_report_saved') === '1') {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue