new package ui for webif

1 files changed, 205 insertions, 0 deletions

diff --git a/module/web/templates/default/package_ui.js b/module/web/templates/default/package_ui.js
new file mode 100644
index 000000000..a63a22aef
--- /dev/null
+++ b/module/web/templates/default/package_ui.js
@@ -0,0 +1,205 @@
+//{% load i18n %}
+var load; // populate later
+
+function indicateLoad() {
+    //$("load-indicator").reveal();
+    load.start("opacity", 1)
+}
+
+function indicateFinish() {
+    load.start("opacity", 0)
+}
+
+var PackageUI = new Class({
+    initialize: function(url) {
+        this.url = url;
+        this.packages = [];
+        this.parsePackages();
+
+        this.sorts = new Sortables($("package-list"), {
+            constrain: false,
+            clone: true,
+            revert: true,
+            opacity: 0.4,
+            onStart: this.startSort,
+            onComplete: this.saveSort.bind(this)
+        });
+    },
+
+    parsePackages: function() {
+        $("package-list").getChildren("li").each(function(ele) {
+            var id = ele.getFirst().get("id").match(/[0-9]+/);
+            this.packages.push(new Package(this, id, ele))
+        }.bind(this))
+    },
+
+    loadPackages: function() {
+
+    },
+
+    startSort: function(ele, copy) {
+    },
+
+    saveSort: function(ele, copy) {
+        var order = [];
+        this.sorts.serialize(function(ele,pos){
+            if (ele.retrieve("order") != pos){
+                order.push(ele.retrieve("pid")+"|"+pos);
+                ele.store("order", pos);
+            }
+
+        });
+        if (order.length > 0){
+            indicateLoad();
+            new Request.JSON({
+                method: 'get',
+                url: '/json/package_order/' + order[0],
+                onSuccess: indicateFinish,
+                onFailure: indicateFinish
+            }).send();
+        }
+    }
+
+});
+
+var Package = new Class({
+    initialize: function(ui, id, ele, data) {
+        this.ui = ui;
+        this.id = id;
+        this.linksLoaded = false;
+
+        if (!ele) {
+            this.createElement(data);
+        } else {
+            this.ele = ele;
+            this.order = ele.getElements("div.order")[0].get("html");
+            this.ele.store("order", this.order);
+            this.ele.store("pid", this.id);
+            this.parseElement();
+        }
+    },
+
+    createElement: function() {
+        alert("create")
+    },
+
+    parseElement: function() {
+        var imgs = this.ele.getElements('img');
+
+        imgs[0].addEvent('click', this.deletePackage.bind(this));
+
+        imgs[1].addEvent('click', this.restartPackage.bind(this));
+
+        this.ele.getElement('.packagename').addEvent('click', this.toggle.bind(this));
+
+    },
+
+    loadLinks: function() {
+        indicateLoad();
+        new Request.JSON({
+            method: 'get',
+            url: '/json/package/' + this.id,
+            onSuccess: this.createLinks.bind(this),
+            onFailure: indicateFinish
+        }).send();
+    },
+
+    createLinks: function(data) {
+        var ul = $("sort_children_{id}".substitute({"id": this.id}));
+        ul.erase("html");
+        data.links.each(function(link){
+            var li = new Element("li",{
+                "style": {
+                    "margin-left": 0
+                }
+            });
+
+            var html = "<span class='child_status'><img src='/media/default/img/{icon}' style='width: 12px; height:12px;'/></span>\n".substitute({"icon": link.icon});
+            html += "<span style='font-size: 15px'>{name}</span><br /><div class='child_secrow'>".substitute({"name": link.name});
+            html += "<span class='child_status'>{statusmsg}</span>{error}&nbsp;".substitute({"statusmsg": link.statusmsg, "error":link.error});
+            html += "<span class='child_status'>{format_size}</span>".substitute({"format_size": link.format_size});
+            html += "<span class='child_status'>{plugin}</span>&nbsp;&nbsp;".substitute({"plugin": link.plugin});
+            html += "<img title='{% trans "Delete Link" %}' style='cursor: pointer;' width='10px' height='10px' src='{{ MEDIA_URL }}img/delete.png' />&nbsp;&nbsp;"
+            html += "<img title='{% trans "Restart Link" %}' style='cursor: pointer;margin-left: -4px' width='10px' height='10px' src='{{ MEDIA_URL }}img/arrow_refresh.png' /></div>"
+
+            var div = new Element("div",{
+                "id": "file_"+link.id,
+                "class": "child",
+                "html": html
+            });
+
+            li.adopt(div);
+            ul.adopt(li);
+        });
+        this.registerLinkEvents();
+        this.linksLoaded = true;
+        indicateFinish();
+        this.toggle();
+    },
+
+    registerLinkEvents: function() {
+        this.ele.getElements('.child').each(function(child){
+            var lid = child.get('id').match(/[0-9]+/);
+            var imgs = child.getElements('.child_secrow img');
+            imgs[0].addEvent('click', function(e){
+                new Request({
+                    method: 'get',
+                    url: '/json/remove_link/'+this,
+                    onSuccess: function(){
+                        $('file_'+this).nix()
+                    }.bind(this)
+                }).send();
+            }.bind(lid));
+
+            imgs[1].addEvent('click', function(e){
+                new Request({
+                    method: 'get',
+                    url: '/json/restart_link/'+this,
+                    onSuccess: function(){
+                        $('file_'+this).nix()
+                    }.bind(this)
+                }).send();
+            }.bind(lid));
+        });
+    },
+
+    toggle: function() {
+        var child = this.ele.getElement('.children');
+        if (child.getStyle('display') == "block") {
+            child.dissolve();
+        } else {
+            if (!this.linksLoaded) {
+                this.loadLinks();
+            } else {
+                child.reveal();
+            }
+        }
+    },
+
+    deletePackage: function(event) {
+        indicateLoad();
+        new Request({
+            method: 'get',
+            url: '/json/remove_package/'+this.id,
+            onSuccess: function(){
+                this.ele.nix();
+                indicateFinish();
+            }.bind(this)
+        }).send();
+        event.stop();
+    },
+
+    restartPackage: function(event) {
+        indicateLoad();
+        new Request({
+            method: 'get',
+            url: '/json/restart_package/'+this.id,
+            onSuccess: function(){
+                this.ele.nix();
+                indicateFinish();
+            }.bind(this)
+        }).send();
+        event.stop();
+    }
+
+});
\ No newline at end of file