summaryrefslogtreecommitdiffstats
path: root/module/web/templates
diff options
context:
space:
mode:
authorGravatar RaNaN <Mast3rRaNaN@hotmail.de> 2010-09-13 19:31:10 +0200
committerGravatar RaNaN <Mast3rRaNaN@hotmail.de> 2010-09-13 19:31:10 +0200
commite7ea8a420d01c927c17cf2db692cb0355aa87b95 (patch)
treefffd2c397b2fc300ca8086785d0898442e325531 /module/web/templates
parentcouldn't connect to host fix (diff)
downloadpyload-e7ea8a420d01c927c17cf2db692cb0355aa87b95.tar.xz
new package ui for webif
Diffstat (limited to 'module/web/templates')
-rw-r--r--module/web/templates/default/base.html10
-rw-r--r--module/web/templates/default/collector.html131
-rw-r--r--module/web/templates/default/package_ui.js205
-rw-r--r--module/web/templates/default/queue.html119
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 }}
&nbsp;&nbsp;
- <img title="{% trans "Delete Package" %}" width="12px" height="12px" src="{{ MEDIA_URL }}img/delete.png" />
- &nbsp;&nbsp;
- <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" />
&nbsp;&nbsp;
- <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}}&nbsp;
- <span class="child_status">{{ child.format_size }}</span>
- <span class="child_status">{{ child.plugin }}</span>
- <span class="child_status">{% trans "Folder:" %} {{child.folder}}</span>
- &nbsp;&nbsp;
- <img title="{% trans "Delete Link" %}" style="cursor: pointer;" width="10px" height="10px" src="{{ MEDIA_URL }}img/delete.png" />
- &nbsp;&nbsp;
- <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}&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
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 }}
&nbsp;&nbsp;
- <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" />
&nbsp;&nbsp;
- <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}}&nbsp;
- <span class="child_status">{{ child.format_size }}</span>
- <span class="child_status">{{ child.plugin }}</span>
- <span class="child_status">{% trans "Folder:" %} {{package.folder}}</span>
- &nbsp;&nbsp;
- <img title="{% trans "Delete Link" %}" style="cursor: pointer;" width="10px" height="10px" src="{{ MEDIA_URL }}img/delete.png" />
- &nbsp;&nbsp;
- <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