diff --git a/back/backend/views.py b/back/backend/views.py index 4445435..7c82e53 100644 --- a/back/backend/views.py +++ b/back/backend/views.py @@ -186,13 +186,10 @@ def section(request, report_pk, section_pk): if update.field_type == "boolean": # flight check - if request.data[key] == "on": + if request.data[key] == "true": update.data_bool = True - elif request.data[key] == "off": + elif request.data[key] == "false": update.data_bool = False - # everything else - else: - update.data_bool = request.data[key] if update.field_type == "decimal": # initialize to 0 diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 99bcca7..8f0747c 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -56,40 +56,44 @@ function makeAjaxRequest(method, url, callback, type, payload) { } // Wraps a Bootstrap form group around a field -function createFormGroup(field) { +function createFormGroup(sectionIdStr, field) { + const inputId = sectionIdStr + field.field_name; const formGroup = document.createElement("div") formGroup.classList.add("form-group", "row"); const label = document.createElement("label"); label.classList.add("col-sm-4", "col-form"); label.innerHTML = field.label + ": "; - label.setAttribute("for", field.field_name); + label.setAttribute("for", inputId); const div = document.createElement("div"); div.classList.add("col-sm-6"); const input = document.createElement("input"); input.name = field.field_name; - input.id = field.field_name; + input.id = inputId; switch(field.field_type) { case "boolean": - input.type = "checkbox"; - if (field.value === true) - input.setAttribute("checked", "checked"); - input.classList.add("form-check-input"); - label.className = ""; - label.classList.add("form-check-label"); - label.innerHTML = field.label; - outerLabel = document.createElement("div"); - outerLabel.classList.add("col-sm-4"); - outerLabel.innerHTML = "Flight type: "; - formCheck = document.createElement("div"); - formCheck.classList.add("form-check"); - formCheck.appendChild(input); - formCheck.appendChild(label); - div.appendChild(formCheck); - formGroup.appendChild(outerLabel); + const select = document.createElement("select"); + select.name = field.field_name; + select.id = inputId; + select.classList.add("form-control"); + const yesOption = document.createElement("option"); + yesOption.innerHTML = "Yes"; + yesOption.value = "true"; + const noOption = document.createElement("option"); + noOption.innerHTML = "No"; + noOption.value = "false"; + if (field.value === true) { + yesOption.setAttribute("selected", "selected"); + } else { + noOption.setAttribute("selected", "selected"); + } + select.appendChild(yesOption); + select.appendChild(noOption); + formGroup.appendChild(label); + div.appendChild(select) formGroup.appendChild(div); break; case "date": @@ -138,7 +142,7 @@ function createFormGroup(field) { return formGroup; } -function createCollapsibleCard(key, sectionTitle) { +function createCollapsibleCard(sectionIdStr, sectionTitle) { // Create card and header const card = document.createElement("div"); card.classList.add("card"); @@ -151,7 +155,7 @@ function createCollapsibleCard(key, sectionTitle) { button.classList.add("btn", "btn-link"); button.type = "button"; button.setAttribute("data-toggle", "collapse"); - button.setAttribute("data-target", "#collapse" + key); + button.setAttribute("data-target", "#" + sectionIdStr + "collapse"); button.innerHTML = sectionTitle; h2.appendChild(button); cardHeader.appendChild(h2); @@ -160,10 +164,10 @@ function createCollapsibleCard(key, sectionTitle) { return card; } -function createCollapsibleCardBody(key, form, type, sectionDescription, sectionCompleted) { +function createCollapsibleCardBody(form, type, sectionIdStr, sectionDescription, sectionCompleted) { // Create wrapper div const div = document.createElement("div"); - div.id = "collapse" + key; + div.id = sectionIdStr + "collapse"; const sectionAlert = document.createElement("div"); const cardBody = document.createElement("div"); cardBody.classList.add("card-body"); @@ -195,7 +199,7 @@ function createCollapsibleCardBody(key, form, type, sectionDescription, sectionC function createReportForm(parsedData, type) { let modalBody; - let modalLabl; + let modalLabel; const accordion = document.createElement("div"); accordion.classList.add("accordion"); @@ -225,40 +229,38 @@ function createReportForm(parsedData, type) { // Traverse the report's sections array const sections = parsedData.sections; - for (let key in sections) { - let section = sections[key]; - let collapsibleCard = createCollapsibleCard(key, section.title) + for (let i = 0; i < sections.length; i++) { + let sectionIdStr = "section-" + sections[i].id + "-"; + let collapsibleCard = createCollapsibleCard(sectionIdStr, sections[i].title) // Create a new form with the section key index as id let form = document.createElement("form"); form.classList.add("form", "section-form"); - form.id = "form" + key; + form.id = sectionIdStr + "form"; form.setAttribute("data-rid", parsedData.report_pk); - form.setAttribute("data-sid", section.id); + form.setAttribute("data-sid", sections[i].id); // Traverse the fields of this section - let fields = section.fields; - for (let key in fields) { - let field = fields[key]; + let fields = sections[i].fields; + for (let j = 0; j < fields.length; j++) { - console.log("Field label: " + field.label); - console.log("Field type: " + field.field_type); - console.log("Field value: " + field.value); + console.log("Field label: " + fields[j].label); + console.log("Field type: " + fields[j].field_type); + console.log("Field value: " + fields[j].value); // Create a form group for each field and add it to the form - let formGroup = createFormGroup(field); - form.appendChild(formGroup); + form.appendChild(createFormGroup(sectionIdStr, fields[j])); } // Add save button to the current form let saveButton = document.createElement("button"); saveButton.innerHTML = "Save"; saveButton.type = "submit"; - saveButton.classList.add("btn", "btn-primary", "save-section"); // TODO: add eventListener + saveButton.classList.add("btn", "btn-primary", "save-section"); form.appendChild(saveButton); // Create collapsible card body, append form to it, append card to accordion - let cardBody = createCollapsibleCardBody(key, form, type, section.html_description, section.completed); + let cardBody = createCollapsibleCardBody(form, type, sectionIdStr, sections[i].html_description, sections[i].completed); collapsibleCard.appendChild(cardBody); accordion.appendChild(collapsibleCard); }