diff options
Diffstat (limited to 'module/web/templates/default/home.html')
-rw-r--r-- | module/web/templates/default/home.html | 277 |
1 files changed, 0 insertions, 277 deletions
diff --git a/module/web/templates/default/home.html b/module/web/templates/default/home.html deleted file mode 100644 index 0cbbca280..000000000 --- a/module/web/templates/default/home.html +++ /dev/null @@ -1,277 +0,0 @@ -{% extends 'default/base.html' %} -{% 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.fid - }); - - 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.fid != this},id); - this.ids = this.ids.erase(id) - }, this); - - data.links.each(function(link, i){ - if (this.ids.contains(link.fid)){ - - var index = this.ids.indexOf(link.fid); - this.entries[index].update(link) - - }else{ - var entry = new LinkEntry(link.fid); - entry.insert(link); - this.entries.push(entry); - this.ids.push(link.fid); - 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.fid = 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}_bleft".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, - } - }), - status: new Element('td', { - 'html': ' ', - }), - statusspan: new Element('span', { - 'html': item.statusmsg, - 'class': 'label label-default', - 'styles':{ - - } - }), - name: new Element('td', { - 'html': item.name - }), - 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('span',{ - 'html': '', - 'class': 'glyphicon glyphicon-remove', - 'styles':{ - 'margin-left': '3px', - } - }), - pgbTr: new Element('tr', { - 'html':'', - 'styles':{ - 'border-top-color': '#fff', - } - }), - progress: new Element('div', { - 'html':'', - 'class':'progress', - 'styles':{ - 'margin-bottom': '0px', - } - }), - pgb: new Element('div', { - 'html':'', - 'class':'progress-bar progress-bar-striped active', - 'role':'progress', - 'styles':{ - 'width': item.percent+'%', - 'background-color': '#ddd' - } - }) - - }; - - - this.elements.status.adopt(this.elements.statusspan); - this.elements.progress.adopt(this.elements.pgb); - this.elements.tr.adopt(this.elements.status,this.elements.name,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.progress)); - 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.statusspan.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 (item.statusmsg == "waiting") { - this.elements.statusspan.set('class', 'label label-warning') - } else if (item.statusmsg == "starting") { - this.elements.statusspan.set('class', 'label label-info') - } else if (item.statusmsg == "downloading") { - this.elements.statusspan.set('class', 'label label-success') - } else if (item.stausmsg == "extracting") { - this.elements.statusspan.set('class', 'label label-primary') - } else { - this.elements.statusspan.set('class', 'label label-default') - } - if(!operafix) - { - - this.bar.start({ - 'width': item.percent, - 'background-color': [Math.round(120/100*item.percent),80,70].hsbToRgb().rgbToHex() - }); - } - else - { - this.elements.pgb.set( - 'styles', { - 'height': '4px', - 'width': item.percent+'%', - 'background-color': [Math.round(50/200*item.percent),0,200].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 %}{{_("Active Downloads")}}{% endblock %} -{% block content %} -<table class="table" style="width:100%;"> - <thead> - <tr class="header"> - <th>{{_("Status")}}</th> - <th>{{_("Name")}}</th> - <th>{{_("Information")}}</th> - <th>{{_("Size")}}</th> - <th>{{_("Progress")}}</th> - </tr> - </thead> -</br> - <tbody id="LinksAktiv"> - - {% for link in content %} - <tr id="link_{{ link.id }}"> - <td id="link_{{ link.id }}_status"><span class="label label-{% if link.status == 'downloading' %}success{% endif %}{% if link.status == 'extracting' %}primary{% endif %}{% if link.status == 'starting' %}warning{% else %}default{% endif %}">{{ link.status }}</span></td> - <td id="link_{{ link.id }}_name">{{ link.name }}</td> - <td id="link_{{ link.id }}_info">{{ link.info }}</td> - <td id="link_{{ link.id }}_bleft">{{ link.format_size }}</td> - <td> - <span id="link_{{ link.id }}_percent">{{ link.percent }}% /{{ link.bleft }}</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> -</div> -{% endblock %} |