render download progress

5 files changed, 126 insertions, 54 deletions

diff --git a/module/web/static/js/views/abstract/modalView.js b/module/web/static/js/views/abstract/modalView.js
index e0542d552..8f5a7ed0c 100644
--- a/module/web/static/js/views/abstract/modalView.js
+++ b/module/web/static/js/views/abstract/modalView.js
@@ -82,11 +82,20 @@ define(['jquery', 'backbone', 'underscore', 'omniwindow'], function($, Backbone,
 
             this.dialog.trigger('show');
 
-            // TODO: set focus on first element
+            this.onShow();
+        },
+
+        onShow: function() {
+
         },
 
         hide: function() {
             this.dialog.trigger('hide');
+            this.onHide();
+        },
+
+        onHide: function() {
+
         },
 
         confirm: function() {
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index 2459b6cd6..68e8df176 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -6,7 +6,6 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst
 
             tagName: 'li',
             className: 'file-view row-fluid',
-//        template: _.template($("#template-file").html()),
             template: _.compile($("#template-file").html()),
             events: {
                 'click .checkbox': 'select',
diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js
index 35df06003..dddae4705 100644
--- a/module/web/static/js/views/headerView.js
+++ b/module/web/static/js/views/headerView.js
@@ -1,5 +1,5 @@
-define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'flot'],
-    function($, _, Backbone, App, ServerStatus) {
+define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'collections/ProgressList', 'views/progressView', 'flot'],
+    function($, _, Backbone, App, ServerStatus, ProgressList, ProgressView) {
         // Renders the header with all information
         return Backbone.View.extend({
 
@@ -11,23 +11,34 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'flot'
                 'click .btn-grabber': 'open_grabber'
             },
 
+            // todo: maybe combine these
             templateStatus: _.compile($('#template-header-status').html()),
-            templateProgress: _.compile($('#template-header-progress').html()),
+            templateHeader: _.compile($('#template-header').html()),
 
             // Will hold the link grabber
             grabber: null,
             notifications: null,
+            header: null,
+            progress: null,
             ws: null,
 
             // Status model
             status: null,
+            progressList: null,
 
             initialize: function() {
+                var self = this;
                 this.notifications = this.$('#notification-area').calculateHeight().height(0);
 
                 this.status = new ServerStatus();
                 this.listenTo(this.status, 'change', this.render);
 
+                this.progress = this.$('.progress-list');
+                this.progressList = new ProgressList();
+                this.listenTo(this.progressList, 'add', function(model) {
+                    self.progress.appendWithAnimation(new ProgressView({model: model}).render().el);
+                });
+
                 // TODO: button to start stop refresh
                 var ws = App.openWebSocket('/async');
                 ws.onopen = function() {
@@ -108,8 +119,19 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'flot'
                     this.templateStatus(this.status.toJSON())
                 );
 
-                // TODO: render progress
-                this.$('.progress-list');
+                var data = {tasks: 0, downloads: 0, speed: 0};
+                this.progressList.each(function(progress) {
+                    if (progress.isDownload()) {
+                        data.downloads += 1;
+                        data.speed += progress.get('download').speed;
+                    } else
+                        data.tasks++;
+                });
+
+                this.$('#progress-info').html(
+                    this.templateHeader(data)
+                );
+                return this;
             },
 
             toggle_taskList: function() {
@@ -147,7 +169,15 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'flot'
             },
 
             onProgressUpdate: function(progress) {
+                _.each(progress, function(prog) {
+                    if (prog.download)
+                        prog.pid = prog.download.fid;
+                    else
+                        prog.pid = prog.plugin + prog.name;
+                });
 
+                this.progressList.update(progress);
+                this.render();
             },
 
             onEvent: function(event, args) {
diff --git a/module/web/static/js/views/linkGrabberModal.js b/module/web/static/js/views/linkGrabberModal.js
index 9f7a5882d..71f97f0bf 100644
--- a/module/web/static/js/views/linkGrabberModal.js
+++ b/module/web/static/js/views/linkGrabberModal.js
@@ -1,49 +1,53 @@
 define(['jquery', 'underscore', 'app', 'views/abstract/modalView', 'text!tpl/default/linkgrabber.html'],
     function($, _, App, modalView, template) {
-    // Modal dialog for package adding - triggers package:added when package was added
-    return modalView.extend({
-
-        events: {
-            'click .btn-success': 'addPackage',
-            'keypress #inputPackageName': 'addOnEnter'
-        },
-
-        template: _.compile(template),
-
-        initialize: function() {
-            // Inherit parent events
-            this.events = _.extend({}, modalView.prototype.events,this.events);
-        },
-
-        renderContent: function() {
-            return $('<h1>Content!</h1>');
-        },
-
-        addOnEnter: function(e) {
-            if (e.keyCode != 13) return;
-            this.addPackage(e);
-        },
-
-        addPackage: function(e) {
-            var self = this;
-            var settings = {
-                type: 'POST',
-                data: {
-                    name: JSON.stringify($('#inputPackageName').val()),
-                    links: JSON.stringify(['http://download.pyload.org/random.bin', 'http://download.pyload.org/random100.bin',
-                                            'invalid link', 'invalid link 2', 'invalid link 3', 'inavlid link 4',
-                                            'http://download.pyload.org/random.bin', 'http://download.pyload.org/random.bin', 'http://download.pyload.org/random.bin',
-                                            'A really really long invalid url that should exceed length of most of the urls by far and split into two lines'])
-                },
-                success: function() {
-                    App.vent.trigger('package:added');
-                    self.hide();
-                }
-            };
-
-            $.ajax('api/addPackage', settings);
-            $('#inputPackageName').val('');
-        }
-
-    });
-});
\ No newline at end of file
+        // Modal dialog for package adding - triggers package:added when package was added
+        return modalView.extend({
+
+            events: {
+                'click .btn-success': 'addPackage',
+                'keypress #inputPackageName': 'addOnEnter'
+            },
+
+            template: _.compile(template),
+
+            initialize: function() {
+                // Inherit parent events
+                this.events = _.extend({}, modalView.prototype.events, this.events);
+            },
+
+            renderContent: function() {
+                return $('<h1>Content!</h1>');
+            },
+
+            addOnEnter: function(e) {
+                if (e.keyCode != 13) return;
+                this.addPackage(e);
+            },
+
+            addPackage: function(e) {
+                var self = this;
+                var settings = {
+                    type: 'POST',
+                    data: {
+                        name: JSON.stringify($('#inputPackageName').val()),
+                        links: JSON.stringify(['http://download.pyload.org/random.bin', 'http://download.pyload.org/random100.bin',
+                            'invalid link', 'invalid link 2', 'invalid link 3', 'inavlid link 4',
+                            'http://download.pyload.org/random.bin', 'http://download.pyload.org/random.bin', 'http://download.pyload.org/random.bin',
+                            'A really really long invalid url that should exceed length of most of the urls by far and split into two lines'])
+                    },
+                    success: function() {
+                        App.vent.trigger('package:added');
+                        self.hide();
+                    }
+                };
+
+                $.ajax('api/addPackage', settings);
+                $('#inputPackageName').val('');
+            },
+
+            onShow: function() {
+                this.$('#inputPackageName').focus();
+            }
+
+        });
+    });
\ No newline at end of file
diff --git a/module/web/static/js/views/progressView.js b/module/web/static/js/views/progressView.js
new file mode 100644
index 000000000..40fbf0652
--- /dev/null
+++ b/module/web/static/js/views/progressView.js
@@ -0,0 +1,30 @@
+define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abstract/itemView'],
+    function($, Backbone, _, App, Api, ItemView) {
+
+        // Renders single file item
+        return ItemView.extend({
+
+            idAttribute: 'pid',
+            tagName: 'li',
+            template: _.compile($("#template-header-progress").html()),
+            events: {
+            },
+
+            initialize: function() {
+                this.listenTo(this.model, 'change', this.render);
+                this.listenTo(this.model, 'remove', this.unrender);
+            },
+
+            onDestroy: function() {
+            },
+
+            render: function() {
+                // TODO: icon
+                // TODO: other states
+                // TODO: non download progress
+                this.$el.css('background-image', 'url(icons/sdf)');
+                this.$el.html(this.template(this.model.toJSON()));
+                return this;
+            }
+        });
+    });
\ No newline at end of file