From 71467f2866e96cdbe911cd9996305b7e83eef2a2 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Tue, 14 Sep 2010 14:07:49 +0200
Subject: link ordering for webif

---
 module/web/templates/default/collector.html |  7 ++-
 module/web/templates/default/package_ui.js  | 73 ++++++++++++++++++++++++++++-
 module/web/templates/default/queue.html     |  7 ++-
 3 files changed, 83 insertions(+), 4 deletions(-)

(limited to 'module/web/templates')

diff --git a/module/web/templates/default/collector.html b/module/web/templates/default/collector.html
index 0143e13ec..630eddc51 100644
--- a/module/web/templates/default/collector.html
+++ b/module/web/templates/default/collector.html
@@ -9,7 +9,7 @@
 
 document.addEvent("domready", function(){
     load = new Fx.Tween($("load-indicator"), {link: "cancel"});
-    var pUI = new PackageUI("url");
+    var pUI = new PackageUI("url", 0);
 });
 </script>
 {% endblock %}
@@ -48,12 +48,17 @@ document.addEvent("domready", function(){
     <li>
 <div id="package_{{id}}" class="package">
     <div class="order" style="display: none;">{{ package.order }}</div>
+
     <div class="packagename" style="cursor: move;">
         {{ package.name }}
         &nbsp;&nbsp;
+        <span class="buttons" style="opacity:0; cursor: default">
         <img title="{% trans "Delete Package" %}" style="cursor: pointer" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />
         &nbsp;&nbsp;
         <img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
+        &nbsp;&nbsp;
+        <img title="{% trans "Move Package to Queue" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/package_go.png" />
+        </span>
     </div>
     <div id="children_{{id}}" style="display: none;" class="children">
     <span class="child_secrow">{% trans "Folder:" %} {{package.folder}} | {% trans "Password:"%} {{ package.password }} | {% trans "Priority:"%} {{ package.priority }}</span>
diff --git a/module/web/templates/default/package_ui.js b/module/web/templates/default/package_ui.js
index a63a22aef..5f39710c1 100644
--- a/module/web/templates/default/package_ui.js
+++ b/module/web/templates/default/package_ui.js
@@ -11,8 +11,9 @@ function indicateFinish() {
 }
 
 var PackageUI = new Class({
-    initialize: function(url) {
+    initialize: function(url, type) {
         this.url = url;
+        this.type = type;
         this.packages = [];
         this.parsePackages();
 
@@ -21,6 +22,7 @@ var PackageUI = new Class({
             clone: true,
             revert: true,
             opacity: 0.4,
+            handle: ".packagename",
             onStart: this.startSort,
             onComplete: this.saveSort.bind(this)
         });
@@ -77,6 +79,20 @@ var Package = new Class({
             this.ele.store("pid", this.id);
             this.parseElement();
         }
+
+        var pname = this.ele.getElements(".packagename")[0]; 
+        this.buttons = new Fx.Tween(this.ele.getElements(".buttons")[0], {link: "cancel"});
+        this.buttons.set("opacity", 0);
+
+        pname.addEvent("mouseenter", function(e){
+            this.buttons.start("opacity", 1)
+        }.bind(this));
+
+        pname.addEvent("mouseleave", function(e){
+            this.buttons.start("opacity", 0)
+        }.bind(this));
+
+
     },
 
     createElement: function() {
@@ -90,6 +106,8 @@ var Package = new Class({
 
         imgs[1].addEvent('click', this.restartPackage.bind(this));
 
+        imgs[2].addEvent('click', this.movePackage.bind(this));
+
         this.ele.getElement('.packagename').addEvent('click', this.toggle.bind(this));
 
     },
@@ -114,7 +132,7 @@ var Package = new Class({
                 }
             });
 
-            var html = "<span class='child_status'><img src='/media/default/img/{icon}' style='width: 12px; height:12px;'/></span>\n".substitute({"icon": link.icon});
+            var html = "<span style='cursor: move' class='child_status sorthandle'><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});
@@ -128,9 +146,20 @@ var Package = new Class({
                 "html": html
             });
 
+            li.store("order", link.order);
+            li.store("lid", link.id);
+
             li.adopt(div);
             ul.adopt(li);
         });
+        this.sorts = new Sortables(ul, {
+            constrain: false,
+            clone: true,
+            revert: true,
+            opacity: 0.4,
+            handle: ".sorthandle",
+            onComplete: this.saveSort.bind(this)
+        });
         this.registerLinkEvents();
         this.linksLoaded = true;
         indicateFinish();
@@ -194,12 +223,52 @@ var Package = new Class({
         new Request({
             method: 'get',
             url: '/json/restart_package/'+this.id,
+            onSuccess: function(){
+                var child = this.ele.getElement('.children');
+                if (child.getStyle('display') == "block") {
+                    child.dissolve();
+                }
+                var ul = $("sort_children_{id}".substitute({"id": this.id}));
+                ul.erase("html");
+                this.linksLoaded = false;
+                    
+                indicateFinish();
+            }.bind(this)
+        }).send();
+        event.stop();
+    },
+
+    movePackage: function(event){
+        indicateLoad();
+        new Request({
+            method: 'get',
+            url: '/json/move_package/'+((this.ui.type +1) % 2) +"/"+ this.id,
             onSuccess: function(){
                 this.ele.nix();
                 indicateFinish();
             }.bind(this)
         }).send();
         event.stop();
+    },
+
+    saveSort: function(ele, copy) {
+        var order = [];
+        this.sorts.serialize(function(ele,pos){
+            if (ele.retrieve("order") != pos){
+                order.push(ele.retrieve("lid")+"|"+pos);
+                ele.store("order", pos);
+            }
+
+        });
+        if (order.length > 0){
+            indicateLoad();
+            new Request.JSON({
+                method: 'get',
+                url: '/json/link_order/' + order[0],
+                onSuccess: indicateFinish,
+                onFailure: indicateFinish
+            }).send();
+        }
     }
 
 });
\ No newline at end of file
diff --git a/module/web/templates/default/queue.html b/module/web/templates/default/queue.html
index 09b2a4aec..2e8bf4b96 100644
--- a/module/web/templates/default/queue.html
+++ b/module/web/templates/default/queue.html
@@ -9,7 +9,7 @@
 
 document.addEvent("domready", function(){
     load = new Fx.Tween($("load-indicator"), {link: "cancel"});
-    var pUI = new PackageUI("url");
+    var pUI = new PackageUI("url",1);
 });
 </script>
 {% endblock %}
@@ -50,12 +50,17 @@ document.addEvent("domready", function(){
     <li>
 <div id="package_{{id}}" class="package">
     <div class="order" style="display: none;">{{ package.order }}</div>
+    
     <div class="packagename" style="cursor: move;">
         {{ package.name }}
         &nbsp;&nbsp;
+        <span class="buttons" style="opacity:0; cursor: default">
         <img title="{% trans "Delete Package" %}" style="cursor: pointer" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />
         &nbsp;&nbsp;
         <img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
+        &nbsp;&nbsp;
+        <img title="{% trans "Move Package to Collector" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/package_go.png" />
+        </span>
     </div>
     <div id="children_{{id}}" style="display: none;" class="children">
     <span class="child_secrow">{% trans "Folder:" %} {{package.folder}} | {% trans "Password:"%} {{ package.password }} | {% trans "Priority:"%} {{ package.priority }}</span>
-- 
cgit v1.2.3