Implement tag management for WebUI

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

@@ -55,6 +55,14 @@ var category_list = {};
 var selected_category = CATEGORIES_ALL;
 var setCategoryFilter = function() {};
 
+const TAGS_ALL = 1;
+const TAGS_UNTAGGED = 2;
+
+let tagList = {};
+
+let selectedTag = TAGS_ALL;
+let setTagFilter = function() {};
+
 var selected_filter = getLocalStorageItem('selected_filter', 'all');
 var setFilter = function() {};
 var toggleFilterDisplay = function() {};
@@ -64,6 +72,11 @@ var loadSelectedCategory = function() {
 };
 loadSelectedCategory();
 
+const loadSelectedTag = function() {
+    selectedTag = getLocalStorageItem('selected_tag', TAGS_ALL);
+};
+loadSelectedTag();
+
 function genHash(string) {
     var hash = 0;
     for (var i = 0; i < string.length; ++i) {
@@ -161,6 +174,14 @@ window.addEvent('load', function() {
             updateMainData();
     };
 
+    setTagFilter = function(hash) {
+        selectedTag = hash.toString();
+        localStorage.setItem('selected_tag', selectedTag);
+        highlightSelectedTag();
+        if (torrentsTable.tableBody !== undefined)
+            updateMainData();
+    };
+
     setFilter = function(f) {
         // Visually Select the right filter
         $("all_filter").removeClass("selectedFilter");
@@ -282,8 +303,44 @@ window.addEvent('load', function() {
         return false;
     };
 
+    const removeTorrentFromTagList = function(hash) {
+        if ((hash === null) || (hash === ""))
+            return false;
+
+        let removed = false;
+        for (const key in tagList) {
+            const tag = tagList[key];
+            if (Object.contains(tag.torrents, hash)) {
+                removed = true;
+                tag.torrents.splice(tag.torrents.indexOf(hash), 1);
+            }
+        }
+        return removed;
+    };
+
+    const addTorrentToTagList = function(torrent) {
+        if (torrent['tags'] === undefined) // Tags haven't changed
+            return false;
+
+        removeTorrentFromTagList(torrent['hash']);
+
+        if (torrent['tags'].length === 0) // No tags
+            return true;
+
+        const tags = torrent['tags'].split(',');
+        let added = false;
+        for (let i = 0; i < tags.length; ++i) {
+            const tagHash = genHash(tags[i].trim());
+            if (!Object.contains(tagList[tagHash].torrents, torrent['hash'])) {
+                added = true;
+                tagList[tagHash].torrents.push(torrent['hash']);
+            }
+        }
+        return added;
+    };
+
     var updateFilter = function(filter, filterTitle) {
-        $(filter + '_filter').firstChild.childNodes[1].nodeValue = filterTitle.replace('%1', torrentsTable.getFilteredTorrentsNumber(filter, CATEGORIES_ALL));
+        $(filter + '_filter').firstChild.childNodes[1].nodeValue = filterTitle.replace('%1', torrentsTable.getFilteredTorrentsNumber(filter, CATEGORIES_ALL, TAGS_ALL));
     };
 
     var updateFiltersList = function() {
@@ -353,6 +410,60 @@ window.addEvent('load', function() {
         }
     };
 
+    const updateTagList = function() {
+        const tagFilterList = $('tagFilterList');
+        if (tagFilterList === null)
+            return;
+
+        while (tagFilterList.firstChild !== null)
+            tagFilterList.removeChild(tagFilterList.firstChild);
+
+        const createLink = function(hash, text, count) {
+            const html = '<a href="#" onclick="setTagFilter(' + hash + ');return false;">'
+                + '<img src="images/qbt-theme/inode-directory.svg"/>'
+                + escapeHtml(text) + ' (' + count + ')' + '</a>';
+            const el = new Element('li', {
+                id: hash,
+                html: html
+            });
+            tagsFilterContextMenu.addTarget(el);
+            return el;
+        };
+
+        const torrentsCount = torrentsTable.getRowIds().length;
+        let untagged = 0;
+        for (const key in torrentsTable.rows) {
+            if (torrentsTable.rows.hasOwnProperty(key) && torrentsTable.rows[key]['full_data'].tags.length === 0)
+                untagged += 1;
+        }
+        tagFilterList.appendChild(createLink(TAGS_ALL, 'QBT_TR(All)QBT_TR[CONTEXT=TagFilterModel]', torrentsCount));
+        tagFilterList.appendChild(createLink(TAGS_UNTAGGED, 'QBT_TR(Untagged)QBT_TR[CONTEXT=TagFilterModel]', untagged));
+
+        const sortedTags = [];
+        for (const key in tagList)
+            sortedTags.push(tagList[key].name);
+        sortedTags.sort();
+
+        for (let i = 0; i < sortedTags.length; ++i) {
+            const tagName = sortedTags[i];
+            const tagHash = genHash(tagName);
+            const tagCount = tagList[tagHash].torrents.length;
+            tagFilterList.appendChild(createLink(tagHash, tagName, tagCount));
+        }
+
+        highlightSelectedTag();
+    };
+
+    const highlightSelectedTag = function() {
+        const tagFilterList = $('tagFilterList');
+        if (!tagFilterList)
+            return;
+
+        const children = tagFilterList.childNodes;
+        for (let i = 0; i < children.length; ++i)
+            children[i].className = (children[i].id === selectedTag) ? "selectedFilter" : "";
+    };
+
     var syncMainDataTimer;
     var syncMainData = function() {
         var url = new URI('api/v2/sync/maindata');
@@ -374,11 +485,13 @@ window.addEvent('load', function() {
                     clearTimeout(torrentsFilterInputTimer);
                     var torrentsTableSelectedRows;
                     var update_categories = false;
+                    let updateTags = false;
                     var full_update = (response['full_update'] === true);
                     if (full_update) {
                         torrentsTableSelectedRows = torrentsTable.selectedRowsIds();
                         torrentsTable.clear();
                         category_list = {};
+                        tagList = {};
                     }
                     if (response['rid']) {
                         syncMainDataLastResponseId = response['rid'];
@@ -408,6 +521,25 @@ window.addEvent('load', function() {
                         });
                         update_categories = true;
                     }
+                    if (response['tags']) {
+                        for (const tag of response['tags']) {
+                            const tagHash = genHash(tag);
+                            if (!tagList[tagHash]) {
+                                tagList[tagHash] = {
+                                    name: tag,
+                                    torrents: []
+                                };
+                            }
+                        }
+                        updateTags = true;
+                    }
+                    if (response['tags_removed']) {
+                        for (let i = 0; i < response['tags_removed'].length; ++i) {
+                            const tagHash = genHash(response['tags_removed'][i]);
+                            delete tagList[tagHash];
+                        }
+                        updateTags = true;
+                    }
                     if (response['torrents']) {
                         var updateTorrentList = false;
                         for (var key in response['torrents']) {
@@ -418,6 +550,8 @@ window.addEvent('load', function() {
                             torrentsTable.updateRowData(response['torrents'][key]);
                             if (addTorrentToCategoryList(response['torrents'][key]))
                                 update_categories = true;
+                            if (addTorrentToTagList(response['torrents'][key]))
+                                updateTags = true;
                             if (response['torrents'][key]['name'])
                                 updateTorrentList = true;
                         }
@@ -430,6 +564,8 @@ window.addEvent('load', function() {
                             torrentsTable.removeRow(hash);
                             removeTorrentFromCategoryList(hash);
                             update_categories = true; // Always to update All category
+                            removeTorrentFromTagList(hash);
+                            updateTags = true; // Always to update All tag
                         });
                     torrentsTable.updateTable(full_update);
                     torrentsTable.altRow();
@@ -444,6 +580,10 @@ window.addEvent('load', function() {
                         updateCategoryList();
                         torrentsTableContextMenu.updateCategoriesSubMenu(category_list);
                     }
+                    if (updateTags) {
+                        updateTagList();
+                        torrentsTableContextMenu.updateTagsSubMenu(tagList);
+                    }
 
                     if (full_update)
                         // re-select previously selected rows

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

@@ -293,6 +293,7 @@ var TorrentsTableContextMenu = new Class({
         var all_are_super_seeding = true;
         var all_are_auto_tmm = true;
         var there_are_auto_tmm = false;
+        const tagsSelectionState = Object.clone(tagList);
 
         var h = torrentsTable.selectedRowsIds();
         h.each(function(item, index) {
@@ -327,6 +328,18 @@ var TorrentsTableContextMenu = new Class({
                 there_are_auto_tmm = true;
             else
                 all_are_auto_tmm = false;
+
+            const torrentTags = data['tags'].split(', ');
+            for (const key in tagsSelectionState) {
+                const tag = tagsSelectionState[key];
+                const tagExists = torrentTags.contains(tag.name);
+                if ((tag.checked !== undefined) && (tag.checked != tagExists))
+                    tag.indeterminate = true;
+                if (tag.checked === undefined)
+                    tag.checked = tagExists;
+                else
+                    tag.checked = tag.checked && tagExists;
+            }
         });
 
         var show_seq_dl = true;
@@ -389,6 +402,13 @@ var TorrentsTableContextMenu = new Class({
             this.setItemChecked('autoTorrentManagement', all_are_auto_tmm);
         }
 
+        const contextTagList = $('contextTagList');
+        for (const tagHash in tagList) {
+            const checkbox = contextTagList.getElement('a[href=#Tag/' + tagHash + '] input[type=checkbox]');
+            const checkboxState = tagsSelectionState[tagHash];
+            checkbox.indeterminate = checkboxState.indeterminate;
+            checkbox.checked = checkboxState.checked;
+        }
     },
 
     updateCategoriesSubMenu: function(category_list) {
@@ -419,6 +439,43 @@ var TorrentsTableContextMenu = new Class({
             }
             categoryList.appendChild(el);
         });
+    },
+
+    updateTagsSubMenu: function(tagList) {
+        const contextTagList = $('contextTagList');
+        while (contextTagList.firstChild !== null)
+            contextTagList.removeChild(contextTagList.firstChild);
+
+        contextTagList.appendChild(new Element('li', {
+            html: '<a href="javascript:torrentAddTagsFN();">'
+                + '<img src="images/qbt-theme/list-add.svg" alt="QBT_TR(Add...)QBT_TR[CONTEXT=TransferListWidget]"/>'
+                + ' QBT_TR(Add...)QBT_TR[CONTEXT=TransferListWidget]'
+                + '</a>'
+        }));
+        contextTagList.appendChild(new Element('li', {
+            html: '<a href="javascript:torrentRemoveAllTagsFN();">'
+                + '<img src="images/qbt-theme/edit-clear.svg" alt="QBT_TR(Remove All)QBT_TR[CONTEXT=TransferListWidget]"/>'
+                + ' QBT_TR(Remove All)QBT_TR[CONTEXT=TransferListWidget]'
+                + '</a>'
+        }));
+
+        const sortedTags = [];
+        for (const key in tagList)
+            sortedTags.push(tagList[key].name);
+        sortedTags.sort();
+
+        for (let i = 0; i < sortedTags.length; ++i) {
+            const tagName = sortedTags[i];
+            const tagHash = genHash(tagName);
+            const el = new Element('li', {
+                html: '<a href="#Tag/' + tagHash + '" onclick="event.preventDefault(); torrentSetTagsFN(\'' + tagHash + '\', !event.currentTarget.getElement(\'input[type=checkbox]\').checked);">'
+                    + '<input type="checkbox" onclick="this.checked = !this.checked;"> ' + escapeHtml(tagName)
+                    + '</a>'
+            });
+            if (i === 0)
+                el.addClass('separator');
+            contextTagList.appendChild(el);
+        }
     }
 });
 
@@ -437,6 +494,17 @@ var CategoriesFilterContextMenu = new Class({
     }
 });
 
+const TagsFilterContextMenu = new Class({
+    Extends: ContextMenu,
+    updateMenuItems: function() {
+        const id = this.options.element.id;
+        if ((id !== TAGS_ALL.toString()) && (id !== TAGS_UNTAGGED.toString()))
+            this.showItem('deleteTag');
+        else
+            this.hideItem('deleteTag');
+    }
+});
+
 var SearchPluginsTableContextMenu = new Class({
     Extends: ContextMenu,
 

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

@@ -1183,7 +1183,7 @@ var TorrentsTable = new Class({
         };
     },
 
-    applyFilter: function(row, filterName, categoryHash, filterTerms) {
+    applyFilter: function(row, filterName, categoryHash, tagHash, filterTerms) {
         var state = row['full_data'].state;
         var name = row['full_data'].name.toLowerCase();
         var inactive = false;
@@ -1242,6 +1242,28 @@ var TorrentsTable = new Class({
             }
         }
 
+        const tagHashInt = parseInt(tagHash);
+        const isNumber = !isNaN(tagHashInt);
+        if (isNumber) {
+            switch (tagHashInt) {
+                case TAGS_ALL:
+                    break;  // do nothing
+
+                case TAGS_UNTAGGED:
+                    if (row['full_data'].tags.length !== 0)
+                        return false;
+                    break;  // do nothing
+
+                default:
+                    let rowTags = row['full_data'].tags.split(', ');
+                    rowTags = rowTags.map(function(tag) {
+                        return genHash(tag);
+                    });
+                    if (!rowTags.contains(tagHashInt))
+                        return false;
+            }
+        }
+
         if (filterTerms) {
             for (var i = 0; i < filterTerms.length; ++i) {
                 if (name.indexOf(filterTerms[i]) === -1)
@@ -1252,21 +1274,21 @@ var TorrentsTable = new Class({
         return true;
     },
 
-    getFilteredTorrentsNumber: function(filterName, categoryHash) {
+    getFilteredTorrentsNumber: function(filterName, categoryHash, tagHash) {
         var cnt = 0;
         var rows = this.rows.getValues();
 
         for (var i = 0; i < rows.length; ++i)
-            if (this.applyFilter(rows[i], filterName, categoryHash, null)) ++cnt;
+            if (this.applyFilter(rows[i], filterName, categoryHash, tagHash, null)) ++cnt;
         return cnt;
     },
 
-    getFilteredTorrentsHashes: function(filterName, categoryHash) {
+    getFilteredTorrentsHashes: function(filterName, categoryHash, tagHash) {
         var rowsHashes = [];
         var rows = this.rows.getValues();
 
         for (var i = 0; i < rows.length; ++i)
-            if (this.applyFilter(rows[i], filterName, categoryHash, null))
+            if (this.applyFilter(rows[i], filterName, categoryHash, tagHash, null))
                 rowsHashes.push(rows[i]['rowId']);
 
         return rowsHashes;
@@ -1280,7 +1302,7 @@ var TorrentsTable = new Class({
         var filterTerms = (filterText.length > 0) ? filterText.split(" ") : null;
 
         for (var i = 0; i < rows.length; ++i) {
-            if (this.applyFilter(rows[i], selected_filter, selected_category, filterTerms)) {
+            if (this.applyFilter(rows[i], selected_filter, selected_category, selectedTag, filterTerms)) {
                 filteredRows.push(rows[i]);
                 filteredRows[rows[i].rowId] = rows[i];
             }

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

@@ -90,6 +90,15 @@ var deleteUnusedCategoriesFN = function() {};
 var startTorrentsByCategoryFN = function() {};
 var pauseTorrentsByCategoryFN = function() {};
 var deleteTorrentsByCategoryFN = function() {};
+let torrentAddTagsFN = function() {};
+let torrentSetTagsFN = function() {};
+let torrentRemoveAllTagsFN = function() {};
+let createTagFN = function() {};
+let removeTagFN = function() {};
+let deleteUnusedTagsFN = function() {};
+let startTorrentsByTagFN = function() {};
+let pauseTorrentsByTagFN = function() {};
+let deleteTorrentsByTagFN = function() {};
 var copyNameFN = function() {};
 var copyMagnetLinkFN = function() {};
 var copyHashFN = function() {};
@@ -616,7 +625,7 @@ var initializeWindows = function() {
     deleteUnusedCategoriesFN = function() {
         var categories = [];
         for (var hash in category_list) {
-            if (torrentsTable.getFilteredTorrentsNumber('all', hash) === 0)
+            if (torrentsTable.getFilteredTorrentsNumber('all', hash, TAGS_ALL) === 0)
                 categories.push(category_list[hash].name);
         }
         new Request({
@@ -630,7 +639,7 @@ var initializeWindows = function() {
     };
 
     startTorrentsByCategoryFN = function(categoryHash) {
-        var hashes = torrentsTable.getFilteredTorrentsHashes('all', categoryHash);
+        var hashes = torrentsTable.getFilteredTorrentsHashes('all', categoryHash, TAGS_ALL);
         if (hashes.length) {
             new Request({
                 url: 'api/v2/torrents/resume',
@@ -644,7 +653,7 @@ var initializeWindows = function() {
     };
 
     pauseTorrentsByCategoryFN = function(categoryHash) {
-        var hashes = torrentsTable.getFilteredTorrentsHashes('all', categoryHash);
+        var hashes = torrentsTable.getFilteredTorrentsHashes('all', categoryHash, TAGS_ALL);
         if (hashes.length) {
             new Request({
                 url: 'api/v2/torrents/pause',
@@ -658,7 +667,148 @@ var initializeWindows = function() {
     };
 
     deleteTorrentsByCategoryFN = function(categoryHash) {
-        var hashes = torrentsTable.getFilteredTorrentsHashes('all', categoryHash);
+        var hashes = torrentsTable.getFilteredTorrentsHashes('all', categoryHash, TAGS_ALL);
+        if (hashes.length) {
+            new MochaUI.Window({
+                id: 'confirmDeletionPage',
+                title: "QBT_TR(Deletion confirmation)QBT_TR[CONTEXT=confirmDeletionDlg]",
+                loadMethod: 'iframe',
+                contentURL: 'confirmdeletion.html?hashes=' + hashes.join("|"),
+                scrollbars: false,
+                resizable: false,
+                maximizable: false,
+                padding: 10,
+                width: 424,
+                height: 140
+            });
+            updateMainData();
+        }
+    };
+
+    torrentAddTagsFN = function() {
+        const action = "set";
+        const hashes = torrentsTable.selectedRowsIds();
+        if (hashes.length) {
+            new MochaUI.Window({
+                id: 'newTagPage',
+                title: "QBT_TR(Add Tags)QBT_TR[CONTEXT=TransferListWidget]",
+                loadMethod: 'iframe',
+                contentURL: 'newtag.html?action=' + action + '&hashes=' + hashes.join('|'),
+                scrollbars: false,
+                resizable: false,
+                maximizable: false,
+                paddingVertical: 0,
+                paddingHorizontal: 0,
+                width: 250,
+                height: 100
+            });
+        }
+    };
+
+    torrentSetTagsFN = function(tagHash, isSet) {
+        const tagName = ((tagHash === '0') ? '' : tagList[tagHash].name);
+        const hashes = torrentsTable.selectedRowsIds();
+        if (hashes.length) {
+            new Request({
+                url: (isSet ? 'api/v2/torrents/addTags' : 'api/v2/torrents/removeTags'),
+                method: 'post',
+                data: {
+                    hashes: hashes.join("|"),
+                    tags: tagName,
+                }
+            }).send();
+        }
+    };
+
+    torrentRemoveAllTagsFN = function() {
+        const hashes = torrentsTable.selectedRowsIds();
+        if (hashes.length) {
+            new Request({
+                url: ('api/v2/torrents/removeTags'),
+                method: 'post',
+                data: {
+                    hashes: hashes.join("|"),
+                }
+            }).send();
+        }
+    };
+
+    createTagFN = function() {
+        const action = "create";
+        new MochaUI.Window({
+            id: 'newTagPage',
+            title: "QBT_TR(New Tag)QBT_TR[CONTEXT=TagFilterWidget]",
+            loadMethod: 'iframe',
+            contentURL: 'newtag.html?action=' + action,
+            scrollbars: false,
+            resizable: false,
+            maximizable: false,
+            paddingVertical: 0,
+            paddingHorizontal: 0,
+            width: 250,
+            height: 100
+        });
+        updateMainData();
+    };
+
+    removeTagFN = function(tagHash) {
+        const tagName = tagList[tagHash].name;
+        new Request({
+            url: 'api/v2/torrents/deleteTags',
+            method: 'post',
+            data: {
+                tags: tagName
+            }
+        }).send();
+        setTagFilter(TAGS_ALL);
+    };
+
+    deleteUnusedTagsFN = function() {
+        const tags = [];
+        for (const hash in tagList) {
+            if (torrentsTable.getFilteredTorrentsNumber('all', CATEGORIES_ALL, hash) === 0)
+                tags.push(tagList[hash].name);
+        }
+        new Request({
+            url: 'api/v2/torrents/deleteTags',
+            method: 'post',
+            data: {
+                tags: tags.join(',')
+            }
+        }).send();
+        setTagFilter(TAGS_ALL);
+    };
+
+    startTorrentsByTagFN = function(tagHash) {
+        const hashes = torrentsTable.getFilteredTorrentsHashes('all', CATEGORIES_ALL, tagHash);
+        if (hashes.length) {
+            new Request({
+                url: 'api/v2/torrents/resume',
+                method: 'post',
+                data: {
+                    hashes: hashes.join("|")
+                }
+            }).send();
+            updateMainData();
+        }
+    };
+
+    pauseTorrentsByTagFN = function(tagHash) {
+        const hashes = torrentsTable.getFilteredTorrentsHashes('all', CATEGORIES_ALL, tagHash);
+        if (hashes.length) {
+            new Request({
+                url: 'api/v2/torrents/pause',
+                method: 'post',
+                data: {
+                    hashes: hashes.join("|")
+                }
+            }).send();
+            updateMainData();
+        }
+    };
+
+    deleteTorrentsByTagFN = function(tagHash) {
+        const hashes = torrentsTable.getFilteredTorrentsHashes('all', CATEGORIES_ALL, tagHash);
         if (hashes.length) {
             new MochaUI.Window({
                 id: 'confirmDeletionPage',