dynamic webinterface

5 files changed, 216 insertions, 74 deletions

diff --git a/module/web/WebServer.py b/module/web/WebServer.py
index 584ed564c..483d28db3 100644
--- a/module/web/WebServer.py
+++ b/module/web/WebServer.py
@@ -145,19 +145,22 @@ def get_links():
     json = '{ "downloads": ['
 
     downloads = core.get_downloads()
+    ids = []
 
     for dl in downloads:
+        ids.append(dl['id'])
         json += '{'
-        json += '"id": "%s", "name": "%s", "speed": "%s", "eta": "%s", "kbleft": "%s", "size": "%s", "percent": "%s", "wait": "%s", "status": "%s"'\
-            % (str(dl['id']), str(dl['name']), str(dl['speed']), str(core.format_time(dl['eta'])), dl['kbleft'], dl['size'], dl['percent'], str(core.format_time(dl['wait_until'] - time.time())), dl['status'])
+        json += '"id": %s, "name": "%s", "speed": %s, "eta": "%s", "kbleft": %s, "size": %s, "percent": %s, "wait": "%s", "status": "%s"'\
+            % (str(dl['id']), str(dl['name']), str(int(dl['speed'])), str(core.format_time(dl['eta'])), dl['kbleft'], dl['size'], dl['percent'], str(core.format_time(dl['wait_until'] - time.time())), dl['status'])
 
         json += "},"
 
     if json.endswith(","): json = json[:-1]
 
-    json += "] }"
+    json += '], "ids": %s }' % str(ids)
 
     return json
+
 @route('/json/status')
 def get_status():
     response.header['Cache-Control'] = 'no-cache, must-revalidate'
@@ -203,19 +206,19 @@ def pause():
 
     return "{}"
 
-@route('/json/pause')
-def pause():
+
+@route('/json/play')
+def play():
     response.header['Cache-Control'] = 'no-cache, must-revalidate'
     response.content_type = 'application/json'
 
     if not check_auth(request):
         abort(404, "No Access")
 
-    core.thread_liste.pause = False
+    core.thread_list.pause = False
 
     return "{}"
 
-
 @route('/favicon.ico')
 def favicon():
     
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
diff --git a/module/web/templates/default.tpl b/module/web/templates/default.tpl
index b184f4017..9bd9b71fb 100644
--- a/module/web/templates/default.tpl
+++ b/module/web/templates/default.tpl
@@ -125,15 +125,18 @@ Files in queue: 
 %elif page== "home":
 <h2>Downloads:</h2>
 
+<div id="dlcontainer">
+
 % for link in links:
 
-<p>
+
 <div class="download" id="dl{{link['id']}}" style="color: #000">
+<p></p>
 
 <b>{{link['name']}}</b>
 <br>
 <script type="text/javascript">
-pb{{link['id']}} = new dwProgressBar({
+pbs[{{link['id']}}] = new dwProgressBar({
         container: document.id('dl{{link['id']}}'),
         startPercentage: {{link['percent']}},
         speed: 1000,
@@ -144,14 +147,25 @@ pb{{link['id']}} = new dwProgressBar({
         displayID: 'boxtext'
 });
 
+dls.push({{link['id']}})
+
 </script>
 
-{{link['speed']}}
-<br>
+
+<div class="dlsize">
+{{int((link['size'] - link['kbleft']) / 1024)}}/{{int(link['size']) / 1024}} MB
+</div>
+
+
+<div class="dlspeed">
+{{int(link['speed'])}} kb/s
+</div>
+
+
+<div class="dltime">
 {{link['eta']}}
-<br>
-{{link['size']}}
-<br>
+</div>
+
 
 </div>
 
@@ -159,11 +173,11 @@ pb{{link['id']}} = new dwProgressBar({
 <script type="text/javascript">
 $$("#dl{{link['id']}}")[0].hover(function(e){
 
-this.morph({'color': '#f00', 'padding-left': '20px'});
+this.morph({'color': '#f00'});
 
 }, function(e){
 
-this.morph({'color': '#000', 'padding-left': '0px'});
+this.morph({'color': '#000'});
 
 });
 
@@ -173,7 +187,8 @@ this.morph({'color': '#000', 'padding-left': '0px'});
 
 %end
 
-</p>
+</div>
+
 
 %elif page=="loggedin":