some functionality for the views

3 files changed, 145 insertions, 54 deletions

diff --git a/module/web/static/js/views/fileView.js b/module/web/static/js/views/fileView.js
new file mode 100644
index 000000000..7db8112c8
--- /dev/null
+++ b/module/web/static/js/views/fileView.js
@@ -0,0 +1,20 @@
+define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
+
+    // Renders single file item
+    return Backbone.View.extend({
+
+        tagName: 'li',
+        events: {
+
+        },
+
+        initialize: function() {
+        },
+
+        render: function() {
+            this.$el.html(this.model.get('name'));
+            return this;
+        }
+
+    });
+});
\ No newline at end of file
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
diff --git a/module/web/static/js/views/packageView.js b/module/web/static/js/views/packageView.js
new file mode 100644
index 000000000..a2e0abf31
--- /dev/null
+++ b/module/web/static/js/views/packageView.js
@@ -0,0 +1,45 @@
+define(['jquery', 'backbone', 'underscore', 'views/fileView'], function($, Backbone, _, fileView) {
+
+    // Renders a single package item
+    return Backbone.View.extend({
+
+        tagName: 'li',
+        events: {
+            'click .load': 'load',
+            'click .delete': 'delete'
+        },
+
+        initialize: function() {
+            this.model.on('change', this.render, this);
+            this.model.on('remove', this.unrender, this);
+        },
+
+        render: function() {
+            this.$el.html('Package ' + this.model.get('pid') + ': ' + this.model.get('name'));
+            this.$el.append($('<a class="load" href="#"> Load</a>'));
+            this.$el.append($('<a class="delete" href="#"> Delete</a>'));
+
+            if (this.model.isLoaded()) {
+                var ul = $('<ul></ul>');
+                this.model.get('files').each(function(file) {
+                    ul.append(new fileView({model: file}).render().el);
+                });
+                this.$el.append(ul);
+            }
+            return this;
+        },
+
+        unrender: function() {
+            this.$el.remove();
+        },
+
+        load: function() {
+            this.model.fetch();
+        },
+
+        delete: function() {
+            this.model.destroy();
+        }
+
+    });
+});
\ No newline at end of file