better progress bars

rowers/templates/async_tasks.html

@@ -9,7 +9,7 @@
     <style type="text/css">
     .progressBar div {
         border-radius:5px;
-       height: 100%; 
+       height: 100%;
 /*        padding: 4px 10px; */
         font-size: 15px;
         color: #fff;
@@ -38,10 +38,10 @@
                 var maxvalue = $(this).attr('data');
                 maxvalue = maxvalue.substring(3);
                 var text = $(this).children('div').data('show');
-                progress(maxvalue, bar, text); 
+                progress(maxvalue, bar, text);
             });
     });
-    
+
     function progress1(percent, element, text) {
         element.find('div').animate({ width: percent+'%' }, 1).html(text +"&nbsp;"+ percent + "%&nbsp;");
     }
@@ -52,13 +52,59 @@
 {% endblock %}
 
 {% block scripts %}
-{% include "monitorjobs.html" %}
+<script type='text/javascript'
+        src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
+</script>
+
+<script>
+  var previous = null;
+  var current = null;
+  var formNotChanged = true;
+  (function checkJobs() {
+  $.getJSON(window.location.protocol + '//'+window.location.host + '/rowers/list-jobs/', function(json) {
+  current = JSON.stringify(json);
+  $('form').each(function() {
+     $(this).change(function() {
+        formNotChanged = false;
+     });
+  });
+  if (previous && current && previous !== current && formNotChanged) {
+      if (previous.length != current.length) {
+        console.log('refresh');
+        location.reload();
+      }
+
+      $('.progressBar').each(function() {
+          var bar = $(this);
+          var maxvalue = $(this).attr('data').substring(3);
+          var barid = $(this).attr('id').substring(0,10)
+          $.each(json, function(index,record) {
+            var recordid = record['id'].substring(0,10)
+
+            if (recordid == barid) {
+              if (record['progrss']<100 || parseInt(maxvalue)<100) {
+              maxvalue = record['progress'].toString();
+            }
+            }
+          });
+          var text = $(this).children('div').data('show');
+          progress(maxvalue, bar, text);
+
+
+      });
+  };
+  previous = current;
+  });
+  setTimeout(checkJobs, 1000);
+  }());
+
+</script>
 {% endblock %}
 
-    
+
 {% block main %}
 
-  
+
 <h1>Your Tasks Status</h1>
 <p>Manage the asynchronous tasks running for you</p>
 
@@ -88,7 +134,7 @@
           {{ task|lookup:'started_at' }}
         </td>
         <td>
-    <div  class="progressBar" data="max{{ task|lookup:'progress' }}"  style="width: 100%;">
+    <div  class="progressBar" id="{{ task|lookup:'id' }}" data="max{{ task|lookup:'progress' }}"  style="width: 100%;">
     <div data-show="">    {{ task|lookup:'progress' }}</div>
     </div>