added ReadWrite lock, render file progress on dashboard

7 files changed, 37 insertions, 19 deletions

diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index 2a4adf0e7..865812e41 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -186,6 +186,11 @@
     .gradient(top, @yellow, @yellowDark);

     color: @dark;

     border-color: @greenDark;

+

+    .file-row.downloading .bar {

+        .gradient(top, @green, @greenLight);

+    }

+

   }

 

   img { // plugin logo

@@ -255,7 +260,7 @@
   }

 

   .bar {

-    .gradient(top, @green, @greenLight);

+    .gradient(top, @yellow, @yellowDark);

     color: @light;

   }

 

diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index 260f9fa52..baa8cc413 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -182,10 +182,7 @@ header .logo {
   float: right; //  font-family: SansationRegular, sans-serif;

   margin: 10px 8px 0;

   line-height: 18px;

-  font-size: small; //  i {

-//    margin-top: 0;

-//    vertical-align: text-bottom;

-//  }

+  font-size: small;

 

   .btn {

     margin-top: 6px;

@@ -234,12 +231,15 @@ header .logo {
 

 #progress-area {

   position: relative;

-  text-align: center;

   float: right;

   width: 26%;

   margin-right: 15px;

   line-height: 16px;

 

+  #progress-info {

+    padding-left: 5px;

+  }

+

   .popover { //    display: block;

     max-width: none;

     width: 120%;

diff --git a/module/web/static/js/helpers/fileHelper.js b/module/web/static/js/helpers/fileHelper.js
index d7cf03f53..dde831bdd 100644
--- a/module/web/static/js/helpers/fileHelper.js
+++ b/module/web/static/js/helpers/fileHelper.js
@@ -37,7 +37,7 @@ define('helpers/fileHelper', ['handlebars', 'utils/apitypes'],
             } else if (file.finished)
                 s = "<i class='iconf-ok'></i>&nbsp;" + msg;
             else if(file.downloading)
-                s= "<div class='progress'><div class='bar' style='width: 50%'></div></div>";
+                s= "<div class='progress'><div class='bar' style='width: " + file.progress + "%'></div></div>";
             else
                 s = msg;
 
diff --git a/module/web/static/js/models/File.js b/module/web/static/js/models/File.js
index 2ac6c05f5..22ff231cc 100644
--- a/module/web/static/js/models/File.js
+++ b/module/web/static/js/models/File.js
@@ -22,7 +22,8 @@ define(['jquery', 'backbone', 'underscore', 'utils/apitypes'], function($, Backb
 
             // UI attributes
             selected: false,
-            visible: true
+            visible: true,
+            progress: 0
         },
 
 
diff --git a/module/web/static/js/models/Progress.js b/module/web/static/js/models/Progress.js
index c6a2fc4d1..d2d54bdb4 100644
--- a/module/web/static/js/models/Progress.js
+++ b/module/web/static/js/models/Progress.js
@@ -16,6 +16,12 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
             download: null
         },
 
+        getPercent: function() {
+            if (this.get('total') > 0)
+                return Math.round(this.get('done') * 100 / this.get('total'));
+            return  0;
+        },
+
         // Model Constructor
         initialize: function() {
 
@@ -28,10 +34,7 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
 
         toJSON: function(options) {
             var obj = Backbone.Model.prototype.toJSON.call(this, options);
-            if (obj.total > 0)
-                obj.percent = Math.round(obj.done * 100 / obj.total);
-            else
-                obj.percent = 0;
+            obj.percent = this.getPercent();
 
             return obj;
         },
diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js
index dddae4705..d9c56b332 100644
--- a/module/web/static/js/views/headerView.js
+++ b/module/web/static/js/views/headerView.js
@@ -6,7 +6,7 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
             el: 'header',
 
             events: {
-                'click i.iconf-list': 'toggle_taskList',
+                'click .iconf-list': 'toggle_taskList',
                 'click .popover .close': 'hide_taskList',
                 'click .btn-grabber': 'open_grabber'
             },
@@ -169,6 +169,7 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
             },
 
             onProgressUpdate: function(progress) {
+                // generate a unique id
                 _.each(progress, function(prog) {
                     if (prog.download)
                         prog.pid = prog.download.fid;
@@ -177,6 +178,15 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
                 });
 
                 this.progressList.update(progress);
+                // update currently open files with progress
+                this.progressList.each(function(prog) {
+                    if(prog.isDownload() && App.dashboard.files){
+                        var file = App.dashboard.files.get(prog.get('download').fid);
+                        if (file)
+                            file.set('progress', prog.getPercent());
+                    }
+                });
+                // TODO: only render when changed
                 this.render();
             },
 
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index f995f79b7..ebaac59e9 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -44,17 +44,16 @@
         <% else %>

             No running tasks

         <%/if%>

-        <i class="icon-white iconf-list pull-right"></i>

+        <i class="iconf-list pull-right"></i>

 

         <div class="progress" id="globalprogress">

             <div class="bar" style="width: 48%">48%</div>

         </div>

     </script>

     <script type="text/template" id="template-header-status">

-        <span class="pull-right eta"><% formatTime eta %></span><br>

+        <span class="pull-right"><% linksqueue %></span><br>

         <span class="pull-right remeaning"><% formatSize sizequeue %></span><br>

-        <span class="pull-right"><span

-                style="font-weight:bold;color: #fff !important;"><% linksqueue %></span> of <% linkstotal %></span>

+        <span class="pull-right eta"><% formatTime eta %></span>

     </script>

 

     <script type="text/template" id="template-header-progress">

@@ -114,9 +113,9 @@
                 <div class="header_block right-border status-block">

                 </div>

                 <div class="header_block left-border">

-                    <i class="icon-time icon-white"></i> approx. ETA :<br>

-                    <i class=" icon-hdd icon-white"></i> Remaining:<br>

                     <i class="icon-download-alt icon-white"></i> Downloads:<br>

+                    <i class=" icon-hdd icon-white"></i> Remaining:<br>

+                    <i class="icon-time icon-white"></i> approx. ETA :<br>

                 </div>

 

                 <div id="progress-area" style="margin-top: 16px">