- Made transfer list sortable in Web UI

* As a default it is sorted by Name

src/webui/scripts/client.js

@@ -24,6 +24,9 @@
 
 myTable = new dynamicTable();
 ajaxfn = function(){};
+setSortedColumn = function(index){
+  myTable.setSortedColumn(index);
+};
 
 window.addEvent('domready', function(){
   

src/webui/scripts/dynamicTable.js

@@ -44,6 +44,90 @@ var dynamicTable = new Class	({
 		this.progressIndex = progressIndex;
 		this.filter = 'all';
 		this.context_menu = context_menu;
+		this.table.sortedIndex = 1; // Default is NAME
+		this.table.sortOrder = 'ASC';
+	},
+	
+	sortfunction: function(tr1, tr2) {
+		var i = tr2.getParent().sortedIndex;
+		var order = tr2.getParent().sortOrder;
+		switch(i) {
+			case 1: // Name
+				if(order == "ASC") {
+					if(tr1.getElements('td')[i].get('html') >  tr2.getElements('td')[i].get('html'))
+						return 1;
+					return -1;
+				} else {
+					if(tr1.getElements('td')[i].get('html') <  tr2.getElements('td')[i].get('html'))
+						return 1;
+					return -1;
+				}
+			case 2: // Prio
+				if(order == "ASC")
+					return (tr1.getElements('td')[i].get('html').toInt() -  tr2.getElements('td')[i].get('html')).toInt();
+				else
+					return (tr2.getElements('td')[i].get('html').toInt() -  tr1.getElements('td')[i].get('html')).toInt();
+			case 3: // Size
+			case 7: // Up Speed
+			case 8: // Down Speed
+				var sizeStrToFloat = function(mystr) {
+					var val1 = mystr.split(' ');
+					var val1num = val1[0].toFloat()
+					var unit = val1[1].capitalize();
+					switch(unit[0]) {
+						case 'G':
+							return val1num*1073741824;
+						case 'M':
+							return val1num*1048576;
+						case 'K':
+							return val1num*1024;
+						default:
+							return val1num;
+					}
+				};
+				if(order == "ASC")
+					return (sizeStrToFloat(tr1.getElements('td')[i].get('html')) - sizeStrToFloat(tr2.getElements('td')[i].get('html')));
+				else
+					return (sizeStrToFloat(tr2.getElements('td')[i].get('html')) - sizeStrToFloat(tr1.getElements('td')[i].get('html')));
+			case 4: // Progress
+				if(order == "ASC")
+					return (tr1.getElements('td')[i].getChildren()[0].getValue() - tr2.getElements('td')[i].getChildren()[0].getValue());
+				else
+					return (tr2.getElements('td')[i].getChildren()[0].getValue() - tr1.getElements('td')[i].getChildren()[0].getValue());
+			case 5: // Seeds
+			case 6: // Peers
+				if(order == "ASC")
+					return (tr1.getElements('td')[i].get('html').split(' ')[0].toInt() - tr2.getElements('td')[i].get('html').split(' ')[0].toInt());
+				else
+					return (tr2.getElements('td')[i].get('html').split(' ')[0].toInt() - tr1.getElements('td')[i].get('html').split(' ')[0].toInt());
+			default: // Ratio
+				if(order == "ASC")
+					return (tr1.getElements('td')[i].get('html').toFloat() -  tr2.getElements('td')[i].get('html')).toFloat();
+				else
+					return (tr2.getElements('td')[i].get('html').toFloat() -  tr1.getElements('td')[i].get('html')).toFloat();
+		}
+	},
+	
+	updateSort: function() {
+		var trs = this.table.getChildren('tr');
+		trs.sort(this.sortfunction);
+		this.table.set('html', '');
+		this.table.adopt(trs);
+	},
+	
+	setSortedColumn: function(index) {
+		if(index != this.table.sortedIndex) {
+			this.table.sortedIndex = index;
+			this.table.sortOrder = 'ASC';
+		} else {
+			// Toggle sort order
+			if(this.table.sortOrder == 'ASC')
+				this.table.sortOrder = 'DSC'
+			else
+				this.table.sortOrder = 'ASC'
+		}
+		this.updateSort();
+		this.altRow();
 	},
 	
 	getCurrentTorrentHash: function() {
@@ -235,7 +319,17 @@ var dynamicTable = new Class	({
 		// Apply filter
 		this.applyFilterOnRow(tr, status);
 		// Insert
-		tr.injectInside(this.table);
+		var trs = this.table.getChildren('tr');
+		var i=0;
+		while(i<trs.length && this.sortfunction(tr, trs[i]) > 0) {
+			i++;
+		}
+		if(i==trs.length) {
+			tr.inject(this.table);
+		} else {
+			tr.inject(trs[i], 'before');
+		}
+		//tr.injectInside(this.table);
 		this.altRow();
 		// Update context menu
 		this.context_menu.addTarget(tr);

src/webui/scripts/progressbar.js

@@ -23,6 +23,7 @@ var ProgressBar=new Class({
 			}
 		});
 		obj.vals=vals;
+		obj.vals.value = $pick(value, 0); // Fix by Chris
 		obj.vals.dark=new Element('div',{
 			'id':vals.id+'_dark',
 			'class':'progressbar_dark',
@@ -55,12 +56,18 @@ var ProgressBar=new Class({
 		});
 		obj.appendChild(obj.vals.dark);
 		obj.appendChild(obj.vals.light);
+		obj.getValue=ProgressBar_getValue;
 		obj.setValue=ProgressBar_setValue;
 		if(vals.width)obj.setValue(vals.value);
 		else setTimeout('ProgressBar_checkForParent("'+obj.id+'")',1);
 		return obj;
 	}
 });
+
+function ProgressBar_getValue(){
+	return this.vals.value;
+}
+
 function ProgressBar_setValue(value){
 	value=parseFloat(value);
 	if(isNaN(value))value=0;

src/webui/transferlist.html

@@ -2,16 +2,16 @@
                     <thead>
                             <tr>
                                     <th></th>
-                                    <th>_(Name)</th>
-                                    <th id='prioHeader'>#</th>
-                                    <th>_(Size)</th>
-                                    <th style="width: 90px;">_(Done)</th>
-                                    <th>_(Seeds)</th>
-                                    <th>_(Peers)</th>
-                                    <th>_(Down Speed)</th>
-                                    <th>_(Up Speed)</th>
+                                    <th onClick="setSortedColumn(1);" style="cursor: pointer;">_(Name)</th>
+                                    <th id='prioHeader' onClick="setSortedColumn(2);" style="cursor: pointer;">#</th>
+                                    <th onClick="setSortedColumn(3);" style="cursor: pointer;">_(Size)</th>
+                                    <th style="width: 90px;cursor: pointer;" onClick="setSortedColumn(4);">_(Done)</th>
+                                    <th onClick="setSortedColumn(5);" style="cursor: pointer;">_(Seeds)</th>
+                                    <th onClick="setSortedColumn(6);" style="cursor: pointer;">_(Peers)</th>
+                                    <th onClick="setSortedColumn(7);" style="cursor: pointer;">_(Down Speed)</th>
+                                    <th onClick="setSortedColumn(8);" style="cursor: pointer;">_(Up Speed)</th>
                                     <th>_(ETA)</th>
-                                    <th>_(Ratio)</th>
+                                    <th onClick="setSortedColumn(10);" style="cursor: pointer;">_(Ratio)</th>
                                     
                             </tr>
                     </thead>