Refactor event handlers and include classList polyfill
This commit is contained in:
		
							parent
							
								
									2a2f8011b9
								
							
						
					
					
						commit
						1066e50cc7
					
				
					 2 changed files with 20 additions and 22 deletions
				
			
		|  | @ -7,6 +7,7 @@ | |||
|     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> | ||||
|     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | ||||
|     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> | ||||
|     <script src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.20171210/classList.min.js"></script> | ||||
|     <link rel="shortcut icon" href="img/favicon.ico"> | ||||
|     <title>Reimbursinator</title> | ||||
| </head> | ||||
|  | @ -45,11 +46,13 @@ | |||
|                     <div class="card-body"> | ||||
|                         <table class="table table-striped table-responsive-sm" style="visibility:hidden"> | ||||
|                             <thead> | ||||
|                                 <th>Title</th> | ||||
|                                 <th>Date Created</th> | ||||
|                                 <th class="d-none d-lg-table-cell">State</th> | ||||
|                                 <th class="d-none d-md-table-cell">Date Submitted</th> | ||||
|                                 <th>Action</th> | ||||
|                                 <tr> | ||||
|                                     <th>Title</th> | ||||
|                                     <th>Date Created</th> | ||||
|                                     <th class="d-none d-lg-table-cell">State</th> | ||||
|                                     <th class="d-none d-md-table-cell">Date Submitted</th> | ||||
|                                     <th>Action</th> | ||||
|                                 </tr> | ||||
|                             </thead> | ||||
|                             <tbody> | ||||
|                             </tbody> | ||||
|  |  | |||
|  | @ -80,12 +80,6 @@ function createFormGroup(key, field) { | |||
|             formGroup.appendChild(label); | ||||
|             break; | ||||
|         case "date": | ||||
|             input.type = "datetime"; | ||||
|             input.value = field.value; | ||||
|             input.classList.add("form-control"); | ||||
|             formGroup.appendChild(label); | ||||
|             formGroup.appendChild(input); | ||||
|             break; | ||||
|         case "decimal": | ||||
|             input.type = "text"; | ||||
|             input.value = field.value; | ||||
|  | @ -172,7 +166,6 @@ function createEditReportForm(parsedData) { | |||
|     accordion.classList.add("accordion"); | ||||
|     accordion.id = "editReportAccordion"; | ||||
| 
 | ||||
| 
 | ||||
|     // Traverse the report's sections array
 | ||||
|     const sections = parsedData.sections; | ||||
|     for (let key in sections) { | ||||
|  | @ -259,9 +252,9 @@ function displayListOfReports(parsedData) { | |||
|             if (state === "created") { | ||||
|                 // Edit button
 | ||||
|                 dateSubmitted = "TBD"; | ||||
|                 actionButton.classList.add("btn-primary"); | ||||
|                 actionButton.classList.add("btn-primary", "edit-report-button"); // Add event listener class
 | ||||
|                 actionButton.innerHTML = "Edit"; | ||||
|                 actionButton.addEventListener("click", openEditReportForm); | ||||
|                 //actionButton.addEventListener("click", openEditReportForm);
 | ||||
|             } else { | ||||
|                 // View button
 | ||||
|                 dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US"); | ||||
|  | @ -279,15 +272,17 @@ function displayListOfReports(parsedData) { | |||
|     } | ||||
| } | ||||
| 
 | ||||
| function getReportHistory(event) { | ||||
| document.addEventListener("DOMContentLoaded", function(event) { | ||||
|     const url = getEndpointDomain() + "api/v1/reports"; | ||||
|     getDataFromEndpoint(url, displayListOfReports); | ||||
| } | ||||
| }); | ||||
| 
 | ||||
| function openEditReportForm(event) { | ||||
|     const url = getEndpointDomain() + "api/v1/report/" + this.dataset.rid; | ||||
|     getDataFromEndpoint(url, createEditReportForm); | ||||
| } | ||||
| document.addEventListener("click", function(event) { | ||||
|     if (event.target && event.target.classList.contains("edit-report-button")) { | ||||
|         console.log("Edit button clicked"); | ||||
|         const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid; | ||||
|         getDataFromEndpoint(url, createEditReportForm); | ||||
|     } | ||||
| 
 | ||||
| 
 | ||||
| document.addEventListener("DOMContentLoaded", getReportHistory); | ||||
|     // TODO: Add view report
 | ||||
| }); | ||||
|  |  | |||
		Loading…
	
	Add table
		
		Reference in a new issue
	
	 Preston Doman
						Preston Doman