diff options
Diffstat (limited to 'module/web/static')
| -rw-r--r-- | module/web/static/default.css | 5 | ||||
| -rw-r--r-- | module/web/static/default/home.js | 217 | ||||
| -rw-r--r-- | module/web/static/default/status.js | 16 |
3 files changed, 181 insertions, 57 deletions
diff --git a/module/web/static/default.css b/module/web/static/default.css index 9757b4f49..fd2e85eb9 100644 --- a/module/web/static/default.css +++ b/module/web/static/default.css @@ -183,4 +183,7 @@ a.admin{background:transparent url(/static/default/user-actions-admin.png) 0px 1 .box{ background:url(/static/default/progress-bar-back.gif) right center no-repeat; width:200px; height:20px; float:left; } .perc{ background:url(/static/default/progress-bar.gif) right center no-repeat; height:20px; } .boxtext{ font-family:tahoma, arial, sans-serif; font-size:11px; color:#000; float:none; padding:3px 0 0 10px; } -.statusbutton{width:32px;height:32px;float:left;margin-left:-32px;margin-right:5px;opacity:0;cursor:pointer}
\ No newline at end of file +.statusbutton{width:32px;height:32px;float:left;margin-left:-32px;margin-right:5px;opacity:0;cursor:pointer} + +.dlsize{float:left; padding-right: 8px;} +.dlspeed{float:left; padding-right: 8px;}
\ No newline at end of file diff --git a/module/web/static/default/home.js b/module/web/static/default/home.js index 065a6d6eb..8a6586b33 100644 --- a/module/web/static/default/home.js +++ b/module/web/static/default/home.js @@ -1,57 +1,72 @@ var dwProgressBar = new Class({ - //implements - Implements: [Options], - - //options - options: { - container: $$('body')[0], - boxID:'', - percentageID:'', - displayID:'', - startPercentage: 0, - displayText: false, - speed:10 - }, - - //initialization - initialize: function(options) { - //set options - this.setOptions(options); - //create elements - this.createElements(); - }, - - //creates the box and percentage elements - createElements: function() { - var box = new Element('div', { id:this.options.boxID + this.options.id, 'class' : this.options.boxID}); - var perc = new Element('div', { id:this.options.percentageID + this.options.id, 'style':'width:0px;', 'class' : this.options.percentageID }); - perc.inject(box); - box.inject(this.options.container); - if(this.options.displayText) { - var text = new Element('div', { id:this.options.displayID + this.options.id, 'class' : this.options.displayID }); - text.inject(this.options.container); - } - this.set(this.options.startPercentage); - }, - - //calculates width in pixels from percentage - calculate: function(percentage) { - return (document.id(this.options.boxID+ this.options.id).getStyle('width').replace('px','') * (percentage / 100)).toInt(); - }, - - //animates the change in percentage - animate: function(to) { - document.id(this.options.percentageID+ this.options.id).set('morph', { duration: this.options.speed, link:'cancel' }).morph({width:this.calculate(to.toInt())}); - if(this.options.displayText) { - document.id(this.options.displayID+ this.options.id).set('text', to.toInt() + '%'); - } - }, - - //sets the percentage from its current state to desired percentage - set: function(to) { - this.animate(to); - } + //implements + Implements: [Options], + + //options + options: { + container: $$('body')[0], + boxID:'', + percentageID:'', + displayID:'', + startPercentage: 0, + displayText: false, + speed:10 + }, + + //initialization + initialize: function(options) { + //set options + this.setOptions(options); + //create elements + this.createElements(); + }, + + //creates the box and percentage elements + createElements: function() { + var box = new Element('div', { + id:this.options.boxID + this.options.id, + 'class' : this.options.boxID + }); + var perc = new Element('div', { + id:this.options.percentageID + this.options.id, + 'style':'width:0px;', + 'class' : this.options.percentageID + }); + perc.inject(box); + box.inject(this.options.container); + if(this.options.displayText) { + var text = new Element('div', { + id:this.options.displayID + this.options.id, + 'class' : this.options.displayID + }); + text.inject(this.options.container); + } + this.set(this.options.startPercentage); + }, + + //calculates width in pixels from percentage + calculate: function(percentage) { + return (document.id(this.options.boxID+ this.options.id).getStyle('width').replace('px','') * (percentage / 100)).toInt(); + }, + + //animates the change in percentage + animate: function(to) { + document.id(this.options.percentageID+ this.options.id).set('morph', { + duration: this.options.speed, + link:'cancel' + }).morph({ + width:this.calculate(to.toInt()) + }); + if(this.options.displayText) { + document.id(this.options.displayID+ this.options.id).set('text', to.toInt() + '%'); + } + }, + + //sets the percentage from its current state to desired percentage + set: function(to) { + this.animate(to); + } }); @@ -61,20 +76,110 @@ req = new Request.JSON({ method: 'get', url: '/json/links', initialDelay: 0, - delay: 2000, + delay: 1000, limit: 20000 }); +var dls = [] +var pbs = [] + function renderTable(data){ -//data.downloads.each() + data.downloads.each(function(dl){ + + if (dls.contains(dl.id)){ + + var div = $('dl'+dl.id) + + pbs[dl.id].set(dl.percent) + + div.getChildren("b")[0].textContent = dl.name + + size = Math.round((dl.size - dl.kbleft) / 1024) + "/" + Math.round(dl.size / 1024) + " MB" + div.getChildren(".dlsize")[0].textContent = size + + speed = Math.round(dl.speed) + " kb/s" + div.getChildren(".dlspeed")[0].textContent = speed + + div.getChildren(".dltime")[0].textContent = dl.eta + + }else{ + + dls.push(dl.id) + + container = $("dlcontainer") + + dldiv = new Element('div', { + 'id' : 'dl'+dl.id, + 'class': 'download', + 'styles': { + 'display': 'None' + } + }) + + new Element('p').inject(dldiv) + + new Element('b', { + 'html': dl.name + }).inject(dldiv) + + new Element('br').inject(dldiv) + + dldiv.inject(container) + + pbs[dl.id] = new dwProgressBar({ + container: $(dldiv), + startPercentage: 0, + speed: 1000, + id: dl.id, + boxID: 'box', + percentageID: 'perc', + displayText: true, + displayID: 'boxtext' + }); + + new Element('div', { + 'class': 'dlsize', + 'html': Math.round((dl.size - dl.kbleft) / 1024) + "/" + Math.round(dl.size / 1024) + " MB" + }).inject(dldiv) + + new Element('div', { + 'class': 'dlspeed', + 'html': Math.round(dl.speed) + " kb/s" + }).inject(dldiv) + + new Element('div', { + 'class': 'dltime', + 'html': dl.eta + }).inject(dldiv) + + //dldiv.dissolve({duration : 0}) + + dldiv.reveal() + + } + }) + + dls.each(function(id, index){ + + if (data.ids.contains(id)){ + + }else{ + + //$("dl"+id).reveal() + dls.erase(id) + $('dl'+id).nix() + + } + + }) } window.addEvent('domready', function(){ -/* + /* //create the progress bar for example 1 pb = new dwProgressBar({ container: $$('.level1 p')[0], @@ -91,7 +196,7 @@ pb = new dwProgressBar({ req.startTimer(); - }); +}); diff --git a/module/web/static/default/status.js b/module/web/static/default/status.js index f3d521e45..31a4e0032 100644 --- a/module/web/static/default/status.js +++ b/module/web/static/default/status.js @@ -81,4 +81,20 @@ window.addEvent('domready', function(){ }); + $$('.statusbutton')[0].addEvent('click', function(e){ + + new Request({ + 'url' : '/json/play', + 'method' : 'get' + }).send() + }) + + $$('.statusbutton')[1].addEvent('click', function(e){ + + new Request({ + 'url' : '/json/pause', + 'method' : 'get' + }).send() + }) + });
\ No newline at end of file |