improved progressbar rendering

2 files changed, 37 insertions, 17 deletions

diff --git a/pyload/web/app/scripts/views/headerView.js b/pyload/web/app/scripts/views/headerView.js
index afafcf564..2c83fb381 100644
--- a/pyload/web/app/scripts/views/headerView.js
+++ b/pyload/web/app/scripts/views/headerView.js
@@ -1,8 +1,8 @@
 define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'collections/ProgressList',
     'views/progressView', 'views/notificationView', 'helpers/formatSize', 'hbs!tpl/header/layout',
-    'hbs!tpl/header/status', 'hbs!tpl/header/progressbar' , 'flot'],
-    function($, _, Backbone, App, ServerStatus, ProgressList, ProgressView, NotificationView, formatSize,
-             template, templateStatus, templateHeader) {
+    'hbs!tpl/header/status', 'hbs!tpl/header/progressbar', 'hbs!tpl/header/progressSup', 'hbs!tpl/header/progressSub' , 'flot'],
+    function(
+        $, _, Backbone, App, ServerStatus, ProgressList, ProgressView, NotificationView, formatSize, template, templateStatus, templateProgress, templateSup, templateSub) {
         'use strict';
         // Renders the header with all information
         return Backbone.Marionette.ItemView.extend({
@@ -19,10 +19,7 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
                 speedgraph: '#speedgraph'
             },
 
-            // todo: maybe combine these
             template: template,
-            templateStatus: templateStatus,
-            templateHeader: templateHeader,
 
             // view
             grabber: null,
@@ -39,6 +36,7 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
 
             // save if last progress was empty
             wasEmpty: false,
+            lastStatus: null,
 
             initialize: function() {
                 var self = this;
@@ -118,13 +116,13 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
                     return speed[1];
                 })[1] * 1024;
                 this.$('.status-block').html(
-                    this.templateStatus(status)
+                    templateStatus(status)
                 );
 
                 var data = {tasks: 0, downloads: 0, speed: 0, single: false};
                 this.progressList.each(function(progress) {
                     if (progress.isDownload()) {
-                        data.downloads += 1;
+                        data.downloads++;
                         data.speed += progress.get('download').speed;
                     } else
                         data.tasks++;
@@ -139,15 +137,24 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
                     data.name = progress.get('name');
                     data.statusmsg = progress.get('statusmsg');
                 }
-                // TODO: better progressbar rendering
 
                 data.etaqueue = status.eta;
                 data.linksqueue = status.linksqueue;
                 data.sizequeue = status.sizequeue;
 
-                this.$('#progress-info').html(
-                    this.templateHeader(data)
-                );
+                // Render progressbar only when needed
+                if (!_.isEqual([data.tasks, data.downloads], this.lastStatus)) {
+                    console.log('render bar');
+                    this.lastStatus = [data.tasks, data.downloads];
+                    this.$('#progress-info').html(templateProgress(data));
+                } else {
+                    this.$('#progress-info .bar').width(data.percent + '%');
+                }
+
+                // render upper and lower part
+                this.$('.sup').html(templateSup(data));
+                this.$('.sub').html(templateSub(data));
+
                 return this;
             },
 
diff --git a/pyload/web/app/scripts/views/progressView.js b/pyload/web/app/scripts/views/progressView.js
index 3a4bb2825..7b9dbb74b 100644
--- a/pyload/web/app/scripts/views/progressView.js
+++ b/pyload/web/app/scripts/views/progressView.js
@@ -1,6 +1,6 @@
 define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abstract/itemView',
-    'hbs!tpl/header/progress', 'helpers/pluginIcon'],
-    function($, Backbone, _, App, Api, ItemView, template, pluginIcon) {
+    'hbs!tpl/header/progress', 'hbs!tpl/header/progressStatus', 'helpers/pluginIcon'],
+    function($, Backbone, _, App, Api, ItemView, template, templateStatus, pluginIcon) {
         'use strict';
 
         // Renders single file item
@@ -12,20 +12,33 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst
             events: {
             },
 
+            // Last name
+            name: null,
+
             initialize: function() {
-                this.listenTo(this.model, 'change', this.render);
+                this.listenTo(this.model, 'change', this.update);
                 this.listenTo(this.model, 'remove', this.unrender);
             },
 
             onDestroy: function() {
             },
 
+            // Update html without re-rendering
+            update: function() {
+                if (this.name !== this.model.get('name')) {
+                    this.name = this.model.get('name');
+                    this.render();
+                }
+
+                this.$('.bar').width(this.model.getPercent() + '%');
+                this.$('.progress-status').html(templateStatus(this.model.toJSON()));
+            },
+
             render: function() {
                 // TODO: icon
                 // TODO: other states
                 // TODO: non download progress
-                // TODO: better progressbar rendering
-                this.$el.css('background-image', 'url('+ pluginIcon('todo') +')');
+                this.$el.css('background-image', 'url(' + pluginIcon('todo') + ')');
                 this.$el.html(this.template(this.model.toJSON()));
                 return this;
             }