WebUI: Implement subcategories

PR #18740.

src/webui/www/private/scripts/client.js

@@ -33,6 +33,7 @@ let alternativeSpeedLimits = false;
 let queueing_enabled = true;
 let serverSyncMainDataInterval = 1500;
 let customSyncMainDataInterval = null;
+let useSubcategories = true;
 let searchTabInitialized = false;
 let rssTabInitialized = false;
 let logTabInitialized = false;
@@ -429,9 +430,17 @@ window.addEvent('load', function() {
         categoryList.empty();
 
         const create_link = function(hash, text, count) {
-            const html = '<a href="#" onclick="setCategoryFilter(' + hash + ');return false;">'
+            let display_name = text;
+            let margin_left = 0;
+            if (useSubcategories) {
+                const category_path = text.split("/");
+                display_name = category_path[category_path.length - 1];
+                margin_left = (category_path.length - 1) * 20;
+            }
+
+            const html = '<a href="#" style="margin-left: ' + margin_left + 'px" onclick="setCategoryFilter(' + hash + ');return false;">'
                 + '<img src="images/view-categories.svg"/>'
-                + window.qBittorrent.Misc.escapeHtml(text) + ' (' + count + ')' + '</a>';
+                + window.qBittorrent.Misc.escapeHtml(display_name) + ' (' + count + ')' + '</a>';
             const el = new Element('li', {
                 id: hash,
                 html: html
@@ -455,11 +464,20 @@ window.addEvent('load', function() {
         });
         sortedCategories.sort();
 
-        Object.each(sortedCategories, function(categoryName) {
+        for (let i = 0; i < sortedCategories.length; ++i) {
+            const categoryName = sortedCategories[i];
             const categoryHash = genHash(categoryName);
-            const categoryCount = category_list[categoryHash].torrents.length;
+            let categoryCount = category_list[categoryHash].torrents.length;
+
+            if (useSubcategories) {
+                for (let j = i + 1; j < sortedCategories.length && sortedCategories[j].startsWith(categoryName + "/"); ++j) {
+                    const hash = genHash(sortedCategories[j]);
+                    categoryCount += category_list[hash].torrents.length;
+                }
+            }
+
             categoryList.appendChild(create_link(categoryHash, categoryName, categoryCount));
-        });
+        }
 
         highlightSelectedCategory();
     };
@@ -821,6 +839,11 @@ window.addEvent('load', function() {
             updateAltSpeedIcon(alternativeSpeedLimits);
         }
 
+        if (useSubcategories != serverState.use_subcategories) {
+            useSubcategories = serverState.use_subcategories;
+            updateCategoryList();
+        }
+
         serverSyncMainDataInterval = Math.max(serverState.refresh_interval, 500);
     };
 

src/webui/www/private/scripts/contextmenu.js

@@ -517,10 +517,17 @@ window.qBittorrent.ContextMenu = (function() {
             if ((id != CATEGORIES_ALL) && (id != CATEGORIES_UNCATEGORIZED)) {
                 this.showItem('editCategory');
                 this.showItem('deleteCategory');
+                if (useSubcategories) {
+                    this.showItem('createSubcategory');
+                }
+                else {
+                    this.hideItem('createSubcategory');
+                }
             }
             else {
                 this.hideItem('editCategory');
                 this.hideItem('deleteCategory');
+                this.hideItem('createSubcategory');
             }
         }
     });

src/webui/www/private/scripts/dynamicTable.js

@@ -1383,8 +1383,16 @@ window.qBittorrent.DynamicTable = (function() {
                             return false;
                         break; // do nothing
                     default:
-                        if (categoryHashInt !== genHash(row['full_data'].category))
-                            return false;
+                        if (!useSubcategories) {
+                            if (categoryHashInt !== genHash(row['full_data'].category))
+                                return false;
+                        }
+                        else {
+                            const selectedCategoryName = category_list[categoryHash].name + "/";
+                            const torrentCategoryName = row['full_data'].category + "/";
+                            if (!torrentCategoryName.startsWith(selectedCategoryName))
+                                return false;
+                        }
                 }
             }
 

src/webui/www/private/scripts/mocha-init.js

@@ -66,6 +66,7 @@ let renameFilesFN = function() {};
 let torrentNewCategoryFN = function() {};
 let torrentSetCategoryFN = function() {};
 let createCategoryFN = function() {};
+let createSubcategoryFN = function() {};
 let editCategoryFN = function() {};
 let removeCategoryFN = function() {};
 let deleteUnusedCategoriesFN = function() {};
@@ -604,6 +605,25 @@ const initializeWindows = function() {
         updateMainData();
     };
 
+    createSubcategoryFN = function(categoryHash) {
+        const action = "createSubcategory";
+        const categoryName = category_list[categoryHash].name + "/";
+        new MochaUI.Window({
+            id: 'newSubcategoryPage',
+            title: "QBT_TR(New Category)QBT_TR[CONTEXT=CategoryFilterWidget]",
+            loadMethod: 'iframe',
+            contentURL: new URI("newcategory.html").setData("action", action).setData("categoryName", categoryName).toString(),
+            scrollbars: false,
+            resizable: true,
+            maximizable: false,
+            paddingVertical: 0,
+            paddingHorizontal: 0,
+            width: 400,
+            height: 150
+        });
+        updateMainData();
+    };
+
     editCategoryFN = function(categoryHash) {
         const action = "edit";
         const categoryName = category_list[categoryHash].name;