From d8aee961caea78cc090b2f0547d63f82bf5a9db8 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Tue, 29 Jan 2019 01:27:38 -0800 Subject: [PATCH 1/7] Add buttons and more responsive styling to report table --- front/static/js/editReport.js | 145 +++++++++++++++++++++++++++++++++ front/static/js/viewHistory.js | 50 +++++++++--- front/static/view_history.html | 1 + 3 files changed, 185 insertions(+), 11 deletions(-) create mode 100644 front/static/js/editReport.js diff --git a/front/static/js/editReport.js b/front/static/js/editReport.js new file mode 100644 index 0000000..8f6c4ad --- /dev/null +++ b/front/static/js/editReport.js @@ -0,0 +1,145 @@ +// Hack to change endpoint url for each OS +function getEndpointDomain() { + let OSName; + let domain; + + if (navigator.appVersion.indexOf("Win") !== -1) + OSName = "Windows"; + else if (navigator.appVersion.indexOf("Mac") !== -1) + OSName = "MacOS"; + else if (navigator.appVersion.indexOf("X11") !== -1) + OSName = "UNIX"; + else if (navigator.appVersion.indexOf("Linux") !== -1) + OSName = "Linux"; + else + OSName = "Unknown OS"; + + console.log(`Detected operating system: ${OSName}`); + + if (OSName === "Windows") { + domain = "https://192.168.99.100:8444/"; + } else { + domain = "https://localhost:8444/" + } + + return domain; +} + +function populateEditReportForm(specificReport) { + const cardBody = document.querySelector(".card-body"); + + cardBody.innerHTML = JSON.stringify(specificReport); +} + +function getSpecificReport(event) { + event.preventDefault(); + + const token = localStorage.getItem("token"); + + // need to get rid from option value here + const rid = this.elements.rid.value; + console.log(`rid for this report is ${rid}`); + const url = getEndpointDomain() + "backend/get_report"; + const xhr = new XMLHttpRequest(); + + console.log("getSpecificReport"); + console.log(`Attempting a connection to the following endpoint: ${url}`); + + console.log("Before open()"); + xhr.open("GET", url, true); + //xhr.setRequestHeader("Authorization", `Token ${token}`); + + console.log("After open()"); + xhr.onreadystatechange = function() { + console.log(`In onreadystate, readyState = ${this.readyState}`); + if (this.readyState === 4) { + if (this.status === 200) { + console.log("GET get_report SUCCESS!"); + console.log(`Server response:\n${this.response}`); + specificReport = JSON.parse(this.response); + populateEditReportForm(specificReport); + } else { + console.log("GET get_report FAILURE!"); + console.log(`Server status: ${this.status}`); + console.log(`Server response:\n${this.response}`); + } + } + }; + + xhr.onerror = function() { + alert("Connection error!"); + }; + + console.log("Before send()"); + xhr.send(); + console.log("After send()"); +} + +function populateSelectDropdown(listOfReports) { + const select = document.querySelector("select"); + const reports = listOfReports.reports; + const fragment = document.createDocumentFragment(); + + for (let i = 0; i < reports.length; i++) { + if (reports[i].state === "created") { + let title = reports[i].title; + let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US"); + let rid = 2; + let option = document.createElement("option"); + option.innerHTML = `${title}, ${dateCreated}`; + option.value = rid; + fragment.appendChild(option); + } + } + + if (fragment.hasChildNodes() === false) { + // Empty unfinished report list + const emptyOption = document.createElement("option"); + emptyOption.innerHTML = "No unfinshed reports found."; + fragment.appendChild(emptyOption); + } + + select.appendChild(fragment); +} + +function getAllReports(event) { + const token = localStorage.getItem("token"); + const url = getEndpointDomain() + "backend/list_report"; + const xhr = new XMLHttpRequest(); + + console.log("getAllReports"); + console.log(`Attempting a connection to the following endpoint: ${url}`); + + console.log("Before open()"); + xhr.open("GET", url, true); + console.log("After open()"); + + //xhr.setRequestHeader("Authorization", `Token ${token}`); + xhr.onreadystatechange = function() { + console.log(`In onreadystatechange, readyState = ${this.readyState}`); + 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); + populateSelectDropdown(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!"); + }; + + console.log("Before send()"); + xhr.send(); + console.log("After send()"); +} + +document.addEventListener("DOMContentLoaded", getAllReports); +const editReportForm = document.querySelector("#editReportForm"); +editReportForm.addEventListener("submit", getSpecificReport); diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 983620a..8e2b738 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -32,17 +32,39 @@ function displayListOfReports(listOfReports) { let rowsInserted = 0; 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++; + let title = reports[i].title; + let dateCreated = new Date(reports[i].date_created).toLocaleDateString("en-US"); + let state = reports[i].state; + let dateSubmitted; + + let actionButton = document.createElement("button"); + actionButton.type = "submit"; + actionButton.classList.add("btn"); + if (state === "created") { + dateSubmitted = "TBD"; + actionButton.classList.add("btn-primary"); + actionButton.innerHTML = "Edit"; + } else { + dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US"); + actionButton.classList.add("btn-success"); + actionButton.innerHTML = "View"; + } + + 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"); + + + let dateSubmittedCell = bodyRow.insertCell(3); + dateSubmittedCell.innerHTML = dateSubmitted; + dateSubmittedCell.classList.add("d-none", "d-md-table-cell"); + + bodyRow.insertCell(4).appendChild(actionButton); + rowsInserted++; } if (rowsInserted === 0) { @@ -65,12 +87,18 @@ function displayListOfReports(listOfReports) { const headState = document.createElement("th"); headState.innerHTML = "State"; + headState.classList.add("d-none", "d-lg-table-cell"); tr.appendChild(headState); const headDateSubmitted = document.createElement("th") headDateSubmitted.innerHTML = "Date Submitted"; + headDateSubmitted.classList.add("d-none", "d-md-table-cell"); tr.appendChild(headDateSubmitted); + const headAction = document.createElement("th") + headAction.innerHTML = "Action"; + tr.appendChild(headAction); + thead.appendChild(tr); table.prepend(thead); table.classList.add("table", "table-striped", "table-responsive-sm"); diff --git a/front/static/view_history.html b/front/static/view_history.html index 23fdccc..62fe36e 100644 --- a/front/static/view_history.html +++ b/front/static/view_history.html @@ -7,6 +7,7 @@ + Reimbursinator From 9c633d6ac59e223f70fcaf0951e976b82a78b2a8 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Tue, 29 Jan 2019 14:59:28 -0800 Subject: [PATCH 2/7] Add modal popup for the edit button --- front/static/js/viewHistory.js | 22 +++++++++++++++------- front/static/view_history.html | 30 ++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 7 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 8e2b738..f7df1cb 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -29,22 +29,29 @@ function displayListOfReports(listOfReports) { const cardBody = document.querySelector(".card-body"); const table = document.createElement("table"); const reports = listOfReports.reports; - let rowsInserted = 0; + 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; + // Create edit/view button let actionButton = document.createElement("button"); actionButton.type = "submit"; + actionButton.setAttribute("data-toggle", "modal"); actionButton.classList.add("btn"); + if (state === "created") { + // Edit button dateSubmitted = "TBD"; actionButton.classList.add("btn-primary"); actionButton.innerHTML = "Edit"; + actionButton.setAttribute("data-target", "#editReportModal"); } else { + // View button dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US"); actionButton.classList.add("btn-success"); actionButton.innerHTML = "View"; @@ -64,16 +71,17 @@ function displayListOfReports(listOfReports) { dateSubmittedCell.classList.add("d-none", "d-md-table-cell"); bodyRow.insertCell(4).appendChild(actionButton); - rowsInserted++; + reportsAdded++; } - if (rowsInserted === 0) { - // Empty report list + 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 + // 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 thead = document.createElement("thead"); const tr = document.createElement("tr"); @@ -87,12 +95,12 @@ function displayListOfReports(listOfReports) { const headState = document.createElement("th"); headState.innerHTML = "State"; - headState.classList.add("d-none", "d-lg-table-cell"); + headState.classList.add("d-none", "d-lg-table-cell"); // Column shown 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"); + headDateSubmitted.classList.add("d-none", "d-md-table-cell"); // Column only shown on medium and larger displays tr.appendChild(headDateSubmitted); const headAction = document.createElement("th") diff --git a/front/static/view_history.html b/front/static/view_history.html index 62fe36e..99a2da2 100644 --- a/front/static/view_history.html +++ b/front/static/view_history.html @@ -52,6 +52,36 @@ + + + + From 3fe22134fdb28de25a528db1fad8c4a40ea086cd Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Tue, 29 Jan 2019 16:21:22 -0800 Subject: [PATCH 3/7] Refactor using callback functions --- front/static/js/viewHistory.js | 45 ++++++++++++++++++++++++++++++++++ front/static/view_history.html | 8 +++--- 2 files changed, 48 insertions(+), 5 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index f7df1cb..d3d1e0c 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -25,6 +25,46 @@ function getEndpointDomain() { return domain; } +function getDataFromEndpoint(url, callback) { + const token = localStorage.getItem("token"); + const xhr = new XMLHttpRequest(); + + 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.log("GET FAILURE!"); + console.log(`Server status: ${this.status}`); + console.log(`Server response:\n${this.response}`); + } + } + }; + + xhr.onerror = function() { + alert("Connection error!"); + }; + + xhr.send(); +} + +function buildEditReportForm(parsedReport) { + const modalTitle = document.querySelector("#editReportModalLabel"); + console.log("In buildEditReportForm"); + console.log(JSON.stringify(parsedReport)); +} + +function editReportFormClickHandler(event) { + const url = getEndpointDomain() + "backend/get_report"; + getDataFromEndpoint(url, buildEditReportForm); +} + function displayListOfReports(listOfReports) { const cardBody = document.querySelector(".card-body"); const table = document.createElement("table"); @@ -50,6 +90,7 @@ function displayListOfReports(listOfReports) { actionButton.classList.add("btn-primary"); actionButton.innerHTML = "Edit"; actionButton.setAttribute("data-target", "#editReportModal"); + actionButton.addEventListener("click", editReportFormClickHandler); } else { // View button dateSubmitted = new Date(reports[i].date_submitted).toLocaleDateString("en-US"); @@ -115,6 +156,7 @@ function displayListOfReports(listOfReports) { } function getReportHistory(event) { + /* const token = localStorage.getItem("token"); const url = getEndpointDomain() + "backend/list_report"; const xhr = new XMLHttpRequest(); @@ -143,6 +185,9 @@ function getReportHistory(event) { }; xhr.send(); + */ + const url = getEndpointDomain() + "backend/list_report"; + getDataFromEndpoint(url, displayListOfReports); } document.addEventListener("DOMContentLoaded", getReportHistory); diff --git a/front/static/view_history.html b/front/static/view_history.html index 99a2da2..fcf4180 100644 --- a/front/static/view_history.html +++ b/front/static/view_history.html @@ -53,18 +53,16 @@ - -