[Rt-commit] rt branch, 4.6/canned-reports, updated. rt-4.4.1-159-ge44d195

[Dustin Collins]

The branch, 4.6/canned-reports has been updated
       via  e44d195ac36c96a6800da595a920fb22c30c2920 (commit)
      from  a65ba64df71d33f5b151924bce72e94241ef5aa9 (commit)

Summary of changes:
 share/html/CannedReport/Elements/Graph   |  4 ++-
 share/html/CannedReport/Elements/Menu    |  4 ++-
 share/static/css/base/canned-reports.css | 13 +++++++
 share/static/js/canned-reports.js        | 60 ++++++++++++++++++++++++--------
 4 files changed, 64 insertions(+), 17 deletions(-)

- Log -----------------------------------------------------------------
commit e44d195ac36c96a6800da595a920fb22c30c2920
Author: Dustin Collins <strega at bestpractical.com>
Date:   Thu Dec 22 14:40:15 2016 -0500

    Make graph loading asynchronous

diff --git a/share/html/CannedReport/Elements/Graph b/share/html/CannedReport/Elements/Graph
index d9ea372..d82bd21 100644
--- a/share/html/CannedReport/Elements/Graph
+++ b/share/html/CannedReport/Elements/Graph
@@ -67,7 +67,7 @@ var svg = d3.select("#graph"),
             width = +svg.attr("width") - margin.left - margin.right,
             height = +svg.attr("height") - margin.top - margin.bottom;
 
-function updateGraphData(data) {
+function updateGraphData(data, completion) {
     d3.select("#graph").selectAll("*").remove();
 
     var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
@@ -90,6 +90,8 @@ function updateGraphData(data) {
     .attr("y", function(d) { return y(d.value); })
     .attr("width", x.bandwidth())
     .attr("height", function(d) { return height - y(d.value); });
+
+    completion();
 }
 
 </script>
diff --git a/share/html/CannedReport/Elements/Menu b/share/html/CannedReport/Elements/Menu
index 269163d..203b5fe 100644
--- a/share/html/CannedReport/Elements/Menu
+++ b/share/html/CannedReport/Elements/Menu
@@ -36,7 +36,9 @@
 %#
 %# END BPS TAGGED BLOCK }}}
 
-
+<div class="reports-menu-loading">
+    <label>Loading...</label>
+</div>
 <div class="reports-menu">
     <& MenuItems/ReportSelect, Name => "Time Worked"  &>
 </div>
diff --git a/share/static/css/base/canned-reports.css b/share/static/css/base/canned-reports.css
index 14644e0..f809f6a 100644
--- a/share/static/css/base/canned-reports.css
+++ b/share/static/css/base/canned-reports.css
@@ -1,6 +1,7 @@
 
 .reports-menu {
     background-color: transparent;
+    height: 30px;
 }
 
 .reports-menu-item-btn {
@@ -31,6 +32,18 @@
     vertical-align: middle;
 }
 
+.reports-menu-loading {
+    position: relative;
+    background-color: transparent;
+    display: none;
+    height: 30px;
+    vertical-align: middle;
+    font-style: bold;
+    color: gray;
+    padding: 8px;
+    font-size: 18px;
+}
+
 .reports-menu-item-content {
     display: none;
     position: absolute;
diff --git a/share/static/js/canned-reports.js b/share/static/js/canned-reports.js
index 220f3cd..d306347 100644
--- a/share/static/js/canned-reports.js
+++ b/share/static/js/canned-reports.js
@@ -14,9 +14,17 @@ function getReportResults(parameters, kind, completion) {
 }
 
 function submit(path, pairs, data, completion) {
-    jQuery.post(path, pairs, function(object) {
-        completion(object["code"], object["message"], object["content"])
-    },'json');
+//    jQuery.post(path, pairs, function(object) {
+//        completion(object["code"], object["message"], object["content"])
+//    },'json');
+
+    jQuery.ajax({url: path,
+                success: function(object) {
+                    completion(object["code"], object["message"], object["content"])
+                },
+                dataType: 'json',
+                async: true
+    });
 }
 
 
@@ -45,7 +53,7 @@ function setParameter(key, value) {
     if (_parameters[key] !== value) {
         _parameters[key] = value;
         window.clearTimeout(_paramsTimer);
-        _paramsTimer = window.setTimeout(function() {paramsChanged()}, 30);
+        _paramsTimer = window.setTimeout(function() {paramsChanged()}, 10);
     }
 }
 
@@ -85,20 +93,42 @@ window.onclick = function(event) {
 
 
 //MARK: Graph
-
-function updateGraph() {
-    getReportResults(_parameters, null, function (success, content) {
-        if (success) {
-            updateGraphData(content)
-        }else{
-            alert("Sorry! Graph update failed.");
-        }
-    })
-}
-
 var _graphUpdateTimer = {}
 function setGraphNeedsUpdate(key, value) {
     window.clearTimeout(_graphUpdateTimer)
     _graphUpdateTimer = window.setTimeout(function() {updateGraph()}, 2000)
 }
 
+var graphIsUpdating = false
+function updateGraph() {
+    if (!graphIsUpdating) {
+        graphIsUpdating = true
+        window.setTimeout(graphBeganUpdating(), 10);
+        window.setTimeout(function() {
+            getReportResults(_parameters, null, function (success, content) {
+                if (success) {
+                    updateGraphData(content, function() {
+                        graphIsUpdating = false
+                        graphFinishedUpdating()
+                    })
+                }else{
+                    alert("Sorry! Graph update failed.");
+                    graphIsUpdating = false
+                    graphFinishedUpdating()
+                }
+            })
+        }, 100);
+    }
+}
+
+function graphBeganUpdating() {
+    jQuery('.reports-menu').hide();
+    jQuery('.reports-menu-loading').show();
+}
+
+function graphFinishedUpdating() {
+    jQuery('.reports-menu-loading').hide();
+    jQuery('.reports-menu').show();
+}
+
+

-----------------------------------------------------------------------