Revise folder monitoring functions in WebUI

Closes #14241.

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

@@ -127,22 +127,6 @@
                 </tr>
             </thead>
             <tbody></tbody>
-            <tfoot>
-                <tr>
-                    <td style="padding-top:4px;"><input type="text" id="new_watch_folder_txt" autocorrect="off" autocapitalize="none" /></td>
-                    <td style="padding-top:4px;">
-                        <div class="select-watched-folder-editable">
-                            <select id="new_watch_folder_select" onchange="qBittorrent.Preferences.changeWatchFolderSelect(this)">
-                                <option value="watch_folder">QBT_TR(Monitored folder)QBT_TR[CONTEXT=ScanFoldersModel]</option>
-                                <option selected value="default_folder">QBT_TR(Default save location)QBT_TR[CONTEXT=ScanFoldersModel]</option>
-                                <option value="other">QBT_TR(Other...)QBT_TR[CONTEXT=HttpServer]</option>
-                            </select>
-                            <input id="new_watch_folder_other_txt" type="text" value="QBT_TR(Monitored folder)QBT_TR[CONTEXT=ScanFoldersModel]" hidden />
-                            <img src="icons/list-add.svg" alt="Add" style="padding-left:170px;width:16px;cursor:pointer;" onclick="qBittorrent.Preferences.addWatchFolder();" />
-                        </div>
-                    </td>
-                </tr>
-            </tfoot>
         </table>
     </fieldset>
 
@@ -1290,30 +1274,10 @@
             $('temppath_text').setProperty('disabled', !isTempDirEnabled);
         };
 
-        const addWatchFolder = function() {
+        const changeWatchFolderSelect = (item) => {
-            const new_folder = $('new_watch_folder_txt').getProperty('value').trim();
+            if (item.value === "other") {
-            if (new_folder.length <= 0) return;
-
-            const new_other = $('new_watch_folder_other_txt').getProperty('value').trim();
-            if (new_other.length <= 0) return;
-
-            const new_select = $('new_watch_folder_select').getProperty('value').trim();
-
-            const i = $('watched_folders_tab').getChildren('tbody')[0].getChildren('tr').length;
-            pushWatchFolder(i, new_folder, new_select, new_other);
-
-            // Clear fields
-            $('new_watch_folder_txt').setProperty('value', '');
-            const elt = $('new_watch_folder_select');
-            elt.setProperty('value', 'watch_folder');
-            const text = elt.options[elt.selectedIndex].innerHTML;
-            $('new_watch_folder_other_txt').setProperty('value', text);
-        };
-
-        const changeWatchFolderSelect = function(item) {
-            if (item.value == "other") {
                 item.nextElementSibling.hidden = false;
-                item.nextElementSibling.value = 'QBT_TR(Type folder here)QBT_TR[CONTEXT=HttpServer]';
+                item.nextElementSibling.value = 'QBT_TR(Type folder here)QBT_TR[CONTEXT=ScanFoldersModel]';
                 item.nextElementSibling.select();
             }
             else {
@@ -1323,16 +1287,19 @@
             }
         };
 
-        const pushWatchFolder = function(pos, folder, sel, other) {
+        const addWatchFolder = (folder = "", sel = "default_folder", other = "") => {
+            const pos = $('watched_folders_tab').getChildren('tbody')[0].getChildren('tr').length;
             const myinput = "<input id='text_watch_" + pos + "' type='text' value='" + folder + "'>";
-            const disableInput = (sel != "other");
+            const disableInput = (sel !== "other");
             const mycb = "<div class='select-watched-folder-editable'>"
                 + "<select id ='cb_watch_" + pos + "' onchange='qBittorrent.Preferences.changeWatchFolderSelect(this)'>"
                 + "<option value='watch_folder'>QBT_TR(Monitored folder)QBT_TR[CONTEXT=ScanFoldersModel]</option>"
                 + "<option value='default_folder'>QBT_TR(Default save location)QBT_TR[CONTEXT=ScanFoldersModel]</option>"
-                + "<option value='other'>QBT_TR(Other...)QBT_TR[CONTEXT=HttpServer]</option>"
+                + "<option value='other'>QBT_TR(Other...)QBT_TR[CONTEXT=ScanFoldersModel]</option>"
                 + "</select>"
-                + "<input id='cb_watch_txt_" + pos + "' type='text' " + (disableInput ? "hidden " : "") + "/></div>";
+                + "<input id='cb_watch_txt_" + pos + "' type='text' " + (disableInput ? "hidden " : "") + "/>"
+                + "<img src='icons/list-add.svg' id='addFolderImg_" + pos + "' alt='Add' style='padding-left:170px;width:16px;cursor:pointer;' onclick='qBittorrent.Preferences.addWatchFolder();' />"
+                + "</div>";
 
             watchedFoldersTable.push([myinput, mycb]);
             $('cb_watch_' + pos).setProperty('value', sel);
@@ -1341,9 +1308,13 @@
                 other = elt.options[elt.selectedIndex].innerHTML;
             }
             $('cb_watch_txt_' + pos).setProperty('value', other);
+
+            // hide previous img
+            if (pos > 0)
+                $('addFolderImg_' + (pos - 1)).style.display = "none";
         };
 
-        const getWatchedFolders = function() {
+        const getWatchedFolders = () => {
             const nb_folders = $("watched_folders_tab").getChildren("tbody")[0].getChildren("tr").length;
             const folders = new Hash();
             for (let i = 0; i < nb_folders; ++i) {
@@ -1352,7 +1323,7 @@
                     const sel = $('cb_watch_' + i).getProperty('value').trim();
 
                     let other;
-                    if (sel == "other")
+                    if (sel === "other")
                         other = $('cb_watch_txt_' + i).getProperty('value').trim();
                     else
                         other = (sel === "watch_folder") ? 0 : 1;
@@ -1663,19 +1634,19 @@
                         updateExportDirFinEnabled();
 
                         // Automatically add torrents from
-                        let i = 0;
+                        for (const [folder, folderType] of Object.entries(pref.scan_dirs)) {
-                        for (const folder in pref.scan_dirs) {
+                            let sel = "";
-                            let sel;
                             let other = "";
-                            if (typeof pref.scan_dirs[folder] == "string") {
+                            if (typeof folderType === "number") {
-                                other = pref.scan_dirs[folder];
+                                sel = (folderType === 0) ? "watch_folder" : "default_folder";
-                                sel = "other";
                             }
                             else {
-                                sel = (pref.scan_dirs[folder] == 0) ? "watch_folder" : "default_folder";
+                                sel = "other";
+                                other = folderType;
                             }
-                            pushWatchFolder(i++, folder, sel, other);
+                            addWatchFolder(folder, sel, other);
                         }
+                        addWatchFolder();
 
                         // Email notification upon download completion
                         $('mail_notification_checkbox').setProperty('checked', pref.mail_notification_enabled);