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