WebUI: Support specifying tags when adding torrent

Signed-off-by: Thomas Piccirello <thomas@piccirello.com>

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>
 
@@ -193,6 +199,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

@@ -52,6 +52,26 @@ window.qBittorrent.AddTorrent ??= (() => {
         }
     };
 
+    const getTags = () => {
+        const tagsSelect = document.getElementById("tagsSelect");
+        for (const tag of window.parent.qBittorrent.Client.tagMap.keys()) {
+            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: window.parent.qBittorrent.Client.tagMap.length === 0 ? "" : "QBT_TR(All)QBT_TR[CONTEXT=AddNewTorrentDialog]",
+            },
+            keepInlineStyles: false
+        });
+    };
+
     const getPreferences = () => {
         const pref = window.parent.qBittorrent.Cache.preferences.get();
 
@@ -137,6 +157,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 isAutoTMMEnabled = () => {
         return document.getElementById("autoTMM").selectedIndex === 1;
     };
@@ -283,10 +308,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();