Add torrent name filtering to WebUI

Closes #721

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 {

src/webui/www/private/index.html

@@ -107,6 +107,9 @@
                     </ul>
                     <div class="clear"></div>
                 </div>
+                <div id="torrentsFilterToolbar">
+                    <input type="text" id="torrentsFilterInput" placeholder="QBT_TR(Filter torrent list...)QBT_TR[CONTEXT=MainWindow]" autocorrect="off" autocapitalize="none" />
+                </div>
             </div>
         </div>
         <div id="pageWrapper">

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() {

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];