dynamic webinterface

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