- Display progress using progress bars in Web UI

Changelog

@@ -15,6 +15,7 @@
     - FEATURE: Rewrote folder scanning code (Now uses a filesystem watcher)
     - FEATURE: Added torrent deletion from hard drive function in Web UI
     - FEATURE: Added queueing priority actions in Web UI
+    - FEATURE: Display progress using progress bars in Web UI
     - BUGFIX: Made usage of fastresume data more reliable
     - BUGFIX: qBittorrent shutdown is now faster
     - BUGFIX: Fixed several memory leaks

src/webui.qrc

@@ -17,5 +17,6 @@
   <file>webui/scripts/client.js</file>
   <file>webui/scripts/download.js</file>
   <file>webui/scripts/mootabs1.2.js</file>
+  <file>webui/scripts/progressbar.js</file>
 </qresource>
 </RCC>

src/webui/index.html

@@ -15,6 +15,7 @@
 	<script type="text/javascript" src="scripts/mootabs1.2.js" charset="utf-8"></script>
 	<script type="text/javascript" src="scripts/mocha.js"></script>
 	<script type="text/javascript" src="scripts/mocha-init.js"></script>
+	<script type="text/javascript" src="scripts/progressbar.js"></script>
 	<script type="text/javascript" src="scripts/dynamicTable.js" charset="utf-8"></script>
 	<script type="text/javascript" src="scripts/client.js" charset="utf-8"></script>
 </head>
@@ -83,7 +84,7 @@
 											<th></th>
 											<th>Name</th>
 											<th>Size</th>
-											<th>Progress</th>
+											<th style="width: 90px;">Progress</th>
 											<th>DL Speed</th>
 											<th>UP Speed</th>
 											<th id='prioHeader'>Priority</th>

src/webui/scripts/client.js

@@ -37,8 +37,8 @@ window.addEvent('domready', function(){
       width: '100%',
       height: '100%'
   });
-  myTable.setup('myTable');
+  myTable.setup('myTable', 3);
-  myTableUP.setup('myTableUP');
+  myTableUP.setup('myTableUP', -1);
   var r=0;
   var waiting=false;
   var stateToImg = function(state){
@@ -120,7 +120,7 @@ window.addEvent('domready', function(){
                 row[0] = stateToImg(event.state);
                 row[1] = event.name;
                 row[2] = fsize(event.size);
-                row[3] = round1(event.progress*100) + ' %';
+                row[3] = round1(event.progress*100);
                 row[4] = fspeed(event.dlspeed);
                 row[5] = fspeed(event.upspeed);
 		row[6] = event.priority

src/webui/scripts/dynamicTable.js

@@ -36,11 +36,12 @@ var dynamicTable = new Class	({
 	initialize: function(){
 	},
 	
-	setup: function(table){
+	setup: function(table, progressIndex){
 		this.table = $(table);
 		this.rows = new Object();
 		this.cur = new Array();
 		this.priority_hidden = false;
+		this.progressIndex = progressIndex;
 	},
 
 	altRow: function()
@@ -87,7 +88,11 @@ var dynamicTable = new Class	({
 		for(var i=0; i<row.length; i++)
 		{
 			var td = new Element('td');
+			if(i==this.progressIndex) {
+				td.adopt(new ProgressBar(row[i].toFloat(), {width:80}));
+			} else {
 				td.set('html', row[i]);
+			}
 			td.injectInside(tr);
 		};
 
@@ -181,11 +186,14 @@ var dynamicTable = new Class	({
 		if($defined(tr))
 		{
 			var tds = tr.getElements('td');
-			row.each(function(el, i){
+			for(var i=0; i<row.length; i++) {
-                                if(tds[i].get('html') != el) {
+        	                if(i==this.progressIndex) {
-				      tds[i].set('html', el);
+					tds[i].set('html', '');
+                	                tds[i].adopt(new ProgressBar(row[i].toFloat(), {width:80}));
+                        	} else {
+                                	tds[i].set('html', row[i]);
 	                        }
-			});
+                	};
 			return true;
 		}
 		return false;

src/webui/scripts/progressbar.js

@@ -0,0 +1,89 @@
+var ProgressBar=new Class({
+	initialize:function(value,parameters){
+		var vals={
+			'id':'progressbar_'+(ProgressBars++),
+			'value':$pick(value,0),
+			'width':0,
+			'height':0,
+			'darkbg':'#006',
+			'darkfg':'#fff',
+			'lightbg':'#fff',
+			'lightfg':'#000'
+		};
+		if(parameters && $type(parameters)=='object')$extend(vals,parameters);
+		if(vals.height<12)vals.height=12;
+		var obj=new Element('div',{
+			'id':vals.id,
+			'class':'progressbar_wrapper',
+			'styles':{
+				'border':'1px solid #000',
+				'width':vals.width,
+				'height':vals.height,
+				'position':'relative'
+			}
+		});
+		obj.vals=vals;
+		obj.vals.dark=new Element('div',{
+			'id':vals.id+'_dark',
+			'class':'progressbar_dark',
+			'styles':{
+				'width':vals.width,
+				'height':vals.height,
+				'background':vals.darkbg,
+				'color':vals.darkfg,
+				'position':'absolute',
+				'text-align':'center',
+				'left':0,
+				'top':0,
+				'line-height':vals.height-2
+			}
+		});
+		obj.vals.light=new Element('div',{
+			'id':vals.id+'_light',
+			'class':'progressbar_light',
+			'styles':{
+				'width':vals.width,
+				'height':vals.height,
+				'background':vals.lightbg,
+				'color':vals.lightfg,
+				'position':'absolute',
+				'text-align':'center',
+				'left':0,
+				'top':0,
+				'line-height':vals.height-2
+			}
+		});
+		obj.appendChild(obj.vals.dark);
+		obj.appendChild(obj.vals.light);
+		obj.setValue=ProgressBar_setValue;
+		if(vals.width)obj.setValue(vals.value);
+		else setTimeout('ProgressBar_checkForParent("'+obj.id+'")',1);
+		return obj;
+	}
+});
+function ProgressBar_setValue(value){
+	value=parseFloat(value);
+	if(isNaN(value))value=0;
+	if(value>100)value=100;
+	if(value<0)value=0;
+	this.vals.value=value;
+	this.vals.dark.empty();
+	this.vals.light.empty();
+	this.vals.dark.appendText(value+'%');
+	this.vals.light.appendText(value+'%');
+	var r=parseInt(this.vals.width*(value/100));
+	this.vals.dark.setStyle('clip','rect(0,'+r+'px,'+this.vals.height+'px,0)');
+	this.vals.light.setStyle('clip','rect(0,'+this.vals.width+'px,'+this.vals.height+'px,'+r+'px)');
+}
+function ProgressBar_checkForParent(id){
+	var obj=$(id);
+	if(!obj)return;
+	if(!obj.parentNode)return setTimeout('ProgressBar_checkForParent("'+id+'")',1);
+	obj.setStyle('width','100%');
+	var w=obj.offsetWidth;
+	obj.vals.dark.setStyle('width',w);
+	obj.vals.light.setStyle('width',w);
+	obj.vals.width=w;
+	obj.setValue(obj.vals.value);
+}
+var ProgressBars=0;