From 763b142db70ce77952cb46cfccf84d9800f15651 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Mon, 11 Mar 2013 19:49:20 +0100
Subject: websocket login via session, websocket pushes server status, webui
renders server status
---
module/web/static/js/views/abstract/itemView.js | 7 +
module/web/static/js/views/dashboardView.js | 4 +-
module/web/static/js/views/fileView.js | 5 +-
module/web/static/js/views/headerView.js | 229 +++++++++++++++---------
module/web/static/js/views/packageView.js | 5 +-
module/web/static/js/views/selectionView.js | 7 +-
6 files changed, 159 insertions(+), 98 deletions(-)
(limited to 'module/web/static/js/views')
diff --git a/module/web/static/js/views/abstract/itemView.js b/module/web/static/js/views/abstract/itemView.js
index 75b058874..394044ec4 100644
--- a/module/web/static/js/views/abstract/itemView.js
+++ b/module/web/static/js/views/abstract/itemView.js
@@ -23,6 +23,13 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
this.$el.slideDown();
},
+ unrender: function() {
+ var self = this;
+ this.$el.slideUp(function() {
+ self.destroy();
+ });
+ },
+
deleteItem: function(e) {
if (e)
e.stopPropagation();
diff --git a/module/web/static/js/views/dashboardView.js b/module/web/static/js/views/dashboardView.js
index d9ea8d444..d9ff1c5fc 100644
--- a/module/web/static/js/views/dashboardView.js
+++ b/module/web/static/js/views/dashboardView.js
@@ -1,5 +1,5 @@
define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
- 'views/packageView', 'views/fileView', 'views/selectionView', 'views/filterView'],
+ 'views/packageView', 'views/fileView', 'views/selectionView', 'views/filterView', 'select2'],
function($, Backbone, _, App, TreeCollection, packageView, fileView, selectionView, filterView) {
// Renders whole dashboard
@@ -51,6 +51,8 @@ define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection',
});
}});
+
+ this.$('.input').select2({tags: ["a", "b", "sdf"]});
},
render: function() {
diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
index 17da74de3..2459b6cd6 100644
--- a/module/web/static/js/views/fileView.js
+++ b/module/web/static/js/views/fileView.js
@@ -9,14 +9,15 @@ define(['jquery', 'backbone', 'underscore', 'app', 'utils/apitypes', 'views/abst
// template: _.template($("#template-file").html()),
template: _.compile($("#template-file").html()),
events: {
- 'click .checkbox': 'select'
+ 'click .checkbox': 'select',
+ 'click .iconf-trash': 'deleteItem'
},
initialize: function() {
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, 'remove', this.destroy);
+ this.listenTo(this.model, 'remove', this.unrender);
this.listenTo(App.vent, 'dashboard:destroyContent', this.destroy);
},
diff --git a/module/web/static/js/views/headerView.js b/module/web/static/js/views/headerView.js
index cfceca6cd..c22f173c4 100644
--- a/module/web/static/js/views/headerView.js
+++ b/module/web/static/js/views/headerView.js
@@ -1,102 +1,153 @@
-define(['jquery', 'underscore', 'backbone', 'flot'], function($, _, Backbone) {
- // Renders the header with all information
- return Backbone.View.extend({
-
- el: 'header',
-
- events: {
- 'click i.iconf-list': 'toggle_taskList',
- 'click .popover .close': 'hide_taskList',
- 'click .btn-grabber': 'open_grabber'
- },
-
- // Will hold the link grabber
- grabber: null,
- notifications: null,
- selections: null,
-
- initialize: function() {
-
- this.notifications = this.$('#notification-area').calculateHeight().height(0);
- this.selections = this.$('#selection-area').calculateHeight().height(0);
-
- var totalPoints = 100;
- 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);
+define(['jquery', 'underscore', 'backbone', 'app', 'models/ServerStatus', 'flot'],
+ function($, _, Backbone, App, ServerStatus) {
+ // Renders the header with all information
+ return Backbone.View.extend({
+
+ el: 'header',
+
+ events: {
+ 'click i.iconf-list': 'toggle_taskList',
+ 'click .popover .close': 'hide_taskList',
+ 'click .btn-grabber': 'open_grabber'
+ },
+
+ templateStatus: _.compile($('#template-header-status').html()),
+
+ // Will hold the link grabber
+ grabber: null,
+ notifications: null,
+ ws: null,
+
+ // Status model
+ status: null,
+
+ initialize: function() {
+ this.notifications = this.$('#notification-area').calculateHeight().height(0);
+
+ this.status = new ServerStatus();
+ this.listenTo(this.status, 'change', this.render);
+
+ // TODO: button to start stop refresh
+ var ws = App.openWebSocket('/async');
+ ws.onopen = function() {
+ ws.send(JSON.stringify('start'));
+ };
+ // TODO compare with polling
+ ws.onmessage = _.bind(this.onData, this);
+
+ this.ws = ws;
+
+ this.initGraph();
+ },
+
+ initGraph: function() {
+ var totalPoints = 100;
+ 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;
}
- // 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;
-
- var speedgraph = $.plot(this.$el.find("#speedgraph"), [getRandomData()], {
- series: {
- lines: { show: true, lineWidth: 2 },
- shadowSize: 0,
- color: "#fee247"
- },
- xaxis: { ticks: [], mode: "time" },
- yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
- grid: {
- show: true,
+ var updateInterval = 1500;
+
+ var speedgraph = $.plot(this.$el.find("#speedgraph"), [getRandomData()], {
+ series: {
+ lines: { show: true, lineWidth: 2 },
+ shadowSize: 0,
+ color: "#fee247"
+ },
+ xaxis: { ticks: [], mode: "time" },
+ yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
+ grid: {
+ show: true,
// borderColor: "#757575",
- borderColor: "white",
- borderWidth: 1,
- labelMargin: 0,
- axisMargin: 0,
- minBorderMargin: 0
+ borderColor: "white",
+ borderWidth: 1,
+ labelMargin: 0,
+ axisMargin: 0,
+ minBorderMargin: 0
+ }
+ });
+
+ function update() {
+ speedgraph.setData([ getRandomData() ]);
+ // since the axes don't change, we don't need to call plot.setupGrid()
+ speedgraph.draw();
+
+ setTimeout(update, updateInterval);
}
- });
- function update() {
- speedgraph.setData([ getRandomData() ]);
- // since the axes don't change, we don't need to call plot.setupGrid()
- speedgraph.draw();
+// update();
- setTimeout(update, updateInterval);
- }
+ },
+
+ render: function() {
+// console.log('Render header');
+
+ this.$('.status-block').html(
+ this.templateStatus(this.status.toJSON())
+ );
+ },
+
+ toggle_taskList: function() {
+ this.$('.popover').animate({opacity: 'toggle'});
+ },
- update();
+ hide_taskList: function() {
+ this.$('.popover').fadeOut();
+ },
- },
+ open_grabber: function() {
+ var self = this;
+ _.requireOnce(['views/linkGrabberModal'], function(modalView) {
+ if (self.grabber === null)
+ self.grabber = new modalView();
- render: function() {
- },
+ self.grabber.show();
+ });
+ },
- toggle_taskList: function() {
- this.$('.popover').animate({opacity: 'toggle'});
- },
+ onData: function(evt) {
+ var data = JSON.parse(evt.data);
+ if (data === null) return;
- hide_taskList: function() {
- this.$('.popover').fadeOut();
- },
+ if (data['@class'] === "ServerStatus") {
+ this.status.set(data);
+ }
+ else if (data['@class'] === 'progress')
+ this.onProgressUpdate(data);
+ else if (data['@class'] === 'event')
+ this.onEvent(data);
+ else
+ console.log('Unknown Async input');
+
+ },
+
+ onProgressUpdate: function(progress) {
- open_grabber: function() {
- var self = this;
- _.requireOnce(['views/linkGrabberModal'], function(modalView) {
- if (self.grabber === null)
- self.grabber = new modalView();
+ },
+
+ onEvent: function(event) {
+
+ }
- self.grabber.show();
- });
- }
- });
-});
\ No newline at end of file
+ });
+ });
\ No newline at end of file
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js
index cfd671611..534fe2ad4 100644
--- a/module/web/static/js/views/packageView.js
+++ b/module/web/static/js/views/packageView.js
@@ -43,10 +43,7 @@ define(['jquery', 'app', 'views/abstract/itemView', 'underscore'],
},
unrender: function() {
- var self = this;
- this.$el.slideUp(function() {
- self.destroy();
- });
+ itemView.prototype.unrender.apply(this);
// TODO: display other package
App.vent.trigger('dashboard:loading', null);
diff --git a/module/web/static/js/views/selectionView.js b/module/web/static/js/views/selectionView.js
index 2237c5f92..480b7127b 100644
--- a/module/web/static/js/views/selectionView.js
+++ b/module/web/static/js/views/selectionView.js
@@ -19,6 +19,8 @@ define(['jquery', 'backbone', 'underscore', 'app'],
current: 0,
initialize: function() {
+ this.$el.calculateHeight().height(0);
+
var render = _.bind(this.render, this);
App.vent.on('dashboard:updated', render);
@@ -69,8 +71,8 @@ define(['jquery', 'backbone', 'underscore', 'app'],
this.current = files + packs;
},
- // Deselects all items, optional only files
- deselect: function(filesOnly) {
+ // Deselects all items
+ deselect: function() {
this.get_files().map(function(file) {
file.set('selected', false);
});
@@ -90,6 +92,7 @@ define(['jquery', 'backbone', 'underscore', 'app'],
},
trash: function() {
+ // TODO: delete many at once, check if package is parent
this.get_files().map(function(file) {
file.destroy();
});
--
cgit v1.2.3