WebUI: Support specifying tags when adding torrent

Signed-off-by: Thomas Piccirello <[email protected]>

Author: Piccirello

src/webui/www/private/addtorrent.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 defer src="scripts/lib/MooTools-Core-1.6.0-compat-compressed.js"></script>
     <script defer src="scripts/lib/MooTools-More-1.6.0-compat-compressed.js"></script>
+    <script defer src="scripts/lib/vanillaSelectBox.js"></script>
     <script defer src="scripts/localpreferences.js?v=${CACHEID}"></script>
     <script defer src="scripts/color-scheme.js?v=${CACHEID}"></script>
     <script defer src="scripts/addtorrent.js?locale=${LANG}&v=${CACHEID}"></script>
@@ -109,6 +111,10 @@
             }
         }
 
+        #btn-group-tagsSelect button {
+            background-color: initial;
+        }
+
     </style>
 </head>
 
@@ -192,6 +198,17 @@
                                     </div>
                                 </td>
                             </tr>
+                            <tr>
+                                <td class="noWrap">
+                                    <label id="tagsLabel" for="tagsSelect">QBT_TR(Tags:)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>
+                                </td>
+                                <td class="fullWidth">
+                                    <div>
+                                        <input type="hidden" id="tags" name="tags">
+                                        <select id="tagsSelect" name="tagsSelect" multiple></select>
+                                    </div>
+                                </td>
+                            </tr>
                             <tr>
                                 <td class="noWrap">
                                     <label for="startTorrent">QBT_TR(Start torrent)QBT_TR[CONTEXT=AddNewTorrentDialog]</label>

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

@@ -38,6 +38,7 @@ window.qBittorrent.AddTorrent ??= (() => {
     };
 
     let categories = {};
+    let tags = [];
     let defaultSavePath = "";
     let defaultTempPath = "";
     let windowId = "";
@@ -68,6 +69,38 @@ window.qBittorrent.AddTorrent ??= (() => {
             });
     };
 
+    const getTags = () => {
+        fetch("api/v2/torrents/tags", {
+                method: "GET",
+                cache: "no-store"
+            })
+            .then(async (response) => {
+                if (!response.ok)
+                    return;
+
+                const data = await response.json();
+
+                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
+                });
+            });
+    };
+
     const getPreferences = () => {
         const pref = window.parent.qBittorrent.Cache.preferences.get();
 
@@ -132,6 +165,11 @@ window.qBittorrent.AddTorrent ??= (() => {
         }
     };
 
+    const changeTagsSelect = (element) => {
+        const tags = [...element.options].filter(opt => opt.selected).map(opt => opt.value);
+        document.getElementById("tags").value = tags.join(",");
+    };
+
     const changeTMM = (item) => {
         const savepath = document.getElementById("savepath");
         const useDownloadPath = document.getElementById("useDownloadPath");
@@ -266,10 +304,12 @@ window.qBittorrent.AddTorrent ??= (() => {
 
         getPreferences();
         getCategories();
+        getTags();
     });
 
     window.addEventListener("DOMContentLoaded", (event) => {
         document.getElementById("useDownloadPath").addEventListener("change", (e) => changeUseDownloadPath(e.target.checked));
+        document.getElementById("tagsSelect").addEventListener("change", (e) => changeTagsSelect(e.target));
     });
 
     return exports();