From 546b0730daa85eb5fcf542ece4dcd9f83b990a48 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Wed, 30 Jan 2019 15:42:09 -0800 Subject: [PATCH 1/9] Add edit report form function --- front/static/js/viewHistory.js | 184 ++++++++++++++++++++++++--------- 1 file changed, 135 insertions(+), 49 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 983620a..1f1ee31 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -25,34 +25,131 @@ function getEndpointDomain() { return domain; } -function displayListOfReports(listOfReports) { - const cardBody = document.querySelector(".card-body"); - const table = document.createElement("table"); - const reports = listOfReports.reports; - let rowsInserted = 0; +function getDataFromEndpoint(url, callback) { + const token = localStorage.getItem("token"); + const xhr = new XMLHttpRequest(); - for (let i = 0; i < reports.length; i++) { - let title = reports[i].title; - let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US"); - let state = reports[i].state; - let dateSubmitted = (state === "created") ? "TBD": new Date(reports[i].date_submitted).toLocaleDateString("en-US"); - let bodyRow = table.insertRow(i); - - bodyRow.insertCell(0).innerHTML = title; - bodyRow.insertCell(1).innerHTML = dateCreated; - bodyRow.insertCell(2).innerHTML = state; - bodyRow.insertCell(3).innerHTML = dateSubmitted; - rowsInserted++; + console.log(`Attempting a connection to the following endpoint: ${url}`); + + xhr.open("GET", url, true); + xhr.onreadystatechange = function() { + if (this.readyState === 4) { + if (this.status === 200) { + console.log("GET SUCCESS!"); + console.log(`Server response:\n${this.response}`); + parsedData = JSON.parse(this.response); + callback(parsedData); + } else { + console.error("GET FAILURE!"); + console.error(`Server status: ${this.status}`); + console.error(`Server response:\n${this.response}`); + } + } + }; + + xhr.onerror = function() { + alert("Connection error!"); + }; + + xhr.send(); +} + +function createEditReportForm(parsedData) { + console.log("In createEditReportForm"); + console.log(JSON.stringify(parsedData)); + const cardBody = document.querySelector(".card-body"); + 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]) { + cardBody.removeChild(cardBody.childNodes[1]); } - if (rowsInserted === 0) { - // Empty report list + console.log(`Title: ${title}`); + console.log(`Date Created: ${dateCreated}`); + const form = document.createElement("form"); + + const sections = parsedData.sections; + for (let section in sections) { + console.log(`Section title: ${sections[section].title}`); + console.log(`Section html description: ${sections[section].html_description}`); + + let sectionTitle = document.createElement("p").innerHTML = sections[section].title; + form.appendChild(title); + let sectionDescription = sections[section].html_description; + form.appendChild(sectionDescription); + + for (let field in sections[section].fields) { + console.log(`Field label: ${sections[section].fields[field].label}`); + console.log(`Field type: ${sections[section].fields[field].type}`); + console.log(`Field value: ${sections[section].fields[field].value}`); + + + } + } +} + +function displayListOfReports(parsedData) { + const cardBody = document.querySelector(".card-body"); + const table = document.createElement("table"); + const reports = parsedData.reports; + let reportsAdded = 0; + + // Create report table + for (let i = 0; i < reports.length; i++) { + let title = reports[i].title; + let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US"); + let state = reports[i].state; + let dateSubmitted; + let rid = reports[i].report_pk; + + // Create edit/view button + let actionButton = document.createElement("button"); + actionButton.type = "submit"; + actionButton.setAttribute("data-rid", rid); + actionButton.classList.add("btn"); + + if (state === "created") { + // Edit button + dateSubmitted = "TBD"; + actionButton.classList.add("btn-primary"); + actionButton.innerHTML = "Edit"; + actionButton.addEventListener("click", openEditReportForm); + } else { + // View button + dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US"); + actionButton.classList.add("btn-success"); + actionButton.innerHTML = "View"; + } + + // Insert data into the table object + let bodyRow = table.insertRow(i); + 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 + + let dateSubmittedCell = bodyRow.insertCell(3); + dateSubmittedCell.innerHTML = dateSubmitted; + dateSubmittedCell.classList.add("d-none", "d-md-table-cell"); // Column visible on medium and larger displays + + bodyRow.insertCell(4).appendChild(actionButton); + reportsAdded++; + } + + if (reportsAdded === 0) { + // Report list is empty const p = document.createElement("p"); p.innerHTML = "No reports found."; cardBody.appendChild(p); } else { - // Create table header, add to table, and append result to the card body - const thead = document.createElement("thead"); + // Report list exists and table rows have been created + // Create table header, add it to the table, and append the result to the card body + const tr = document.createElement("tr"); const headTitle = document.createElement("th"); @@ -65,12 +162,19 @@ function displayListOfReports(listOfReports) { const headState = document.createElement("th"); headState.innerHTML = "State"; + headState.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays tr.appendChild(headState); const headDateSubmitted = document.createElement("th") headDateSubmitted.innerHTML = "Date Submitted"; + headDateSubmitted.classList.add("d-none", "d-md-table-cell"); // Column visible on medium and larger displays tr.appendChild(headDateSubmitted); + const headAction = document.createElement("th") + headAction.innerHTML = "Action"; + tr.appendChild(headAction); + + const thead = document.createElement("thead"); thead.appendChild(tr); table.prepend(thead); table.classList.add("table", "table-striped", "table-responsive-sm"); @@ -79,34 +183,16 @@ function displayListOfReports(listOfReports) { } function getReportHistory(event) { - const token = localStorage.getItem("token"); - const url = getEndpointDomain() + "backend/list_report"; - const xhr = new XMLHttpRequest(); - - console.log(`Attempting a connection to the following endpoint: ${url}`); - - xhr.open("GET", url, true); - //xhr.setRequestHeader("Authorization", `Token ${token}`); - xhr.onreadystatechange = function() { - if (this.readyState === 4) { - if (this.status === 200) { - console.log("GET list_report SUCCESS!"); - console.log(`Server response:\n${this.response}`); - listOfReports = JSON.parse(this.response); - displayListOfReports(listOfReports); - } else { - console.log("GET list_report FAILURE!"); - console.log(`Server status: ${this.status}`); - console.log(`Server response:\n${this.response}`); - } - } - }; - - xhr.onerror = function() { - alert("Connection error!"); - }; - - xhr.send(); + const url = getEndpointDomain() + "api/v1/reports"; + getDataFromEndpoint(url, displayListOfReports); } +function openEditReportForm(event) { + const url = getEndpointDomain() + "api/v1/report/" + this.dataset.rid; + getDataFromEndpoint(url, createEditReportForm); +} + + document.addEventListener("DOMContentLoaded", getReportHistory); + + From 5abc6cb87a7e5da783533c1eb0c79a1bb1edcb3a Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Wed, 30 Jan 2019 23:54:27 -0800 Subject: [PATCH 2/9] Update createEditReportForm to populate form --- front/static/js/viewHistory.js | 76 ++++++++++++++++++++++++++++++---- 1 file changed, 67 insertions(+), 9 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 0ac529c..ffd7eb6 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -54,21 +54,73 @@ function getDataFromEndpoint(url, callback) { 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) { console.log("In createEditReportForm"); console.log(JSON.stringify(parsedData)); + const cardBody = document.querySelector(".card-body"); + const cardHeader = document.querySelector(".card-header"); 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]) { cardBody.removeChild(cardBody.childNodes[1]); } - console.log(`Title: ${title}`); - console.log(`Date Created: ${dateCreated}`); + const reportTitle = document.createElement("h4"); + 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 sections = parsedData.sections; @@ -76,20 +128,26 @@ function createEditReportForm(parsedData) { console.log(`Section title: ${sections[section].title}`); console.log(`Section html description: ${sections[section].html_description}`); + // Add section title and description let sectionTitle = document.createElement("p"); sectionTitle.innerHTML = sections[section].title; form.appendChild(sectionTitle); let sectionDescription = sections[section].html_description; // html_description should be updated to a standard string form.insertAdjacentHTML("beforeend", sectionDescription); - for (let field in sections[section].fields) { - console.log(`Field label: ${sections[section].fields[field].label}`); - console.log(`Field type: ${sections[section].fields[field].type}`); - console.log(`Field value: ${sections[section].fields[field].value}`); + //for (let field in sections[section].fields) { + for (let fieldKey in sections[section].fields) { + console.log(`Field label: ${sections[section].fields[fieldKey].label}`); + 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) { From 41f0b78aa52cda1a3ec8e4cdbd0c2af1a59ca34d Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Thu, 31 Jan 2019 15:48:33 -0800 Subject: [PATCH 3/9] Add accordion and collapsible card creation functions --- front/static/js/viewHistory.js | 115 ++++++++++++++++++++++++--------- 1 file changed, 85 insertions(+), 30 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index ffd7eb6..83e2235 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -54,15 +54,16 @@ function getDataFromEndpoint(url, callback) { xhr.send(); } -function createFormGroup(fieldKey, field) { +function createFormGroup(key, field) { let formGroup = document.createElement("div") formGroup.classList.add("form-group"); let label = document.createElement("label"); label.innerHTML = field.label; - label.setAttribute("for", fieldKey); + label.setAttribute("for", key); let input = document.createElement("input"); - input.name = fieldKey; + input.name = key; + input.id = key; switch(field.type) { case "boolean": @@ -100,10 +101,43 @@ function createFormGroup(fieldKey, field) { return formGroup; } -function createEditReportForm(parsedData) { - console.log("In createEditReportForm"); - console.log(JSON.stringify(parsedData)); +function createCollapsibleCard(key, sectionTitle) { + // Create card and header + const card = document.createElement("div"); + card.classList.add("card"); + const cardHeader = document.createElement("div"); + cardHeader.classList.add("card-header"); + // 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"; + button.setAttribute("data-toggle", "collapse"); + button.setAttribute("data-target", "#collapse" + key); + button.innerHTML = sectionTitle; + h2.appendChild(button); + cardHeader.appendChild(h2); + card.appendChild(cardHeader); + + return card; +} + +function createCollapsibleCardBody(key, form) { + const div = document.createElement("div"); + div.classList.add("collapse", "show"); + div.setAttribute("data-parent", "#editReportAccordion"); + div.id = "collapse" + key; + const cardBody = document.createElement("div"); + cardBody.classList.add("card-body"); + cardBody.appendChild(form); + div.appendChild(cardBody); + + return div; +} + +function createEditReportForm(parsedData) { const cardBody = document.querySelector(".card-body"); const cardHeader = document.querySelector(".card-header"); const fragment = document.createDocumentFragment(); @@ -113,40 +147,61 @@ function createEditReportForm(parsedData) { cardBody.removeChild(cardBody.childNodes[1]); } - const reportTitle = document.createElement("h4"); - reportTitle.innerHTML = parsedData.title; - fragment.appendChild(reportTitle); + // Add report title and date to card header + let reportTitle = parsedData.title; + let dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US"); + cardHeader.innerHTML = `${reportTitle} ${dateCreated}`; - const dateCreated = document.createElement("p"); - dateCreated.innerHTML = new Date(parsedData.date_created).toLocaleDateString("en-US"); - fragment.appendChild(dateCreated); + // Create accordion + const accordion = document.createElement("div"); + accordion.classList.add("accordion"); + accordion.id = "editReportAccordion"; - const form = document.createElement("form"); + // Traverse report sections const sections = parsedData.sections; - for (let section in sections) { - console.log(`Section title: ${sections[section].title}`); - console.log(`Section html description: ${sections[section].html_description}`); + for (let key in sections) { - // Add section title and description - let sectionTitle = document.createElement("p"); - sectionTitle.innerHTML = sections[section].title; - form.appendChild(sectionTitle); - let sectionDescription = sections[section].html_description; // html_description should be updated to a standard string - form.insertAdjacentHTML("beforeend", sectionDescription); + let section = sections[key]; - //for (let field in sections[section].fields) { - for (let fieldKey in sections[section].fields) { - console.log(`Field label: ${sections[section].fields[fieldKey].label}`); - console.log(`Field type: ${sections[section].fields[fieldKey].type}`); - console.log(`Field value: ${sections[section].fields[fieldKey].value}`); + console.log(`Section title: ${section.title}`); + console.log(`Section html description: ${section.html_description}`); + + // Create a new collapsible card + let card = createCollapsibleCard(key, section.title) + + // Add the section title and description to the card + let sectionDescription = section.html_description; // html_description should be updated to a standard string + card.insertAdjacentHTML("beforeend", sectionDescription); + + // Create a new form with the section key index as id + let form = document.createElement("form"); + form.classList.add("form"); + form.id = "form" + key; + + + // Traverse the fields of this section + let fields = section.fields; + for (let key in fields) { + + // Create a form group for each field and add it to the form + let field = fields[key]; + console.log(`Field label: ${field.label}`); + console.log(`Field type: ${field.type}`); + console.log(`Field value: ${field.value}`); - let formGroup = createFormGroup(fieldKey, sections[section].fields[fieldKey]); + let formGroup = createFormGroup(key, field); form.appendChild(formGroup); } - } - fragment.appendChild(form); + // Create collapsible card body and append the form to it + let cardBody = createCollapsibleCardBody(key, form); + card.appendChild(cardBody); + + accordion.appendChild(card); + } + + fragment.appendChild(accordion) cardBody.appendChild(fragment); } From 74ce7f5c73258696a942315346ca1546aa609e98 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Thu, 31 Jan 2019 16:27:29 -0800 Subject: [PATCH 4/9] Fix Bootstrap styling for form groups --- front/static/js/viewHistory.js | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 83e2235..4c07352 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -55,13 +55,13 @@ function getDataFromEndpoint(url, callback) { } function createFormGroup(key, field) { - let formGroup = document.createElement("div") + const formGroup = document.createElement("div") formGroup.classList.add("form-group"); - let label = document.createElement("label"); + const label = document.createElement("label"); label.innerHTML = field.label; label.setAttribute("for", key); - let input = document.createElement("input"); + const input = document.createElement("input"); input.name = key; input.id = key; @@ -70,20 +70,25 @@ function createFormGroup(key, field) { input.type = "checkbox"; if (field.value === true) input.setAttribute("checked", "checked"); - formGroup.appendChild(input); + formGroup.appendChild(input); // Reversed order compared to others formGroup.appendChild(label); + formGroup.classList.add("form-check"); + label.classList.add("form-check-label"); + input.classList.add("form-check-input"); break; case "date": input.type = "datetime"; input.value = field.value; formGroup.appendChild(label); formGroup.appendChild(input); + input.classList.add("form-control"); break; case "decimal": input.type = "text"; input.value = field.value; formGroup.appendChild(label); formGroup.appendChild(input); + input.classList.add("form-control"); break; case "file": input.type = "file"; @@ -93,6 +98,7 @@ function createFormGroup(key, field) { formGroup.appendChild(label); formGroup.appendChild(input); formGroup.appendChild(link); + input.classList.add("form-control-file"); break; default: break; @@ -110,7 +116,7 @@ function createCollapsibleCard(key, sectionTitle) { // Create h2, button. Append button to h2, h2 to header, and header to card const h2 = document.createElement("h2"); - h2.classList.add("mb-0"); + //h2.classList.add("mb-0"); const button = document.createElement("button"); button.classList.add("btn", "btn-link"); button.type = "button"; @@ -124,13 +130,17 @@ function createCollapsibleCard(key, sectionTitle) { return card; } -function createCollapsibleCardBody(key, form) { +function createCollapsibleCardBody(key, form, sectionDescription) { + // Create wrapper div const div = document.createElement("div"); div.classList.add("collapse", "show"); div.setAttribute("data-parent", "#editReportAccordion"); div.id = "collapse" + key; + + // Create card body. Append form to body, body to wrapper div const cardBody = document.createElement("div"); cardBody.classList.add("card-body"); + cardBody.insertAdjacentHTML("beforeend", sectionDescription); cardBody.appendChild(form); div.appendChild(cardBody); @@ -170,10 +180,6 @@ function createEditReportForm(parsedData) { // Create a new collapsible card let card = createCollapsibleCard(key, section.title) - // Add the section title and description to the card - let sectionDescription = section.html_description; // html_description should be updated to a standard string - card.insertAdjacentHTML("beforeend", sectionDescription); - // Create a new form with the section key index as id let form = document.createElement("form"); form.classList.add("form"); @@ -194,10 +200,9 @@ function createEditReportForm(parsedData) { form.appendChild(formGroup); } - // Create collapsible card body and append the form to it - let cardBody = createCollapsibleCardBody(key, form); + // Create collapsible card body, append form to it, append card to accordion + let cardBody = createCollapsibleCardBody(key, form, section.html_description); card.appendChild(cardBody); - accordion.appendChild(card); } From fc4141eaaf77b033f883bffc16bc67fc3d307182 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Thu, 31 Jan 2019 17:48:36 -0800 Subject: [PATCH 5/9] Fix styling --- front/static/js/viewHistory.js | 47 ++++++++++++++++++++++------------ 1 file changed, 31 insertions(+), 16 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 4c07352..29dd47f 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -70,35 +70,35 @@ function createFormGroup(key, field) { input.type = "checkbox"; if (field.value === true) input.setAttribute("checked", "checked"); - formGroup.appendChild(input); // Reversed order compared to others - formGroup.appendChild(label); + input.classList.add("form-check-input"); formGroup.classList.add("form-check"); label.classList.add("form-check-label"); - input.classList.add("form-check-input"); + formGroup.appendChild(input); // Reversed order compared to others + formGroup.appendChild(label); break; case "date": input.type = "datetime"; input.value = field.value; + input.classList.add("form-control"); formGroup.appendChild(label); formGroup.appendChild(input); - input.classList.add("form-control"); break; case "decimal": input.type = "text"; input.value = field.value; + input.classList.add("form-control"); formGroup.appendChild(label); formGroup.appendChild(input); - input.classList.add("form-control"); break; case "file": input.type = "file"; + input.classList.add("form-control-file"); const link = document.createElement("a"); link.href = field.value; link.innerHTML = field.value; formGroup.appendChild(label); formGroup.appendChild(input); formGroup.appendChild(link); - input.classList.add("form-control-file"); break; default: break; @@ -116,7 +116,6 @@ function createCollapsibleCard(key, sectionTitle) { // 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"; @@ -148,19 +147,20 @@ function createCollapsibleCardBody(key, form, sectionDescription) { } function createEditReportForm(parsedData) { - const cardBody = document.querySelector(".card-body"); - const cardHeader = document.querySelector(".card-header"); + const col = document.querySelector(".col-sm-8"); const fragment = document.createDocumentFragment(); - - if (cardBody.hasChildNodes() === true && cardBody.childNodes[1]) { - cardBody.removeChild(cardBody.childNodes[1]); + while (col.firstChild) { + col.removeChild(col.firstChild) } // Add report title and date to card header - let reportTitle = parsedData.title; - let dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US"); - cardHeader.innerHTML = `${reportTitle} ${dateCreated}`; + const reportTitle = parsedData.title; + const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US"); + const h3 = document.createElement("h3"); + h3.innerHTML = `${reportTitle} ${dateCreated}`; + h3.classList.add("text-center"); + fragment.appendChild(h3); // Create accordion const accordion = document.createElement("div"); @@ -200,14 +200,29 @@ function createEditReportForm(parsedData) { 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 let cardBody = createCollapsibleCardBody(key, form, section.html_description); card.appendChild(cardBody); 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) - cardBody.appendChild(fragment); + col.appendChild(fragment); + } function displayListOfReports(parsedData) { From a7d48c1208259eef59c01e49973d2c37795e90ae Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Thu, 31 Jan 2019 23:49:36 -0800 Subject: [PATCH 6/9] Enable section collapse/show based off section completed flag --- front/static/js/viewHistory.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 29dd47f..8a863bf 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -25,6 +25,7 @@ function getEndpointDomain() { return domain; } +// Make a GET request to url and pass response to callback function function getDataFromEndpoint(url, callback) { const token = localStorage.getItem("token"); const xhr = new XMLHttpRequest(); @@ -54,6 +55,7 @@ function getDataFromEndpoint(url, callback) { xhr.send(); } +// Wraps a Bootstrap form group around a field function createFormGroup(key, field) { const formGroup = document.createElement("div") formGroup.classList.add("form-group"); @@ -61,6 +63,7 @@ function createFormGroup(key, field) { const label = document.createElement("label"); label.innerHTML = field.label; label.setAttribute("for", key); + const input = document.createElement("input"); input.name = key; input.id = key; @@ -93,11 +96,13 @@ function createFormGroup(key, field) { case "file": input.type = "file"; input.classList.add("form-control-file"); + formGroup.appendChild(label); + formGroup.appendChild(input); + let uploadMessage = document.createTextNode("Uploaded file:"); + formGroup.appendChild(uploadMessage); const link = document.createElement("a"); link.href = field.value; link.innerHTML = field.value; - formGroup.appendChild(label); - formGroup.appendChild(input); formGroup.appendChild(link); break; default: @@ -129,10 +134,11 @@ function createCollapsibleCard(key, sectionTitle) { return card; } -function createCollapsibleCardBody(key, form, sectionDescription) { +function createCollapsibleCardBody(key, form, sectionDescription, sectionCompleted) { + console.log(sectionCompleted); // Create wrapper div const div = document.createElement("div"); - div.classList.add("collapse", "show"); + sectionCompleted ? div.classList.add("collapse") : div.classList.add("collapse", "show"); div.setAttribute("data-parent", "#editReportAccordion"); div.id = "collapse" + key; @@ -185,7 +191,6 @@ function createEditReportForm(parsedData) { form.classList.add("form"); form.id = "form" + key; - // Traverse the fields of this section let fields = section.fields; for (let key in fields) { @@ -208,7 +213,7 @@ function createEditReportForm(parsedData) { form.appendChild(saveButton); // 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, section.completed); card.appendChild(cardBody); accordion.appendChild(card); } @@ -222,7 +227,6 @@ function createEditReportForm(parsedData) { fragment.appendChild(accordion) col.appendChild(fragment); - } function displayListOfReports(parsedData) { From 4ae03de53b8303b5c7a95fc51980b51f735cac68 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Fri, 1 Feb 2019 00:07:08 -0800 Subject: [PATCH 7/9] Clean up formatting --- front/static/js/viewHistory.js | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 8a863bf..ef76121 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -135,7 +135,6 @@ function createCollapsibleCard(key, sectionTitle) { } function createCollapsibleCardBody(key, form, sectionDescription, sectionCompleted) { - console.log(sectionCompleted); // Create wrapper div const div = document.createElement("div"); sectionCompleted ? div.classList.add("collapse") : div.classList.add("collapse", "show"); @@ -174,17 +173,11 @@ function createEditReportForm(parsedData) { accordion.id = "editReportAccordion"; - // Traverse report sections + // Traverse the report's sections array const sections = parsedData.sections; for (let key in sections) { - let section = sections[key]; - - console.log(`Section title: ${section.title}`); - console.log(`Section html description: ${section.html_description}`); - - // Create a new collapsible card - let card = createCollapsibleCard(key, section.title) + let collapsibleCard = createCollapsibleCard(key, section.title) // Create a new form with the section key index as id let form = document.createElement("form"); @@ -194,18 +187,18 @@ function createEditReportForm(parsedData) { // Traverse the fields of this section let fields = section.fields; for (let key in fields) { - - // Create a form group for each field and add it to the form let field = fields[key]; + console.log(`Field label: ${field.label}`); console.log(`Field type: ${field.type}`); console.log(`Field value: ${field.value}`); + // Create a form group for each field and add it to the form let formGroup = createFormGroup(key, field); form.appendChild(formGroup); } - // Add save button to form + // Add save button to the current form let saveButton = document.createElement("button"); saveButton.innerHTML = "Save"; saveButton.type = "submit"; @@ -214,8 +207,8 @@ function createEditReportForm(parsedData) { // Create collapsible card body, append form to it, append card to accordion let cardBody = createCollapsibleCardBody(key, form, section.html_description, section.completed); - card.appendChild(cardBody); - accordion.appendChild(card); + collapsibleCard.appendChild(cardBody); + accordion.appendChild(collapsibleCard); } // Add submit button to accordion From 04083269ee6bc95937549b90ca90b88502460ba6 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Fri, 1 Feb 2019 22:24:18 -0800 Subject: [PATCH 8/9] Removed all template strings to make IE happy --- front/static/js/login.js | 8 ++++---- front/static/js/logout.js | 10 +++++----- front/static/js/viewHistory.js | 18 +++++++++--------- 3 files changed, 18 insertions(+), 18 deletions(-) diff --git a/front/static/js/login.js b/front/static/js/login.js index 66fd76f..900271d 100644 --- a/front/static/js/login.js +++ b/front/static/js/login.js @@ -13,7 +13,7 @@ function postToLoginEndpoint(event) { const url = "https://reqres.in/api/login" // mock api service const xhr = new XMLHttpRequest(); - console.log(`User credentials:\n${JSON.stringify(credentials)}`); + console.log("User credentials:\n" + JSON.stringify(credentials)"); xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/json"); @@ -21,14 +21,14 @@ function postToLoginEndpoint(event) { if (this.readyState === 4) { if (this.status === 200) { console.log("LOGIN SUCCESS!"); - console.log(`Server response:\n${this.response}`); + console.log("Server response:\n" + this.response); token = JSON.parse(this.response).token; localStorage.setItem("token", token); window.location.replace("home.html"); } else { console.error("LOGIN FAILURE!"); - console.error(`Server status: ${this.status}`); - console.error(`Server response:\n${this.response}`); + console.error("Server status: " + this.status); + console.error("Server response:\n" + this.response); displayErrorMessage(this.response); } } diff --git a/front/static/js/logout.js b/front/static/js/logout.js index 4cdc571..c10c381 100644 --- a/front/static/js/logout.js +++ b/front/static/js/logout.js @@ -6,18 +6,18 @@ function postToLogoutEndpoint(event) { const xhr = new XMLHttpRequest(); xhr.open("POST", url, true); - xhr.setRequestHeader("Authorization", `Token ${token}`); + xhr.setRequestHeader("Authorization", "Token " + token); xhr.onreadystatechange = function() { if (this.readyState === 4) { if (this.status === 200) { console.log("LOGOUT SUCCESS!"); - console.log(`Server response:\n${this.response}`); + console.log("Server response:\n" + this.response); localStorage.removeItem("token"); window.location.replace("index.html"); } else { - console.log("LOGOUT FAILURE!"); - console.log(`Server status: ${this.status}`); - console.log(`Server response:\n${this.response}`); + console.error("LOGOUT FAILURE!"); + console.error("Server status: " + this.status); + console.error("Server response:\n" + this.response); } } }; diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index ef76121..e4e78d2 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -14,7 +14,7 @@ function getEndpointDomain() { else OSName = "Unknown OS"; - console.log(`Detected operating system: ${OSName}`); + console.log("Detected operating system: " + OSName); if (OSName === "Windows") { domain = "https://192.168.99.100:8444/"; @@ -30,20 +30,20 @@ function getDataFromEndpoint(url, callback) { const token = localStorage.getItem("token"); const xhr = new XMLHttpRequest(); - console.log(`Attempting a connection to the following endpoint: ${url}`); + console.log("Attempting a connection to the following endpoint: " + url); xhr.open("GET", url, true); xhr.onreadystatechange = function() { if (this.readyState === 4) { if (this.status === 200) { console.log("GET SUCCESS!"); - console.log(`Server response:\n${this.response}`); + console.log("Server response:\n" + this.response); parsedData = JSON.parse(this.response); callback(parsedData); } else { console.error("GET FAILURE!"); - console.error(`Server status: ${this.status}`); - console.error(`Server response:\n${this.response}`); + console.error("Server status: " + this.status); + console.error("Server response:\n" + this.response); } } }; @@ -163,7 +163,7 @@ function createEditReportForm(parsedData) { const reportTitle = parsedData.title; const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US"); const h3 = document.createElement("h3"); - h3.innerHTML = `${reportTitle} ${dateCreated}`; + h3.innerHTML = reportTitle + " " + dateCreated; h3.classList.add("text-center"); fragment.appendChild(h3); @@ -189,9 +189,9 @@ function createEditReportForm(parsedData) { for (let key in fields) { let field = fields[key]; - console.log(`Field label: ${field.label}`); - console.log(`Field type: ${field.type}`); - console.log(`Field value: ${field.value}`); + console.log("Field label: " + field.label); + console.log("Field type: " + field.type); + console.log("Field value: " + field.value); // Create a form group for each field and add it to the form let formGroup = createFormGroup(key, field); From a838a589c661dbb5fd6b98a43332ad5707bc6d4f Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Fri, 1 Feb 2019 22:29:11 -0800 Subject: [PATCH 9/9] Fix bug in login.js --- front/static/js/login.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/static/js/login.js b/front/static/js/login.js index 900271d..8269c99 100644 --- a/front/static/js/login.js +++ b/front/static/js/login.js @@ -13,7 +13,7 @@ function postToLoginEndpoint(event) { const url = "https://reqres.in/api/login" // mock api service const xhr = new XMLHttpRequest(); - console.log("User credentials:\n" + JSON.stringify(credentials)"); + console.log("User credentials:\n" + JSON.stringify(credentials)); xhr.open("POST", url, true); xhr.setRequestHeader("Content-Type", "application/json");