Add loading message and modal fade
This commit is contained in:
		
							parent
							
								
									9a20cf72a8
								
							
						
					
					
						commit
						da50627f51
					
				
					 3 changed files with 28 additions and 12 deletions
				
			
		|  | @ -62,7 +62,7 @@ | |||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
|     <div class="modal" id="editReportModal" tabindex="-1" role="dialog"> | ||||
|     <div class="modal fade" id="editReportModal" tabindex="-1" role="dialog"> | ||||
|         <div class="modal-dialog modal-lg" role="document"> | ||||
|             <div class="modal-content"> | ||||
|                 <div class="modal-header"> | ||||
|  | @ -72,6 +72,12 @@ | |||
|                     </button> | ||||
|                 </div> | ||||
|                 <div class="modal-body" id="editReportModalBody"> | ||||
|                     <div class="text-center"> | ||||
|                         <i class="fas fa-spinner fa-3x fa-spin"></i> | ||||
|                         <br> | ||||
|                         <br> | ||||
|                         <h5>Loading Report ...</h5> | ||||
|                     </div> | ||||
|                 </div> | ||||
|                 <div class="modal-footer"> | ||||
|                     <button type="button" class="btn btn-danger">Delete Report</button> | ||||
|  | @ -81,7 +87,7 @@ | |||
|             </div> | ||||
|         </div> | ||||
|     </div> | ||||
|     <div class="modal" id="viewReportModal" tabindex="-1" role="dialog"> | ||||
|     <div class="modal fade" id="viewReportModal" tabindex="-1" role="dialog"> | ||||
|         <div class="modal-dialog modal-lg" role="document"> | ||||
|             <div class="modal-content"> | ||||
|                 <div class="modal-header"> | ||||
|  | @ -91,6 +97,12 @@ | |||
|                     </button> | ||||
|                 </div> | ||||
|                 <div class="modal-view"> | ||||
|                     <div class="text-center"> | ||||
|                         <i class="fas fa-spinner fa-3x fa-spin"></i> | ||||
|                         <br> | ||||
|                         <br> | ||||
|                         <h5>Loading Report ...</h5> | ||||
|                     </div> | ||||
|                 </div> | ||||
|             </div> | ||||
|         </div> | ||||
|  |  | |||
|  | @ -1,3 +1,9 @@ | |||
| const reportType = { | ||||
|     NEW : 1, | ||||
|     EDIT : 2, | ||||
|     VIEW : 3 | ||||
| }; | ||||
| 
 | ||||
| // Hack to change endpoint url
 | ||||
| function getEndpointDomain() { | ||||
|     return "https://" + window.location.hostname + ":8444/"; | ||||
|  | @ -18,7 +24,7 @@ function getDataFromEndpoint(url, callback, optional) { | |||
|                 console.log("GET SUCCESS!"); | ||||
|                 console.log("Server response:\n" + this.response); | ||||
|                 let parsedData = JSON.parse(this.response); | ||||
|                 optional === undefined ? callback(parsedData) : callback(parsedData, optional); | ||||
|                 optional ? callback(parsedData, optional) : callback(parsedData); | ||||
|             } else { | ||||
|                 console.error("GET FAILURE!"); | ||||
|                 console.error("Server status: " + this.status); | ||||
|  | @ -51,7 +57,7 @@ function postDataToEndpoint(url, payload, callback, optional) { | |||
|                 console.log("POST SUCCESS!"); | ||||
|                 console.log("Server response:\n" + this.response); | ||||
|                 let parsedData = JSON.parse(this.response); | ||||
|                 optional === undefined ? callback(parsedData) : callback(parsedData, optional); | ||||
|                 optional ? callback(parsedData, optional) : callback(parsedData); | ||||
|             } else { | ||||
|                 console.error("POST FAILURE!"); | ||||
|                 console.error("Server status: " + this.status); | ||||
|  | @ -399,17 +405,9 @@ document.addEventListener("DOMContentLoaded", function(event) { | |||
|     } | ||||
| }); | ||||
| 
 | ||||
| const reportType = { | ||||
|     NEW : 1, | ||||
|     EDIT : 2, | ||||
|     VIEW : 3 | ||||
| }; | ||||
| 
 | ||||
| document.addEventListener("click", function(event) { | ||||
|     if (event.target) { | ||||
|         if (event.target.classList.contains("edit-report-button")) { | ||||
|             console.log("Edit button clicked"); | ||||
|             console.log(event); | ||||
|             const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid; | ||||
|             const type = reportType.EDIT; | ||||
|             getDataFromEndpoint(url, createReportForm, type); | ||||
|  |  | |||
|  | @ -66,6 +66,12 @@ | |||
|                     </button> | ||||
|                 </div> | ||||
|                 <div class="modal-body" id="newReportModalBody"> | ||||
|                     <div class="text-center"> | ||||
|                         <i class="fas fa-spinner fa-3x fa-spin"></i> | ||||
|                         <br> | ||||
|                         <br> | ||||
|                         <h5>Creating Report ...</h5> | ||||
|                     </div> | ||||
|                 </div> | ||||
|                 <div class="modal-footer"> | ||||
|                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | ||||
|  |  | |||
		Loading…
	
	Add table
		
		Reference in a new issue
	
	 Preston Doman
						Preston Doman