WebUI: Add confirm dialog for Auto TMM

Just like in GUI, confirmation dialog shows up if it's possible to enable Auto TMM for any selected torrent. Right now it's not possible to properly test all cases in the WebUI because context menu completely hides TMM option when some torrents have it enabled and some not (no tri-state) - but that's something to add in another PR.

PR #21378.

src/webui/www/private/css/Window.css

@@ -57,7 +57,10 @@ Required by:
     font-weight: bold;
     line-height: 15px;
     margin: 0;
+    overflow: hidden;
     padding: 5px 10px 4px 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .mochaToolbarWrapper {

src/webui/www/private/index.html

@@ -174,7 +174,7 @@
             <a href="#Tags" class="arrow-right"><img src="images/tags.svg" alt="QBT_TR(Tags)QBT_TR[CONTEXT=TransferListWidget]"> QBT_TR(Tags)QBT_TR[CONTEXT=TransferListWidget]</a>
             <ul id="contextTagList" class="scrollableMenu"></ul>
         </li>
-        <li>
+        <li title="QBT_TR(Automatic mode means that various torrent properties(eg save path) will be decided by the associated category)QBT_TR[CONTEXT=TransferListWidget]">
             <a href="#autoTorrentManagement"><img src="images/checked-completed.svg" alt="QBT_TR(Automatic Torrent Management)QBT_TR[CONTEXT=TransferListWidget]"> QBT_TR(Automatic Torrent Management)QBT_TR[CONTEXT=TransferListWidget]</a>
         </li>
         <li class="separator"><a href="#downloadLimit"><img src="images/download.svg" alt="QBT_TR(Limit download rate...)QBT_TR[CONTEXT=TransferListWidget]"> QBT_TR(Limit download rate...)QBT_TR[CONTEXT=TransferListWidget]</a></li>

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

@@ -555,22 +555,36 @@ const initializeWindows = function() {
 
     autoTorrentManagementFN = function() {
         const hashes = torrentsTable.selectedRowsIds();
-        if (hashes.length) {
-            let enable = false;
-            hashes.each((hash, index) => {
-                const row = torrentsTable.getRow(hash);
-                if (!row.full_data.auto_tmm)
-                    enable = true;
+        if (hashes.length > 0) {
+            const enableAutoTMM = hashes.some((hash) => !(torrentsTable.getRow(hash).full_data.auto_tmm));
+            if (enableAutoTMM) {
+                new MochaUI.Modal({
+                    ...window.qBittorrent.Dialog.baseModalOptions,
+                    id: "confirmAutoTMMDialog",
+                    title: "QBT_TR(Enable automatic torrent management)QBT_TR[CONTEXT=confirmAutoTMMDialog]",
+                    data: {
+                        hashes: hashes,
+                        enable: enableAutoTMM
+                    },
+                    contentURL: "views/confirmAutoTMM.html"
                 });
+            }
+            else {
                 new Request({
                     url: "api/v2/torrents/setAutoManagement",
                     method: "post",
                     data: {
                         hashes: hashes.join("|"),
-                    enable: enable
+                        enable: enableAutoTMM
+                    },
+                    onSuccess: () => {
+                        updateMainData();
+                    },
+                    onFailure: () => {
+                        alert("QBT_TR(Unable to set Auto Torrent Management for the selected torrents.)QBT_TR[CONTEXT=HttpServer]");
                     }
                 }).send();
-            updateMainData();
+            }
         }
     };
 

src/webui/www/private/views/confirmAutoTMM.html

@@ -0,0 +1,60 @@
+<div id="confirmAutoTMMDialog">
+    <div class="genericConfirmGrid">
+        <span class="confirmGridItem confirmWarning"></span>
+        <span class="confirmGridItem dialogMessage" id="confirmAutoTmmMessage"></span>
+    </div>
+</div>
+<div>
+    <input type="button" value="QBT_TR(Yes)QBT_TR[CONTEXT=MainWindow]" id="confirmAutoTmmButton">
+    <input type="button" value="QBT_TR(No)QBT_TR[CONTEXT=MainWindow]" id="cancelAutoTmmButton">
+</div>
+
+<script>
+    "use strict";
+
+    (() => {
+        const confirmButton = document.getElementById("confirmAutoTmmButton");
+        const cancelButton = document.getElementById("cancelAutoTmmButton");
+        const confirmText = document.getElementById("confirmAutoTmmMessage");
+
+        const {
+            options: { data: { hashes, enable }, id },
+            windowEl
+        } = window.MUI.Windows.instances["confirmAutoTMMDialog"];
+
+        confirmText.textContent = "QBT_TR(Are you sure you want to enable Automatic Torrent Management for the selected torrent(s)? They may be relocated.)QBT_TR[CONTEXT=confirmAutoTMMDialog]";
+
+        cancelButton.addEventListener("click", (e) => { window.qBittorrent.Client.closeWindow(id); });
+        confirmButton.addEventListener("click", (e) => {
+            new Request({
+                url: "api/v2/torrents/setAutoManagement",
+                method: "post",
+                data: {
+                    hashes: hashes.join("|"),
+                    enable: enable
+                },
+                onSuccess: () => {
+                    updateMainData();
+                    window.qBittorrent.Client.closeWindow(id);
+                },
+                onFailure: () => {
+                    alert("QBT_TR(Unable to set Auto Torrent Management for the selected torrents.)QBT_TR[CONTEXT=HttpServer]");
+                }
+            }).send();
+        });
+
+        // set tabindex so window element receives keydown events
+        windowEl.setAttribute("tabindex", "-1");
+        windowEl.focus();
+        windowEl.addEventListener("keydown", (e) => {
+            switch (e.key) {
+                case "Enter":
+                    confirmButton.click();
+                    break;
+                case "Escape":
+                    window.qBittorrent.Client.closeWindow(id);
+                    break;
+            }
+        });
+    })();
+</script>

src/webui/www/webui.qrc

@@ -423,6 +423,7 @@
         <file>private/uploadlimit.html</file>
         <file>private/views/about.html</file>
         <file>private/views/aboutToolbar.html</file>
+        <file>private/views/confirmAutoTMM.html</file>
         <file>private/views/confirmdeletion.html</file>
         <file>private/views/confirmRecheck.html</file>
         <file>private/views/cookies.html</file>