status progress bar works on develop

rowers/templates/async_tasks.html

@@ -4,6 +4,53 @@
 
 {% block title %}Rowsandall - Tasks {% endblock %}
 
+{% block meta %}
+<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+    <style type="text/css">
+    .progressBar div {
+        border-radius:5px;
+       height: 100%; 
+/*        padding: 4px 10px; */
+        font-size: 15px;
+        color: #fff;
+        text-align: right;
+        line-height: 22px;
+        width: 0;
+        vertical-align: middle;
+        background-color: #0099ff;
+    }
+</style>
+<script type='text/javascript'
+   src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
+    </script>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+    <script>
+   $(document).ready(function(){
+            $('.progressBar').each(function() {
+                var bar = $(this);
+                var maxvalue = $(this).attr('data');
+                maxvalue = 0;
+                var text = $(this).children('div').data('show');
+                progress1(maxvalue, bar, text);
+            });
+            $('.progressBar').each(function() {
+                var bar = $(this);
+                var maxvalue = $(this).attr('data');
+                maxvalue = maxvalue.substring(3);
+                var text = $(this).children('div').data('show');
+                progress(maxvalue, bar, text); 
+            });
+    });
+    
+    function progress1(percent, element, text) {
+        element.find('div').animate({ width: percent+'%' }, 1).html(text +"&nbsp;"+ percent + "%&nbsp;");
+    }
+    function progress(percent, element, text) {
+        element.find('div').animate({ width: percent+'%' }, 'slow').html(text +"&nbsp;"+ percent + "%&nbsp;");
+    }
+</script>
+{% endblock %}
+
 {% block content %}
 
   
@@ -16,7 +63,8 @@
     <thead>
       <tr>
         <th>ID</th>
-        <th style="width:180">Task</th>
+        <th>Task</th>
+        <th>Progress</th>
         <th>Status</th>
         <th>Action</th>
       </tr>
@@ -31,6 +79,12 @@
           {{ task|lookup:'verbose' }}
         </td>
         <td>
+    <div  class="progressBar" data="max{{ task|lookup:'progress' }}"  style="width: 100%;">
+    <div data-show="">    {{ task|lookup:'progress' }}</div>
+    </div>
+
+        </td>
+        <td>
           {{ task|lookup:'status' }}
         </td>
         {% if task|lookup:'failed' %}