From 20d3b08653b93612288cf4e58db5e267ecd07d7b Mon Sep 17 00:00:00 2001
From: Preston Doman <pdoman@pdx.edu>
Date: Sat, 16 Feb 2019 19:58:55 -0800
Subject: [PATCH] Add spinner to the save button

---
 front/static/js/viewHistory.js | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/front/static/js/viewHistory.js b/front/static/js/viewHistory.js
index 59a95ee..e30c56a 100644
--- a/front/static/js/viewHistory.js
+++ b/front/static/js/viewHistory.js
@@ -9,11 +9,13 @@ function getEndpointDomain() {
     return "https://" + window.location.hostname + ":8444/";
 }
 
-function alertCallback(parsedData) {
+function saveSectionCallback(parsedData, saveButton) {
     alert(JSON.stringify(parsedData));
+    saveButton.innerHTML = "Save";
+    saveButton.disabled = false;
 }
 
-function makeAjaxRequest(method, url, callback, type, payload) {
+function makeAjaxRequest(method, url, callback, optional, payload) {
     const token = localStorage.getItem("token");
     const xhr = new XMLHttpRequest();
 
@@ -39,7 +41,7 @@ function makeAjaxRequest(method, url, callback, type, payload) {
                 console.log(method + " SUCCESS!");
                 console.log("Server response:\n" + this.response);
                 let parsedData = JSON.parse(this.response);
-                type ? callback(parsedData, type) : callback(parsedData);
+                optional ? callback(parsedData, optional) : callback(parsedData);
             } else {
                 console.error(method + " FAILURE!");
                 console.error("Server status: " + this.status);
@@ -467,9 +469,17 @@ document.addEventListener("submit", function(event) {
     if (event.target.classList.contains("section-form")) {
         event.preventDefault();
         console.log(event.target);
+        console.log(event.target.lastElementChild);
+        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..."));
         const formData = new FormData(event.target);
         const url = getEndpointDomain() + "api/v1/report/" + event.target.dataset.rid + "/section/" + event.target.dataset.sid;
-        makeAjaxRequest("PUT", url, alertCallback, null, formData);
+        makeAjaxRequest("PUT", url, saveSectionCallback, saveButton, formData);
     }
 });