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…
Reference in a new issue