Changing UI Refresh to a Longer Poll + Manual Refresh (#587)

* Added refresh button and reduced lag for large campaigns (#565)

* Amended refresh function to allow manual refreshes

Moved the function out of document.ready and tied it to the button. Also reduced automatic refresh to 60 seconds, to make it easier for medium - large campaigns to be viewed without lagging.

* Amended refresh function to allow manual refreshes

* Update campaign_results.html

* Re-building the campaign_results JS

static/js/src/app/campaign_results.js

@@ -399,6 +399,8 @@ function poll() {
                 }
             })
             map.bubbles(bubbles)
+            $("#refresh_message").hide()
+            $("#refresh_btn").show()
         })
 }
 
@@ -674,18 +676,25 @@ function load() {
             errorFlash(" Campaign not found!")
         })
 }
-$(document).ready(function() {
-    load();
-    // Start the polling loop
+
+var setRefresh
 function refresh() {
     if (!doPoll) {
         return;
     }
     $("#refresh_message").show()
+    $("#refresh_btn").hide()
     poll()
-        $("#refresh_message").hide()
-        setTimeout(refresh, 10000)
+    clearTimeout(setRefresh)
+    setRefresh = setTimeout(refresh, 60000)
 };
+
+
+
+$(document).ready(function() {
+    load();
     // Start the polling loop
-    setTimeout(refresh, 10000)
+    
+    // Start the polling loop
+    setRefresh = setTimeout(refresh, 60000)
 })

templates/campaign_results.html

@@ -54,6 +54,9 @@
             <button type="button" class="btn btn-danger" data-toggle="tooltip" onclick="deleteCampaign()">
                 <i class="fa fa-trash-o fa-lg"></i> Delete
             </button>
+            <button id="refresh_btn" type="button" class="btn btn-blue" data-toggle="tooltip" onclick="refresh()">
+                <i class="fa fa-refresh fa-lg"></i> Refresh
+            </button>
 	    <span id="refresh_message">
 		    <i class="fa fa-spin fa-spinner"></i> Refreshing
             </span>