some functionality for the views

5 files changed, 208 insertions, 94 deletions

diff --git a/module/web/static/js/collections/PackageList.js b/module/web/static/js/collections/PackageList.js
index cb8abe22f..a36f8bcdc 100644
--- a/module/web/static/js/collections/PackageList.js
+++ b/module/web/static/js/collections/PackageList.js
@@ -9,7 +9,6 @@ define(['jquery', 'backbone', 'underscore', 'models/Package'], function($, Backb
         },
 
         initialize: function() {
-
         }
 
     });
diff --git a/module/web/static/js/models/Package.js b/module/web/static/js/models/Package.js
index e5b0dc5a7..5a2940c66 100644
--- a/module/web/static/js/models/Package.js
+++ b/module/web/static/js/models/Package.js
@@ -1,52 +1,76 @@
-define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
+define(['jquery', 'backbone', 'underscore', 'collections/FileList', 'require'],
+    function($, Backbone, _, FileList, require) {
 
-    return Backbone.Model.extend({
+        return Backbone.Model.extend({
 
-        idAttribute: 'pid',
+            idAttribute: 'pid',
 
-        defaults: {
-            pid: -1,
-            name : null,
-            folder: "",
-            root: -1,
-            owner: -1,
-            site: "",
-            comment: "",
-            password: "",
-            added: -1,
-            status: -1,
-            packageorder: -1,
-            stats: null,
-            fids: null,
-            pids: null,
-            files: null, // Collection
-            packs: null // Collection
-        },
+            defaults: {
+                pid: -1,
+                name: null,
+                folder: "",
+                root: -1,
+                owner: -1,
+                site: "",
+                comment: "",
+                password: "",
+                added: -1,
+                status: -1,
+                packageorder: -1,
+                stats: null,
+                fids: null,
+                pids: null,
+                files: null, // Collection
+                packs: null // Collection
+            },
 
-        // Model Constructor
-        initialize: function() {
+            // Model Constructor
+            initialize: function() {
+            },
 
-        },
+            // Changes url + method and delegates call to super class
+            fetch: function(options) {
+                options || (options = {});
+                options.url = 'api/getFileTree/' + this.get('pid') + '/false';
+                options.type = "post";
 
-        // Changes url + method and delegates call to super class
-        fetch: function(options) {
-            options || (options = {});
-            options.url = 'api/getPackageInfo/' + this.get('pid');
-            options.type = "post";
+                return Backbone.Model.prototype.fetch.call(this, options);
+            },
 
-            return Backbone.Model.prototype.fetch.call(options);
+            save: function(options) {
+                // TODO
+            },
 
-        },
+            destroy: function(options) {
+                options || (options = {});
+                // TODO: as post data
+                options.url = 'api/deletePackages/[' + this.get('pid') + ']';
+                options.type = "post";
 
-        save: function(options) {
-            // TODO
-        },
+                return Backbone.Model.prototype.destroy.call(this, options);
+            },
 
-        // Any time a model attribute is set, this method is called
-        validate: function(attrs) {
+            parse: function(resp, xhr) {
+                // Package is loaded from tree collection
+                if (_.has(resp, 'root')) {
+                    resp.root.files = new FileList(_.values(resp.files));
+                    // circular dependencies needs to be avoided
+                    var PackageList = require('collections/PackageList');
+                    resp.root.packs = new PackageList(_.values(resp.packages));
+                    return resp.root;
+                }
+                return Backbone.model.prototype.fetch.call(this, resp, xhr);
+            },
 
-        }
+            // Package data is complete when it contains collection for containing files or packs
+            isLoaded: function() {
+                return this.has('files');
+            },
 
-    });
+            // Any time a model attribute is set, this method is called
+            validate: function(attrs) {
 
-});
\ No newline at end of file
+            }
+
+        });
+    });
\ No newline at end of file
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