better progress bars

rowers/templates/async_tasks.html

@@ -52,7 +52,53 @@
 {% 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 %}
 
 
@@ -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>