From 84210d6dacf656b8ad3b52f9bbcbb3885c4c54e5 Mon Sep 17 00:00:00 2001
From: Preston Doman <pdoman@pdx.edu>
Date: Wed, 6 Mar 2019 23:13:09 -0800
Subject: [PATCH] Add button animations

---
 front/static/js/viewHistory.js | 28 ++++++++++++++++++++--------
 front/static/new_report.html   |  9 +++++----
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js
index 6752fb4..6ebac84 100644
--- a/front/static/js/viewHistory.js
+++ b/front/static/js/viewHistory.js
@@ -50,6 +50,16 @@ function makeAjaxRequest(method, url, callback, optional, payload) {
     xhr.send(payload);
 }
 
+function animateButton(target, buttonText) {
+    let button = target;
+    button.disabled = true;
+    button.innerHTML = "";
+    let span = document.createElement("span");
+    span.classList.add("spinner-border", "spinner-border-sm");
+    button.appendChild(span);
+    button.appendChild(document.createTextNode(buttonText));
+}
+
 function updateSection(parsedData, saveButton) {
     const sectionIdStr = "#section-" + parsedData.id + "-";
     const sectionState = document.querySelector(sectionIdStr + "state");
@@ -58,7 +68,6 @@ function updateSection(parsedData, saveButton) {
     // A completed section gets a header icon
     if (parsedData.completed) {
         const sectionAlert = collapseDiv.querySelector(".section-alert");
-        console.log(sectionAlert);
         if (sectionAlert) {
             collapseDiv.firstChild.removeChild(sectionAlert);
         }
@@ -527,12 +536,14 @@ document.addEventListener("click", function(event) {
             makeAjaxRequest("GET", url, displayReport);
         } else if (event.target.classList.contains("review-report")) {
             event.preventDefault();
-            console.log("review-report");
             const result = confirm("Are you sure you want to submit this report for review?");
             if (result) {
+                animateButton(event.target, "  Submitting...");
                 const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
                 makeAjaxRequest("PUT", url, function(parsedData) {
                     alert(parsedData.message);
+                    event.target.disabled = false;
+                    event.target.innerHTML = "Submit for Review";
                     location.reload(true);
                 });
             }
@@ -541,9 +552,12 @@ document.addEventListener("click", function(event) {
             console.log("finalize-report");
             const result = confirm("Are you sure you want to finalize this report? This means you will no longer be able to modify it.");
             if (result) {
+                animateButton(event.target, "  Submitting...");
                 const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid + "/final";
                 makeAjaxRequest("PUT", url, function(parsedData) {
                     alert(parsedData.message);
+                    event.target.disabled = false;
+                    event.target.innerHTML = "Finalize Report";
                     location.reload(true);
                 });
             }
@@ -552,9 +566,12 @@ document.addEventListener("click", function(event) {
             const title = document.querySelector("#editReportModalLabel").textContent;
             const result = confirm("Are you sure you want to delete the report \"" + title + "\"?");
             if (result) {
+                animateButton(event.target, "  Deleting...");
                 const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid;
                 makeAjaxRequest("DELETE", url, function(parsedData) {
                     alert(parsedData.message);
+                    event.target.disabled = false;
+                    event.target.innerHTML = "Delete Report";
                     location.reload(true);
                 });
             }
@@ -588,12 +605,7 @@ document.addEventListener("submit", function(event) {
     if (event.target.classList.contains("section-form")) {
         event.preventDefault();
         let saveButton = event.target.lastElementChild;
-        saveButton.disabled = true;
-        saveButton.innerHTML = "";
-        let span = document.createElement("span");
-        span.classList.add("spinner-border", "spinner-border-sm");
-        saveButton.appendChild(span);
-        saveButton.appendChild(document.createTextNode("  Saving..."));
+        animateButton(saveButton, "  Saving...");
         const formData = new FormData(event.target);
         const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid + "/section/" + event.target.dataset.sid;
         makeAjaxRequest("PUT", url, updateSection, saveButton, formData);
diff --git a/front/static/new_report.html b/front/static/new_report.html
index cda82ca..60eec45 100644
--- a/front/static/new_report.html
+++ b/front/static/new_report.html
@@ -43,16 +43,16 @@
             <div class="col-sm-6 mx-auto">
                 <div class="card bg-light text-dark">
                     <div class="card-header">
-                        <h3>Create a new report</h3>
+                        <h3>Create A New Report</h3>
                    </div>
                     <div class="card-body">
                         <form class="form new-report-form" autocomplete="off">
                             <div class="form-group">
-                                <label for="title">Report title:</label>
+                                <label for="title">Report Title:</label>
                                 <input type="text" class="form-control" name="title" id="title" autofocus>
                             </div>
                             <div class="form-group">
-                                <label for="reference">Ticket number (if available):</label>
+                                <label for="reference">Ticket Number (if available):</label>
                                 <input type="text" class="form-control" name="reference" id="reference">
                             </div>
                             <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#newReportModal">Create</button>
@@ -81,7 +81,8 @@
                 </div>
                 <div class="modal-footer">
                     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-primary submit-report-button" >Submit Report</button>
+                    <button type="button" class="btn btn-primary finalize-report">Finalize Report</button>
+                    <button type="button" class="btn btn-primary review-report">Submit for Review</button>
                 </div>
             </div>
         </div>