{% extends 'default/base.html' %} {% load i18n %} {% block head %} <script type="text/javascript"> var em; var operafix = (navigator.userAgent.toLowerCase().search("opera") >= 0); document.addEvent("domready", function(){ em = new EntryManager(); }); 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, limit: 30000 }); 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){ var 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){ var index = this.ids.indexOf(id); this.entries[index].remove(); 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){ if (this.ids.contains(link.id)){ var index = this.ids.indexOf(link.id); this.entries[index].update(link) }else{ var 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})), bleft: $("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})) }; this.initEffects(); }, insert: function(item){ try{ this.elements = { tr: new Element('tr', { 'html': '', 'styles':{ 'opacity': 0 } }), name: new Element('td', { 'html': item.name }), status: new Element('td', { 'html': item.statusmsg }), info: new Element('td', { 'html': item.info }), bleft: new Element('td', { 'html': HumanFileSize(item.size) }), percent: new Element('span', { 'html': item.percent+ '% / '+ HumanFileSize(item.size-item.bleft) }), remove: new Element('img',{ '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':'' }), 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.bleft,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){ alert(e) } }, initEffects: function(){ if(!operafix) 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/abort_link/'+this.id}).send(); }.bind(this)); }, update: function(item){ this.elements.name.set('text', item.name); this.elements.status.set('text', item.statusmsg); this.elements.info.set('text', item.info); this.elements.bleft.set('text', item.format_size); this.elements.percent.set('text', item.percent+ '% / '+ HumanFileSize(item.size-item.bleft)); if(!operafix) { this.bar.start({ 'width': item.percent, 'background-color': [Math.round(120/100*item.percent),100,100].hsbToRgb().rgbToHex() }); } else { this.elements.pgb.set( 'styles', { 'height': '4px', '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)); } }); </script> {% endblock %} {% block subtitle %} {% trans "Active Downloads" %} {% endblock %} {% block content %} <table width="100%" class="queue"> <thead> <tr class="header"> <th>{% trans "Name" %}</th> <th>{% trans "Status" %}</th> <th>{% trans "Information" %}</th> <th>{% trans "Size" %}</th> <th>{% trans "Progress" %}</th> </tr> </thead> <tbody id="LinksAktiv"> {% for link in content %} <tr id="link_{{ link.id }}"> <td id="link_{{ link.id }}_name">{{ link.name }}</td> <td id="link_{{ link.id }}_status">{{ link.status }}</td> <td id="link_{{ link.id }}_info">{{ link.info }}</td> <td id="link_{{ link.id }}_kbleft">{{ link.format_size }}</td> <td> <span id="link_{{ link.id }}_percent">{{ link.percent }}% /{{ link.kbleft }}</span> <img id="link_{{ link.id }}_remove" style="vertical-align: middle; margin-right: -20px; margin-left: 5px; margin-top: -2px; cursor:pointer;" src="media/default/img/control_cancel.png"/> </td> </tr> <tr id="link_{{ link.id }}_pgb_tr"> <td colspan="5"> <div id="link_{{ link.id }}_pgb" class="progressBar" style="background-color: green; height:4px; width: {{ link.percent }}%;"> </div> </td> </tr> {% endfor %} </tbody> </table> {% endblock %}