diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 76a95c4da..3e7008139 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -344,6 +344,21 @@ a.propButton img { margin: 4px 5px 0 0; } +#torrentsFilterToolbar { + float: right; + margin-right: 30px; + margin-right: 30px; +} + +#torrentsFilterInput { + width: 160px; + padding-left: 2em; + background-image: url("../images/qbt-theme/edit-find.svg"); + background-repeat: no-repeat; + background-size: 1.5em; + background-position: left; +} + /* Tri-state checkbox */ label.tristate { diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html index b8d5c525b..e4c9c66a9 100644 --- a/src/webui/www/private/index.html +++ b/src/webui/www/private/index.html @@ -107,6 +107,9 @@
+
+ +
diff --git a/src/webui/www/private/scripts/client.js b/src/webui/www/private/scripts/client.js index 1901a6296..9f211db83 100644 --- a/src/webui/www/private/scripts/client.js +++ b/src/webui/www/private/scripts/client.js @@ -348,6 +348,7 @@ window.addEvent('load', function() { onSuccess: function(response) { $('error_div').set('html', ''); if (response) { + clearTimeout(torrentsFilterInputTimer); var torrentsTableSelectedRows; var update_categories = false; var full_update = (response['full_update'] === true); @@ -773,11 +774,24 @@ window.addEvent('load', function() { height: prop_h }); + var prevTorrentsFilterValue; + var torrentsFilterInputTimer = null; + // listen for changes to torrentsFilterInput + $('torrentsFilterInput').addEvent('input', function() { + var value = $('torrentsFilterInput').get("value"); + if (value !== prevTorrentsFilterValue) { + prevTorrentsFilterValue = value; + clearTimeout(torrentsFilterInputTimer); + torrentsFilterInputTimer = setTimeout(function() { + torrentsTable.updateTable(false); + }, 400); + } + }); + if (showSearchEngine) { addMainWindowTabsEventListener(); addSearchPanel(); } - }); function closeWindows() { diff --git a/src/webui/www/private/scripts/dynamicTable.js b/src/webui/www/private/scripts/dynamicTable.js index a07fcbed5..fbc132650 100644 --- a/src/webui/www/private/scripts/dynamicTable.js +++ b/src/webui/www/private/scripts/dynamicTable.js @@ -1139,8 +1139,9 @@ var TorrentsTable = new Class({ }; }, - applyFilter: function(row, filterName, categoryHash) { + applyFilter: function(row, filterName, categoryHash, filterTerms) { var state = row['full_data'].state; + var name = row['full_data'].name.toLowerCase(); var inactive = false; var r; @@ -1182,14 +1183,27 @@ var TorrentsTable = new Class({ break; } - if (categoryHash == CATEGORIES_ALL) - return true; + var categoryHashInt = parseInt(categoryHash); + if (!isNaN(categoryHashInt)) { + switch (categoryHashInt) { + case CATEGORIES_ALL: + break; // do nothing + case CATEGORIES_UNCATEGORIZED: + if (row['full_data'].category.length !== 0) + return false + break; // do nothing + default: + if (categoryHashInt !== genHash(row['full_data'].category)) + return false; + } + } - if (categoryHash == CATEGORIES_UNCATEGORIZED && row['full_data'].category.length === 0) - return true; - - if (categoryHash != genHash(row['full_data'].category)) - return false; + if (filterTerms) { + for (var i = 0; i < filterTerms.length; ++i) { + if (name.indexOf(filterTerms[i]) === -1) + return false; + } + } return true; }, @@ -1199,7 +1213,7 @@ var TorrentsTable = new Class({ var rows = this.rows.getValues(); for (var i = 0; i < rows.length; ++i) - if (this.applyFilter(rows[i], filterName, categoryHash)) ++cnt; + if (this.applyFilter(rows[i], filterName, categoryHash, null)) ++cnt; return cnt; }, @@ -1208,7 +1222,7 @@ var TorrentsTable = new Class({ var rows = this.rows.getValues(); for (var i = 0; i < rows.length; ++i) - if (this.applyFilter(rows[i], filterName, categoryHash)) + if (this.applyFilter(rows[i], filterName, categoryHash, null)) rowsHashes.push(rows[i]['rowId']); return rowsHashes; @@ -1218,12 +1232,15 @@ var TorrentsTable = new Class({ var filteredRows = []; var rows = this.rows.getValues(); + var filterText = $('torrentsFilterInput').value.trim().toLowerCase(); + var filterTerms = (filterText.length > 0) ? filterText.split(" ") : null; - for (var i = 0; i < rows.length; ++i) - if (this.applyFilter(rows[i], selected_filter, selected_category)) { + for (var i = 0; i < rows.length; ++i) { + if (this.applyFilter(rows[i], selected_filter, selected_category, filterTerms)) { filteredRows.push(rows[i]); filteredRows[rows[i].rowId] = rows[i]; } + } filteredRows.sort(function(row1, row2) { var column = this.columns[this.sortedColumn];