Add Search tab to WebUI

Closes qbittorrent#859, qbittorrent#8107.
Piccirello · Dec 8, 2018 · b7ad751 · b7ad751
1 parent 4d3a894
commit b7ad751
Show file tree

Hide file tree

Showing 10 changed files with 1,307 additions and 20 deletions.
diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
@@ -320,6 +320,9 @@ a.propButton img {
 
 #mochaToolbar {
     margin-top: 5px;
+    position: relative;
+    height: 29px;
+    overflow-y: hidden;
 }
 
 #mochaToolbar .divider {
@@ -336,6 +339,11 @@ a.propButton img {
     padding-right: 5px;
 }
 
+#mainWindowTabs {
+    float: right;
+    margin: 4px 5px 0 0;
+}
+
 /* Tri-state checkbox */
 
 label.tristate {
@@ -550,3 +558,47 @@ td.statusBarSeparator {
 .statisticsValue {
     text-align: right;
 }
+
+/* Search tab */
+
+#SearchPanel, #SearchPanel_wrapper, #SearchPanel_pad {
+    height: inherit;
+}
+
+#searchResults {
+    padding: 0 20px;
+    height: 100%;
+}
+
+#searchResultsTableContainer {
+    height: calc(100% - 140px);
+    -moz-height: calc(100% - 140px);
+    -webkit-height: calc(100% - 140px);
+    overflow: auto;
+}
+
+#searchResultsTableDiv {
+    height: calc(100% - 26px) !important;
+    -moz-height: calc(100% - 26px) !important;
+    -webkit-height: calc(100% - 26px) !important;
+}
+
+#searchResults .dynamicTable {
+    width: 100%;
+}
+
+#searchResults .numSearchResults {
+    font-style: italic;
+}
+
+.red {
+    color: red;
+}
+
+.green {
+    color: green;
+}
+
+.searchPluginsTableRow {
+    cursor: pointer;
+}
diff --git a/src/webui/www/private/download.html b/src/webui/www/private/download.html
@@ -81,7 +81,7 @@ <h2 class="vcenter">QBT_TR(Download Torrents from their URLs or Magnet links)QBT
             });
 
             if (urls.length)
-                $('urls').set('value', escapeHtml(urls.join("\n")));
+                $('urls').set('value', urls.join("\n"));
         }
 
         var submitted = false;

diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html
@@ -66,7 +66,8 @@ <h1 class="applicationTitle">qBittorrent Web User Interface <span class="version
                             <li><a id="showTopToolbarLink"><img class="MyMenuIcon" src="images/qbt-theme/checked.svg" alt="QBT_TR(Top Toolbar)QBT_TR[CONTEXT=MainWindow]" width="16" height="16"/>QBT_TR(Top Toolbar)QBT_TR[CONTEXT=MainWindow]</a></li>
                             <li><a id="showStatusBarLink"><img class="MyMenuIcon" src="images/qbt-theme/checked.svg" alt="QBT_TR(Status Bar)QBT_TR[CONTEXT=MainWindow]" width="16" height="16"/>QBT_TR(Status Bar)QBT_TR[CONTEXT=MainWindow]</a></li>
                             <li><a id="speedInBrowserTitleBarLink"><img class="MyMenuIcon" src="images/qbt-theme/checked.svg" alt="QBT_TR(Speed in Title Bar)QBT_TR[CONTEXT=MainWindow]" width="16" height="16"/>QBT_TR(Speed in Title Bar)QBT_TR[CONTEXT=MainWindow]</a></li>
