d4708/qBittorrent
1
0
Fork 0
mirror of https://github.com/d47081/qBittorrent.git synced 2025-01-24 13:34:27 +00:00
Code Issues Projects Releases Wiki Activity

WebUI: Drop client-side sorting.

Browse Source
This commit is contained in:
Vladimir Golovnev (Glassez) 2014-11-26 12:45:09 +03:00
parent e279dcf904
commit 0e87b96beb
3 changed files with 48 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/webui/www/public/scripts/client.js
View File

@ -24,9 +24,6 @@
myTable = new dynamicTable(); myTable = new dynamicTable();
ajaxfn = function () {}; ajaxfn = function () {};
setSortedColumn = function (index) {
myTable.setSortedColumn(index);
};
window.addEvent('load', function () { window.addEvent('load', function () {
@ -135,7 +132,9 @@ window.addEvent('load', function () {
var ajaxfn = function () { var ajaxfn = function () {
var queueing_enabled = false; var queueing_enabled = false;
var url = new URI('json/torrents'); var url = new URI('json/torrents');
url.setData({'filter': filter}); url.setData('filter', filter);
url.setData('sort', myTable.table.sortedColumn);
url.setData('reverse', myTable.table.reverseSort);
if (!waiting) { if (!waiting) {
waiting = true; waiting = true;
var request = new Request.JSON({ var request = new Request.JSON({
@ -153,6 +152,7 @@ window.addEvent('load', function () {
// Add new torrents or update them // Add new torrents or update them
torrent_hashes = myTable.getRowIds(); torrent_hashes = myTable.getRowIds();
events_hashes = new Array(); events_hashes = new Array();
pos = 0;
events.each(function (event) { events.each(function (event) {
events_hashes[events_hashes.length] = event.hash; events_hashes[events_hashes.length] = event.hash;
var row = new Array(); var row = new Array();
@ -193,11 +193,13 @@ window.addEvent('load', function () {
// New unfinished torrent // New unfinished torrent
torrent_hashes[torrent_hashes.length] = event.hash; torrent_hashes[torrent_hashes.length] = event.hash;
//alert("Inserting row"); //alert("Inserting row");
myTable.insertRow(event.hash, row, data, event.state); myTable.insertRow(event.hash, row, data, event.state, pos);
} else { } else {
// Update torrent data // Update torrent data
myTable.updateRow(event.hash, row, data, event.state); myTable.updateRow(event.hash, row, data, event.state, pos);
} }
pos++;
}); });
// Remove deleted torrents // Remove deleted torrents
torrent_hashes.each(function (hash) { torrent_hashes.each(function (hash) {
@ -212,6 +214,8 @@ window.addEvent('load', function () {
$('queueingButtons').addClass('invisible'); $('queueingButtons').addClass('invisible');
myTable.hidePriority(); myTable.hidePriority();
} }
myTable.altRow();
} }
waiting = false; waiting = false;
ajaxfn.delay(1500); ajaxfn.delay(1500);
@ -219,6 +223,13 @@ window.addEvent('load', function () {
}).send(); }).send();
} }
}; };
setSortedColumn = function (column) {
myTable.setSortedColumn(column);
// reload torrents
ajaxfn();
};
new MochaUI.Panel({ new MochaUI.Panel({
id : 'transferList', id : 'transferList',
title : 'Panel', title : 'Panel',

67
src/webui/www/public/scripts/dynamicTable.js
View File

@ -42,51 +42,18 @@ var dynamicTable = new Class({
this.priority_hidden = false; this.priority_hidden = false;
this.progressIndex = progressIndex; this.progressIndex = progressIndex;
this.context_menu = context_menu; this.context_menu = context_menu;
this.table.sortedIndex = 1; // Default is NAME this.table.sortedColumn = 'name'; // Default is NAME
this.table.reverseSort = false; this.table.reverseSort = false;
}, },
sortfunction : function (tr1, tr2) { setSortedColumn : function (column) {
var i = tr2.getParent().sortedIndex; if (column != this.table.sortedColumn) {
var reverseSort = tr2.getParent().reverseSort; this.table.sortedColumn = column;
switch (i) {
case 1: // Name
if (!reverseSort)
return tr1.getElements('td')[i].get('html').localeCompare(tr2.getElements('td')[i].get('html'));
else
return tr2.getElements('td')[i].get('html').localeCompare(tr1.getElements('td')[i].get('html'));
case 2: // Prio
case 3: // Size
case 4: // Progress
case 5: // Seeds
case 6: // Peers
case 7: // Up Speed
case 8: // Down Speed
case 9: // ETA
default: // Ratio
if (!reverseSort)
return (tr1.getElements('td')[i].get('data-raw') - tr2.getElements('td')[i].get('data-raw'));
else
return (tr2.getElements('td')[i].get('data-raw') - tr1.getElements('td')[i].get('data-raw'));
}
},
updateSort : function () {
var trs = this.table.getChildren('tr');
trs.sort(this.sortfunction);
this.table.adopt(trs);
},
setSortedColumn : function (index) {
if (index != this.table.sortedIndex) {
this.table.sortedIndex = index;
this.table.reverseSort = false; this.table.reverseSort = false;
} else { } else {
// Toggle sort order // Toggle sort order
this.table.reverseSort = !this.table.reverseSort; this.table.reverseSort = !this.table.reverseSort;
} }
this.updateSort();
this.altRow();
}, },
getCurrentTorrentHash : function () { getCurrentTorrentHash : function () {
@ -130,7 +97,7 @@ var dynamicTable = new Class({
this.priority_hidden = false; this.priority_hidden = false;
}, },
insertRow : function (id, row, data, status) { insertRow : function (id, row, data, status, pos) {
if (this.rows.has(id)) { if (this.rows.has(id)) {
return; return;
} }
@ -254,17 +221,12 @@ var dynamicTable = new Class({
// Insert // Insert
var trs = this.table.getChildren('tr'); var trs = this.table.getChildren('tr');
var i = 0; if (pos >= trs.length) {
while (i < trs.length && this.sortfunction(tr, trs[i]) > 0) {
i++;
}
if (i == trs.length) {
tr.inject(this.table); tr.inject(this.table);
} else { } else {
tr.inject(trs[i], 'before'); tr.inject(trs[pos], 'before');
} }
//tr.injectInside(this.table); //tr.injectInside(this.table);
this.altRow();
// Update context menu // Update context menu
this.context_menu.addTarget(tr); this.context_menu.addTarget(tr);
}, },
@ -279,10 +241,11 @@ var dynamicTable = new Class({
}, this); }, this);
}, },
updateRow : function (id, row, data, status) { updateRow : function (id, row, data, status, newpos) {
if (!this.rows.has(id)) { if (!this.rows.has(id)) {
return false; return false;
} }
var tr = this.rows.get(id); var tr = this.rows.get(id);
var tds = tr.getElements('td'); var tds = tr.getElements('td');
for (var i = 0; i < row.length; i++) { for (var i = 0; i < row.length; i++) {
@ -300,6 +263,18 @@ var dynamicTable = new Class({
if (typeof data[i] != 'undefined') if (typeof data[i] != 'undefined')
tds[i].set('data-raw', data[i]) tds[i].set('data-raw', data[i])
}; };
// Prevent freezing of the backlight.
tr.removeClass('over');
// Move to 'newpos'
var trs = this.table.getChildren('tr');
if (newpos >= trs.length) {
tr.inject(this.table);
} else {
tr.inject(trs[newpos], 'before');
}
return true; return true;
}, },

20
src/webui/www/public/transferlist.html
View File

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