From 556daf426cc0ec87c378f3754b4b3320a8fd697d Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Mon, 24 Dec 2012 12:53:22 +0100
Subject: connected link add dialog, improved tree rendering

---
 module/web/static/js/models/TreeCollection.js  |  4 +-
 module/web/static/js/views/linkGrabberModal.js | 31 +++++++++--
 module/web/static/js/views/packageTreeView.js  | 73 ++++++++++++--------------
 3 files changed, 64 insertions(+), 44 deletions(-)

(limited to 'module/web/static/js')

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');
 
-- 
cgit v1.2.3