Support specifying tags when adding torrent in WebUI

Signed-off-by: Thomas Piccirello <[email protected]>
Piccirello · Oct 19, 2024 · 2f9f528 · 2f9f528
1 parent 9c6762b
commit 2f9f528
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 1 deletion.
diff --git a/src/webui/www/private/scripts/download.js b/src/webui/www/private/scripts/download.js
@@ -37,6 +37,7 @@ window.qBittorrent.Download ??= (() => {
     };
 
     let categories = {};
+    let tags = [];
     let defaultSavePath = "";
     let windowId = "";
     let source;
@@ -64,6 +65,37 @@ window.qBittorrent.Download ??= (() => {
         }).send();
     };
 
+    const getTags = function() {
+        new Request.JSON({
+            url: "api/v2/torrents/tags",
+            method: "get",
+            noCache: true,
+            onSuccess: function(data) {
+                if (data) {
+                    tags = data;
+
+                    const tagsSelect = document.getElementById("tagsSelect");
+                    for (const tag of tags) {
+                        const option = document.createElement("option");
+                        option.value = tag;
+                        option.textContent = tag;
+                        tagsSelect.appendChild(option);
+                    }
+
+                    new vanillaSelectBox("#tagsSelect", {
+                        maxHeight: 200,
+                        search: false,
+                        disableSelectAll: true,
+                        translations: {
+                            all: tags.length === 0 ? "" : "QBT_TR(All)QBT_TR[CONTEXT=AddNewTorrentDialog]",
+                        },
+                        keepInlineStyles: false
+                    });
+                }
+            }
+        }).send();
+    };
+
     const getPreferences = function() {
         const pref = window.parent.qBittorrent.Cache.preferences.get();
 
@@ -120,6 +152,11 @@ window.qBittorrent.Download ??= (() => {
         }
     };
 
+    const changeTagsSelect = function(element) {
+        const tags = [...element.options].filter(opt => opt.selected).map(opt => opt.value);
+        document.getElementById("tags").value = tags.join(",");
+    };
+
     const changeTMM = function(item) {
         const savepath = document.getElementById("savepath");
         const useDownloadPath = document.getElementById("useDownloadPath");
@@ -230,13 +267,15 @@ window.qBittorrent.Download ??= (() => {
         windowId = id;
     };
 
-    $(window).addEventListener("load", () => {
+    window.addEventListener("load", () => {
         getPreferences();
         getCategories();
+        getTags();
     });
 
     window.addEventListener("DOMContentLoaded", () => {
         document.getElementById("useDownloadPath").addEventListener("change", (e) => changeUseDownloadPath(e.target));
+        document.getElementById("tagsSelect").addEventListener("change", (e) => changeTagsSelect(e.target));
     });
 
     return exports();

diff --git a/src/webui/www/private/upload.html b/src/webui/www/private/upload.html
@@ -7,8 +7,10 @@
     <link rel="stylesheet" type="text/css" href="css/dynamicTable.css?v=${CACHEID}">
     <link rel="stylesheet" href="css/style.css?v=${CACHEID}" type="text/css">
     <link rel="stylesheet" href="css/Window.css?v=${CACHEID}" type="text/css">
+    <link rel="stylesheet" href="css/vanillaSelectBox.css" type="text/css">
     <script src="scripts/lib/MooTools-Core-1.6.0-compat-compressed.js"></script>
     <script src="scripts/lib/MooTools-More-1.6.0-compat-compressed.js"></script>
+    <script src="scripts/lib/vanillaSelectBox.js"></script>
     <script src="scripts/localpreferences.js"></script>
     <script src="scripts/download.js?v=${CACHEID}"></script>
     <script src="scripts/misc.js?locale=${LANG}&v=${CACHEID}"></script>
@@ -18,6 +20,13 @@
     <script src="scripts/contextmenu.js"></script>
     <script src="scripts/dynamicTable.js?v=${CACHEID}"></script>
     <script src="scripts/torrent-content.js?v=${CACHEID}"></script>
+
+    <style>
+        #btn-group-tagsSelect button {
+            background-color: initial;
+        }
+
+    </style>
 </head>
 
 <body>
@@ -100,6 +109,17 @@
                                     </div>
                                 </td>
                             </tr>
+                            <tr>
+                                <td>
+                                    <label id="tagsLabel" for="tagsSelect">QBT_TR(Tags:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
+                                </td>
+                                <td>
+                                    <div>
+                                        <input type="hidden" id="tags" name="tags">
+                                        <select id="tagsSelect" name="tagsSelect" multiple></select>
+                                    </div>
+                                </td>
+                            </tr>
                             <tr>
                                 <td>
                                     <label for="startTorrent">QBT_TR(Start torrent)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>