From 2a2f8011b90552d43d9454d2cf89cd7a8299fae4 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sat, 2 Feb 2019 14:22:18 -0800 Subject: [PATCH 1/6] Refactor table display --- front/static/edit_report.html | 11 ++++ front/static/js/viewHistory.js | 114 ++++++++++++--------------------- 2 files changed, 51 insertions(+), 74 deletions(-) diff --git a/front/static/edit_report.html b/front/static/edit_report.html index 57c0041..07c4ded 100644 --- a/front/static/edit_report.html +++ b/front/static/edit_report.html @@ -43,6 +43,17 @@

Your Report History

+ + + + + + + + + + +
diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index e4e78d2..371d9b1 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -223,93 +223,59 @@ function createEditReportForm(parsedData) { } 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 + if (reports.length === 0) { + const cardBody = document.querySelector(".card-body"); const p = document.createElement("p"); p.innerHTML = "No reports found."; cardBody.appendChild(p); } else { - // 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 table = document.querySelector("table"); + const tbody = document.querySelector("tbody"); - const tr = document.createElement("tr"); + // Insert data into the table row + 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; - const headTitle = document.createElement("th"); - headTitle.innerHTML = "Title"; - tr.appendChild(headTitle); + let bodyRow = tbody.insertRow(i); + bodyRow.insertCell(0).innerHTML = title; + bodyRow.insertCell(1).innerHTML = dateCreated; - const headDateCreated = document.createElement("th"); - headDateCreated.innerHTML = "Date Created"; - tr.appendChild(headDateCreated); + let stateCell = bodyRow.insertCell(2); + stateCell.innerHTML = state; + stateCell.classList.add("d-none", "d-lg-table-cell"); // Column visible only on large displays - 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); + // Create edit/view button + let actionButton = document.createElement("button"); + actionButton.type = "submit"; + actionButton.setAttribute("data-rid", rid); + actionButton.classList.add("btn"); - 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); + 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"; + } - const headAction = document.createElement("th") - headAction.innerHTML = "Action"; - tr.appendChild(headAction); + 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); + } - const thead = document.createElement("thead"); - thead.appendChild(tr); - table.prepend(thead); - table.classList.add("table", "table-striped", "table-responsive-sm"); - cardBody.appendChild(table); + table.style.visibility = "visible"; } } From 1066e50cc775becc3e3e4d5b3deb8b6c10bb01a6 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sat, 2 Feb 2019 15:02:09 -0800 Subject: [PATCH 2/6] Refactor event handlers and include classList polyfill --- front/static/edit_report.html | 13 ++++++++----- front/static/js/viewHistory.js | 29 ++++++++++++----------------- 2 files changed, 20 insertions(+), 22 deletions(-) diff --git a/front/static/edit_report.html b/front/static/edit_report.html index 07c4ded..88004b4 100644 --- a/front/static/edit_report.html +++ b/front/static/edit_report.html @@ -7,6 +7,7 @@ + Reimbursinator @@ -45,11 +46,13 @@
- - - - - + + + + + + + diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 371d9b1..f5964ad 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -80,12 +80,6 @@ function createFormGroup(key, field) { formGroup.appendChild(label); break; case "date": - input.type = "datetime"; - input.value = field.value; - input.classList.add("form-control"); - formGroup.appendChild(label); - formGroup.appendChild(input); - break; case "decimal": input.type = "text"; input.value = field.value; @@ -172,7 +166,6 @@ function createEditReportForm(parsedData) { accordion.classList.add("accordion"); accordion.id = "editReportAccordion"; - // Traverse the report's sections array const sections = parsedData.sections; for (let key in sections) { @@ -259,9 +252,9 @@ function displayListOfReports(parsedData) { if (state === "created") { // Edit button dateSubmitted = "TBD"; - actionButton.classList.add("btn-primary"); + actionButton.classList.add("btn-primary", "edit-report-button"); // Add event listener class actionButton.innerHTML = "Edit"; - actionButton.addEventListener("click", openEditReportForm); + //actionButton.addEventListener("click", openEditReportForm); } else { // View button dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US"); @@ -279,15 +272,17 @@ function displayListOfReports(parsedData) { } } -function getReportHistory(event) { +document.addEventListener("DOMContentLoaded", function(event) { 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("click", function(event) { + if (event.target && event.target.classList.contains("edit-report-button")) { + console.log("Edit button clicked"); + const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid; + getDataFromEndpoint(url, createEditReportForm); + } - -document.addEventListener("DOMContentLoaded", getReportHistory); + // TODO: Add view report +}); From f55bcebee1427c806d262bc16ee9ded91779df7e Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sat, 2 Feb 2019 19:05:39 -0800 Subject: [PATCH 3/6] Fix report form display --- front/static/js/viewHistory.js | 38 ++++++++++++++++++++++------------ 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index f5964ad..f1fb88b 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -58,11 +58,15 @@ function getDataFromEndpoint(url, callback) { // Wraps a Bootstrap form group around a field function createFormGroup(key, field) { const formGroup = document.createElement("div") - formGroup.classList.add("form-group"); + formGroup.classList.add("form-group", "row"); const label = document.createElement("label"); + label.classList.add("col-sm-2", "col-form"); label.innerHTML = field.label; label.setAttribute("for", key); + + const div = document.createElement("div"); + div.classList.add("col-sm-10"); const input = document.createElement("input"); input.name = key; @@ -74,10 +78,18 @@ function createFormGroup(key, field) { if (field.value === true) input.setAttribute("checked", "checked"); input.classList.add("form-check-input"); - formGroup.classList.add("form-check"); + label.className = ""; label.classList.add("form-check-label"); - formGroup.appendChild(input); // Reversed order compared to others - formGroup.appendChild(label); + outerLabel = document.createElement("div"); + outerLabel.classList.add("col-sm-2"); + 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); + formGroup.appendChild(div); break; case "date": case "decimal": @@ -85,19 +97,19 @@ function createFormGroup(key, field) { input.value = field.value; input.classList.add("form-control"); formGroup.appendChild(label); - formGroup.appendChild(input); + div.appendChild(input) + formGroup.appendChild(div); break; case "file": input.type = "file"; input.classList.add("form-control-file"); + let uploadMessage = document.createElement("p"); + uploadMessage.classList.add("form-text"); + uploadMessage.innerHTML = field.value; + div.appendChild(input) + div.appendChild(uploadMessage); 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(link); + formGroup.appendChild(div); break; default: break; @@ -153,7 +165,7 @@ function createEditReportForm(parsedData) { col.removeChild(col.firstChild) } - // Add report title and date to card header + // Add report title and date const reportTitle = parsedData.title; const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US"); const h3 = document.createElement("h3"); From 174cb9b0dde6564796b98a4b52ca13abbf45d8bb Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sun, 3 Feb 2019 12:39:36 -0800 Subject: [PATCH 4/6] Fix bug on Mac --- front/static/js/viewHistory.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index f1fb88b..c1ac20b 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -16,7 +16,7 @@ function getEndpointDomain() { console.log("Detected operating system: " + OSName); - if (OSName === "Windows") { + if (OSName === "Windows" || OSName === "Mac") { domain = "https://192.168.99.100:8444/"; } else { domain = "https://localhost:8444/" From b26d71c23a16415c0662c24aefa579b3a837592c Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sun, 3 Feb 2019 12:43:31 -0800 Subject: [PATCH 5/6] Fix bug on Mac for real this time --- front/static/js/viewHistory.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index c1ac20b..a176f29 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -16,7 +16,7 @@ function getEndpointDomain() { console.log("Detected operating system: " + OSName); - if (OSName === "Windows" || OSName === "Mac") { + if (OSName === "Windows" || OSName === "MacOS") { domain = "https://192.168.99.100:8444/"; } else { domain = "https://localhost:8444/" From b273d9ca26551034f063801e5cf0bd877cb369f4 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sun, 3 Feb 2019 13:47:12 -0800 Subject: [PATCH 6/6] Fix url switching for MacOS --- front/static/js/viewHistory.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index a176f29..c9b2483 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -16,10 +16,12 @@ function getEndpointDomain() { console.log("Detected operating system: " + OSName); - if (OSName === "Windows" || OSName === "MacOS") { + if (OSName === "Windows") { domain = "https://192.168.99.100:8444/"; + } else if (OSName === "MacOS" && navigator.userAgent.includes("Firefox")) { + domain = "https://192.168.99.100:8444/"; // That's Shuaiyi } else { - domain = "https://localhost:8444/" + domain = "https://localhost:8444/"; // Jack, Preston } return domain; @@ -61,12 +63,12 @@ function createFormGroup(key, field) { formGroup.classList.add("form-group", "row"); const label = document.createElement("label"); - label.classList.add("col-sm-2", "col-form"); - label.innerHTML = field.label; + label.classList.add("col-sm-4", "col-form"); + label.innerHTML = field.label + ": "; label.setAttribute("for", key); const div = document.createElement("div"); - div.classList.add("col-sm-10"); + div.classList.add("col-sm-6"); const input = document.createElement("input"); input.name = key; @@ -81,8 +83,8 @@ function createFormGroup(key, field) { label.className = ""; label.classList.add("form-check-label"); outerLabel = document.createElement("div"); - outerLabel.classList.add("col-sm-2"); - outerLabel.innerHTML = "Flight type"; + outerLabel.classList.add("col-sm-4"); + outerLabel.innerHTML = "Flight type: "; formCheck = document.createElement("div"); formCheck.classList.add("form-check"); formCheck.appendChild(input);