Fix styling

This commit is contained in:
Preston Doman 2019-01-31 17:48:36 -08:00
parent 74ce7f5c73
commit fc4141eaaf

View file

@ -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) {