1 files changed, 80 insertions, 54 deletions
diff --git a/module/web/static/js/views/packageTreeView.js b/module/web/static/js/views/packageTreeView.js
index 79527b394..91768ec04 100644
--- a/module/web/static/js/views/packageTreeView.js
+++ b/module/web/static/js/views/packageTreeView.js
@@ -1,54 +1,80 @@
-define(['jquery', 'backbone', 'underscore', 'models/TreeCollection'], function($, Backbone, _, TreeCollection){
-
-    // Renders whole PackageView
-    return Backbone.View.extend({
-
-        el: '#content',
-
-        events: {
-
-        },
-
-        initialize: function() {
-            _.bindAll(this, 'render');
-
-            this.tree = new TreeCollection();
-
-        },
-
-        init: function() {
-            var self = this;
-            this.tree.fetch({success: function(){
-                self.render();
-            }});
-        },
-
-
-        render: function() {
-
-            var packs = this.tree.get('packages'),
-                files = this.tree.get('files'),
-                html = 'Root: ' +  this.tree.get('root').get('name') + '<br>';
-
-            html += 'Packages: ' + packs.size();
-            html += '<br><ul>';
-
-            packs.each(function(pack){
-                html += '<li>'+ pack.get('pid') + pack.get('name') + '</li>';
-            });
-
-            html += '</ul><br> Files: ' + files.size() + '<br><ul>';
-            files.each(function(file){
-                html += '<li>'+ file.get('fid') + file.get('name') + '</li>';
-            });
-
-            html += '</ul>';
-
-
-            this.$el.html(html);
-
-            return this;
-        }
-
-    });
-});
-\ No newline at end of file
+define(['jquery', 'backbone', 'underscore', 'models/TreeCollection', 'views/packageView', 'views/fileView'],
+    function($, Backbone, _, TreeCollection, packageView, fileView) {
+
+        // Renders whole PackageView
+        return Backbone.View.extend({
+
+            el: '#content',
+
+            events: {
+                'click #add': 'addPackage',
+                'keypress #name': 'addOnEnter'
+            },
+
+            initialize: function() {
+                _.bindAll(this, 'render');
+
+                this.tree = new TreeCollection();
+
+            },
+
+            init: function() {
+                var self = this;
+                this.tree.fetch({success: function() {
+                    self.render();
+                }});
+            },
+
+            render: function() {
+
+                this.$el.html("<br>");
+
+                var packs = this.tree.get('packages'),
+                    files = this.tree.get('files');
+
+                this.$el.append($('<span>Root: ' + this.tree.get('root').get('name') + ' </span>'));
+                this.$el.append($('<input id="name" type="text" size="20">'));
+                this.$el.append($('<a id="add" href="#"> Add</a><br>'));
+
+                var ul = $('<ul></ul>');
+                packs.each(function(pack) {
+                    ul.append(new packageView({model: pack}).render().el);
+                });
+
+                this.$el.append(ul);
+                this.$el.append($('<br> Files: ' + files.size() + '<br>'));
+
+                ul = $('<ul></ul>');
+                files.each(function(file) {
+                    ul.append(new fileView({model: file}).render().el);
+                });
+
+                this.$el.append(ul);
+
+                return this;
+            },
+
+            addOnEnter: function(e) {
+                if (e.keyCode != 13) return;
+                this.addPackage(e);
+            },
+
+            addPackage: function() {
+                var self = this;
+                var settings = {
+                    data: {
+                        name: '"' + $('#name').val() + '"',
+                        links: '["some link"]'
+                    },
+                    success: function() {
+                        self.tree.fetch({success: function() {
+                            self.render();
+                        }});
+                    }
+                };
+
+                $.ajax('api/addPackage', settings);
+                $('#name').val('');
+            }
+        });
+    });
+\ No newline at end of file