From 9bff9c69d6983dc190c189647821e12d0f134883 Mon Sep 17 00:00:00 2001 From: RaNaN Date: Mon, 11 Jan 2010 22:16:31 +0100 Subject: finally and officially: webinterface home page working ;) --- module/web/templates/default/home.html | 195 +++++++++++++++++++++++++++------ 1 file changed, 163 insertions(+), 32 deletions(-) (limited to 'module/web/templates/default/home.html') diff --git a/module/web/templates/default/home.html b/module/web/templates/default/home.html index 96f3015d9..02681a23d 100644 --- a/module/web/templates/default/home.html +++ b/module/web/templates/default/home.html @@ -9,38 +9,167 @@ $("#aktiv_percent").text(parseInt($("#aktiv_percent").text)+1) setTimeout( UpdateLinks( SetInver, index+1 ), SetInver[index]*1000); }*/ -$(document).ready(function(){ - $.getJSON('/json/links', LinksToContent ); +var em; + +document.addEvent("domready", function(){ + em = new EntryManager(); }); -function LinksToContent(data) -{ - - $.each(data, function(i,item) - { - //$("#LinksAktiv").append(''+item.name+''+item.status+''+SecToRightTime(item.eta)+' @ '+Math.round(item.speed*100)/100+' kb/s'+HumanFileSize(item.size)+''+item.percent+'% / '+HumanFileSize(item.size-item.kbleft)+''); - //SetInver[i] = (item.size / 100 ) / item.speed ; - //window.setInterval( $("#aktiv_percent").text(parseInt($("#aktiv_percent").text)+1), ((item.size / 100 ) / item.speed)*100); - //$("#LinksAktiv").append('
 
'); - //$(".progress_bar").animate({ width: "100%"}, (item.size / item.speed)*1000, "linear" ); - //var width = (100/item.size)*(item.size-item.kbleft); - //alert(width); - //$(".link_"+item.id+"_pgb").animate({ width: +"%"}, /*(item.size / item.speed)*1000*/1500, "linear" ); - //$("#link_"+item.id+"_pgb").fadeIn(); - /*$("#link_"+item.id+"_pgb").progressBar(); - $("#link_"+item.id+"_pgb").progressBar('option' , 'width' , '100%'); - $("#link_"+item.id+"_pgb").progressBar('option' , 'showText' , true); - $("#link_"+item.id+"_pgb").progressBar('option' , 'textFormat' , 'percentage');*/ - $("#link_"+item.id+"_pgb").progressBar((100/item.size)*(item.size-item.kbleft)); - +var EntryManager = new Class({ + initialize: function(){ + this.json = new Request.JSON({ + url: "json/links", + onSuccess: this.update.bind(this), + initialDelay: 0, + delay: 2500, + limit: 30000 }); - //UpdateLinks(SetInver, 0); - setTimeout(function() - { - $.getJSON('/json/links', LinksToContent ); - }, 1000); -} + this.ids = [{% for link in content %} + {% if forloop.last %} + {{ link.id }} + {% else %} + {{ link.id }}, + {% endif %} + {% endfor %}]; + + this.entries = []; + this.container = $('LinksAktiv'); + + this.parseFromContent(); + + this.json.startTimer(); + }, + parseFromContent: function(){ + this.ids.each(function(id,index){ + entry = new LinkEntry(id) + entry.parse() + this.entries.push(entry) + }, this); + }, + update: function(data){ + + try{ + this.ids = this.entries.map(function(item){ + return item.id + }); + + this.ids.filter(function(id){ + return !this.ids.contains(id) + },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); + + data.links.each(function(link, i){ + if (this.ids.contains(link.id)){ + + index = this.ids.indexOf(link.id) + this.entries[index].update(link) + + }else{ + entry = new LinkEntry(link.id); + entry.insert(link); + this.entries.push(entry); + this.ids.push(link.id); + this.container.adopt(entry.elements.tr,entry.elements.pgbTr); + entry.fade.start('opacity', 1); + entry.fadeBar.start('opacity', 1); + + } + }, this) + }catch(e){alert(e)} + } +}) + + +var LinkEntry = new Class({ + initialize: function(id){ + this.id = id + }, + parse: function(){ + this.elements = { + tr: $("link_{id}".substitute({id: this.id})), + name: $("link_{id}_name".substitute({id: this.id})), + status: $("link_{id}_status".substitute({id: this.id})), + info: $("link_{id}_info".substitute({id: this.id})), + kbleft: $("link_{id}_kbleft".substitute({id: this.id})), + percent: $("link_{id}_percent".substitute({id: this.id})), + pgbTr: $("link_{id}_pgb_tr".substitute({id: this.id})), + pgb: $("link_{id}_pgb".substitute({id: this.id})) + } + this.initEffects(); + }, + insert: function(item){ + try{ + info = SecToRightTime(item.eta)+' @ '+Math.round(item.speed*100)/100+' kb/s' ; + + this.elements = { + tr: new Element('tr', { + 'html': '', + 'styles':{ + 'opacity': 0 + } + }), + name: new Element('td', { + 'html': item.name + }), + status: new Element('td', { + 'html': item.status + }), + info: new Element('td', { + 'html': info + }), + kbleft: new Element('td', { + 'html': HumanFileSize(item.size) + }), + percent: new Element('td', { + 'html': item.percent+ '% / '+ HumanFileSize(item.size-item.kbleft) + }), + pgbTr: new Element('tr', { + 'html':'' + }), + pgb: new Element('div', { + 'html': ' ', + 'styles':{ + 'height': '4px', + 'width': item.percent+'%', + 'background-color': '#ddd' + } + }) + } + + this.elements.tr.adopt(this.elements.name,this.elements.status,this.elements.info,this.elements.kbleft,this.elements.percent); + this.elements.pgbTr.adopt(new Element('td',{'colspan':5}).adopt(this.elements.pgb)); + this.initEffects(); + }catch(e){ + alert(e) + } + }, + initEffects: function(){ + this.bar = new Fx.Morph(this.elements.pgb, {unit: '%', duration: 3000, link: 'chain', fps:30}); + this.fade = new Fx.Tween(this.elements.tr); + this.fadeBar = new Fx.Tween(this.elements.pgbTr); + }, + update: function(item){ + this.elements.name.set('text', item.name); + this.elements.status.set('text', item.status); + this.elements.info.set('text', SecToRightTime(item.eta)+' @ '+Math.round(item.speed*100)/100+' kb/s'); + this.elements.kbleft.set('text', HumanFileSize(item.size)); + this.elements.percent.set('text', item.percent+ '% / '+ HumanFileSize(item.size-item.kbleft)); + this.bar.start({ + 'width': item.percent, + 'background-color': [Math.round(120/100*item.percent),100,100].hsbToRgb().rgbToHex() + }); + }, + remove: function(){ + this.fade.start('opacity',0).chain(function(){this.elements.tr.dispose();}.bind(this)); + this.fadeBar.start('opacity',0).chain(function(){this.elements.pgbTr.dispose();}.bind(this)); + + } + }); {% endblock %} @@ -51,6 +180,7 @@ Active Downloads {% block content %} + @@ -58,6 +188,7 @@ Active Downloads + {% for link in content %} @@ -66,11 +197,11 @@ Active Downloads - + - - + {% endfor %} -- cgit v1.2.3
Name StatusSize Progress
- +