From 9cce347134cffb8e3e920d94768306c2156dddee Mon Sep 17 00:00:00 2001 From: RaNaN Date: Wed, 13 Jan 2010 21:23:05 +0100 Subject: some webinterface improvements, closed #40 --- module/web/templates/default/base.html | 15 ++++++++----- module/web/templates/default/home.html | 38 +++++++++++++++++++++++++------- module/web/templates/default/window.html | 5 +++-- 3 files changed, 42 insertions(+), 16 deletions(-) (limited to 'module/web/templates') diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html index e4d11ce34..0cebeb5d8 100644 --- a/module/web/templates/default/base.html +++ b/module/web/templates/default/base.html @@ -25,10 +25,11 @@ document.addEvent("domready", function(){ add_bg = new Fx.Tween($('add_bg')); add_box = new Fx.Tween($('add_box')); - - new Form.Request("add_form", $('none_existent'), { onSuccess: function(){ + + $('add_form').onsubmit=function() { + $('add_form').target = 'upload_target'; //'upload_target' is the name of the iframe out(); - }}); + } $('add_reset').addEvent('click', function(){ out(); @@ -37,6 +38,8 @@ document.addEvent("domready", function(){ var jsonStatus = new Request.JSON({ url: "json/status", onSuccess: LoadJsonToContent, + secure: false, + async: true, initialDelay: 0, delay: 4000, limit: 30000 @@ -54,9 +57,9 @@ document.addEvent("domready", function(){ function LoadJsonToContent(data) { - $("speed").textContent = Math.round(data.speed*100)/100; - $("aktiv").textContent = data.queue; - $("queue").textContent = data.total; + $("speed").set('text', Math.round(data.speed*100)/100); + $("aktiv").set('text', data.queue); + $("queue").set('text', data.total); } function show(){ add_bg.set('opacity', 0); diff --git a/module/web/templates/default/home.html b/module/web/templates/default/home.html index 02681a23d..4d499f6fe 100644 --- a/module/web/templates/default/home.html +++ b/module/web/templates/default/home.html @@ -19,6 +19,8 @@ var EntryManager = new Class({ initialize: function(){ this.json = new Request.JSON({ url: "json/links", + secure: false, + async: true, onSuccess: this.update.bind(this), initialDelay: 0, delay: 2500, @@ -59,8 +61,8 @@ var EntryManager = new Class({ },data).each(function(id){ index = this.ids.indexOf(id); this.entries[index].remove(); - this.entries = this.entries.remove(index); - this.ids = this.ids.remove(index); + this.entries = this.entries.filter(function(item){return item.id != this},id); + this.ids = this.ids.erase(id) }, this); data.links.each(function(link, i){ @@ -97,6 +99,7 @@ var LinkEntry = new Class({ info: $("link_{id}_info".substitute({id: this.id})), kbleft: $("link_{id}_kbleft".substitute({id: this.id})), percent: $("link_{id}_percent".substitute({id: this.id})), + remove: $("link_{id}_remove".substitute({id: this.id})), pgbTr: $("link_{id}_pgb_tr".substitute({id: this.id})), pgb: $("link_{id}_pgb".substitute({id: this.id})) } @@ -104,7 +107,7 @@ var LinkEntry = new Class({ }, insert: function(item){ try{ - info = SecToRightTime(item.eta)+' @ '+Math.round(item.speed*100)/100+' kb/s' ; + info = SecToRightTime(item.eta) +' @ '+ Math.round(item.speed*100)/100+' kb/s' ; this.elements = { tr: new Element('tr', { @@ -125,9 +128,20 @@ var LinkEntry = new Class({ kbleft: new Element('td', { 'html': HumanFileSize(item.size) }), - percent: new Element('td', { + percent: new Element('font', { 'html': item.percent+ '% / '+ HumanFileSize(item.size-item.kbleft) }), + remove: new Element('img',{ + 'html': '', + 'src': 'media/default/img/control_cancel.png', + 'styles':{ + 'vertical-align': 'middle', + 'margin-right': '-20px', + 'margin-left': '5px', + 'margin-top': '-2px', + 'cursor': 'pointer' + } + }), pgbTr: new Element('tr', { 'html':'' }), @@ -136,12 +150,12 @@ var LinkEntry = new Class({ 'styles':{ 'height': '4px', 'width': item.percent+'%', - 'background-color': '#ddd' + 'background-color': '#ddd', } }) } - this.elements.tr.adopt(this.elements.name,this.elements.status,this.elements.info,this.elements.kbleft,this.elements.percent); + this.elements.tr.adopt(this.elements.name,this.elements.status,this.elements.info,this.elements.kbleft,new Element('td').adopt(this.elements.percent,this.elements.remove)); this.elements.pgbTr.adopt(new Element('td',{'colspan':5}).adopt(this.elements.pgb)); this.initEffects(); }catch(e){ @@ -149,9 +163,14 @@ var LinkEntry = new Class({ } }, initEffects: function(){ - this.bar = new Fx.Morph(this.elements.pgb, {unit: '%', duration: 3000, link: 'chain', fps:30}); + this.bar = new Fx.Morph(this.elements.pgb, {unit: '%', duration: 5000, link: 'link', fps:30}); this.fade = new Fx.Tween(this.elements.tr); this.fadeBar = new Fx.Tween(this.elements.pgbTr); + + this.elements.remove.addEvent('click', function(){ + new Request({method: 'get', url: 'json/remove_link/'+this.id}).send(); + }.bind(this)); + }, update: function(item){ this.elements.name.set('text', item.name); @@ -197,7 +216,10 @@ Active Downloads {{ link.status }} {{ link.info }} {{ link.size }} - {{ link.percent }}% / {{ link.kbleft }} + + {{ link.percent }}% /{{ link.kbleft }} + + diff --git a/module/web/templates/default/window.html b/module/web/templates/default/window.html index daf305892..5f2dc594a 100644 --- a/module/web/templates/default/window.html +++ b/module/web/templates/default/window.html @@ -1,9 +1,10 @@ +
-
+

Add Package

Paste your links or upload a container.