-                            <li class="divider"><a id=StatisticsLink><img class="MyMenuIcon" src="images/qbt-theme/view-statistics.svg" alt="QBT_TR(Statistics)QBT_TR[CONTEXT=MainWindow]" width="16" height="16"/>QBT_TR(Statistics)QBT_TR[CONTEXT=MainWindow]</a></li>
+                            <li class="divider"><a id="showSearchEngineLink"><img class="MyMenuIcon" src="images/qbt-theme/checked.svg" alt="QBT_TR(Search Engine)QBT_TR[CONTEXT=MainWindow]" width="16" height="16"/>QBT_TR(Search Engine)QBT_TR[CONTEXT=MainWindow]</a></li>
+                            <li class="divider"><a id="StatisticsLink"><img class="MyMenuIcon" src="images/qbt-theme/view-statistics.svg" alt="QBT_TR(Statistics)QBT_TR[CONTEXT=MainWindow]" width="16" height="16"/>QBT_TR(Statistics)QBT_TR[CONTEXT=MainWindow]</a></li>
                         </ul>
                     </li>
                     <li>
@@ -99,6 +100,13 @@ <h1 class="applicationTitle">qBittorrent Web User Interface <span class="version
                     <a id="bottomPrioButton"><img class="mochaToolButton" title="QBT_TR(Minimum Priority)QBT_TR[CONTEXT=MainWindow]" src="images/qbt-theme/go-bottom.svg" alt="QBT_TR(Minimum Priority)QBT_TR[CONTEXT=MainWindow]" width="24" height="24"/></a>
                 </span>
                 <a id="preferencesButton" class="divider"><img class="mochaToolButton" title="QBT_TR(Options)QBT_TR[CONTEXT=OptionsDialog]" src="images/qbt-theme/configure.svg" alt="QBT_TR(Options)QBT_TR[CONTEXT=OptionsDialog]" width="24" height="24"/></a>
+                <div id="mainWindowTabs" class="toolbarTabs">
+                    <ul id="mainWindowTabsList" class="tab-menu">
+                        <li id="transfersTabLink" class="selected"><a class="tab">QBT_TR(Transfers)QBT_TR[CONTEXT=MainWindow]</a></li>
+                        <li id="searchTabLink"><a class="tab">QBT_TR(Search)QBT_TR[CONTEXT=MainWindow]</a></li>
+                    </ul>
+                    <div class="clear"></div>
+                </div>
             </div>
         </div>
         <div id="pageWrapper">

diff --git a/src/webui/www/private/installsearchplugin.html b/src/webui/www/private/installsearchplugin.html
@@ -0,0 +1,69 @@
+<style type="text/css">
+    #installSearchPluginContainer {
+        margin: 10px;
+    }
+
+    #installSearchPluginContainer button {
+        padding: 3px 20px;
+    }
+
+    #newPluginPath {
+        width: 100%;
+        line-height: 2em;
+    }
+</style>
+
+<div id="installSearchPluginContainer">
+    <h2>QBT_TR(Plugin path:)QBT_TR[CONTEXT=PluginSourceDlg]</h2>
+
+    <div>
+        <input type="text" id="newPluginPath" placeholder="QBT_TR(URL or local directory)QBT_TR[CONTEXT=PluginSourceDlg]" autocorrect="off" autocapitalize="none" />
+        <div style="margin-top: 10px; text-align: center;">
+            <button id="newPluginCancel" onclick="closeSearchWindow('installSearchPlugin');">QBT_TR(Cancel)QBT_TR[CONTEXT=PluginSourceDlg]</button>
+            <button id="newPluginOk" onclick="newPluginOk();">QBT_TR(Ok)QBT_TR[CONTEXT=PluginSourceDlg]</button></div>
+        </div>
+    </div>
+</div>
+
+<script>
+    'use strict';
+
+    var initInstallSearchPlugin = function() {
+        var installSearchPluginKeyboardEvents = new Keyboard({
+            defaultEventType: 'keydown',
+            events: {
+                'enter': function (e) {
+                    // accept enter key as a click
+                    new Event(e).stop();
+
+                    var elem = e.event.srcElement;
+                    if ((elem.id === "newPluginPath") || (elem.id === "newPluginOk"))
+                        newPluginOk();
+                    else if (elem.id === "newPluginCancel")
+                        closeSearchWindow('installSearchPlugin');
+                }
+            }
+        });
+        installSearchPluginKeyboardEvents.activate();
+
+        $('newPluginPath').select();
+    };
+
+    var newPluginOk = function() {
+        var path = $("newPluginPath").get("value").trim();
+        if (path)
+            new Request({
+                url: 'api/v2/search/installPlugin',
+                noCache: true,
+                method: 'post',
+                data: {
+                    sources: path,
+                },
+                onRequest: function(){
+                    closeSearchWindow('installSearchPlugin');
+                }
+            }).send();
+    };
+
+    initInstallSearchPlugin();
+</script>
diff --git a/src/webui/www/private/scripts/client.js b/src/webui/www/private/scripts/client.js
@@ -24,6 +24,8 @@
 
 torrentsTable = new TorrentsTable();
 torrentPeersTable = new TorrentPeersTable();
