From 323be88f75efaf9852b04fa99fa3be78fba27dec Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sat, 16 Feb 2019 12:24:19 -0800 Subject: [PATCH 1/5] Add rule violation footer --- front/static/js/viewHistory.js | 59 ++++++++++++++++++++++++++-------- 1 file changed, 46 insertions(+), 13 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 8f0747c..180db7e 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -166,35 +166,65 @@ function createCollapsibleCard(sectionIdStr, sectionTitle) { function createCollapsibleCardBody(form, type, sectionIdStr, sectionDescription, sectionCompleted) { // Create wrapper div - const div = document.createElement("div"); - div.id = sectionIdStr + "collapse"; + const collapseDiv = document.createElement("div"); + collapseDiv.id = sectionIdStr + "collapse"; const sectionAlert = document.createElement("div"); const cardBody = document.createElement("div"); cardBody.classList.add("card-body"); if (sectionCompleted) { - div.classList.add("collapse"); + collapseDiv.classList.add("collapse"); sectionAlert.classList.add("alert", "alert-success"); sectionAlert.innerHTML = "This section is complete"; } else { - div.classList.add("collapse", "show"); + collapseDiv.classList.add("collapse", "show"); sectionAlert.classList.add("alert", "alert-danger"); sectionAlert.innerHTML = "This section is not complete"; } if (type === reportType.EDIT) { - div.setAttribute("data-parent", "#editReportAccordion"); + collapseDiv.setAttribute("data-parent", "#editReportAccordion"); } else { - div.setAttribute("data-parent", "#newReportAccordion"); + collapseDiv.setAttribute("data-parent", "#newReportAccordion"); } // Create card body. Append form to body, body to wrapper div cardBody.appendChild(sectionAlert); cardBody.insertAdjacentHTML("beforeend", sectionDescription); cardBody.appendChild(form); - div.appendChild(cardBody); + collapseDiv.appendChild(cardBody); - return div; + return collapseDiv; +} + +function createCardFooter(ruleViolations) { + const cardFooter = document.createElement("div"); + cardFooter.classList.add("card-footer"); + + if (ruleViolations.length === 0) { + return cardFooter; + } + + const violationMessage = document.createElement("div"); + violationMessage.classList.add("alert", "alert-danger"); + const h5 = document.createElement("h5"); + h5.innerHTML = "Rule Violations"; + h5.classList.add("alert-heading"); + violationMessage.appendChild(h5); + + for (let i = 0; i < ruleViolations.length; i++) { + let violation = document.createElement("p"); + let violationLabel = document.createElement("strong"); + violationLabel.innerHTML = ruleViolations[i].label; + violation.appendChild(violationLabel); + violation.appendChild(document.createElement("br")); + let ruleBreakText = document.createTextNode(ruleViolations[i].rule_break_text); + violation.appendChild(ruleBreakText); + violationMessage.appendChild(violation); + } + + cardFooter.appendChild(violationMessage); + return cardFooter; } function createReportForm(parsedData, type) { @@ -224,16 +254,14 @@ function createReportForm(parsedData, type) { } // Add report title and date - const reportTitle = parsedData.title; - modalLabel.innerHTML = reportTitle; + modalLabel.innerHTML = parsedData.title; // Traverse the report's sections array const sections = parsedData.sections; 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 sectionIdStr = "section-" + sections[i].id + "-"; let form = document.createElement("form"); form.classList.add("form", "section-form"); form.id = sectionIdStr + "form"; @@ -260,7 +288,12 @@ function createReportForm(parsedData, type) { form.appendChild(saveButton); // Create collapsible card body, append form to it, append card to accordion - let cardBody = createCollapsibleCardBody(form, type, sectionIdStr, sections[i].html_description, sections[i].completed); + let cardBody = createCollapsibleCardBody(form, type, sectionIdStr, + sections[i].html_description, sections[i].completed); + if (sections[i].rule_violations.length > 0) { + cardBody.appendChild(createCardFooter(sections[i].rule_violations)); + } + let collapsibleCard = createCollapsibleCard(sectionIdStr, sections[i].title) collapsibleCard.appendChild(cardBody); accordion.appendChild(collapsibleCard); } From 830394798cc0c28435b1126d90605d2a60a55768 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sat, 16 Feb 2019 15:22:04 -0800 Subject: [PATCH 2/5] Fix formatting of rule violation footer --- front/static/js/viewHistory.js | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 13e9b03..7a98fb8 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -198,7 +198,7 @@ function createCollapsibleCardBody(form, type, sectionIdStr, sectionDescription, sectionAlert.innerHTML = "This section is complete"; } else { collapseDiv.classList.add("collapse", "show"); - sectionAlert.classList.add("alert", "alert-danger"); + sectionAlert.classList.add("alert", "alert-warning"); sectionAlert.innerHTML = "This section is not complete"; } @@ -218,19 +218,19 @@ function createCollapsibleCardBody(form, type, sectionIdStr, sectionDescription, } function createCardFooter(ruleViolations) { - const cardFooter = document.createElement("div"); - cardFooter.classList.add("card-footer"); - if (ruleViolations.length === 0) { - return cardFooter; + return null; } + const cardFooter = document.createElement("div"); + cardFooter.classList.add("card-footer"); const violationMessage = document.createElement("div"); violationMessage.classList.add("alert", "alert-danger"); - const h5 = document.createElement("h5"); - h5.innerHTML = "Rule Violations"; - h5.classList.add("alert-heading"); - violationMessage.appendChild(h5); + const heading = document.createElement("div"); + heading.innerHTML = "Rule Violations"; + heading.classList.add("alert-heading"); + violationMessage.appendChild(heading); + violationMessage.appendChild(document.createElement("hr")); for (let i = 0; i < ruleViolations.length; i++) { let violation = document.createElement("p"); @@ -310,8 +310,9 @@ function createReportForm(parsedData, type) { // Create collapsible card body, append form to it, append card to accordion let cardBody = createCollapsibleCardBody(form, type, sectionIdStr, sections[i].html_description, sections[i].completed); - if (sections[i].rule_violations.length > 0) { - cardBody.appendChild(createCardFooter(sections[i].rule_violations)); + let cardFooter = createCardFooter(sections[i].rule_violations); + if (cardFooter) { + cardBody.appendChild(cardFooter); } let collapsibleCard = createCollapsibleCard(sectionIdStr, sections[i].title) collapsibleCard.appendChild(cardBody); From 0a5241e5f3e981975b4433a13ddf6658ec4ab651 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Tue, 19 Feb 2019 20:15:04 -0800 Subject: [PATCH 3/5] Implement section footer and header toggling --- front/static/css/style.css | 9 +++++++ front/static/edit_report.html | 1 + front/static/js/viewHistory.js | 43 +++++++++++++++++++++++++++------- front/static/new_report.html | 1 + 4 files changed, 45 insertions(+), 9 deletions(-) create mode 100644 front/static/css/style.css diff --git a/front/static/css/style.css b/front/static/css/style.css new file mode 100644 index 0000000..1237d38 --- /dev/null +++ b/front/static/css/style.css @@ -0,0 +1,9 @@ +.fa-check-square { + float: right; + color: green; +} + +.fa-exclamation-triangle { + float: right; + color: red; +} diff --git a/front/static/edit_report.html b/front/static/edit_report.html index 1ff63e6..8db7ae1 100644 --- a/front/static/edit_report.html +++ b/front/static/edit_report.html @@ -5,6 +5,7 @@ + diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index bf85c6a..55cad3d 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -13,6 +13,25 @@ function saveSectionCallback(parsedData, saveButton) { alert(JSON.stringify(parsedData)); saveButton.innerHTML = "Save"; saveButton.disabled = false; + const sectionState = document.querySelector("#section-" + parsedData.id + "-state"); + if (sectionState && parsedData.completed) { + sectionState.classList = "fas fa-check-square"; + } else { + sectionState.classList = "fas fa-exclamation-triangle"; + } + + const collapseDiv = document.querySelector("#section-" + parsedData.id + "-collapse"); + const cardFooter = createCardFooter(parsedData.rule_violations); + if (collapseDiv.lastElementChild.classList.contains("card-footer")) { + collapseDiv.removeChild(collapseDiv.lastElementChild); + if (cardFooter) { + collapseDiv.appendChild(cardFooter); + } + } else { + if (cardFooter) { + collapseDiv.appendChild(cardFooter); + } + } } function makeAjaxRequest(method, url, callback, optional, payload) { @@ -164,15 +183,24 @@ function createFormGroup(sectionIdStr, field) { return formGroup; } -function createCollapsibleCard(sectionIdStr, sectionTitle) { +function createCollapsibleCard(sectionIdStr, sectionTitle, sectionCompleted) { // Create card and header const card = document.createElement("div"); card.classList.add("card"); const cardHeader = document.createElement("div"); cardHeader.classList.add("card-header"); + const sectionState = document.createElement("i"); + sectionState.id = sectionIdStr + "state"; + if (sectionCompleted) { + sectionState.classList.add("fas", "fa-check-square"); + } else { + sectionState.classList.add("fas", "fa-exclamation-triangle"); + } + // Create h2, button. Append button to h2, h2 to header, and header to card const h2 = document.createElement("h2"); + h2.classList.add("mb-0"); const button = document.createElement("button"); button.classList.add("btn", "btn-link"); button.type = "button"; @@ -180,6 +208,7 @@ function createCollapsibleCard(sectionIdStr, sectionTitle) { button.setAttribute("data-target", "#" + sectionIdStr + "collapse"); button.innerHTML = sectionTitle; h2.appendChild(button); + h2.appendChild(sectionState); cardHeader.appendChild(h2); card.appendChild(cardHeader); @@ -190,18 +219,13 @@ function createCollapsibleCardBody(form, type, sectionIdStr, sectionDescription, // Create wrapper div const collapseDiv = document.createElement("div"); collapseDiv.id = sectionIdStr + "collapse"; - const sectionAlert = document.createElement("div"); const cardBody = document.createElement("div"); cardBody.classList.add("card-body"); if (sectionCompleted) { collapseDiv.classList.add("collapse"); - sectionAlert.classList.add("alert", "alert-success"); - sectionAlert.innerHTML = "This section is complete"; } else { collapseDiv.classList.add("collapse", "show"); - sectionAlert.classList.add("alert", "alert-warning"); - sectionAlert.innerHTML = "This section is not complete"; } if (type === reportType.EDIT) { @@ -211,7 +235,6 @@ function createCollapsibleCardBody(form, type, sectionIdStr, sectionDescription, } // Create card body. Append form to body, body to wrapper div - cardBody.appendChild(sectionAlert); cardBody.insertAdjacentHTML("beforeend", sectionDescription); cardBody.appendChild(form); collapseDiv.appendChild(cardBody); @@ -288,7 +311,7 @@ function createReportForm(parsedData, type) { const sections = parsedData.sections; for (let i = 0; i < sections.length; i++) { - // Create a new form with the section key index as id + // Create a new form let sectionIdStr = "section-" + sections[i].id + "-"; let form = document.createElement("form"); form.classList.add("form", "section-form"); @@ -300,9 +323,11 @@ function createReportForm(parsedData, type) { let fields = sections[i].fields; for (let j = 0; j < fields.length; j++) { + /* 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 form.appendChild(createFormGroup(sectionIdStr, fields[j])); @@ -322,7 +347,7 @@ function createReportForm(parsedData, type) { if (cardFooter) { cardBody.appendChild(cardFooter); } - let collapsibleCard = createCollapsibleCard(sectionIdStr, sections[i].title) + let collapsibleCard = createCollapsibleCard(sectionIdStr, sections[i].title, sections[i].completed) collapsibleCard.appendChild(cardBody); accordion.appendChild(collapsibleCard); } diff --git a/front/static/new_report.html b/front/static/new_report.html index 00aee91..7caf52b 100644 --- a/front/static/new_report.html +++ b/front/static/new_report.html @@ -5,6 +5,7 @@ + From 02f27c224799f8962aa95dacad694b32b78ef387 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Tue, 19 Feb 2019 22:42:30 -0800 Subject: [PATCH 4/5] Clean up code --- front/static/css/signup.css | 13 --------- front/static/css/style.css | 2 +- front/static/js/viewHistory.js | 53 +++++++++++++++++----------------- 3 files changed, 27 insertions(+), 41 deletions(-) delete mode 100644 front/static/css/signup.css diff --git a/front/static/css/signup.css b/front/static/css/signup.css deleted file mode 100644 index e887d49..0000000 --- a/front/static/css/signup.css +++ /dev/null @@ -1,13 +0,0 @@ -.signup -{ - height: 200px; - width: 400px; - position: fixed; - left: 50%; - margin-left: -150px; - width:60%; -} -.border -{ - border-color:black; -} \ No newline at end of file diff --git a/front/static/css/style.css b/front/static/css/style.css index 1237d38..c44b01e 100644 --- a/front/static/css/style.css +++ b/front/static/css/style.css @@ -5,5 +5,5 @@ .fa-exclamation-triangle { float: right; - color: red; + color: orange; } diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 55cad3d..659bf53 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -9,31 +9,6 @@ function getEndpointDomain() { return "https://" + window.location.hostname + ":8444/"; } -function saveSectionCallback(parsedData, saveButton) { - alert(JSON.stringify(parsedData)); - saveButton.innerHTML = "Save"; - saveButton.disabled = false; - const sectionState = document.querySelector("#section-" + parsedData.id + "-state"); - if (sectionState && parsedData.completed) { - sectionState.classList = "fas fa-check-square"; - } else { - sectionState.classList = "fas fa-exclamation-triangle"; - } - - const collapseDiv = document.querySelector("#section-" + parsedData.id + "-collapse"); - const cardFooter = createCardFooter(parsedData.rule_violations); - if (collapseDiv.lastElementChild.classList.contains("card-footer")) { - collapseDiv.removeChild(collapseDiv.lastElementChild); - if (cardFooter) { - collapseDiv.appendChild(cardFooter); - } - } else { - if (cardFooter) { - collapseDiv.appendChild(cardFooter); - } - } -} - function makeAjaxRequest(method, url, callback, optional, payload) { const token = localStorage.getItem("token"); const xhr = new XMLHttpRequest(); @@ -76,6 +51,31 @@ function makeAjaxRequest(method, url, callback, optional, payload) { xhr.send(payload); } +function updateSection(parsedData, saveButton) { + saveButton.innerHTML = "Save"; + saveButton.disabled = false; + + const sectionState = document.querySelector("#section-" + parsedData.id + "-state"); + if (parsedData.completed) { + sectionState.classList = "fas fa-check-square"; + } else { + sectionState.classList = "fas fa-exclamation-triangle"; + } + + const collapseDiv = document.querySelector("#section-" + parsedData.id + "-collapse"); + const cardFooter = createCardFooter(parsedData.rule_violations); + if (collapseDiv.lastElementChild.classList.contains("card-footer")) { + collapseDiv.removeChild(collapseDiv.lastElementChild); + if (cardFooter) { + collapseDiv.appendChild(cardFooter); + } + } else { + if (cardFooter) { + collapseDiv.appendChild(cardFooter); + } + } +} + // Wraps a Bootstrap form group around a field function createFormGroup(sectionIdStr, field) { const inputId = sectionIdStr + field.field_name; @@ -527,7 +527,6 @@ if (newReportForm) { console.log("Payload:\n" + payload); const type = reportType.NEW; makeAjaxRequest("POST", url, createReportForm, type, payload); - this.reset(); }); } @@ -553,7 +552,7 @@ document.addEventListener("submit", function(event) { saveButton.appendChild(document.createTextNode(" Saving...")); const formData = new FormData(event.target); const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid + "/section/" + event.target.dataset.sid; - makeAjaxRequest("PUT", url, saveSectionCallback, saveButton, formData); + makeAjaxRequest("PUT", url, updateSection, saveButton, formData); } }); From de827145f471d0326338fb587f2fa11ae25f1ef2 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Wed, 20 Feb 2019 20:56:33 -0800 Subject: [PATCH 5/5] Add support for three section states --- front/static/css/style.css | 1 + front/static/edit_report.html | 1 - front/static/js/viewHistory.js | 65 ++++++++++++++++++++++++---------- 3 files changed, 47 insertions(+), 20 deletions(-) diff --git a/front/static/css/style.css b/front/static/css/style.css index c44b01e..667ea3d 100644 --- a/front/static/css/style.css +++ b/front/static/css/style.css @@ -7,3 +7,4 @@ float: right; color: orange; } + diff --git a/front/static/edit_report.html b/front/static/edit_report.html index 8db7ae1..b052a56 100644 --- a/front/static/edit_report.html +++ b/front/static/edit_report.html @@ -54,7 +54,6 @@ Title Date Created - State Date Submitted Action diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 659bf53..9dd0cd0 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -52,17 +52,27 @@ function makeAjaxRequest(method, url, callback, optional, payload) { } function updateSection(parsedData, saveButton) { - saveButton.innerHTML = "Save"; - saveButton.disabled = false; - - const sectionState = document.querySelector("#section-" + parsedData.id + "-state"); + const sectionIdStr = "#section-" + parsedData.id + "-"; + const sectionState = document.querySelector(sectionIdStr + "state"); + const collapseDiv = document.querySelector(sectionIdStr + "collapse"); + + // A completed section gets a header icon if (parsedData.completed) { - sectionState.classList = "fas fa-check-square"; - } else { - sectionState.classList = "fas fa-exclamation-triangle"; + const sectionAlert = collapseDiv.querySelector(".section-alert"); + console.log(sectionAlert); + if (sectionAlert) { + collapseDiv.firstChild.removeChild(sectionAlert); + } + if (parsedData.rule_violations.length === 0) { + // Complete with no rule violations + sectionState.classList = "fas fa-check-square"; + collapseDiv.className = "collapse"; + } else { + // Complete but with rule violations + sectionState.classList = "fas fa-exclamation-triangle"; + } } - const collapseDiv = document.querySelector("#section-" + parsedData.id + "-collapse"); const cardFooter = createCardFooter(parsedData.rule_violations); if (collapseDiv.lastElementChild.classList.contains("card-footer")) { collapseDiv.removeChild(collapseDiv.lastElementChild); @@ -74,6 +84,10 @@ function updateSection(parsedData, saveButton) { collapseDiv.appendChild(cardFooter); } } + + saveButton.innerHTML = "Save"; + saveButton.disabled = false; + } // Wraps a Bootstrap form group around a field @@ -183,7 +197,7 @@ function createFormGroup(sectionIdStr, field) { return formGroup; } -function createCollapsibleCard(sectionIdStr, sectionTitle, sectionCompleted) { +function createCollapsibleCard(sectionIdStr, sectionTitle, sectionCompleted, ruleViolations) { // Create card and header const card = document.createElement("div"); card.classList.add("card"); @@ -192,10 +206,13 @@ function createCollapsibleCard(sectionIdStr, sectionTitle, sectionCompleted) { const sectionState = document.createElement("i"); sectionState.id = sectionIdStr + "state"; + // A completed section gets a header icon if (sectionCompleted) { - sectionState.classList.add("fas", "fa-check-square"); - } else { - sectionState.classList.add("fas", "fa-exclamation-triangle"); + if (ruleViolations.length === 0) { + sectionState.classList.add("fas", "fa-check-square"); + } else { + sectionState.classList.add("fas", "fa-exclamation-triangle"); + } } // Create h2, button. Append button to h2, h2 to header, and header to card @@ -215,17 +232,23 @@ function createCollapsibleCard(sectionIdStr, sectionTitle, sectionCompleted) { return card; } -function createCollapsibleCardBody(form, type, sectionIdStr, sectionDescription, sectionCompleted) { +function createCollapsibleCardBody(form, type, sectionIdStr, sectionDescription, sectionCompleted, ruleViolations) { // Create wrapper div const collapseDiv = document.createElement("div"); collapseDiv.id = sectionIdStr + "collapse"; const cardBody = document.createElement("div"); cardBody.classList.add("card-body"); + const sectionAlert = document.createElement("div"); if (sectionCompleted) { - collapseDiv.classList.add("collapse"); + if (ruleViolations.length === 0) { + collapseDiv.classList.add("collapse"); + } else { + collapseDiv.classList.add("collapse", "show"); + } } else { - collapseDiv.classList.add("collapse", "show"); + sectionAlert.classList.add("alert", "alert-danger", "section-alert"); + sectionAlert.innerHTML = "This section is not complete"; } if (type === reportType.EDIT) { @@ -235,6 +258,7 @@ function createCollapsibleCardBody(form, type, sectionIdStr, sectionDescription, } // Create card body. Append form to body, body to wrapper div + cardBody.appendChild(sectionAlert); cardBody.insertAdjacentHTML("beforeend", sectionDescription); cardBody.appendChild(form); collapseDiv.appendChild(cardBody); @@ -342,12 +366,13 @@ function createReportForm(parsedData, type) { // Create collapsible card body, append form to it, append card to accordion let cardBody = createCollapsibleCardBody(form, type, sectionIdStr, - sections[i].html_description, sections[i].completed); + sections[i].html_description, sections[i].completed, sections[i].rule_violations); let cardFooter = createCardFooter(sections[i].rule_violations); if (cardFooter) { cardBody.appendChild(cardFooter); } - let collapsibleCard = createCollapsibleCard(sectionIdStr, sections[i].title, sections[i].completed) + let collapsibleCard = createCollapsibleCard(sectionIdStr, sections[i].title, + sections[i].completed, sections[i].rule_violations) collapsibleCard.appendChild(cardBody); accordion.appendChild(collapsibleCard); } @@ -382,9 +407,11 @@ function displayListOfReports(parsedData) { bodyRow.insertCell(0).innerHTML = title; bodyRow.insertCell(1).innerHTML = dateCreated; + /* let stateCell = bodyRow.insertCell(2); stateCell.innerHTML = state; stateCell.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays + */ // Create edit/view button let actionButton = document.createElement("button"); @@ -408,10 +435,10 @@ function displayListOfReports(parsedData) { actionButton.setAttribute("data-target", "#viewReportModal"); } - let dateSubmittedCell = bodyRow.insertCell(3); + let dateSubmittedCell = bodyRow.insertCell(2); dateSubmittedCell.innerHTML = dateSubmitted; dateSubmittedCell.classList.add("d-none", "d-md-table-cell"); // Column visible on medium and larger displays - bodyRow.insertCell(4).appendChild(actionButton); + bodyRow.insertCell(3).appendChild(actionButton); } table.style.visibility = "visible";