Refactor using callback functions

This commit is contained in:
Preston Doman 2019-01-29 16:21:22 -08:00
parent 9c633d6ac5
commit 3fe22134fd
2 changed files with 48 additions and 5 deletions

View file

@ -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);

View file

@ -53,18 +53,16 @@
</div>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open modal for @mdo</button>
<div class="modal" id="editReportModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit Report</h5>
<h5 class="modal-title" id="editReportModalLabel">Edit Report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<form>
<form id="editReportForm">
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
@ -77,7 +75,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>