Gui: Add dropdown filters for Categories and Type (#11603)

cleaned up the on load to clear previous filters when the modal was closed

src/Jackett.Common/Content/custom.js

@@ -23,7 +23,9 @@ $.fn.focusWithoutScrolling = function () {
 };
 
 $(document).ready(function () {
-    $.ajaxSetup({ cache: false });
+    $.ajaxSetup({
+        cache: false
+    });
 
     Handlebars.registerHelper('if_eq', function (a, b, opts) {
         if (a == b)
@@ -147,14 +149,11 @@ function reloadIndexers() {
 
             if (item.type == "public") {
                 item.type_label = "success";
-            }
+            } else if (item.type == "private") {
-            else if (item.type == "private") {
                 item.type_label = "danger";
-            }
+            } else if (item.type == "semi-private") {
-            else if (item.type == "semi-private") {
                 item.type_label = "warning";
-            }
+            } else {
-            else {
                 item.type_label = "default";
             }
 
@@ -180,21 +179,27 @@ function reloadIndexers() {
 
 function displayConfiguredIndexersList(indexers) {
     var indexersTemplate = Handlebars.compile($("#configured-indexer-table").html());
-    var indexersTable = $(indexersTemplate({ indexers: indexers, total_configured_indexers: indexers.length }));
+    var indexersTable = $(indexersTemplate({
+        indexers: indexers,
+        total_configured_indexers: indexers.length
+    }));
     prepareTestButtons(indexersTable);
     prepareSearchButtons(indexersTable);
     prepareSetupButtons(indexersTable);
     prepareDeleteButtons(indexersTable);
     prepareCopyButtons(indexersTable);
-    indexersTable.find("table").dataTable(
+    indexersTable.find("table").dataTable({
-         {
         "stateSave": true,
         "stateDuration": 0,
         "pageLength": -1,
-             "lengthMenu": [[10, 20, 50, 100, 250, 500, -1], [10, 20, 50, 100, 250, 500, "All"]],
+        "lengthMenu": [
-             "order": [[0, "asc"]],
+            [10, 20, 50, 100, 250, 500, -1],
-             "columnDefs": [
+            [10, 20, 50, 100, 250, 500, "All"]
-                {
+        ],
+        "order": [
+            [0, "asc"]
+        ],
+        "columnDefs": [{
                 "targets": 0,
                 "visible": true,
                 "searchable": true,
@@ -218,7 +223,10 @@ function displayUnconfiguredIndexersList() {
     var UnconfiguredIndexersDialog = $($("#select-indexer").html());
 
     var indexersTemplate = Handlebars.compile($("#unconfigured-indexer-table").html());
-    var indexersTable = $(indexersTemplate({ indexers: unconfiguredIndexers, total_unconfigured_indexers: unconfiguredIndexers.length  }));
+    var indexersTable = $(indexersTemplate({
+        indexers: unconfiguredIndexers,
+        total_unconfigured_indexers: unconfiguredIndexers.length
+    }));
     indexersTable.find('.indexer-setup').each(function (i, btn) {
         var indexer = unconfiguredIndexers[i];
         $(btn).click(function () {
@@ -264,25 +272,36 @@ function displayUnconfiguredIndexersList() {
             });
         });
     });
-    indexersTable.find("table").DataTable(
+    indexersTable.find("table").DataTable({
-        {
         initComplete: function () {
-                this.api().columns().every(function () {
+            var currentTable = this;
+            this.api().columns().every(function (index, i, j) {
                 var column = this;
                 var headerText = column.header().innerText;
 
-                    if (headerText == 'Language') {
+                if (headerText == 'Type') {
-                        var select = $('<select><option value="">Show all</option></select>')
+                    var select = createDropDownHtml(column, true);
-                            .appendTo($(column.footer()).empty())
-                            .on('change', function () {
-                                var val = $.fn.dataTable.util.escapeRegex(
-                                    $(this).val()
-                                );
 
-                                column
+                    var columnData = currentTable.api().columns(index + 1).data();
-                                    .search(val ? '^' + val + '$' : '', true, false)
+                    var distinctValues = [...new Set(columnData[0])];
-                                    .draw();
+                    distinctValues.forEach(function (distinctVal) {
+                        select.append('<option value="' + distinctVal + '">' + distinctVal.replace(/^\w/, (c) => c.toUpperCase()) + '</option>')
                     });
+                } else if (headerText == 'Categories') {
+                    var select = createDropDownHtml(column, false);
+
+                    var columnData = [];
+                    column.data().unique().each(function (d, j) {
+                        d.split(',').forEach(function (val) {
+                            columnData.push(val.trim());
+                        });
+                    });
+                    var distinctValues = [...new Set(columnData)];
+                    distinctValues.sort().forEach(function (distinctVal) {
+                        select.append('<option value="' + distinctVal + '">' + distinctVal + '</option>')
+                    });
+                } else if (headerText == 'Language') {
+                    var select = createDropDownHtml(column, true);
 
                     column.data().unique().sort().each(function (d, j) {
                         select.append('<option value="' + d + '">' + d + '</option>')
@@ -300,10 +319,14 @@ function displayUnconfiguredIndexersList() {
         },
         "bAutoWidth": false,
         "pageLength": -1,
-            "lengthMenu": [[10, 20, 50, 100, 250, 500, -1], [10, 20, 50, 100, 250, 500, "All"]],
+        "lengthMenu": [
-            "order": [[0, "asc"]],
+            [10, 20, 50, 100, 250, 500, -1],
-            "columnDefs": [
+            [10, 20, 50, 100, 250, 500, "All"]
-                {
+        ],
+        "order": [
+            [0, "asc"]
+        ],
+        "columnDefs": [{
                 "name": "name",
                 "targets": 0,
                 "visible": true,
@@ -364,6 +387,28 @@ function displayUnconfiguredIndexersList() {
     UnconfiguredIndexersDialog.modal("show");
 }
 
+function createDropDownHtml(column, exactMatch) {
+    var select = $('<select><option value="">Show all</option></select>')
+        .appendTo($(column.footer()).empty())
+        .on('change', function () {
+            var val = $.fn.dataTable.util.escapeRegex(
+                $(this).val()
+            );
+
+            if (exactMatch) {
+                column
+                    .search(val ? '^' + val + '$' : '', true, false)
+                    .draw();
+            } else {
+                column
+                    .search(val ? val : '', true, false)
+                    .draw();
+            }
+        });
+
+    return select;
+}
+
 function copyToClipboard(text) {
     // create hidden text element, if it doesn't already exist
     var targetId = "_hiddenCopyText_";
@@ -453,8 +498,7 @@ function prepareSetupButtons(element) {
     });
 }
 
-function updateTestState(id, state, message, parent)
+function updateTestState(id, state, message, parent) {
-{
     var btn = parent.find(".indexer-button-test[data-id=" + id + "]");
 
     var sortmsg = message;
@@ -468,7 +512,9 @@ function updateTestState(id, state, message, parent)
     if (message) {
         btn.tooltip("hide");
         btn.attr("title", message);
-        btn.data('bs.tooltip', false).tooltip({ title: message });
+        btn.data('bs.tooltip', false).tooltip({
+            title: message
+        });
 
     }
     var icon = btn.find("span");
@@ -481,7 +527,10 @@ function updateTestState(id, state, message, parent)
     } else if (state == "inprogres") {
         icon.addClass("glyphicon-refresh test-inprogres spinner");
     }
-    var dt = $.fn.dataTable.tables({ visible: true, api: true}).rows().invalidate('dom');
+    var dt = $.fn.dataTable.tables({
+        visible: true,
+        api: true
+    }).rows().invalidate('dom');
     if (state != "inprogres")
         dt.draw();
 }
@@ -568,13 +617,20 @@ function populateConfigItems(configForm, config) {
 
 function newConfigModal(title, config, caps, link, alternativesitelinks, description) {
     var configTemplate = Handlebars.compile($("#jackett-config-setup-modal").html());
-    var configForm = $(configTemplate({ title: title, caps: caps, link: link, description: description }));
+    var configForm = $(configTemplate({
+        title: title,
+        caps: caps,
+        link: link,
+        description: description
+    }));
     $("#modals").append(configForm);
     populateConfigItems(configForm, config);
 
     if (alternativesitelinks.length >= 1) {
         var AlternativeSiteLinksTemplate = Handlebars.compile($("#setup-item-alternativesitelinks").html());
-        var template = $(AlternativeSiteLinksTemplate({ "alternativesitelinks": alternativesitelinks }));
+        var template = $(AlternativeSiteLinksTemplate({
+            "alternativesitelinks": alternativesitelinks
+        }));
         configForm.find("div[data-id='sitelink']").after(template);
         template.find("a.alternativesitelink").click(function (a) {
             $("div[data-id='sitelink'] input").val(this.href);
@@ -591,7 +647,9 @@ function getConfigModalJson(configForm) {
         $el = $(el);
         var type = $el.data("type");
         var id = $el.data("id");
-        var itemEntry = { id: id };
+        var itemEntry = {
+            id: id
+        };
         switch (type) {
             case "hiddendata":
                 itemEntry.value = $el.find(".setup-item-hiddendata input").val();
@@ -696,8 +754,7 @@ function clearNotifications() {
     $('[data-notify="container"]').remove();
 }
 
-function updateReleasesRow(row)
+function updateReleasesRow(row) {
-{
     var labels = $(row).find("span.release-labels");
     var TitleLink = $(row).find("td.Title > a");
     var IMDBId = $(row).data("imdb");
@@ -781,7 +838,10 @@ function showSearch(selectedIndexer, query, category) {
         var selected = select.val();
         var options = []
         $.each(cats, function (ID, Name) {
-            options.push({ label: ID + ' (' + Name + ')', value: ID });
+            options.push({
+                label: ID + ' (' + Name + ')',
+                value: ID
+            });
         });
         select.multiselect('dataprovider', options);
         select.val(selected).multiselect("refresh");
@@ -790,7 +850,9 @@ function showSearch(selectedIndexer, query, category) {
     $('#searchTracker').change(jQuery.proxy(function () {
         var trackerIds = $('#searchTracker').val();
         setCategories(trackerIds, this.items);
-    }, { items: configuredIndexers }));
+    }, {
+        items: configuredIndexers
+    }));
 
     var queryField = document.getElementById("searchquery");
     queryField.addEventListener("keyup", function (event) {
@@ -905,10 +967,13 @@ $.fn.dataTable.ext.search = [
 function updateSearchResultTable(element, results) {
     var resultsTemplate = Handlebars.compile($("#jackett-search-results").html());
     element.html($(resultsTemplate(results)));
-    element.find('tr.jackett-search-results-row').each(function () { updateReleasesRow(this); });
+    element.find('tr.jackett-search-results-row').each(function () {
-    var settings = { "deadfilter": true };
+        updateReleasesRow(this);
-    var datatable = element.find('table').DataTable(
+    });
-        {
+    var settings = {
+        "deadfilter": true
+    };
+    var datatable = element.find('table').DataTable({
         "fnStateSaveParams": function (oSettings, sValue) {
             sValue.search.search = ""; // don't save the search filter content
             sValue.deadfilter = settings.deadfilter;
@@ -924,10 +989,14 @@ function updateSearchResultTable(element, results) {
         "stateDuration": 0,
         "bAutoWidth": false,
         "pageLength": 20,
-            "lengthMenu": [[10, 20, 50, 100, 250, 500, -1], [10, 20, 50, 100, 250, 500, "All"]],
+        "lengthMenu": [
-            "order": [[0, "desc"]],
+            [10, 20, 50, 100, 250, 500, -1],
-            "columnDefs": [
+            [10, 20, 50, 100, 250, 500, "All"]
-                {
+        ],
+        "order": [
+            [0, "desc"]
+        ],
+        "columnDefs": [{
                 "targets": 0,
                 "visible": false,
                 "searchable": false,
@@ -985,8 +1054,7 @@ function updateSearchResultTable(element, results) {
             var deadfilterdiv = element.find(".dataTables_deadfilter");
             var deadfiltercheckbox = deadfilterdiv.find("input");
             if (!deadfiltercheckbox.length) {
-                    deadfilterlabel = $('<label><input type="checkbox" id="jackett-search-results-datatable_deadfilter_checkbox" value="1"> Show dead torrents</label>'
+                deadfilterlabel = $('<label><input type="checkbox" id="jackett-search-results-datatable_deadfilter_checkbox" value="1"> Show dead torrents</label>');
-                        );
                 deadfilterdiv.append(deadfilterlabel);
                 deadfiltercheckbox = deadfilterlabel.find("input");
                 deadfiltercheckbox.on("change", function () {
@@ -1049,6 +1117,7 @@ function bindUIButtons() {
         $("#modals").empty();
         displayUnconfiguredIndexersList();
         $('#unconfigured-indexer-datatable tfoot tr').insertAfter($('#unconfigured-indexer-datatable thead tr'));
+        $('#unconfigured-indexer-datatable').DataTable().search('').columns().search('').draw();
     });
 
     $("#jackett-test-all").click(function () {
@@ -1067,24 +1136,32 @@ function bindUIButtons() {
                 item.CategoryDesc = insertWordWrap(item.CategoryDesc);
             }
             var releaseTemplate = Handlebars.compile($("#jackett-releases").html());
-            var item = { releases: data, Title: 'Releases' };
+            var item = {
+                releases: data,
+                Title: 'Releases'
+            };
             var releaseDialog = $(releaseTemplate(item));
             var table = releaseDialog.find('table');
-            releaseDialog.find('tr.jackett-releases-row').each(function () { updateReleasesRow(this); });
+            releaseDialog.find('tr.jackett-releases-row').each(function () {
+                updateReleasesRow(this);
+            });
             releaseDialog.on('hidden.bs.modal', function (e) {
                 $('#indexers div.dataTables_filter input').focusWithoutScrolling();
             });
 
-            table.DataTable(
+            table.DataTable({
-                 {
                 "stateSave": true,
                 "stateDuration": 0,
                 "bAutoWidth": false,
                 "pageLength": 20,
-                     "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],
+                "lengthMenu": [
-                     "order": [[0, "desc"]],
+                    [10, 20, 50, -1],
-                     "columnDefs": [
+                    [10, 20, 50, "All"]
-                        {
+                ],
+                "order": [
+                    [0, "desc"]
+                ],
+                "columnDefs": [{
                         "targets": 0,
                         "visible": false,
                         "searchable": false,
@@ -1161,7 +1238,9 @@ function bindUIButtons() {
     $("#view-jackett-logs").click(function () {
         api.getServerLogs(function (data) {
             var releaseTemplate = Handlebars.compile($("#jackett-logs").html());
-            var item = { logs: data };
+            var item = {
+                logs: data
+            };
             var releaseDialog = $(releaseTemplate(item));
             $("#modals").append(releaseDialog);
             releaseDialog.modal("show");
@@ -1266,9 +1345,7 @@ function bindUIButtons() {
 function proxyWarning(input) {
     if (input != null && input.toString().trim() !== "-1") { // disabled = -1
         $('#proxy-warning').show();
-    }
+    } else {
-    else
-    {
         $('#proxy-warning').hide();
     }
 }

src/Jackett.Common/Content/index.html

@@ -698,6 +698,6 @@
     </script>
 
     <script type="text/javascript" src="../libs/api.js?changed=2017083001"></script>
-    <script type="text/javascript" src="../custom.js?changed=20210423"></script>
+    <script type="text/javascript" src="../custom.js?changed=20210424"></script>
 </body>
 </html>