Add loading message and modal fade
This commit is contained in:
parent
9a20cf72a8
commit
da50627f51
3 changed files with 28 additions and 12 deletions
|
@ -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>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue