connected link add dialog, improved tree rendering

3 files changed, 64 insertions, 44 deletions

diff --git a/module/web/static/js/models/TreeCollection.js b/module/web/static/js/models/TreeCollection.js
index 5949415c2..7bcc7bd5b 100644
--- a/module/web/static/js/models/TreeCollection.js
+++ b/module/web/static/js/models/TreeCollection.js
@@ -23,6 +23,8 @@ define(['jquery', 'backbone', 'underscore', 'models/Package', 'collections/FileL
             options.url = 'api/getFileTree/' + pid + '/false';
             options.type = "post";
 
+            console.log('Fetching package tree ' + pid);
+
             return Backbone.Model.prototype.fetch.call(this, options);
         },
 
@@ -32,7 +34,7 @@ define(['jquery', 'backbone', 'underscore', 'models/Package', 'collections/FileL
             if (!this.has('packages'))
                 ret.packages = new PackageList(_.values(resp.packages));
             else
-                this.get('files').update(_.values(resp.packages));
+                this.get('packages').update(_.values(resp.packages));
 
             if (!this.has('files'))
                 ret.files = new FileList(_.values(resp.files));
diff --git a/module/web/static/js/views/linkGrabberModal.js b/module/web/static/js/views/linkGrabberModal.js
index b5c91baa6..13900f222 100644
--- a/module/web/static/js/views/linkGrabberModal.js
+++ b/module/web/static/js/views/linkGrabberModal.js
@@ -1,9 +1,11 @@
-define(['jquery', 'underscore', 'views/abstract/modalView', 'text!tpl/default/linkgrabber.html'],
-    function($, _, modalView, template) {
-
+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),
@@ -15,6 +17,29 @@ define(['jquery', 'underscore', 'views/abstract/modalView', 'text!tpl/default/li
 
         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', 'invalid link'])
+                },
+                success: function() {
+                    App.vent.trigger('package:added');
+                    self.hide();
+                }
+            };
+
+            $.ajax('api/addPackage', settings);
+            $('#inputPackageName').val('');
         }
 
     });
diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js
index 92e4d78a0..7491a285e 100644
--- a/module/web/static/js/views/packageTreeView.js
+++ b/module/web/static/js/views/packageTreeView.js
@@ -1,5 +1,5 @@
-define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/packageView', 'views/fileView'],

-    function($, Backbone, _, TreeCollection, packageView, fileView) {

+define(['jquery', 'backbone', 'underscore', 'app', 'models/TreeCollection', 'views/packageView', 'views/fileView'],

+    function($, Backbone, _, App, TreeCollection, packageView, fileView) {

 

         // Renders whole PackageView

         return Backbone.View.extend({

@@ -7,20 +7,37 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack
             el: '#content',

 

             events: {

-                'click #add': 'addPackage',

-                'keypress #name': 'addOnEnter',

                 'click #show_active': 'filter'

             },

 

+            // <ul> holding the packages

+            packageUL: null,

+

             initialize: function() {

+                var self = this;

                 this.tree = new TreeCollection();

 

+                // When package is added we reload the data

+                App.vent.on('package:added', function() {

+                    console.log('Package tree caught, package:added event');

+                    self.tree.fetch();

+                });

+

             },

 

             init: function() {

                 var self = this;

+

+                // TODO: put in separated function

+                // TODO: order of elements?

+                // Init the tree and callback for package added

                 this.tree.fetch({success: function() {

                     self.render();

+                    self.tree.get('packages').on('add', function(pack) {

+                        console.log('Package ' + pack.get('pid') +' added to tree');

+                        self.appendPackage(pack);

+

+                    })

                 }});

             },

 

@@ -29,61 +46,37 @@ define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/pack
                     files = this.tree.get('files'),

                     el = this.$('#dashboard');

 

-            /*    el.empty();

-                el.append($('<span>Root: ' + this.tree.get('root').get('name') + ' </span>'));

-                el.append($('<input id="name" type="text" size="20">'));

-                el.append($('<a id="add" href="#"> Add</a><br>'));*/

+                el.empty();

 

-                var ul = $('<ul></ul>');

-                packs.each(function(pack) {

-                    ul.append(new packageView({model: pack}).render().el);

-                });

+                this.packageUL = $('<ul></ul>');

+                packs.each(_.bind(this.appendPackage, this));

 

-                el.append(ul);

+                el.append(this.packageUL);

                 el.append($('<br> Files: ' + files.size() + '<br>'));

 

-                ul = $('<ul></ul>');

+                var ul = $('<ul></ul>');

                 files.each(function(file) {

                     ul.append(new fileView({model: file}).render().el);

                 });

 

                 el.append(ul);

-                $('#name').focus();

 

                 return this;

             },

 

-            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($('#name').val()),

-                        links: JSON.stringify(['http://download.pyload.org/random.bin', 'invalid link'])

-                    },

-                    success: function() {

-                        self.tree.fetch({success: function() {

-                            self.render();

-                        }});

-                    }

-                };

-

-                $.ajax('api/addPackage', settings);

-                $('#name').val('');

+            // TODO sorting ?!

+            // Append a package to the list

+            appendPackage: function(pack) {

+                this.packageUL.append(new packageView({model: pack}).render().el);

             },

 

             toggle: false,

 

             filter: function(e) {

                 var self = this;

-                this.tree.get('packages').each(function(item){

-                    if(!self.toggle)

-                       item.trigger('filter:added');

+                this.tree.get('packages').each(function(item) {

+                    if (!self.toggle)

+                        item.trigger('filter:added');

                     else

                         item.trigger('filter:removed');