diff options
author | RaNaN <Mast3rRaNaN@hotmail.de> | 2010-09-13 19:31:10 +0200 |
---|---|---|
committer | RaNaN <Mast3rRaNaN@hotmail.de> | 2010-09-13 19:31:10 +0200 |
commit | e7ea8a420d01c927c17cf2db692cb0355aa87b95 (patch) | |
tree | fffd2c397b2fc300ca8086785d0898442e325531 /module/web/templates | |
parent | couldn't connect to host fix (diff) | |
download | pyload-e7ea8a420d01c927c17cf2db692cb0355aa87b95.tar.xz |
new package ui for webif
Diffstat (limited to 'module/web/templates')
-rw-r--r-- | module/web/templates/default/base.html | 10 | ||||
-rw-r--r-- | module/web/templates/default/collector.html | 131 | ||||
-rw-r--r-- | module/web/templates/default/package_ui.js | 205 | ||||
-rw-r--r-- | module/web/templates/default/queue.html | 119 |
4 files changed, 255 insertions, 210 deletions
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html index fd18aee84..2ed21d1fc 100644 --- a/module/web/templates/default/base.html +++ b/module/web/templates/default/base.html @@ -7,21 +7,17 @@ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/default.css"/>
-<!--<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/jquery-ui-1.7.2.custom.css">-->
+
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}css/window.css"/>
-<!--<script src="{{ MEDIA_URL }}js/jquery-1.3.2.min.js"></script>-->
-<script type="text/javascript" src="{{ MEDIA_URL }}js/sprintf.js"></script>
+
<script type="text/javascript" src="{{ MEDIA_URL }}js/funktions.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="{{ MEDIA_URL }}js/mootools-1.2.4.2-more.js"></script>
-<!--<script src="{{ MEDIA_URL }}js/jquery.progressbar.js"></script>-->
-<!--<script src="{{ MEDIA_URL }}js/jquery.form.js"></script>-->
-
<title>{% block title %}pyLoad {% trans "Webinterface" %}{% endblock %}</title>
<script type="text/javascript">
-var add_bg, add_box, cap_box, cap_info
+var add_bg, add_box, cap_box, cap_info;
document.addEvent("domready", function(){
add_bg = new Fx.Tween($('add_bg'));
diff --git a/module/web/templates/default/collector.html b/module/web/templates/default/collector.html index 613fb824b..0143e13ec 100644 --- a/module/web/templates/default/collector.html +++ b/module/web/templates/default/collector.html @@ -2,82 +2,14 @@ {% load i18n %}
{% block head %}
+
+<script type="text/javascript" src="/package_ui.js"></script>
+
<script type="text/javascript">
document.addEvent("domready", function(){
- $$('.package').each(function(item){
- id = item.get('id').match(/[0-9]+/)
-
- imgs = item.getElements('img');
- imgs[0].addEvent('click', function(e){
- new Request({
- method: 'get',
- url: '/json/remove_package/'+this,
- onSuccess: function(){
- $('package_'+this).nix()
- }.bind(this)
- }).send();
- e.stop();
- }.bind(id));
-
- imgs[1].addEvent('click', function(e){
- new Request({
- method: 'get',
- url: '/json/restart_package/'+this,
- onSuccess: function(){
- $('package_'+this).nix()
- }.bind(this)
- }).send();
- e.stop();
- }.bind(id));
-
- imgs[2].addEvent('click', function(e){
- new Request({
- method: 'get',
- url: '/json/push_to_queue/'+this,
- onSuccess: function(){
- $('package_'+this).nix()
- }.bind(this)
- }).send();
- e.stop();
- }.bind(id));
-
- item.getElement('.packagename').addEvent('click', function(){
-
- child = item.getElement('.children')
- if (child.getStyle('display') == "block"){
- child.dissolve();
- }else{
- child.reveal();
- }
- }.bind(item));
-
-
- item.getElements('.child').each(function(child){
- id = child.get('id').match(/[0-9]+/)
- 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(id));
-
- imgs[1].addEvent('click', function(e){
- new Request({
- method: 'get',
- url: '/json/restart_link/'+this,
- onSuccess: function(){
- $('file_'+this).nix()
- }.bind(this)
- }).send();
- }.bind(id));
- });
-
- })
+ load = new Fx.Tween($("load-indicator"), {link: "cancel"});
+ var pUI = new PackageUI("url");
});
</script>
{% endblock %}
@@ -106,47 +38,30 @@ document.addEvent("domready", function(){ </li>{% endblock %}
{% block content %}
-{% for id,package in content %}
+<div id="load-indicator" style="opacity: 0; float: right">
+ <img src="{{ MEDIA_URL }}img/ajax-loader.gif" alt="" style="padding-right: 5px"/>
+ {% trans "loading" %}
+</div>
+
+<ul id="package-list" style="list-style: none; padding-left: 0; margin-top: -10px;">
+{% for id, package in content %}
+ <li>
<div id="package_{{id}}" class="package">
- <div class="packagename" style="cursor: pointer;">
+ <div class="order" style="display: none;">{{ package.order }}</div>
+ <div class="packagename" style="cursor: move;">
{{ package.name }}
- <img title="{% trans "Delete Package" %}" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />
-
- <img title="{% trans "Reset Package" %}" style="margin-left: -10px" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
+ <img title="{% trans "Delete Package" %}" style="cursor: pointer" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />
- <img title="{% trans "Push Package to Queue" %}" style="margin-left: -10px" height="12px" src="{{ MEDIA_URL }}img/package_go.png" />
+ <img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
</div>
<div id="children_{{id}}" style="display: none;" class="children">
- {% for lid, child in package.links %}
- <div class="child" id="file_{{lid}}">
- <span class="child_status">
- <img src="/media/default/img/{{child.icon}}" style="width: 12px; height:12px;"/>
- </span>
- <span style="font-size: 15px">{{ child.name }}</span><br />
- <div class="child_secrow">
- <span class="child_status">{{ child.statusmsg }}</span>{{child.error}}
- <span class="child_status">{{ child.format_size }}</span>
- <span class="child_status">{{ child.plugin }}</span>
- <span class="child_status">{% trans "Folder:" %} {{child.folder}}</span>
-
- <img title="{% trans "Delete Link" %}" style="cursor: pointer;" width="10px" height="10px" src="{{ MEDIA_URL }}img/delete.png" />
-
- <img title="{% trans "Restart Link" %}" style="cursor: pointer;margin-left: -4px" width="10px" height="10px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
- </div>
- </div>
- {% endfor %}
+ <span class="child_secrow">{% trans "Folder:" %} {{package.folder}} | {% trans "Password:"%} {{ package.password }} | {% trans "Priority:"%} {{ package.priority }}</span>
+ <ul id="sort_children_{{id}}" style="list-style: none; padding-left: 0">
+ </ul>
</div>
</div>
+ </li>
{% endfor %}
-<!--table >
- <tr>
- <td colspan="3"><h1>!Paketname!</h1></td>
- </tr>
- <tr>
- <td><h2>test.png</h2></td>
- <td>loading</td>
- <td><a href="/"><img id="button" src="/img/button-delete.gif" alt="delete" /></a><a href="/"><img id="button" src="/img/button-unpause.gif" alt="unpause" /></a></td>
- </tr>
-</table-->
-{% endblock %}
\ No newline at end of file +</ul>
+{% endblock %}
\ No newline at end of file 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} ".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> ".substitute({"plugin": link.plugin}); + html += "<img title='{% trans "Delete Link" %}' style='cursor: pointer;' width='10px' height='10px' src='{{ MEDIA_URL }}img/delete.png' /> " + 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 diff --git a/module/web/templates/default/queue.html b/module/web/templates/default/queue.html index 0c6c021f5..09b2a4aec 100644 --- a/module/web/templates/default/queue.html +++ b/module/web/templates/default/queue.html @@ -2,72 +2,14 @@ {% load i18n %}
{% block head %}
+
+<script type="text/javascript" src="/package_ui.js"></script>
+
<script type="text/javascript">
document.addEvent("domready", function(){
- $$('.package').each(function(item){
- id = item.get('id').match(/[0-9]+/)
-
- imgs = item.getElements('img');
- imgs[0].addEvent('click', function(e){
- new Request({
- method: 'get',
- url: '/json/remove_package/'+this,
- onSuccess: function(){
- $('package_'+this).nix()
- }.bind(this)
- }).send();
- e.stop();
- }.bind(id));
-
- imgs[1].addEvent('click', function(e){
- new Request({
- method: 'get',
- url: '/json/restart_package/'+this,
- onSuccess: function(){
- $('package_'+this).nix()
- }.bind(this)
- }).send();
- e.stop();
- }.bind(id));
-
-
- item.getElement('.packagename').addEvent('click', function(){
-
- child = item.getElement('.children')
- if (child.getStyle('display') == "block"){
- child.dissolve();
- }else{
- child.reveal();
- }
- }.bind(item));
-
-
- item.getElements('.child').each(function(child){
- id = child.get('id').match(/[0-9]+/)
- 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(id));
-
- imgs[1].addEvent('click', function(e){
- new Request({
- method: 'get',
- url: '/json/restart_link/'+this,
- onSuccess: function(){
- $('file_'+this).nix()
- }.bind(this)
- }).send();
- }.bind(id));
- });
-
- })
+ load = new Fx.Tween($("load-indicator"), {link: "cancel"});
+ var pUI = new PackageUI("url");
});
</script>
{% endblock %}
@@ -93,48 +35,35 @@ document.addEvent("domready", function(){ </li>
<li class="right">
<a href="/settings/" class="action index" accesskey="x" rel="nofollow"><img src="{{ MEDIA_URL }}img/head-menu-config.png" alt="" />{% trans "Config" %}</a>
-</li>{% endblock %}
+</li>
+{% endblock %}
+
{% block content %}
+<div id="load-indicator" style="opacity: 0; float: right">
+ <img src="{{ MEDIA_URL }}img/ajax-loader.gif" alt="" style="padding-right: 5px"/>
+ {% trans "loading" %}
+</div>
+
+<ul id="package-list" style="list-style: none; padding-left: 0; margin-top: -10px;">
{% for id, package in content %}
+ <li>
<div id="package_{{id}}" class="package">
- <div class="packagename" style="cursor: pointer;">
+ <div class="order" style="display: none;">{{ package.order }}</div>
+ <div class="packagename" style="cursor: move;">
{{ package.name }}
- <img title="{% trans "Delete Package" %}" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />
+ <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" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
+ <img title="{% trans "Restart Package" %}" style="margin-left: -10px; cursor: pointer" height="12px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
</div>
<div id="children_{{id}}" style="display: none;" class="children">
- {% for lid, child in package.links %}
- <div class="child" id="file_{{lid}}">
- <span class="child_status">
- <img src="/media/default/img/{{child.icon}}" style="width: 12px; height:12px;"/>
- </span>
- <span style="font-size: 15px">{{ child.name }}</span><br />
- <div class="child_secrow">
- <span class="child_status">{{ child.statusmsg }}</span>{{child.error}}
- <span class="child_status">{{ child.format_size }}</span>
- <span class="child_status">{{ child.plugin }}</span>
- <span class="child_status">{% trans "Folder:" %} {{package.folder}}</span>
-
- <img title="{% trans "Delete Link" %}" style="cursor: pointer;" width="10px" height="10px" src="{{ MEDIA_URL }}img/delete.png" />
-
- <img title="{% trans "Restart Link" %}" style="cursor: pointer;margin-left: -4px" width="10px" height="10px" src="{{ MEDIA_URL }}img/arrow_refresh.png" />
- </div>
- </div>
- {% endfor %}
+ <span class="child_secrow">{% trans "Folder:" %} {{package.folder}} | {% trans "Password:"%} {{ package.password }} | {% trans "Priority:"%} {{ package.priority }}</span>
+ <ul id="sort_children_{{id}}" style="list-style: none; padding-left: 0">
+ </ul>
</div>
</div>
+ </li>
{% endfor %}
-<!--table >
- <tr>
- <td colspan="3"><h1>!Paketname!</h1></td>
- </tr>
- <tr>
- <td><h2>test.png</h2></td>
- <td>loading</td>
- <td><a href="/"><img id="button" src="/img/button-delete.gif" alt="delete" /></a><a href="/"><img id="button" src="/img/button-unpause.gif" alt="unpause" /></a></td>
- </tr>
-</table-->
+</ul>
{% endblock %}
\ No newline at end of file |