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 }}
+ <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" />
<img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
+
+ <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} ".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 }}
+ <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" />
<img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
+
+ <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