[feature] Configured Indexers filter UI (#11717)

src/Jackett.Common/Content/custom.js

@@ -5,6 +5,7 @@ var configuredIndexers = [];
 var unconfiguredIndexers = [];
 var configuredTags = [];
 var availableFilters = [];
+var currentFilter = null;
 
 $.fn.inView = function () {
     if (!this.length) return false;
@@ -48,22 +49,28 @@ $(document).ready(function () {
     var pathPrefix = window.location.pathname.substr(0, index);
     api.root = pathPrefix + api.root;
 
+    const hashArgs = getHashArgs();
+    if ("indexers" in hashArgs)
+      currentFilter = hashArgs.filter
     bindUIButtons();
     loadJackettSettings();
 });
 
 function openSearchIfNecessary() {
-    const hashArgs = location.hash.substring(1).split('&').reduce((prev, item) =>
+    const hashArgs = getHashArgs();
-        Object.assign({
-            [item.split('=')[0]]: (item.split('=').length < 2 ?
-                undefined :
-                decodeURIComponent(item.split('=')[1].replace(/\+/g, '%20')))
-        }, prev), {});
     if ("search" in hashArgs) {
         showSearch(hashArgs.filter, hashArgs.tracker, hashArgs.search, hashArgs.category);
     }
 }
 
+function getHashArgs() {
+    return location.hash.substring(1).split('&').reduce((prev, item) => Object.assign({
+        [item.split('=')[0]]: (item.split('=').length < 2 ?
+            undefined :
+            decodeURIComponent(item.split('=')[1].replace(/\+/g, '%20')))
+    }, prev), {});
+}
+
 function insertWordWrap(str) {
     // insert optional word wrap after punctuation to avoid overflows on long scene titles
     return str.replace(/([\.\-_\/\\])/g, "$1\u200B");
@@ -187,7 +194,7 @@ function reloadIndexers() {
 
         configureFilters(configuredIndexers);
         
-        displayConfiguredIndexersList(configuredIndexers);
+        displayFilteredIndexersList(configuredIndexers, currentFilter);
 
         $('#indexers div.dataTables_filter input').focusWithoutScrolling();
         openSearchIfNecessary();
@@ -213,6 +220,33 @@ function configureFilters(indexers) {
       .forEach(add);
 }
 
+function displayFilteredIndexersList(indexers, filter) {
+    var active = availableFilters.find(x => x.id == filter);
+    if (availableFilters.length > 0) {
+        var filtersTemplate = Handlebars.compile($("#jackett-filters").html());
+        var filters = $(filtersTemplate({
+              filters: availableFilters,
+              active: active ? active.id : null
+            }));
+
+        $("li a", filters).on('click', function(){
+            displayFilteredIndexersList(configuredIndexers, $(this).data("id"));
+        });
+
+        $('#filters').empty();
+        $('#filters').append(filters);
+        $('#filters').fadeIn();
+    }
+    if (active) {
+        indexers = indexers.filter(active.apply, active);
+        currentFilter = active.id;
+    }
+    else {
+        currentFilter = null;
+    }
+    displayConfiguredIndexersList(indexers)
+}
+
 function displayConfiguredIndexersList(indexers) {
     var indexersTemplate = Handlebars.compile($("#configured-indexer-table").html());
     var indexersTable = $(indexersTemplate({
@@ -519,8 +553,8 @@ function prepareSearchButtons(element) {
         var $btn = $(btn);
         var id = $btn.data("id");
         $btn.click(function () {
-            window.location.hash = "search&tracker=" + id;
+            window.location.hash = "search&tracker=" + id + (currentFilter ? "&filter=" + currentFilter : "");
-            showSearch(null, id);
+            showSearch(currentFilter, id);
         });
     });
 }
@@ -887,7 +921,7 @@ function showSearch(selectedFilter, selectedIndexer, query, category) {
 
     releaseDialog.on('hidden.bs.modal', function (e) {
         $('#indexers div.dataTables_filter input').focusWithoutScrolling();
-        window.location.hash = '';
+        window.location.hash = currentFilter ? "indexers&filter=" + currentFilter : '';
     });
 
     var setTrackers = function (filterId, trackers) {
@@ -1344,8 +1378,8 @@ function bindUIButtons() {
     });
 
     $("#jackett-show-search").click(function () {
-        showSearch();
+        showSearch(currentFilter);
-        window.location.hash = "search";
+        window.location.hash = "search" + (currentFilter ? "&filter=" + currentFilter : "");
     });
 
     $("#view-jackett-logs").click(function () {

src/Jackett.Common/Content/index.html

@@ -54,6 +54,8 @@
         </div>
 
         <div class="pull-right">
+            <div id="filters" class="btn-group btn-group-sm">
+            </div>
             <button id="jackett-add-indexer" class="btn btn-success btn-sm">
                 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add indexer
             </button>
@@ -701,6 +703,17 @@
         </div>
     </script>
 
+    <script id="jackett-filters" type="text/x-handlebars-template">
+        <button id="jackett-filters-dropdown" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Filter <span class="caret"></span>
+        </button>
+        <ul class="dropdown-menu" aria-labelledby="jackett-filters-dropdown">
+            <li class="{{#if_eq active null}}active{{/if_eq}}"><a href="#">All</a></li>
+            {{#each filters}}
+            <li class="{{#if_eq ../active id}}active{{/if_eq}}"><a href="#indexers&filter={{id}}" data-id="{{id}}">{{id}}</a></li>
+            {{/each}}
+        </ul>
+    </script>
+
     <script id="spinner" type="text/x-handlebars-template">
         <span class="spinner glyphicon glyphicon-refresh"></span>
     </script>