+searchResultsTable = new SearchResultsTable();
+searchPluginsTable = new SearchPluginsTable();
 
 var updatePropertiesPanel = function() {};
 
@@ -76,8 +78,9 @@ window.addEvent('load', function() {
     };
 
     window.addEvent('resize', function() {
-        // Resizing might takes some time.
-        saveColumnSizes.delay(200);
+        // only save sizes if the columns are visible
+        if (!$("mainColumn").hasClass("invisible"))
+            saveColumnSizes.delay(200); // Resizing might takes some time.
     });
 
     /*MochaUI.Desktop = new MochaUI.Desktop();
@@ -87,22 +90,40 @@ window.addEvent('load', function() {
     });*/
     MochaUI.Desktop.initialize();
 
-    var filt_w = localStorage.getItem('filters_width');
-    if ($defined(filt_w))
-        filt_w = filt_w.toInt();
-    else
-        filt_w = 120;
-    new MochaUI.Column({
-        id: 'filtersColumn',
-        placement: 'left',
-        onResize: saveColumnSizes,
-        width: filt_w,
-        resizeLimit: [1, 300]
-    });
-    new MochaUI.Column({
-        id: 'mainColumn',
-        placement: 'main'
-    });
+    var buildTransfersTab = function() {
+        var filt_w = localStorage.getItem('filters_width');
+        if ($defined(filt_w))
+            filt_w = filt_w.toInt();
+        else
+            filt_w = 120;
+        new MochaUI.Column({
+            id: 'filtersColumn',
+            placement: 'left',
+            onResize: saveColumnSizes,
+            width: filt_w,
+            resizeLimit: [1, 300]
+        });
+
+        new MochaUI.Column({
+            id: 'mainColumn',
+            placement: 'main'
+        });
+    };
+
+    var buildSearchTab = function() {
+        new MochaUI.Column({
+            id: 'searchTabColumn',
+            placement: 'main',
+            width: null
+        });
+
+        // start off hidden
+        $("searchTabColumn").addClass("invisible");
+    };
+
+    buildTransfersTab();
+    buildSearchTab();
+    MochaUI.initializeTabs('mainWindowTabsList');
 
     setCategoryFilter = function(hash) {
         selected_category = hash;
@@ -184,6 +205,15 @@ window.addEvent('load', function() {
         $('speedInBrowserTitleBarLink').firstChild.style.opacity = '0';
 
     // After showing/hiding the toolbar + status bar
+    var showSearchEngine = localStorage.getItem('show_search_engine') === "true";
+    if (!showSearchEngine) {
+        // uncheck menu option
+        $('showSearchEngineLink').firstChild.style.opacity = '0';
+        // hide tabs
+        $('mainWindowTabs').addClass('invisible');
+    }
+
+    // After Show Top Toolbar
     MochaUI.Desktop.setDesktopSize();
 
     var syncMainDataLastResponseId = 0;
@@ -543,8 +573,83 @@ window.addEvent('load', function() {
         processServerState();
     });
 
+    $('showSearchEngineLink').addEvent('click', function(e) {
+        showSearchEngine = !showSearchEngine;
+        localStorage.setItem('show_search_engine', showSearchEngine.toString());
+        if (showSearchEngine) {
+            $('showSearchEngineLink').firstChild.style.opacity = '1';
+            $('mainWindowTabs').removeClass('invisible');
+
+            addMainWindowTabsEventListener();
+            if (!MochaUI.Panels.instances.SearchPanel)
+                addSearchPanel();
+        }
+        else {
+            $('showSearchEngineLink').firstChild.style.opacity = '0';
+            $('mainWindowTabs').addClass('invisible');
+            $("transfersTabLink").click();
+
+            removeMainWindowTabsEventListener();
+        }
+    });
+
     $('StatisticsLink').addEvent('click', StatisticsLinkFN);
 
+    // main window tabs
+
+    var showTransfersTab = function() {
+        $("filtersColumn").removeClass("invisible");
+        $("filtersColumn_handle").removeClass("invisible");
+        $("mainColumn").removeClass("invisible");
+        hideSearchTab();
+    };
+
+    var hideTransfersTab = function() {
+        $("filtersColumn").addClass("invisible");
+        $("filtersColumn_handle").addClass("invisible");
+        $("mainColumn").addClass("invisible");
+        MochaUI.Desktop.resizePanels();
+    };
+
+    var showSearchTab = function() {
+        $("searchTabColumn").removeClass("invisible");
+        hideTransfersTab();
+    };
+
+    var hideSearchTab = function() {
+        $("searchTabColumn").addClass("invisible");
+        MochaUI.Desktop.resizePanels();
+    };
+
+    var addMainWindowTabsEventListener = function() {
+        $('transfersTabLink').addEvent('click', showTransfersTab);
+        $('searchTabLink').addEvent('click', showSearchTab);
+    };
+
+    var removeMainWindowTabsEventListener = function() {
+        $('transfersTabLink').removeEvent('click', showTransfersTab);
+        $('searchTabLink').removeEvent('click', showSearchTab);
+    };
+
+    var addSearchPanel = function() {
+        new MochaUI.Panel({
+            id : 'SearchPanel',
+            title : 'Search',
+            header : false,
+            padding : {
+                top : 0,
+                right : 0,
+                bottom : 0,
+                left : 0
+            },
+            loadMethod : 'xhr',
+            contentURL : 'search.html',
+            content: '',
+            column : 'searchTabColumn',
+            height : null
+        });
+    };
+
     new MochaUI.Panel({
         id: 'transferList',
         title: 'Panel',
@@ -658,6 +763,12 @@ window.addEvent('load', function() {
         column: 'mainColumn',
         height: prop_h
     });
+
+    if (showSearchEngine) {
+        addMainWindowTabsEventListener();
+        addSearchPanel();
+    }
+
 });
 
 function closeWindows() {
@@ -677,6 +788,8 @@ function setupCopyEventHandler() {
                     return copyMagnetLinkFN();
                 case "CopyHash":
                     return copyHashFN();
+                case "copyDescriptionPageUrl":
+                    return copySearchTorrentUrl();
                 default:
                     return "";
             }

diff --git a/src/webui/www/private/scripts/contextmenu.js b/src/webui/www/private/scripts/contextmenu.js
@@ -400,3 +400,21 @@ var CategoriesFilterContextMenu = new Class({
         }
     }
 });
+
+var SearchPluginsTableContextMenu = new Class({
+    Extends: ContextMenu,
+
+    updateMenuItems: function () {
+        var enabledColumnIndex = function(text) {
+            var columns = $("searchPluginsTableFixedHeaderRow").getChildren("th");
+            for (var i = 0; i < columns.length; ++i)
+                if (columns[i].get("html") === "Enabled")
+                    return i;
+        };
+
+        this.showItem('Enabled');
+        this.setItemChecked('Enabled', this.options.element.getChildren("td")[enabledColumnIndex()].get("html") === "Yes");
+
+        this.showItem('Uninstall');
+    }
+});