websocket login via session, websocket pushes server status, webui renders server status

6 files changed, 159 insertions, 98 deletions

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();
                 });