From 3e058ac604f76db8d2048166206e2ceed90419c1 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sun, 10 Feb 2019 15:46:27 -0800 Subject: [PATCH 1/5] Add delete report functionality --- front/static/edit_report.html | 2 +- front/static/js/viewHistory.js | 45 ++++++++++++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) diff --git a/front/static/edit_report.html b/front/static/edit_report.html index 50af1af..0e4880d 100644 --- a/front/static/edit_report.html +++ b/front/static/edit_report.html @@ -74,7 +74,7 @@
- +
diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 6eae3cf..0004e47 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -3,6 +3,37 @@ function getEndpointDomain() { return "https://" + window.location.hostname + ":8444/"; } +function removeDataFromEndpoint(url) { + const token = localStorage.getItem("token"); + const xhr = new XMLHttpRequest(); + + console.log("Attempting a connection to the following endpoint: " + url); + + + xhr.open("DELETE", url, true); + xhr.setRequestHeader("Authorization", "Bearer " + token); + xhr.onreadystatechange = function() { + if (this.readyState === 4) { + if (this.status === 200) { + console.log("DELETE SUCCESS!"); + console.log("Server response:\n" + this.response); + alert("Report deleted"); + location.reload(true); + } else { + console.error("DELETE FAILURE!"); + console.error("Server status: " + this.status); + console.error("Server response:\n" + this.response); + } + } + }; + + xhr.onerror = function() { + alert("Connection error!"); + }; + + xhr.send(); +} + // Make a GET request to url and pass response to callback function function getDataFromEndpoint(url, callback) { const token = localStorage.getItem("token"); @@ -334,6 +365,10 @@ 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; + const deleteButton = document.querySelector(".delete-report"); + if (deleteButton) { + deleteButton.setAttribute("data-rid", event.target.dataset.rid); + } getDataFromEndpoint(url, createEditReportForm); } if(event.target && event.target.classList.contains("view-report-button")) @@ -343,4 +378,14 @@ document.addEventListener("click", function(event) { getDataFromEndpoint(url, displayReport); } // TODO: Add View Report + + if(event.target && event.target.classList.contains("delete-report")) { + event.preventDefault(); + console.log("Delete report button clicked"); + const result = confirm("Are you sure you want to delete this report?"); + if (result) { + const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid; + removeDataFromEndpoint(url); + } + } }); From 74d503c24439aaf727905995d0b5e95ff84cee89 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sun, 10 Feb 2019 18:15:32 -0800 Subject: [PATCH 2/5] Refactor AJAX request code --- front/static/edit_report.html | 2 +- front/static/js/viewHistory.js | 97 +++++++--------------------------- 2 files changed, 19 insertions(+), 80 deletions(-) diff --git a/front/static/edit_report.html b/front/static/edit_report.html index b252cd5..903a064 100644 --- a/front/static/edit_report.html +++ b/front/static/edit_report.html @@ -66,7 +66,7 @@
- +
diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 379d935..5b43ad8 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -9,88 +9,25 @@ function getEndpointDomain() { return "https://" + window.location.hostname + ":8444/"; } -function removeDataFromEndpoint(url) { +function makeAjaxRequest(method, url, callback, type, payload) { const token = localStorage.getItem("token"); const xhr = new XMLHttpRequest(); console.log("Attempting a connection to the following endpoint: " + url); - - xhr.open("DELETE", url, true); + xhr.open(method, url, true); xhr.setRequestHeader("Authorization", "Bearer " + token); + method === "POST" ? xhr.setRequestHeader("Content-Type", "application/json") : payload = null; + xhr.onreadystatechange = function() { if (this.readyState === 4) { if (this.status === 200) { - console.log("DELETE SUCCESS!"); - console.log("Server response:\n" + this.response); - alert("Report deleted"); - location.reload(true); - } else { - console.error("DELETE FAILURE!"); - console.error("Server status: " + this.status); - console.error("Server response:\n" + this.response); - } - } - }; - - xhr.onerror = function() { - alert("Connection error!"); - }; - - xhr.send(); -} - -// Make a GET request to url and pass response to callback function -function getDataFromEndpoint(url, callback, optional) { - 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.setRequestHeader("Authorization", "Bearer " + token); - xhr.onreadystatechange = function() { - if (this.readyState === 4) { - if (this.status === 200) { - console.log("GET SUCCESS!"); + console.log(method + " SUCCESS!"); console.log("Server response:\n" + this.response); let parsedData = JSON.parse(this.response); - optional ? callback(parsedData, optional) : callback(parsedData); + type ? callback(parsedData, type) : 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(); -} - - -// Make a POST request to url and pass response to callback function -function postDataToEndpoint(url, payload, callback, optional) { - const token = localStorage.getItem("token"); - const xhr = new XMLHttpRequest(); - - console.log("Attempting a connection to the following endpoint: " + url); - - xhr.open("POST", url, true); - xhr.setRequestHeader("Authorization", "Bearer " + token); - xhr.setRequestHeader("Content-Type", "application/json"); - xhr.onreadystatechange = function() { - if (this.readyState === 4) { - if (this.status === 200) { - console.log("POST SUCCESS!"); - console.log("Server response:\n" + this.response); - let parsedData = JSON.parse(this.response); - optional ? callback(parsedData, optional) : callback(parsedData); - } else { - console.error("POST FAILURE!"); + console.error(method + " FAILURE!"); console.error("Server status: " + this.status); console.error("Server response:\n" + this.response); } @@ -268,8 +205,7 @@ function createReportForm(parsedData, type) { // Add report title and date const reportTitle = parsedData.title; - const dateCreated = new Date(parsedData.date_created).toLocaleDateString("en-US"); - modalLabel.innerHTML = reportTitle + " " + dateCreated; + modalLabel.innerHTML = reportTitle; // Traverse the report's sections array const sections = parsedData.sections; @@ -432,7 +368,7 @@ function displayReport(parsedData){ document.addEventListener("DOMContentLoaded", function(event) { if (window.location.pathname === "/edit_report.html") { const url = getEndpointDomain() + "api/v1/reports"; - getDataFromEndpoint(url, displayListOfReports); + makeAjaxRequest("GET", url, displayListOfReports); } }); @@ -445,18 +381,21 @@ document.addEventListener("click", function(event) { if (deleteButton) { deleteButton.setAttribute("data-rid", event.target.dataset.rid); } - getDataFromEndpoint(url, createReportForm, type); + makeAjaxRequest("GET", url, createReportForm, type); } else if (event.target.classList.contains("view-report-button")) { console.log("View button clicked"); const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid; - getDataFromEndpoint(url, displayReport); + makeAjaxRequest("GET", url, displayReport); } else if (event.target.classList.contains("delete-report")) { event.preventDefault(); - console.log("Delete report button clicked"); - const result = confirm("Are you sure you want to delete this report?"); + const title = document.querySelector("#editReportModalLabel").textContent; + const result = confirm("Are you sure you want to delete the report \"" + title + "\"?"); if (result) { const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid; - removeDataFromEndpoint(url); + makeAjaxRequest("DELETE", url, function(parsedData) { + alert(parsedData.message); + location.reload(true); + }); } } } @@ -470,7 +409,7 @@ if (newReportForm) { const payload = JSON.stringify({ "title": event.target.elements.title.value }); console.log("Payload:\n" + payload); const type = reportType.NEW; - postDataToEndpoint(url, payload, createReportForm, type); + makeAjaxRequest("POST", url, createReportForm, type, payload); this.reset(); }); } From c3c1b650942bbfaae0ee037bdf72a1849f3ce3f2 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sun, 10 Feb 2019 18:36:10 -0800 Subject: [PATCH 3/5] Remove unused text-centering --- front/static/edit_report.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front/static/edit_report.html b/front/static/edit_report.html index 903a064..139ccbe 100644 --- a/front/static/edit_report.html +++ b/front/static/edit_report.html @@ -66,8 +66,8 @@
-
-
From 6bafd5d115c8649c6e74855df85e6399a6bc2987 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sun, 10 Feb 2019 18:37:44 -0800 Subject: [PATCH 4/5] Remove some more --- front/static/edit_report.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/static/edit_report.html b/front/static/edit_report.html index 139ccbe..b252cd5 100644 --- a/front/static/edit_report.html +++ b/front/static/edit_report.html @@ -67,7 +67,7 @@
-
From a41931660824de2aa3a417541634b133aa7ace24 Mon Sep 17 00:00:00 2001 From: Preston Doman Date: Sun, 10 Feb 2019 22:51:19 -0800 Subject: [PATCH 5/5] Move rid attribute setting from event listener to createReportForm --- front/static/js/viewHistory.js | 32 +++++++++++++++----------------- 1 file changed, 15 insertions(+), 17 deletions(-) diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js index 5b43ad8..ca7aae8 100644 --- a/front/static/js/viewHistory.js +++ b/front/static/js/viewHistory.js @@ -50,7 +50,7 @@ function createFormGroup(field) { label.classList.add("col-sm-4", "col-form"); label.innerHTML = field.label + ": "; label.setAttribute("for", field.field_name); - + const div = document.createElement("div"); div.classList.add("col-sm-6"); @@ -172,10 +172,10 @@ function createCollapsibleCardBody(key, form, type, sectionDescription, sectionC // Create card body. Append form to body, body to wrapper div cardBody.appendChild(sectionAlert); - cardBody.insertAdjacentHTML("beforeend", sectionDescription); + cardBody.insertAdjacentHTML("beforeend", sectionDescription); cardBody.appendChild(form); div.appendChild(cardBody); - + return div; } @@ -186,12 +186,14 @@ function createReportForm(parsedData, type) { accordion.classList.add("accordion"); if (type === reportType.EDIT) { - console.log("reportType.EDIT"); modalBody = document.querySelector("#editReportModalBody"); modalLabel = document.querySelector("#editReportModalLabel"); accordion.id = "editReportAccordion"; + const deleteButton = document.querySelector(".delete-report"); + if (deleteButton) { + deleteButton.setAttribute("data-rid", parsedData.report_pk); + } } else if (type === reportType.NEW) { - console.log("reportType.NEW"); modalBody = document.querySelector("#newReportModalBody"); modalLabel = document.querySelector("#newReportModalLabel"); accordion.id = "newReportAccordion"; @@ -223,10 +225,10 @@ function createReportForm(parsedData, type) { 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(field); form.appendChild(formGroup); @@ -241,10 +243,10 @@ function createReportForm(parsedData, type) { // Create collapsible card body, append form to it, append card to accordion let cardBody = createCollapsibleCardBody(key, form, type, section.html_description, section.completed); - collapsibleCard.appendChild(cardBody); + collapsibleCard.appendChild(cardBody); accordion.appendChild(collapsibleCard); } - + modalBody.appendChild(accordion); } @@ -268,9 +270,9 @@ function displayListOfReports(parsedData) { let dateSubmitted; let rid = reports[i].report_pk; - let bodyRow = tbody.insertRow(i); + let bodyRow = tbody.insertRow(i); bodyRow.insertCell(0).innerHTML = title; - bodyRow.insertCell(1).innerHTML = dateCreated; + bodyRow.insertCell(1).innerHTML = dateCreated; let stateCell = bodyRow.insertCell(2); stateCell.innerHTML = state; @@ -377,10 +379,6 @@ document.addEventListener("click", function(event) { if (event.target.classList.contains("edit-report-button")) { const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid; const type = reportType.EDIT; - const deleteButton = document.querySelector(".delete-report"); - if (deleteButton) { - deleteButton.setAttribute("data-rid", event.target.dataset.rid); - } makeAjaxRequest("GET", url, createReportForm, type); } else if (event.target.classList.contains("view-report-button")) { console.log("View button clicked");