Refactor using callback functions
This commit is contained in:
parent
9c633d6ac5
commit
3fe22134fd
2 changed files with 48 additions and 5 deletions
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue