From 9dc2f58872b9f170621bd583f73f9fe144238972 Mon Sep 17 00:00:00 2001 From: Wugy Date: Wed, 6 Jan 2010 22:14:56 +0100 Subject: Webinterface - AddBox --- module/web/media/default/js/home.js | 409 +++++++++++----------- module/web/media/default/js/jquery.progressbar.js | 8 +- module/web/templates/default/base.html | 35 +- module/web/templates/default/home.html | 4 - module/web/templates/default/window.html | 37 +- 5 files changed, 252 insertions(+), 241 deletions(-) (limited to 'module/web') diff --git a/module/web/media/default/js/home.js b/module/web/media/default/js/home.js index 025dcfcc7..61a1f60d0 100644 --- a/module/web/media/default/js/home.js +++ b/module/web/media/default/js/home.js @@ -1,205 +1,204 @@ -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); - } - -}); - -req = new Request.JSON({ - onSuccess: renderTable, - method: 'get', - url: '/json/links', - initialDelay: 0, - delay: 1000, - limit: 20000 -}); - -var dls = [] -var pbs = [] - -function renderTable(data) { - - 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 - - if (dl.status == "downloading") { - - size = Math.round((dl.size - dl.kbleft) / 1024) + "/" + Math.round(dl.size / 1024) + " MB"; - speed = Math.round(dl.speed) + " kb/s"; - eta = dl.eta; - - } else if (dl.status == "waiting") { - - size = "waiting " + dl.wait; - speed = ""; - eta = ""; - - } - div.getChildren(".dlsize")[0].textContent = size; - div.getChildren(".dlspeed")[0].textContent = speed; - div.getChildren(".dltime")[0].textContent = 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], - startPercentage: 25, - speed: 1000, - id: 1, - boxID: 'box', - percentageID: 'perc', - displayText: true, - displayID: 'boxtext' -}); -*/ - - req.startTimer(); - -}); \ No newline at end of file +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); + } + +}); +/* +req = new Request.JSON({ + onSuccess: renderTable, + method: 'get', + url: '/json/links', + initialDelay: 0, + delay: 1000, + limit: 20000 +}); +*/ +var dls = [] +var pbs = [] + +function renderTable(data) { + + 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 + + if (dl.status == "downloading") { + + size = Math.round((dl.size - dl.kbleft) / 1024) + "/" + Math.round(dl.size / 1024) + " MB"; + speed = Math.round(dl.speed) + " kb/s"; + eta = dl.eta; + + } else if (dl.status == "waiting") { + + size = "waiting " + dl.wait; + speed = ""; + eta = ""; + + } + div.getChildren(".dlsize")[0].textContent = size; + div.getChildren(".dlspeed")[0].textContent = speed; + div.getChildren(".dltime")[0].textContent = 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], + startPercentage: 25, + speed: 1000, + id: 1, + boxID: 'box', + percentageID: 'perc', + displayText: true, + displayID: 'boxtext' +}); +*/ +}); + + diff --git a/module/web/media/default/js/jquery.progressbar.js b/module/web/media/default/js/jquery.progressbar.js index 7ddf4a558..e240109b4 100644 --- a/module/web/media/default/js/jquery.progressbar.js +++ b/module/web/media/default/js/jquery.progressbar.js @@ -26,11 +26,11 @@ USAGE: width : 1000, // Width of the progressbar - don't forget to adjust your image too!!! // Image to use in the progressbar. Can be a single image too: 'images/progressbg_green.gif' height : 12, // Height of the progressbar - don't forget to adjust your image too!!! callback : null, // Calls back with the config object that has the current percentage, target percentage, current image, etc - boxImage : '/media/img/progressbar.gif', // boxImage : image around the progress bar + boxImage : '/media/default/img/progressbar.gif', // boxImage : image around the progress bar barImage : { - 0: '/media/img/progressbg_red.gif', - 30: '/media/img/progressbg_orange.gif', - 70: '/media/img/progressbg_green.gif' + 0: '/media/default/img/progressbg_red.gif', + 30: '/media/default/img/progressbg_orange.gif', + 70: '/media/default/img/progressbg_green.gif' }, diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html index ecaec98f2..cd0b85903 100644 --- a/module/web/templates/default/base.html +++ b/module/web/templates/default/base.html @@ -17,6 +17,7 @@ @@ -97,6 +129,7 @@ function LoadJsonToContent(data)
  • Play
  • Cancel
  • Stop
    • +
  • Add
    • {% endif %} diff --git a/module/web/templates/default/home.html b/module/web/templates/default/home.html index 12fa55539..49633f94a 100644 --- a/module/web/templates/default/home.html +++ b/module/web/templates/default/home.html @@ -3,10 +3,6 @@ {% block head %}