summaryrefslogtreecommitdiffstats
path: root/pyload/webui/themes/Next/tml/home.html
diff options
context:
space:
mode:
Diffstat (limited to 'pyload/webui/themes/Next/tml/home.html')
-rw-r--r--pyload/webui/themes/Next/tml/home.html277
1 files changed, 277 insertions, 0 deletions
diff --git a/pyload/webui/themes/Next/tml/home.html b/pyload/webui/themes/Next/tml/home.html
new file mode 100644
index 000000000..57d442bd1
--- /dev/null
+++ b/pyload/webui/themes/Next/tml/home.html
@@ -0,0 +1,277 @@
+{% extends '/tml/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': '&nbsp;',
+ }),
+ 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="/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 }}%;">&nbsp;</div>
+ </td>
+ </tr>
+ {% endfor %}
+
+ </tbody>
+</table>
+</div>
+{% endblock %}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 08:10:22 +0100