improved progressbar rendering

10 files changed, 82 insertions, 50 deletions

diff --git a/pyload/web/app/scripts/utils/apitypes.js b/pyload/web/app/scripts/utils/apitypes.js
index d3b984923..342f61f68 100644
--- a/pyload/web/app/scripts/utils/apitypes.js
+++ b/pyload/web/app/scripts/utils/apitypes.js
@@ -6,7 +6,7 @@ define([], function() {
 		DownloadState: {'Failed': 3, 'All': 0, 'Unmanaged': 4, 'Finished': 1, 'Unfinished': 2},
 		DownloadStatus: {'Downloading': 10, 'NA': 0, 'Processing': 14, 'Waiting': 9, 'Decrypting': 13, 'Paused': 4, 'Failed': 7, 'Finished': 5, 'Skipped': 6, 'Unknown': 16, 'Aborted': 12, 'Online': 2, 'TempOffline': 11, 'Offline': 1, 'Custom': 15, 'Starting': 8, 'Queued': 3},
 		FileStatus: {'Remote': 2, 'Ok': 0, 'Missing': 1},
-		InputType: {'Multiple': 11, 'Int': 2, 'NA': 0, 'Time': 7, 'List': 12, 'Bool': 8, 'File': 3, 'Text': 1, 'Table': 13, 'Folder': 4, 'Password': 6, 'Click': 9, 'Select': 10, 'Textbox': 5},
+		InputType: {'PluginList': 13, 'Multiple': 11, 'Int': 2, 'NA': 0, 'Time': 7, 'List': 12, 'Bool': 8, 'File': 3, 'Text': 1, 'Table': 14, 'Folder': 4, 'Password': 6, 'Click': 9, 'Select': 10, 'Textbox': 5},
 		Interaction: {'Captcha': 2, 'All': 0, 'Query': 4, 'Notification': 1},
 		MediaType: {'All': 0, 'Audio': 2, 'Image': 4, 'Other': 1, 'Video': 8, 'Document': 16, 'Archive': 32},
 		PackageStatus: {'Paused': 1, 'Remote': 3, 'Folder': 2, 'Ok': 0},
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;
             }
diff --git a/pyload/web/app/styles/default/dashboard.less b/pyload/web/app/styles/default/dashboard.less
index cd240f323..ed87e19a1 100644
--- a/pyload/web/app/styles/default/dashboard.less
+++ b/pyload/web/app/styles/default/dashboard.less
@@ -1,4 +1,5 @@
-@import "common";
+@import "bootstrap/less/mixins";
+@import "common";
 
 /*
     Dashboard
@@ -44,10 +45,8 @@
   margin: 8px 0;
   position: relative;
   overflow: hidden;
+  .hyphens;
 
-  -webkit-hyphens: auto;
-  -moz-hyphens: auto;
-  hyphens: auto;
 
   i {
     cursor: pointer;
@@ -274,6 +273,7 @@
   .bar {
     text-align: left;
     .gradient(top, @yellow, @yellowDark);
+    .transition-duration(2s);
     color: @dark;
   }
 
diff --git a/pyload/web/app/styles/default/style.less b/pyload/web/app/styles/default/style.less
index d77558cd7..b75f45a65 100644
--- a/pyload/web/app/styles/default/style.less
+++ b/pyload/web/app/styles/default/style.less
@@ -1,4 +1,5 @@
-@import "common";
+@import "bootstrap/less/mixins";
+@import "common";
 
 /*
     Header
@@ -135,6 +136,7 @@ header { //  background-color: @greyDark;
       margin-bottom: 0;
 
       .bar {
+        .transition-duration(2s);
         .gradient(bottom, @blue, @blueLight);
       }
     }
@@ -153,6 +155,7 @@ header { //  background-color: @greyDark;
     color: @dark;
     background-image: none;
     background-color: @yellow;
+    .transition-duration(2s);
 
     &.running {
       width: 100%;
diff --git a/pyload/web/app/templates/default/header/progress.html b/pyload/web/app/templates/default/header/progress.html
index 4ef5a1cd6..740e18a4c 100644
--- a/pyload/web/app/templates/default/header/progress.html
+++ b/pyload/web/app/templates/default/header/progress.html
@@ -4,11 +4,7 @@
 <div class="progress">
     <div class="bar" style="width: {{ percent }}%"></div>
 </div>
-{{#if downloading }}
-{{ formatSize done }} of {{ formatSize total }} ({{ formatSize download.speed }}/s)
-{{ else }}
-{{ statusmsg }}
-{{/if}}
-<span class="pull-right">
-    {{ formatTime eta }}
-</span>
\ No newline at end of file
+
+<div class="progress-status">
+    <!-- rendered by progressInfo template -->
+</div>
diff --git a/pyload/web/app/templates/default/header/progressStatus.html b/pyload/web/app/templates/default/header/progressStatus.html
new file mode 100644
index 000000000..020ed2e96
--- /dev/null
+++ b/pyload/web/app/templates/default/header/progressStatus.html
@@ -0,0 +1,8 @@
+{{#if downloading }}
+    {{ formatSize done }} of {{ formatSize total }} ({{ formatSize download.speed }}/s)
+{{ else }}
+    {{ statusmsg }}
+{{/if}}
+<span class="pull-right">
+    {{ formatTime eta }}
+</span>
\ No newline at end of file
diff --git a/pyload/web/app/templates/default/header/progressSub.html b/pyload/web/app/templates/default/header/progressSub.html
new file mode 100644
index 000000000..3400ee011
--- /dev/null
+++ b/pyload/web/app/templates/default/header/progressSub.html
@@ -0,0 +1,6 @@
+{{#if linksqueue }}
+    {{ linksqueue }} downloads left ({{ formatSize sizequeue }})
+{{/if}}
+<span class="pull-right">
+    {{ formatTime etaqueue }}
+</span>
\ No newline at end of file
diff --git a/pyload/web/app/templates/default/header/progressSup.html b/pyload/web/app/templates/default/header/progressSup.html
new file mode 100644
index 000000000..f2c0ac734
--- /dev/null
+++ b/pyload/web/app/templates/default/header/progressSup.html
@@ -0,0 +1,10 @@
+{{#if single }}
+    {{ truncate name 32}} ({{ statusmsg }})
+{{ else }}
+    {{#if downloads }}
+        {{ downloads }} downloads running {{#if speed }}({{ formatSize speed }}/s){{/if}}
+    {{ else }}
+        No running tasks
+    {{/if}}
+{{/if}}
+<i class="icon-list pull-right"></i>
\ No newline at end of file
diff --git a/pyload/web/app/templates/default/header/progressbar.html b/pyload/web/app/templates/default/header/progressbar.html
index a36fb5684..2775e664b 100644
--- a/pyload/web/app/templates/default/header/progressbar.html
+++ b/pyload/web/app/templates/default/header/progressbar.html
@@ -1,14 +1,7 @@
-{{#if single }}
-    {{ truncate name 32}} ({{ statusmsg }})
-{{ else }}
-    {{#if downloads }}
-        {{ downloads }} downloads running {{#if speed }}({{ formatSize speed }}/s){{/if}}
-    {{ else }}
-        No running tasks
-    {{/if}}
-{{/if}}
-<i class="icon-list pull-right"></i>
-<!-- TODO active animation -->
+
+<div class="sup">
+</div>
+
 <div class="progress" id="globalprogress">
     {{#if single }}
     <div class="bar" style="width: {{ percent }}%">
@@ -17,11 +10,7 @@
             {{/if}}
         </div>
     </div>
-    <div class="sub">
-        {{#if linksqueue }}
-        {{ linksqueue }} downloads left ({{ formatSize sizequeue }})
-        {{/if}}
-    <span class="pull-right">
-        {{ formatTime etaqueue }}
-    </span>
-    </div>
\ No newline at end of file
+</div>
+
+<div class="sub">
+</div>
\ No newline at end of file