From c45f1ddd1ce4053cce10c6cc200da2fe80bb0a28 Mon Sep 17 00:00:00 2001
From: Duncan Sommerville <duncan.sommerville@sourcefabric.org>
Date: Wed, 2 Sep 2015 11:52:43 -0400
Subject: [PATCH] SAAS-1039 - add processing overlay to listener stats screen

---
 airtime_mvc/public/css/styles.css                |  6 ++++++
 .../js/airtime/listenerstat/listenerstat.js      | 16 ++++++++++++++--
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/airtime_mvc/public/css/styles.css b/airtime_mvc/public/css/styles.css
index dfff09eab..e636103a6 100644
--- a/airtime_mvc/public/css/styles.css
+++ b/airtime_mvc/public/css/styles.css
@@ -3738,6 +3738,12 @@ button.btn-icon-text > i.icon-white {
     font-size: 12px;
 }
 
+#flot_placeholder.processing {
+    width: 100%;
+    height: 100%;
+    background: url("img/loading.gif") no-repeat 50% 50% rgba(0, 0, 0, .25);
+}
+
 .dashboard-btn {
     width: 50%;
 }
diff --git a/airtime_mvc/public/js/airtime/listenerstat/listenerstat.js b/airtime_mvc/public/js/airtime/listenerstat/listenerstat.js
index 8507c876e..0c239455f 100644
--- a/airtime_mvc/public/js/airtime/listenerstat/listenerstat.js
+++ b/airtime_mvc/public/js/airtime/listenerstat/listenerstat.js
@@ -10,7 +10,7 @@ $(document).ready(function() {
     width = width * .91;
     $("#listenerstat_content").find("#flot_placeholder").width(width);
     $("#listenerstat_content").find("#legend").width(width);
-    
+
     getDataAndPlot();
     
     listenerstat_content.find("#his_submit").click(function(){
@@ -21,7 +21,17 @@ $(document).ready(function() {
     });
 });
 
-function getDataAndPlot(startTimestamp, endTimestamp){
+/**
+ * Toggle a spinner overlay so the user knows the page is processing
+ */
+function toggleOverlay() {
+    $('#flot_placeholder').toggleClass('processing');
+}
+
+function getDataAndPlot(startTimestamp, endTimestamp) {
+    // Turn on the processing overlay
+    toggleOverlay();
+
     // get data
     $.get(baseUrl+'Listenerstat/get-data', {start: startTimestamp, end: endTimestamp}, function(data){
         out = new Object();
@@ -37,6 +47,8 @@ function getDataAndPlot(startTimestamp, endTimestamp){
             out[mpName] = plotData;
         });
         plot(out);
+        // Turn off the processing overlay
+        toggleOverlay();
     })
 }