From d2b45c5442aeb0e02f251916ae1beb06830ef4c1 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Tue, 12 Mar 2013 18:15:36 +0100
Subject: render download progress
---
module/web/static/js/models/Progress.js | 18 ++++-
module/web/static/js/views/abstract/modalView.js | 11 ++-
module/web/static/js/views/fileView.js | 1 -
module/web/static/js/views/headerView.js | 40 ++++++++--
module/web/static/js/views/linkGrabberModal.js | 98 ++++++++++++------------
module/web/static/js/views/progressView.js | 30 ++++++++
6 files changed, 140 insertions(+), 58 deletions(-)
create mode 100644 module/web/static/js/views/progressView.js
(limited to 'module/web/static')
diff --git a/module/web/static/js/models/Progress.js b/module/web/static/js/models/Progress.js
index ebbe34862..c6a2fc4d1 100644
--- a/module/web/static/js/models/Progress.js
+++ b/module/web/static/js/models/Progress.js
@@ -2,10 +2,11 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
return Backbone.Model.extend({
-// TODO
-// idAttribute: 'fid',
+ // generated, not submitted
+ idAttribute: 'pid',
defaults: {
+ pid: -1,
plugin: null,
name: null,
statusmsg: -1,
@@ -15,7 +16,6 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
download: null
},
-
// Model Constructor
initialize: function() {
@@ -26,8 +26,18 @@ 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;
+
+ return obj;
+ },
+
isDownload : function() {
- return this.has('download')
+ return this.has('download');
}
});
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
--
cgit v1.2.3