improved progressbar rendering

1 files changed, 18 insertions, 5 deletions

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;
             }