From da50627f51fc8abebcb03823899ca2ba7a475d73 Mon Sep 17 00:00:00 2001
From: Preston Doman <pdoman@pdx.edu>
Date: Sat, 9 Feb 2019 22:23:08 -0800
Subject: [PATCH] Add loading message and modal fade

---
 front/static/edit_report.html  | 16 ++++++++++++++--
 front/static/js/viewHistory.js | 18 ++++++++----------
 front/static/new_report.html   |  6 ++++++
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/front/static/edit_report.html b/front/static/edit_report.html
index 2714d66..264b251 100644
--- a/front/static/edit_report.html
+++ b/front/static/edit_report.html
@@ -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>
diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js
index 18af135..c3ef7f9 100644
--- a/front/static/js/viewHistory.js
+++ b/front/static/js/viewHistory.js
@@ -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);
diff --git a/front/static/new_report.html b/front/static/new_report.html
index 40189c0..2d925a1 100644
--- a/front/static/new_report.html
+++ b/front/static/new_report.html
@@ -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>