Add loading message and modal fade

This commit is contained in:
Preston Doman 2019-02-09 22:23:08 -08:00
parent 9a20cf72a8
commit da50627f51
3 changed files with 28 additions and 12 deletions

View file

@ -62,7 +62,7 @@
</div>
</div>
</div>
<div class="modal" id="editReportModal" tabindex="-1" role="dialog">
<div class="modal fade" id="editReportModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
@ -72,6 +72,12 @@
</button>
</div>
<div class="modal-body" id="editReportModalBody">
<div class="text-center">
<i class="fas fa-spinner fa-3x fa-spin"></i>
<br>
<br>
<h5>Loading Report ...</h5>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger">Delete Report</button>
@ -81,7 +87,7 @@
</div>
</div>
</div>
<div class="modal" id="viewReportModal" tabindex="-1" role="dialog">
<div class="modal fade" id="viewReportModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
@ -91,6 +97,12 @@
</button>
</div>
<div class="modal-view">
<div class="text-center">
<i class="fas fa-spinner fa-3x fa-spin"></i>
<br>
<br>
<h5>Loading Report ...</h5>
</div>
</div>
</div>
</div>

View file

@ -1,3 +1,9 @@
const reportType = {
NEW : 1,
EDIT : 2,
VIEW : 3
};
// Hack to change endpoint url
function getEndpointDomain() {
return "https://" + window.location.hostname + ":8444/";
@ -18,7 +24,7 @@ function getDataFromEndpoint(url, callback, optional) {
console.log("GET SUCCESS!");
console.log("Server response:\n" + this.response);
let parsedData = JSON.parse(this.response);
optional === undefined ? callback(parsedData) : callback(parsedData, optional);
optional ? callback(parsedData, optional) : callback(parsedData);
} else {
console.error("GET FAILURE!");
console.error("Server status: " + this.status);
@ -51,7 +57,7 @@ function postDataToEndpoint(url, payload, callback, optional) {
console.log("POST SUCCESS!");
console.log("Server response:\n" + this.response);
let parsedData = JSON.parse(this.response);
optional === undefined ? callback(parsedData) : callback(parsedData, optional);
optional ? callback(parsedData, optional) : callback(parsedData);
} else {
console.error("POST FAILURE!");
console.error("Server status: " + this.status);
@ -399,17 +405,9 @@ document.addEventListener("DOMContentLoaded", function(event) {
}
});
const reportType = {
NEW : 1,
EDIT : 2,
VIEW : 3
};
document.addEventListener("click", function(event) {
if (event.target) {
if (event.target.classList.contains("edit-report-button")) {
console.log("Edit button clicked");
console.log(event);
const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
const type = reportType.EDIT;
getDataFromEndpoint(url, createReportForm, type);

View file

@ -66,6 +66,12 @@
</button>
</div>
<div class="modal-body" id="newReportModalBody">
<div class="text-center">
<i class="fas fa-spinner fa-3x fa-spin"></i>
<br>
<br>
<h5>Creating Report ...</h5>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>