Update createEditReportForm to populate form
This commit is contained in:
		
							parent
							
								
									635edf83b6
								
							
						
					
					
						commit
						5abc6cb87a
					
				
					 1 changed files with 67 additions and 9 deletions
				
			
		|  | @ -54,21 +54,73 @@ function getDataFromEndpoint(url, callback) { | ||||||
|     xhr.send(); |     xhr.send(); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | function createFormGroup(fieldKey, field) { | ||||||
|  |     let formGroup = document.createElement("div") | ||||||
|  |     formGroup.classList.add("form-group"); | ||||||
|  | 
 | ||||||
|  |     let label = document.createElement("label"); | ||||||
|  |     label.innerHTML = field.label; | ||||||
|  |     label.setAttribute("for", fieldKey); | ||||||
|  |     let input = document.createElement("input"); | ||||||
|  |     input.name = fieldKey; | ||||||
|  | 
 | ||||||
|  |     switch(field.type) { | ||||||
|  |         case "boolean": | ||||||
|  |             input.type = "checkbox"; | ||||||
|  |             if (field.value === true) | ||||||
|  |                 input.setAttribute("checked", "checked"); | ||||||
|  |             formGroup.appendChild(input); | ||||||
|  |             formGroup.appendChild(label); | ||||||
|  |             break; | ||||||
|  |         case "date": | ||||||
|  |             input.type = "datetime"; | ||||||
|  |             input.value = field.value; | ||||||
|  |             formGroup.appendChild(label); | ||||||
|  |             formGroup.appendChild(input); | ||||||
|  |             break; | ||||||
|  |         case "decimal": | ||||||
|  |             input.type = "text"; | ||||||
|  |             input.value = field.value; | ||||||
|  |             formGroup.appendChild(label); | ||||||
|  |             formGroup.appendChild(input); | ||||||
|  |             break; | ||||||
|  |         case "file": | ||||||
|  |             input.type = "file"; | ||||||
|  |             const link = document.createElement("a"); | ||||||
|  |             link.href = field.value; | ||||||
|  |             link.innerHTML = field.value; | ||||||
|  |             formGroup.appendChild(label); | ||||||
|  |             formGroup.appendChild(input); | ||||||
|  |             formGroup.appendChild(link); | ||||||
|  |             break; | ||||||
|  |         default: | ||||||
|  |             break; | ||||||
|  |     } | ||||||
|  | 
 | ||||||
|  |     return formGroup; | ||||||
|  | } | ||||||
|  | 
 | ||||||
| function createEditReportForm(parsedData) { | function createEditReportForm(parsedData) { | ||||||
|     console.log("In createEditReportForm"); |     console.log("In createEditReportForm"); | ||||||
|     console.log(JSON.stringify(parsedData)); |     console.log(JSON.stringify(parsedData)); | ||||||
|  | 
 | ||||||
|     const cardBody = document.querySelector(".card-body"); |     const cardBody = document.querySelector(".card-body"); | ||||||
|  |     const cardHeader = document.querySelector(".card-header"); | ||||||
|     const fragment = document.createDocumentFragment(); |     const fragment = document.createDocumentFragment(); | ||||||
|     const title = parsedData.title; |  | ||||||
|     const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-us"); |  | ||||||
|      |      | ||||||
| 
 | 
 | ||||||
|     if (cardBody.hasChildNodes() === true && cardBody.childNodes[1]) { |     if (cardBody.hasChildNodes() === true && cardBody.childNodes[1]) { | ||||||
|        cardBody.removeChild(cardBody.childNodes[1]);  |        cardBody.removeChild(cardBody.childNodes[1]);  | ||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|     console.log(`Title: ${title}`); |     const reportTitle = document.createElement("h4"); | ||||||
|     console.log(`Date Created: ${dateCreated}`); |     reportTitle.innerHTML = parsedData.title; | ||||||
|  |     fragment.appendChild(reportTitle); | ||||||
|  | 
 | ||||||
|  |     const dateCreated = document.createElement("p"); | ||||||
|  |     dateCreated.innerHTML = new Date(parsedData.date_created).toLocaleDateString("en-US"); | ||||||
|  |     fragment.appendChild(dateCreated); | ||||||
|  | 
 | ||||||
|     const form = document.createElement("form"); |     const form = document.createElement("form"); | ||||||
| 
 | 
 | ||||||
|     const sections = parsedData.sections; |     const sections = parsedData.sections; | ||||||
|  | @ -76,20 +128,26 @@ function createEditReportForm(parsedData) { | ||||||
|         console.log(`Section title: ${sections[section].title}`); |         console.log(`Section title: ${sections[section].title}`); | ||||||
|         console.log(`Section html description: ${sections[section].html_description}`); |         console.log(`Section html description: ${sections[section].html_description}`); | ||||||
| 
 | 
 | ||||||
|  |         // Add section title and description
 | ||||||
|         let sectionTitle = document.createElement("p"); |         let sectionTitle = document.createElement("p"); | ||||||
|         sectionTitle.innerHTML = sections[section].title; |         sectionTitle.innerHTML = sections[section].title; | ||||||
|         form.appendChild(sectionTitle); |         form.appendChild(sectionTitle); | ||||||
|         let sectionDescription = sections[section].html_description;  // html_description should be updated to a standard string
 |         let sectionDescription = sections[section].html_description;  // html_description should be updated to a standard string
 | ||||||
|         form.insertAdjacentHTML("beforeend", sectionDescription);  |         form.insertAdjacentHTML("beforeend", sectionDescription);  | ||||||
| 
 | 
 | ||||||
|         for (let field in sections[section].fields) { |         //for (let field in sections[section].fields) {
 | ||||||
|             console.log(`Field label: ${sections[section].fields[field].label}`);  |         for (let fieldKey in sections[section].fields) { | ||||||
|             console.log(`Field type: ${sections[section].fields[field].type}`);  |             console.log(`Field label: ${sections[section].fields[fieldKey].label}`);  | ||||||
|             console.log(`Field value: ${sections[section].fields[field].value}`);  |             console.log(`Field type: ${sections[section].fields[fieldKey].type}`);  | ||||||
|  |             console.log(`Field value: ${sections[section].fields[fieldKey].value}`);  | ||||||
|              |              | ||||||
| 
 |             let formGroup = createFormGroup(fieldKey, sections[section].fields[fieldKey]); | ||||||
|  |             form.appendChild(formGroup); | ||||||
|         } |         } | ||||||
|     } |     } | ||||||
|  | 
 | ||||||
|  |     fragment.appendChild(form); | ||||||
|  |     cardBody.appendChild(fragment); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| function displayListOfReports(parsedData) { | function displayListOfReports(parsedData) { | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		
		Reference in a new issue
	
	 Preston Doman
						Preston Doman