Fix styling
This commit is contained in:
parent
74ce7f5c73
commit
fc4141eaaf
1 changed files with 31 additions and 16 deletions
|
@ -70,35 +70,35 @@ function createFormGroup(key, field) {
|
||||||
input.type = "checkbox";
|
input.type = "checkbox";
|
||||||
if (field.value === true)
|
if (field.value === true)
|
||||||
input.setAttribute("checked", "checked");
|
input.setAttribute("checked", "checked");
|
||||||
formGroup.appendChild(input); // Reversed order compared to others
|
input.classList.add("form-check-input");
|
||||||
formGroup.appendChild(label);
|
|
||||||
formGroup.classList.add("form-check");
|
formGroup.classList.add("form-check");
|
||||||
label.classList.add("form-check-label");
|
label.classList.add("form-check-label");
|
||||||
input.classList.add("form-check-input");
|
formGroup.appendChild(input); // Reversed order compared to others
|
||||||
|
formGroup.appendChild(label);
|
||||||
break;
|
break;
|
||||||
case "date":
|
case "date":
|
||||||
input.type = "datetime";
|
input.type = "datetime";
|
||||||
input.value = field.value;
|
input.value = field.value;
|
||||||
|
input.classList.add("form-control");
|
||||||
formGroup.appendChild(label);
|
formGroup.appendChild(label);
|
||||||
formGroup.appendChild(input);
|
formGroup.appendChild(input);
|
||||||
input.classList.add("form-control");
|
|
||||||
break;
|
break;
|
||||||
case "decimal":
|
case "decimal":
|
||||||
input.type = "text";
|
input.type = "text";
|
||||||
input.value = field.value;
|
input.value = field.value;
|
||||||
|
input.classList.add("form-control");
|
||||||
formGroup.appendChild(label);
|
formGroup.appendChild(label);
|
||||||
formGroup.appendChild(input);
|
formGroup.appendChild(input);
|
||||||
input.classList.add("form-control");
|
|
||||||
break;
|
break;
|
||||||
case "file":
|
case "file":
|
||||||
input.type = "file";
|
input.type = "file";
|
||||||
|
input.classList.add("form-control-file");
|
||||||
const link = document.createElement("a");
|
const link = document.createElement("a");
|
||||||
link.href = field.value;
|
link.href = field.value;
|
||||||
link.innerHTML = field.value;
|
link.innerHTML = field.value;
|
||||||
formGroup.appendChild(label);
|
formGroup.appendChild(label);
|
||||||
formGroup.appendChild(input);
|
formGroup.appendChild(input);
|
||||||
formGroup.appendChild(link);
|
formGroup.appendChild(link);
|
||||||
input.classList.add("form-control-file");
|
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
|
@ -116,7 +116,6 @@ function createCollapsibleCard(key, sectionTitle) {
|
||||||
|
|
||||||
// Create h2, button. Append button to h2, h2 to header, and header to card
|
// Create h2, button. Append button to h2, h2 to header, and header to card
|
||||||
const h2 = document.createElement("h2");
|
const h2 = document.createElement("h2");
|
||||||
//h2.classList.add("mb-0");
|
|
||||||
const button = document.createElement("button");
|
const button = document.createElement("button");
|
||||||
button.classList.add("btn", "btn-link");
|
button.classList.add("btn", "btn-link");
|
||||||
button.type = "button";
|
button.type = "button";
|
||||||
|
@ -148,19 +147,20 @@ function createCollapsibleCardBody(key, form, sectionDescription) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function createEditReportForm(parsedData) {
|
function createEditReportForm(parsedData) {
|
||||||
const cardBody = document.querySelector(".card-body");
|
const col = document.querySelector(".col-sm-8");
|
||||||
const cardHeader = document.querySelector(".card-header");
|
|
||||||
const fragment = document.createDocumentFragment();
|
const fragment = document.createDocumentFragment();
|
||||||
|
|
||||||
|
while (col.firstChild) {
|
||||||
if (cardBody.hasChildNodes() === true && cardBody.childNodes[1]) {
|
col.removeChild(col.firstChild)
|
||||||
cardBody.removeChild(cardBody.childNodes[1]);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add report title and date to card header
|
// Add report title and date to card header
|
||||||
let reportTitle = parsedData.title;
|
const reportTitle = parsedData.title;
|
||||||
let dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US");
|
const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US");
|
||||||
cardHeader.innerHTML = `${reportTitle} ${dateCreated}`;
|
const h3 = document.createElement("h3");
|
||||||
|
h3.innerHTML = `${reportTitle} ${dateCreated}`;
|
||||||
|
h3.classList.add("text-center");
|
||||||
|
fragment.appendChild(h3);
|
||||||
|
|
||||||
// Create accordion
|
// Create accordion
|
||||||
const accordion = document.createElement("div");
|
const accordion = document.createElement("div");
|
||||||
|
@ -200,14 +200,29 @@ function createEditReportForm(parsedData) {
|
||||||
form.appendChild(formGroup);
|
form.appendChild(formGroup);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add save button to form
|
||||||
|
let saveButton = document.createElement("button");
|
||||||
|
saveButton.innerHTML = "Save";
|
||||||
|
saveButton.type = "submit";
|
||||||
|
saveButton.classList.add("btn", "btn-primary"); // TODO: add eventListener
|
||||||
|
form.appendChild(saveButton);
|
||||||
|
|
||||||
// Create collapsible card body, append form to it, append card to accordion
|
// Create collapsible card body, append form to it, append card to accordion
|
||||||
let cardBody = createCollapsibleCardBody(key, form, section.html_description);
|
let cardBody = createCollapsibleCardBody(key, form, section.html_description);
|
||||||
card.appendChild(cardBody);
|
card.appendChild(cardBody);
|
||||||
accordion.appendChild(card);
|
accordion.appendChild(card);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Add submit button to accordion
|
||||||
|
let submitButton = document.createElement("button");
|
||||||
|
submitButton.innerHTML = "Submit Report";
|
||||||
|
submitButton.type = "submit";
|
||||||
|
submitButton.classList.add("btn", "btn-primary", "btn-lg", "btn-block"); // TODO: add eventListener
|
||||||
|
accordion.appendChild(submitButton);
|
||||||
|
|
||||||
fragment.appendChild(accordion)
|
fragment.appendChild(accordion)
|
||||||
cardBody.appendChild(fragment);
|
col.appendChild(fragment);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function displayListOfReports(parsedData) {
|
function displayListOfReports(parsedData) {
|
||||||
|
|
Loading…
Reference in a new issue