summaryrefslogtreecommitdiffstats
path: root/module/web
diff options
context:
space:
mode:
Diffstat (limited to 'module/web')
-rw-r--r--module/web/static/css/default/dashboard.less1
-rw-r--r--module/web/static/css/default/style.less1
-rw-r--r--module/web/static/js/helpers/fileHelper.js2
-rw-r--r--module/web/static/js/models/Package.js7
-rw-r--r--module/web/static/js/models/Progress.js5
-rw-r--r--module/web/static/js/views/fileView.js20
-rw-r--r--module/web/static/js/views/headerView.js80
-rw-r--r--module/web/templates/default/dashboard.html16
8 files changed, 71 insertions, 61 deletions
diff --git a/module/web/static/css/default/dashboard.less b/module/web/static/css/default/dashboard.less
index b1d8326d8..7f8627d98 100644
--- a/module/web/static/css/default/dashboard.less
+++ b/module/web/static/css/default/dashboard.less
@@ -263,7 +263,6 @@
text-align: left;
.gradient(top, @yellow, @yellowDark);
color: @dark;
- padding: 0px 5px;
}
}
diff --git a/module/web/static/css/default/style.less b/module/web/static/css/default/style.less
index baa8cc413..0f9b551b3 100644
--- a/module/web/static/css/default/style.less
+++ b/module/web/static/css/default/style.less
@@ -254,6 +254,7 @@ header .logo {
.iconf-list {
cursor: pointer;
+ margin-right: 5px; // same as globalprogress margin
&:hover {
color: @yellow;
diff --git a/module/web/static/js/helpers/fileHelper.js b/module/web/static/js/helpers/fileHelper.js
index ad7c44142..085c222aa 100644
--- a/module/web/static/js/helpers/fileHelper.js
+++ b/module/web/static/js/helpers/fileHelper.js
@@ -37,7 +37,7 @@ define('helpers/fileHelper', ['handlebars', 'utils/apitypes', 'helpers/formatTim
} else if (file.finished)
s = "<i class='iconf-ok'></i>&nbsp;" + msg;
else if (file.downloading)
- s = "<div class='progress'><div class='bar' style='width: " + file.progress + "%'>" +
+ s = "<div class='progress'><div class='bar' style='width: " + file.progress + "%'>&nbsp;&nbsp;" +
formatTime(file.eta) + "</div></div>";
else if (file.waiting)
s = "<i class='iconf-time'></i>&nbsp;" + formatTime(file.eta);
diff --git a/module/web/static/js/models/Package.js b/module/web/static/js/models/Package.js
index 0b9efca10..1b050d735 100644
--- a/module/web/static/js/models/Package.js
+++ b/module/web/static/js/models/Package.js
@@ -32,6 +32,13 @@ define(['jquery', 'backbone', 'underscore', 'app', 'collections/FileList', 'requ
initialize: function() {
},
+ toJSON: function(options) {
+ var obj = Backbone.Model.prototype.toJSON.call(this, options);
+ obj.percent = Math.round(obj.stats.linksdone * 100 / obj.stats.linkstotal);
+
+ return obj;
+ },
+
// Changes url + method and delegates call to super class
fetch: function(options) {
options = App.apiRequest(
diff --git a/module/web/static/js/models/Progress.js b/module/web/static/js/models/Progress.js
index 87e7b350b..96beb0198 100644
--- a/module/web/static/js/models/Progress.js
+++ b/module/web/static/js/models/Progress.js
@@ -35,10 +35,7 @@ define(['jquery', 'backbone', 'underscore', 'utils/apitypes'], function($, Backb
toJSON: function(options) {
var obj = Backbone.Model.prototype.toJSON.call(this, options);
obj.percent = this.getPercent();
- if (this.isDownload() && this.get('download').status === Api.DownloadStatus.Downloading)
- obj.downloading = true;
- else
- obj.downloading = false;
+ obj.downloading = this.isDownload() && this.get('download').status === Api.DownloadStatus.Downloading;
return obj;
},
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index 2d5d844c8..b0d7ac9de 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -1,5 +1,5 @@
-define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abstract/itemView'],
- function($, Backbone, _, App, Api, ItemView) {
+define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abstract/itemView', 'helpers/formatTime'],
+ function($, Backbone, _, App, Api, ItemView, formatTime) {
// Renders single file item
return ItemView.extend({
@@ -17,6 +17,7 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst
this.listenTo(this.model, 'change', this.render);
// This will be triggered manually and changed before with silent=true
this.listenTo(this.model, 'change:visible', this.visibility_changed);
+ this.listenTo(this.model, 'change:progress', this.progress_changed);
this.listenTo(this.model, 'remove', this.unrender);
this.listenTo(App.vent, 'dashboard:destroyContent', this.destroy);
},
@@ -73,7 +74,20 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst
this.$el.calculateHeight(true);
this.$el.slideIn(true);
}
- }
+ },
+
+ progress_changed: function() {
+ if (this.model.isDownload() && this.model.get('download').status === Api.DownloadStatus.Downloading) {
+ var bar = this.$('.progress .bar');
+ if (!bar) { // ensure that the dl bar is rendered
+ this.render();
+ bar = this.$('.progress .bar');
+ }
+ bar.width(this.model.get('progress') + '%');
+ bar.html('&nbsp;&nbsp;' + formatTime(this.model.get('eta')));
+ }
+
+ }
});
}); \ No newline at end of file
diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js
index 49c3aa30e..2c4f8abb5 100644
--- a/module/web/static/js/views/headerView.js
+++ b/module/web/static/js/views/headerView.js
@@ -1,5 +1,6 @@
-define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'collections/ProgressList', 'views/progressView', 'flot'],
- function($, _, Backbone, App, ServerStatus, ProgressList, ProgressView) {
+define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'collections/ProgressList',
+ 'views/progressView', 'helpers/formatSize', 'flot'],
+ function($, _, Backbone, App, ServerStatus, ProgressList, ProgressView, formatSize) {
// Renders the header with all information
return Backbone.View.extend({
@@ -15,16 +16,18 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
templateStatus: _.compile($('#template-header-status').html()),
templateHeader: _.compile($('#template-header').html()),
- // Will hold the link grabber
+ // html elements
grabber: null,
notifications: null,
header: null,
progress: null,
- ws: null,
+ speedgraph: null,
- // Status model
+ // models and data
+ ws: null,
status: null,
progressList: null,
+ speeds: null,
// save if last progress was empty
wasEmpty: false,
@@ -49,6 +52,9 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
};
// TODO compare with polling
ws.onmessage = _.bind(this.onData, this);
+ ws.onerror = function(error) {
+ alert(error);
+ };
this.ws = ws;
@@ -56,41 +62,24 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
},
initGraph: function() {
- var totalPoints = 100;
+ var totalPoints = 120;
var data = [];
- function getRandomData() {
- if (data.length > 0)
- data = data.slice(1);
-
- // do a random walk
- while (data.length < totalPoints) {
- var prev = data.length > 0 ? data[data.length - 1] : 50;
- var y = prev + Math.random() * 10 - 5;
- if (y < 0)
- y = 0;
- if (y > 100)
- y = 100;
- data.push(y);
- }
-
- // zip the generated y values with the x values
- var res = [];
- for (var i = 0; i < data.length; ++i)
- res.push([i, data[i]])
- return res;
- }
-
- var updateInterval = 1500;
+ // init with empty data
+ while (data.length < totalPoints)
+ data.push([data.length, 0]);
- var speedgraph = $.plot(this.$el.find("#speedgraph"), [getRandomData()], {
+ this.speeds = data;
+ this.speedgraph = $.plot(this.$el.find("#speedgraph"), [this.speeds], {
series: {
lines: { show: true, lineWidth: 2 },
shadowSize: 0,
color: "#fee247"
},
xaxis: { ticks: [], mode: "time" },
- yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
+ yaxis: { ticks: [], min: 1, autoscaleMargin: 0.1, tickFormatter: function(data) {
+ return formatSize(data * 1024);
+ }, position: "right" },
grid: {
show: true,
// borderColor: "#757575",
@@ -102,16 +91,6 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
}
});
- function update() {
- speedgraph.setData([ getRandomData() ]);
- // since the axes don't change, we don't need to call plot.setupGrid()
- speedgraph.draw();
-
- setTimeout(update, updateInterval);
- }
-
-// update();
-
},
render: function() {
@@ -157,6 +136,16 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
if (data['@class'] === "ServerStatus") {
this.status.set(data);
+
+ this.speeds = this.speeds.slice(1);
+ this.speeds.push([this.speeds[this.speeds.length - 1][0] + 1, Math.floor(data.speed / 1024)]);
+
+ // TODO: if everything is 0 rerender is not needed
+ this.speedgraph.setData([this.speeds]);
+ // adjust the axis
+ this.speedgraph.setupGrid();
+ this.speedgraph.draw();
+
}
else if (_.isArray(data))
this.onProgressUpdate(data);
@@ -181,11 +170,14 @@ define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'colle
this.progressList.each(function(prog) {
if (prog.isDownload() && App.dashboard.files) {
var file = App.dashboard.files.get(prog.get('download').fid);
- if (file)
+ if (file) {
file.set({
progress: prog.getPercent(),
- eta: prog.get('eta')
- });
+ eta: prog.get('eta'),
+ }, {silent: true});
+
+ file.trigger('change:progress');
+ }
}
});
diff --git a/module/web/templates/default/dashboard.html b/module/web/templates/default/dashboard.html
index f0756cdfb..a67445f6b 100644
--- a/module/web/templates/default/dashboard.html
+++ b/module/web/templates/default/dashboard.html
@@ -53,13 +53,13 @@
</ul>
</div>
<div class="progress">
- <div class="bar bar-info" style="width: 50%">
- <% stats.linksdone %>
- </div>
- <div class="bar bar-danger" style="width: 20%">
- <% stats.linkstotal %>
- </div>
- <% formatSize stats.sizedone %> / <% formatSize stats.sizetotal %>
+ <span style="position: absolute; left: 5px">
+ <% stats.linksdone %> / <% stats.linkstotal %>
+ </span>
+ <div class="bar bar-info" style="width: <% percent %>%"></div>
+ <span style="position: absolute; right: 5px">
+ <% formatSize stats.sizedone %> / <% formatSize stats.sizetotal %>
+ </span>
</div>
</div>
</script>
@@ -177,7 +177,7 @@
<div class="sidebar-header">
<i class="iconf-hdd"></i> Local
<div class="pull-right" style="font-size: medium; line-height: normal">
-{# <input type="text" class="input">#}
+ {# <input type="text" class="input">#}
<i class="iconf-chevron-down" style="font-size: 20px"></i>
</div>
<div class="clearfix"></div>
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-25 00:40:44 +0100