Merge pull request #10006 from Piccirello/webui-tables

Allow WebUI Trackers and Content tables to be manipulated

src/webui/www/private/css/style.css

@@ -456,11 +456,11 @@ td.generalLabel {
     vertical-align: top;
 }
 
-#filesTable {
+#torrentFilesTableDiv {
     line-height: 20px;
 }
 
-#trackersTable,
+#torrentTrackersTableDiv,
 #webseedsTable {
     line-height: 25px;
 }

src/webui/www/private/index.html

@@ -167,6 +167,17 @@
         <li><a href="#RemoveTracker"><img src="images/qbt-theme/list-remove.svg" alt="QBT_TR(Remove tracker)QBT_TR[CONTEXT=TrackerListWidget]"/> QBT_TR(Remove tracker)QBT_TR[CONTEXT=TrackerListWidget]</a></li>
         <li><a href="#CopyTrackerUrl" id="CopyTrackerUrl"><img src="images/qbt-theme/edit-copy.svg" alt="QBT_TR(Copy tracker URL)QBT_TR[CONTEXT=TrackerListWidget]"/> QBT_TR(Copy tracker URL)QBT_TR[CONTEXT=TrackerListWidget]</a></li>
     </ul>
+    <ul id="torrentFilesMenu" class="contextMenu">
+        <li class="separator">
+            <a href="#FilePrio" class="arrow-right"><span style="display: inline-block; width: 16px;"></span> QBT_TR(Priority)QBT_TR[CONTEXT=PropertiesWidget]</a>
+            <ul>
+                <li><a href="#FilePrioIgnore"><span style="display: inline-block; width: 16px;"></span> QBT_TR(Do not download)QBT_TR[CONTEXT=PropListDelegate]</a></li>
+                <li><a href="#FilePrioNormal"><span style="display: inline-block; width: 16px;"></span> QBT_TR(Normal)QBT_TR[CONTEXT=PropListDelegate]</a></li>
+                <li><a href="#FilePrioHigh"><span style="display: inline-block; width: 16px;"></span> QBT_TR(High)QBT_TR[CONTEXT=PropListDelegate]</a></li>
+                <li><a href="#FilePrioMaximum"><span style="display: inline-block; width: 16px;"></span> QBT_TR(Maximum)QBT_TR[CONTEXT=PropListDelegate]</a></li>
+            </ul>
+        </li>
+    </ul>
     <div id="desktopFooterWrapper">
         <div id="desktopFooter">
             <span id="error_div"></span>

src/webui/www/private/properties_content.html

@@ -79,27 +79,27 @@
     </fieldset>
 </div>
 
-<div id="prop_trackers" class="invisible">
+<div id="prop_trackers" class="invisible unselectable">
     <div id="trackers">
-        <table class="dynamicTable" style="width: 100%">
+        <div id="torrentTrackersTableFixedHeaderDiv" class="dynamicTableFixedHeaderDiv">
-            <thead>
+            <table class="dynamicTable" style="position:relative;">
-                <tr>
+                <thead>
-                    <th style="width: 5%;">QBT_TR(#)QBT_TR[CONTEXT=TrackerListWidget]</th>
+                    <tr class="dynamicTableHeader"></tr>
-                    <th style="width: 30%;">QBT_TR(URL)QBT_TR[CONTEXT=TrackerListWidget]</th>
+                </thead>
-                    <th style="width: 10%;">QBT_TR(Status)QBT_TR[CONTEXT=TrackerListWidget]</th>
+            </table>
-                    <th style="width: 5%;">QBT_TR(Peers)QBT_TR[CONTEXT=TrackerListWidget]</th>
+        </div>
-                    <th style="width: 5%;">QBT_TR(Seeds)QBT_TR[CONTEXT=TrackerListWidget]</th>
+        <div id="torrentTrackersTableDiv" class="dynamicTableDiv">
-                    <th style="width: 5%;">QBT_TR(Leeches)QBT_TR[CONTEXT=TrackerListWidget]</th>
+            <table class="dynamicTable">
-                    <th style="width: 5%;">QBT_TR(Downloaded)QBT_TR[CONTEXT=TrackerListWidget]</th>
+                <thead>
-                    <th style="width: 35%;">QBT_TR(Message)QBT_TR[CONTEXT=TrackerListWidget]</th>
+                    <tr class="dynamicTableHeader"></tr>
-                </tr>
+                </thead>
-            </thead>
+                <tbody></tbody>
-            <tbody id="trackersTable"></tbody>
+            </table>
-        </table>
+        </div>
     </div>
 </div>
 
-<div id="prop_peers" class="invisible">
+<div id="prop_peers" class="invisible unselectable">
     <div>
         <div id="torrentPeersTableFixedHeaderDiv" class="dynamicTableFixedHeaderDiv">
             <table class="dynamicTable" style="position:relative;">
@@ -119,7 +119,7 @@
     </div>
 </div>
 
-<div id="prop_webseeds" class="invisible">
+<div id="prop_webseeds" class="invisible unselectable">
     <div id="webseeds">
         <table class="dynamicTable" style="width: 100%">
             <thead>
@@ -132,29 +132,29 @@
     </div>
 </div>
 
-<div id="prop_files" class="invisible">
+<div id="prop_files" class="invisible unselectable">
     <div id="torrentFiles">
-        <table class="dynamicTable" style="width: 100%">
+        <div id="torrentFilesTableFixedHeaderDiv" class="dynamicTableFixedHeaderDiv">
-            <thead>
+            <table class="dynamicTable" style="position:relative;">
-                <tr>
+                <thead>
-                    <th style="width: 4.5em; border-right: 0"><input type="checkbox" id="tristate_cb" onclick="switchCBState()" /></th>
+                    <tr class="dynamicTableHeader"></tr>
-                    <th>QBT_TR(Name)QBT_TR[CONTEXT=TorrentContentModel]</th>
+                </thead>
-                    <th style="width: 150px;">QBT_TR(Size)QBT_TR[CONTEXT=TorrentContentModel]</th>
+            </table>
-                    <th style="width: 90px;">QBT_TR(Progress)QBT_TR[CONTEXT=TorrentContentModel]</th>
+        </div>
-                    <th style="width: 150px;">QBT_TR(Download Priority)QBT_TR[CONTEXT=TorrentContentModel]</th>
+        <div id="torrentFilesTableDiv" class="dynamicTableDiv">
-                    <th style="width: 150px;">QBT_TR(Remaining)QBT_TR[CONTEXT=TorrentContentModel]</th>
+            <table class="dynamicTable">
-                    <th style="width: 150px; border-right: 0">QBT_TR(Availability)QBT_TR[CONTEXT=TorrentContentModel]</th>
+                <thead>
-                </tr>
+                    <tr class="dynamicTableHeader"></tr>
-            </thead>
+                </thead>
-            <tbody id="filesTable"></tbody>
+                <tbody></tbody>
-        </table>
+            </table>
+        </div>
     </div>
 </div>
 
 <script>
     'use strict';
 
-    torrentPeersTable.setup('torrentPeersTableDiv', 'torrentPeersTableFixedHeaderDiv', null);
     var selectedTab = $(getLocalStorageItem('selected_tab', 'PropGeneralLink'));
     if (selectedTab)
         selectedTab.click();

src/webui/www/private/rename.html

@@ -26,7 +26,7 @@
             var name = new URI().getData('name');
             // set text field to current value
             if (name)
-                $('rename').value = escapeHtml(name);
+                $('rename').value = escapeHtml(decodeURIComponent(name));
 
             $('rename').focus();
             $('renameButton').addEvent('click', function(e) {

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

@@ -25,7 +25,9 @@
 'use strict';
 
 var torrentsTable = new TorrentsTable();
+var torrentTrackersTable = new TorrentTrackersTable();
 var torrentPeersTable = new TorrentPeersTable();
+var torrentFilesTable = new TorrentFilesTable();
 var searchResultsTable = new SearchResultsTable();
 var searchPluginsTable = new SearchPluginsTable();
 
@@ -699,7 +701,7 @@ window.addEvent('load', function() {
         contentURL: 'properties_content.html',
         require: {
             css: ['css/Tabs.css', 'css/dynamicTable.css'],
-            js: ['scripts/prop-general.js', 'scripts/prop-trackers.js', 'scripts/prop-webseeds.js', 'scripts/prop-files.js'],
+            js: ['scripts/prop-general.js', 'scripts/prop-trackers.js', 'scripts/prop-peers.js', 'scripts/prop-webseeds.js', 'scripts/prop-files.js'],
         },
         tabsURL: 'properties.html',
         tabsOnload: function() {
@@ -837,82 +839,3 @@ var keyboardEvents = new Keyboard({
 });
 
 keyboardEvents.activate();
-
-var loadTorrentPeersTimer;
-var syncTorrentPeersLastResponseId = 0;
-var show_flags = true;
-var loadTorrentPeersData = function() {
-    if ($('prop_peers').hasClass('invisible')
-        || $('propertiesPanel_collapseToggle').hasClass('panel-expand')) {
-        syncTorrentPeersLastResponseId = 0;
-        torrentPeersTable.clear();
-        return;
-    }
-    var current_hash = torrentsTable.getCurrentTorrentHash();
-    if (current_hash === "") {
-        syncTorrentPeersLastResponseId = 0;
-        torrentPeersTable.clear();
-        clearTimeout(loadTorrentPeersTimer);
-        loadTorrentPeersTimer = loadTorrentPeersData.delay(getSyncMainDataInterval());
-        return;
-    }
-    var url = new URI('api/v2/sync/torrentPeers');
-    url.setData('rid', syncTorrentPeersLastResponseId);
-    url.setData('hash', current_hash);
-    new Request.JSON({
-        url: url,
-        noCache: true,
-        method: 'get',
-        onFailure: function() {
-            $('error_div').set('html', 'QBT_TR(qBittorrent client is not reachable)QBT_TR[CONTEXT=HttpServer]');
-            clearTimeout(loadTorrentPeersTimer);
-            loadTorrentPeersTimer = loadTorrentPeersData.delay(5000);
-        },
-        onSuccess: function(response) {
-            $('error_div').set('html', '');
-            if (response) {
-                var full_update = (response['full_update'] === true);
-                if (full_update) {
-                    torrentPeersTable.clear();
-                }
-                if (response['rid']) {
-                    syncTorrentPeersLastResponseId = response['rid'];
-                }
-                if (response['peers']) {
-                    for (var key in response['peers']) {
-                        response['peers'][key]['rowId'] = key;
-
-                        if (response['peers'][key]['client'])
-                            response['peers'][key]['client'] = escapeHtml(response['peers'][key]['client']);
-
-                        torrentPeersTable.updateRowData(response['peers'][key]);
-                    }
-                }
-                if (response['peers_removed'])
-                    response['peers_removed'].each(function(hash) {
-                        torrentPeersTable.removeRow(hash);
-                    });
-                torrentPeersTable.updateTable(full_update);
-                torrentPeersTable.altRow();
-
-                if (response['show_flags']) {
-                    if (show_flags != response['show_flags']) {
-                        show_flags = response['show_flags'];
-                        torrentPeersTable.columns['country'].force_hide = !show_flags;
-                        torrentPeersTable.updateColumn('country');
-                    }
-                }
-            }
-            else {
-                torrentPeersTable.clear();
-            }
-            clearTimeout(loadTorrentPeersTimer);
-            loadTorrentPeersTimer = loadTorrentPeersData.delay(getSyncMainDataInterval());
-        }
-    }).send();
-};
-
-updateTorrentPeersData = function() {
-    clearTimeout(loadTorrentPeersTimer);
-    loadTorrentPeersData();
-};

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

@@ -452,6 +452,10 @@ var DynamicTable = new Class({
         }
     },
 
+    getSortedColunn: function() {
+        return localStorage.getItem('sorted_column_' + this.dynamicTableDivId);
+    },
+
     setSortedColumn: function(column) {
         if (column != this.sortedColumn) {
             var oldColumn = this.sortedColumn;
@@ -1564,4 +1568,93 @@ var SearchPluginsTable = new Class({
     }
 });
 
+var TorrentTrackersTable = new Class({
+    Extends: DynamicTable,
+
+    initColumns: function() {
+        this.newColumn('tier', '', 'QBT_TR(#)QBT_TR[CONTEXT=TrackerListWidget]', 35, true);
+        this.newColumn('url', '', 'QBT_TR(URL)QBT_TR[CONTEXT=TrackerListWidget]', 250, true);
+        this.newColumn('status', '', 'QBT_TR(Status)QBT_TR[CONTEXT=TrackerListWidget]', 125, true);
+        this.newColumn('peers', '', 'QBT_TR(Peers)QBT_TR[CONTEXT=TrackerListWidget]', 75, true);
+        this.newColumn('seeds', '', 'QBT_TR(Seeds)QBT_TR[CONTEXT=TrackerListWidget]', 75, true);
+        this.newColumn('leeches', '', 'QBT_TR(Leeches)QBT_TR[CONTEXT=TrackerListWidget]', 75, true);
+        this.newColumn('downloaded', '', 'QBT_TR(Downloaded)QBT_TR[CONTEXT=TrackerListWidget]', 100, true);
+        this.newColumn('message', '', 'QBT_TR(Message)QBT_TR[CONTEXT=TrackerListWidget]', 250, true);
+    },
+});
+
+var TorrentFilesTable = new Class({
+    Extends: DynamicTable,
+
+    initColumns: function() {
+        this.newColumn('checked', '', '', 50, true);
+        this.newColumn('name', '', 'QBT_TR(Name)QBT_TR[CONTEXT=TrackerListWidget]', 300, true);
+        this.newColumn('size', '', 'QBT_TR(Size)QBT_TR[CONTEXT=TrackerListWidget]', 75, true);
+        this.newColumn('progress', '', 'QBT_TR(Progress)QBT_TR[CONTEXT=TrackerListWidget]', 100, true);
+        this.newColumn('priority', '', 'QBT_TR(Download Priority)QBT_TR[CONTEXT=TrackerListWidget]', 150, true);
+        this.newColumn('remaining', '', 'QBT_TR(Remaining)QBT_TR[CONTEXT=TrackerListWidget]', 75, true);
+        this.newColumn('availability', '', 'QBT_TR(Availability)QBT_TR[CONTEXT=TrackerListWidget]', 75, true);
+
+        this.initColumnsFunctions();
+    },
+
+    initColumnsFunctions: function() {
+        var displaySize = function(td, row) {
+            var size = this.getRowValue(row);
+            td.set('html', friendlyUnit(size, false));
+        }
+        var displayPercentage = function(td, row) {
+            var value = this.getRowValue(row);
+            td.set('html', friendlyPercentage(value));
+        };
+
+        this.columns['checked'].updateTd = function(td, row) {
+            var id = row.rowId;
+            var value = this.getRowValue(row);
+
+            if (isDownloadCheckboxExists(id)) {
+                updateDownloadCheckbox(id, value);
+            }
+            else {
+                var treeImg = new Element('img', {
+                    src: 'images/L.gif',
+                    style: 'margin-bottom: -2px'
+                });
+                td.adopt(treeImg, createDownloadCheckbox(row.rowId, value));
+            }
+        };
+
+        this.columns['size'].updateTd = displaySize;
+
+        this.columns['progress'].updateTd = function(td, row) {
+            var id = row.rowId;
+            var value = this.getRowValue(row);
+
+            var progressBar = $('pbf_' + id);
+            if (progressBar === null) {
+                td.adopt(new ProgressBar(value.toFloat(), {
+                    'id': 'pbf_' + id,
+                    'width': 80
+                }));
+            }
+            else {
+                progressBar.setValue(value.toFloat());
+            }
+        };
+
+        this.columns['priority'].updateTd = function(td, row) {
+            var id = row.rowId;
+            var value = this.getRowValue(row);
+
+            if (isPriorityComboExists(id))
+                updatePriorityCombo(id, value);
+            else
+                td.adopt(createPriorityCombo(id, value));
+        };
+
+        this.columns['remaining'].updateTd = displaySize;
+        this.columns['availability'].updateTd = displayPercentage;
+    }
+});
+
 /*************************************************************/

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

@@ -485,7 +485,7 @@ var initializeWindows = function() {
                     id: 'renamePage',
                     title: "QBT_TR(Rename)QBT_TR[CONTEXT=TransferListWidget]",
                     loadMethod: 'iframe',
-                    contentURL: 'rename.html?hash=' + hashes[0] + '&name=' + row.full_data.name,
+                    contentURL: 'rename.html?hash=' + hash + '&name=' + encodeURIComponent(row.full_data.name),
                     scrollbars: false,
                     resizable: false,
                     maximizable: false,

src/webui/www/private/scripts/prop-files.js

@@ -3,68 +3,6 @@
 var is_seed = true;
 var current_hash = "";
 
-var setCBState = function(state) {
-    $("tristate_cb").state = state;
-    if (state === "partial") {
-        $("tristate_cb").indeterminate = true;
-    }
-    else if (state === "checked") {
-        $("tristate_cb").indeterminate = false;
-        $("tristate_cb").checked = true;
-    }
-    else if (state === "unchecked") {
-        $("tristate_cb").indeterminate = false;
-        $("tristate_cb").checked = false;
-    }
-};
-
-var switchCBState = function() {
-    // Uncheck
-    if (($("tristate_cb").state === "partial") || ($("tristate_cb").state === "checked")) {
-        $("tristate_cb").state = "unchecked";
-        $("tristate_cb").checked = false;
-        // Uncheck all checkboxes
-        var indexes = [];
-        $$('input.DownloadedCB').each(function(item, index) {
-            item.erase("checked");
-            indexes.push(index);
-        });
-        setFilePriority(indexes, 0);
-    }
-    else if ($("tristate_cb").state === "unchecked") {
-        // Check
-        $("tristate_cb").state = "checked";
-        $("tristate_cb").checked = true;
-        // Check all checkboxes
-        var indexes = [];
-        $$('input.DownloadedCB').each(function(item, index) {
-            item.set("checked", "checked");
-            indexes.push(index);
-        });
-        setFilePriority(indexes, FilePriority.Normal);
-    }
-};
-
-var allCBChecked = function() {
-    var CBs = $$('input.DownloadedCB');
-    for (var i = 0; i < CBs.length; i += 1) {
-        var item = CBs[i];
-        if (!$defined(item.get('checked')) || !item.get('checked'))
-            return false;
-    }
-    return true;
-};
-
-var allCBUnchecked = function() {
-    var CBs = $$('input.DownloadedCB');
-    for (var i = 0; i < CBs.length; i += 1) {
-        var item = CBs[i];
-        if ($defined(item.get('checked')) && item.get('checked'))
-            return false;
-    }
-    return true;
-};
-
 var FilePriority = {
     "Ignored": 0,
     "Normal": 1,
@@ -86,6 +24,167 @@ var normalizePriority = function(priority) {
     }
 };
 
+var fileCheckboxChanged = function(e) {
+    var checkbox = e.target;
+    var priority = checkbox.checked ? FilePriority.Normal : FilePriority.Ignored;
+    var id = checkbox.get('data-id');
+
+    setFilePriority(id, priority);
+    setGlobalCheckboxState();
+    return true;
+};
+
+var fileComboboxChanged = function(e) {
+    var combobox = e.target;
+    var newPriority = combobox.value;
+    var id = combobox.get('data-id');
+
+    setFilePriority(id, newPriority);
+};
+
+var isDownloadCheckboxExists = function(id) {
+    return ($('cbPrio' + id) !== null);
+};
+
+var createDownloadCheckbox = function(id, download) {
+    var checkbox = new Element('input');
+    checkbox.set('type', 'checkbox');
+    if (download)
+        checkbox.set('checked', 'checked');
+    checkbox.set('id', 'cbPrio' + id);
+    checkbox.set('data-id', id);
+    checkbox.set('class', 'DownloadedCB');
+    checkbox.addEvent('change', fileCheckboxChanged);
+    return checkbox;
+};
+
+var updateDownloadCheckbox = function(id, download) {
+    var checkbox = $('cbPrio' + id);
+    checkbox.checked = download;
+};
+
+var isPriorityComboExists = function(id) {
+    return ($('comboPrio' + id) !== null);
+};
+
+var createPriorityOptionElement = function(priority, selected, html) {
+    var elem = new Element('option');
+    elem.set('value', priority.toString());
+    elem.set('html', html);
+    if (selected)
+        elem.setAttribute('selected', '');
+    return elem;
+};
+
+var createPriorityCombo = function(id, selectedPriority) {
+    var select = new Element('select');
+    select.set('id', 'comboPrio' + id);
+    select.set('data-id', id);
+    select.set('disabled', is_seed);
+    select.addClass('combo_priority');
+    select.addEvent('change', fileComboboxChanged);
+
+    createPriorityOptionElement(FilePriority.Ignored, (FilePriority.Ignored === selectedPriority), 'QBT_TR(Do not download)QBT_TR[CONTEXT=PropListDelegate]').injectInside(select);
+    createPriorityOptionElement(FilePriority.Normal, (FilePriority.Normal === selectedPriority), 'QBT_TR(Normal)QBT_TR[CONTEXT=PropListDelegate]').injectInside(select);
+    createPriorityOptionElement(FilePriority.High, (FilePriority.High === selectedPriority), 'QBT_TR(High)QBT_TR[CONTEXT=PropListDelegate]').injectInside(select);
+    createPriorityOptionElement(FilePriority.Maximum, (FilePriority.Maximum === selectedPriority), 'QBT_TR(Maximum)QBT_TR[CONTEXT=PropListDelegate]').injectInside(select);
+
+    return select;
+};
+
+var updatePriorityCombo = function(id, selectedPriority) {
+    var combobox = $('comboPrio' + id);
+
+    if (parseInt(combobox.value) !== selectedPriority)
+        selectComboboxPriority(combobox, selectedPriority);
+
+    if (combobox.disabled !== is_seed)
+        combobox.disabled = is_seed;
+};
+
+var selectComboboxPriority = function(combobox, priority) {
+    var options = combobox.options;
+    for (var i = 0; i < options.length; ++i) {
+        var option = options[i];
+        if (parseInt(option.value) === priority)
+            option.setAttribute('selected', '');
+        else
+            option.removeAttribute('selected');
+    }
+
+    combobox.value = priority;
+};
+
+var switchCheckboxState = function() {
+    var rows = [];
+    var priority = FilePriority.Ignored;
+
+    if ($('tristate_cb').state === "checked") {
+        setGlobalCheckboxUnchecked();
+        // set file priority for all checked to Ignored
+        torrentFilesTable.getFilteredAndSortedRows().forEach(function(row) {
+            if (row.full_data.checked)
+                rows.push(row.full_data.rowId);
+        });
+    }
+    else {
+        setGlobalCheckboxChecked();
+        priority = FilePriority.Normal;
+        // set file priority for all unchecked to Normal
+        torrentFilesTable.getFilteredAndSortedRows().forEach(function(row) {
+            if (!row.full_data.checked)
+                rows.push(row.full_data.rowId);
+        });
+    }
+
+    if (rows.length > 0)
+        setFilePriority(rows, priority);
+};
+
+var setGlobalCheckboxState = function() {
+    if (isAllCheckboxesChecked())
+        setGlobalCheckboxChecked();
+    else if (isAllCheckboxesUnchecked())
+        setGlobalCheckboxUnchecked();
+    else
+        setGlobalCheckboxPartial();
+};
+
+var setGlobalCheckboxChecked = function() {
+    $('tristate_cb').state = "checked";
+    $('tristate_cb').indeterminate = false;
+    $('tristate_cb').checked = true;
+};
+
+var setGlobalCheckboxUnchecked = function() {
+    $('tristate_cb').state = "unchecked";
+    $('tristate_cb').indeterminate = false;
+    $('tristate_cb').checked = false;
+};
+
+var setGlobalCheckboxPartial = function() {
+    $('tristate_cb').state = "partial";
+    $('tristate_cb').indeterminate = true;
+};
+
+var isAllCheckboxesChecked = function() {
+    var checkboxes = $$('input.DownloadedCB');
+    for (var i = 0; i < checkboxes.length; ++i) {
+        if (!checkboxes[i].checked)
+            return false;
+    }
+    return true;
+};
+
+var isAllCheckboxesUnchecked = function() {
+    var checkboxes = $$('input.DownloadedCB');
+    for (var i = 0; i < checkboxes.length; ++i) {
+        if (checkboxes[i].checked)
+            return false;
+    }
+    return true;
+};
+
 var setFilePriority = function(id, priority) {
     if (current_hash === "") return;
     var ids = Array.isArray(id) ? id : [id];
@@ -103,178 +202,14 @@ var setFilePriority = function(id, priority) {
             loadTorrentFilesDataTimer = loadTorrentFilesData.delay(1000);
         }
     }).send();
-    // Display or add combobox
-    if (priority > 0) {
-        ids.forEach(function(_id) {
-            if ($('comboPrio' + _id).hasClass("invisible")) {
-                $('comboPrio' + _id).set("value", priority);
-                $('comboPrio' + _id).removeClass("invisible");
-            }
-        });
-    }
-    else {
-        ids.forEach(function(_id) {
-            if (!$('comboPrio' + _id).hasClass("invisible"))
-                $('comboPrio' + _id).addClass("invisible");
-        });
-    }
-};
 
-var createDownloadedCB = function(id, downloaded) {
+    ids.forEach(function(_id) {
-    var CB = new Element('input');
+        var combobox = $('comboPrio' + _id);
-    CB.set('type', 'checkbox');
+        if (combobox !== null)
-    if (downloaded)
+            selectComboboxPriority(combobox, priority);
-        CB.set('checked', 'checked');
-    CB.set('id', 'cbPrio' + id);
-    CB.set('class', 'DownloadedCB');
-    CB.addEvent('change', function(e) {
-        var checked = 0;
-        if ($defined($('cbPrio' + id).get('checked')) && $('cbPrio' + id).get('checked'))
-            checked = 1;
-        setFilePriority(id, checked);
-        if (allCBChecked()) {
-            setCBState("checked");
-        }
-        else if (allCBUnchecked()) {
-            setCBState("unchecked");
-        }
-        else {
-            setCBState("partial");
-        }
     });
-    return CB;
 };
 
-var createPriorityCombo = function(id, selected_prio) {
-    var select = new Element('select');
-    select.set('id', 'comboPrio' + id);
-    select.addEvent('change', function(e) {
-        var new_prio = $('comboPrio' + id).get('value');
-        setFilePriority(id, new_prio);
-    });
-
-    function createOptionElement(priority, html) {
-        var elem = new Element("option");
-        elem.set('value', priority.toString());
-        elem.set('html', html);
-        if (priority == selected_prio)
-            elem.setAttribute('selected', '');
-        return elem;
-    }
-
-    createOptionElement(FilePriority.Normal, "QBT_TR(Normal)QBT_TR[CONTEXT=PropListDelegate]").injectInside(select);
-    createOptionElement(FilePriority.High, "QBT_TR(High)QBT_TR[CONTEXT=PropListDelegate]").injectInside(select);
-    createOptionElement(FilePriority.Maximum, "QBT_TR(Maximum)QBT_TR[CONTEXT=PropListDelegate]").injectInside(select);
-
-    if (is_seed || (selected_prio === FilePriority.Ignored) || (selected_prio === FilePriority.Mixed)) {
-        select.addClass("invisible");
-    }
-    else {
-        select.removeClass("invisible");
-    }
-    select.addClass("combo_priority");
-    return select;
-};
-
-var filesDynTable = new Class({
-
-    initialize: function() {},
-
-    setup: function(table) {
-        this.table = $(table);
-        this.rows = new Hash();
-    },
-
-    removeRow: function(id) {
-        if (this.rows.has(id)) {
-            var tr = this.rows.get(id);
-            tr.dispose();
-            this.rows.erase(id);
-            return true;
-        }
-        return false;
-    },
-
-    removeAllRows: function() {
-        this.rows.each(function(tr, id) {
-            this.removeRow(id);
-        }.bind(this));
-    },
-
-    updateRow: function(tr, row, id) {
-        var tds = tr.getElements('td');
-        for (var i = 0; i < row.length; ++i) {
-            switch (i) {
-                case 0:  // checkbox
-                    if (row[i] > 0)
-                        tds[i].getChildren('input')[0].set('checked', 'checked');
-                    else
-                        tds[i].getChildren('input')[0].removeProperty('checked');
-                    break;
-                case 3:  // progress bar
-                    $('pbf_' + id).setValue(row[i].toFloat());
-                    break;
-                case 4:  // download priority
-                    var priority = normalizePriority(row[i]);
-                    if (!is_seed && (priority > 0)) {
-                        tds[i].getChildren('select').set('value', priority);
-                        if ($('comboPrio' + id).hasClass("invisible"))
-                            $('comboPrio' + id).removeClass("invisible");
-                    }
-                    else {
-                        if (!$('comboPrio' + id).hasClass("invisible"))
-                            $('comboPrio' + id).addClass("invisible");
-                    }
-                    break;
-                default:
-                    tds[i].set('html', row[i]);
-            }
-        }
-        return true;
-    },
-
-    insertRow: function(id, row) {
-        if (this.rows.has(id)) {
-            var tableRow = this.rows.get(id);
-            this.updateRow(tableRow, row, id);
-            return;
-        }
-        //this.removeRow(id);
-        var tr = new Element('tr');
-        this.rows.set(id, tr);
-        for (var i = 0; i < row.length; ++i) {
-            var td = new Element('td');
-            switch (i) {
-                case 0:
-                    var tree_img = new Element('img', {
-                        src: 'images/L.gif',
-                        style: 'margin-bottom: -2px'
-                    });
-                    td.adopt(tree_img, createDownloadedCB(id, row[i]));
-                    break;
-                case 1:
-                    td.set('html', row[i]);
-                    td.set('title', row[i]);
-                    break;
-                case 3:
-                    td.adopt(new ProgressBar(row[i].toFloat(), {
-                        'id': 'pbf_' + id,
-                        'width': 80
-                    }));
-                    break;
-                case 4:
-                    td.adopt(createPriorityCombo(id, normalizePriority(row[i])));
-                    break;
-                default:
-                    td.set('html', row[i]);
-                    break;
-            }
-            td.injectInside(tr);
-        }
-        tr.injectInside(this.table);
-    },
-});
-
 var loadTorrentFilesDataTimer;
 var loadTorrentFilesData = function() {
     if ($('prop_files').hasClass('invisible')
@@ -284,13 +219,13 @@ var loadTorrentFilesData = function() {
     }
     var new_hash = torrentsTable.getCurrentTorrentHash();
     if (new_hash === "") {
-        fTable.removeAllRows();
+        torrentFilesTable.clear();
         clearTimeout(loadTorrentFilesDataTimer);
         loadTorrentFilesDataTimer = loadTorrentFilesData.delay(5000);
         return;
     }
     if (new_hash != current_hash) {
-        fTable.removeAllRows();
+        torrentFilesTable.clear();
         current_hash = new_hash;
     }
     var url = new URI('api/v2/torrents/files?hash=' + current_hash);
@@ -298,51 +233,48 @@ var loadTorrentFilesData = function() {
         url: url,
         noCache: true,
         method: 'get',
-        onFailure: function() {
+        onComplete: function() {
-            $('error_div').set('html', 'QBT_TR(qBittorrent client is not reachable)QBT_TR[CONTEXT=HttpServer]');
-            clearTimeout(loadTorrentFilesDataTimer);
-            loadTorrentFilesDataTimer = loadTorrentFilesData.delay(10000);
-        },
-        onSuccess: function(files) {
-            $('error_div').set('html', '');
-            if (files) {
-                // Update Trackers data
-                var i = 0;
-                files.each(function(file) {
-                    if (i === 0) {
-                        is_seed = file.is_seed;
-                    }
-                    var row = [];
-                    row.length = 4;
-                    row[0] = file.priority;
-                    row[1] = escapeHtml(file.name);
-                    row[2] = friendlyUnit(file.size, false);
-                    row[3] = (file.progress * 100).round(1);
-                    if (row[3] == 100.0 && file.progress < 1.0)
-                        row[3] = 99.9;
-                    row[4] = file.priority;
-                    row[5] = friendlyUnit(file.size * (1.0 - file.progress));
-                    row[6] = friendlyPercentage(file.availability);
-
-                    fTable.insertRow(i, row);
-                    ++i;
-                }.bind(this));
-                // Set global CB state
-                if (allCBChecked()) {
-                    setCBState("checked");
-                }
-                else if (allCBUnchecked()) {
-                    setCBState("unchecked");
-                }
-                else {
-                    setCBState("partial");
-                }
-            }
-            else {
-                fTable.removeAllRows();
-            }
             clearTimeout(loadTorrentFilesDataTimer);
             loadTorrentFilesDataTimer = loadTorrentFilesData.delay(5000);
+        },
+        onSuccess: function(files) {
+            var selectedFiles = torrentFilesTable.selectedRowsIds();
+
+            if (!files) {
+                torrentFilesTable.clear();
+                return;
+            }
+
+            var i = 0;
+            files.each(function(file) {
+                if (i === 0)
+                    is_seed = file.is_seed;
+
+                var row = {
+                    rowId: i,
+                    checked: (file.priority !== FilePriority.Ignored),
+                    name: escapeHtml(file.name),
+                    size: file.size,
+                    progress: (file.progress * 100).round(1),
+                    priority: normalizePriority(file.priority),
+                    remaining: (file.size * (1.0 - file.progress)),
+                    availability: file.availability
+                };
+
+                if ((row.progress === 100) && (file.progress < 1))
+                    row.progress = 99.9;
+
+                ++i;
+                torrentFilesTable.updateRowData(row);
+            }.bind(this));
+
+            torrentFilesTable.updateTable(false);
+            torrentFilesTable.altRow();
+
+            if (selectedFiles.length > 0)
+                torrentFilesTable.reselectRows(selectedFiles);
+
+            setGlobalCheckboxState();
         }
     }).send();
 };
@@ -352,5 +284,62 @@ var updateTorrentFilesData = function() {
     loadTorrentFilesData();
 };
 
-var fTable = new filesDynTable();
+var torrentFilesContextMenu = new ContextMenu({
-fTable.setup($('filesTable'));
+    targets: '#torrentFilesTableDiv tr',
+    menu: 'torrentFilesMenu',
+    actions: {
+        FilePrioIgnore: function(element, ref) {
+            var selectedRows = torrentFilesTable.selectedRowsIds();
+            if (selectedRows.length === 0) return;
+
+            setFilePriority(selectedRows, FilePriority.Ignored);
+        },
+        FilePrioNormal: function(element, ref) {
+            var selectedRows = torrentFilesTable.selectedRowsIds();
+            if (selectedRows.length === 0) return;
+
+            setFilePriority(selectedRows, FilePriority.Normal);
+        },
+        FilePrioHigh: function(element, ref) {
+            var selectedRows = torrentFilesTable.selectedRowsIds();
+            if (selectedRows.length === 0) return;
+
+            setFilePriority(selectedRows, FilePriority.High);
+        },
+        FilePrioMaximum: function(element, ref) {
+            var selectedRows = torrentFilesTable.selectedRowsIds();
+            if (selectedRows.length === 0) return;
+
+            setFilePriority(selectedRows, FilePriority.Maximum);
+        }
+    },
+    offsets: {
+        x: -15,
+        y: 2
+    },
+    onShow: function() {
+        var selectedRows = torrentFilesTable.selectedRowsIds();
+
+        if (is_seed)
+            this.hideItem('FilePrio');
+        else
+            this.showItem('FilePrio');
+    }
+});
+
+torrentFilesTable.setup('torrentFilesTableDiv', 'torrentFilesTableFixedHeaderDiv', torrentFilesContextMenu);
+// inject checkbox into table header
+var tableHeaders = $$('#torrentFilesTableFixedHeaderDiv .dynamicTableHeader th');
+if (tableHeaders.length > 0) {
+    var checkbox = new Element('input');
+    checkbox.set('type', 'checkbox');
+    checkbox.set('id', 'tristate_cb');
+    checkbox.addEvent('click', switchCheckboxState);
+
+    var checkboxTH = tableHeaders[0];
+    checkbox.injectInside(checkboxTH);
+}
+
+// default sort by name column
+if (torrentFilesTable.getSortedColunn() === null)
+    torrentFilesTable.setSortedColumn('name');

src/webui/www/private/scripts/prop-peers.js

@@ -0,0 +1,106 @@
+/*
+ * Bittorrent Client using Qt and libtorrent.
+ * Copyright (C) 2018  Thomas Piccirello <thomas.piccirello@gmail.com>
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * In addition, as a special exception, the copyright holders give permission to
+ * link this program with the OpenSSL project's "OpenSSL" library (or with
+ * modified versions of it that use the same license as the "OpenSSL" library),
+ * and distribute the linked executables. You must obey the GNU General Public
+ * License in all respects for all of the code used other than "OpenSSL".  If you
+ * modify file(s), you may extend this exception to your version of the file(s),
+ * but you are not obligated to do so. If you do not wish to do so, delete this
+ * exception statement from your version.
+ */
+
+'use strict';
+
+var loadTorrentPeersTimer;
+var syncTorrentPeersLastResponseId = 0;
+var show_flags = true;
+var loadTorrentPeersData = function() {
+    if ($('prop_peers').hasClass('invisible')
+        || $('propertiesPanel_collapseToggle').hasClass('panel-expand')) {
+        syncTorrentPeersLastResponseId = 0;
+        torrentPeersTable.clear();
+        return;
+    }
+    var current_hash = torrentsTable.getCurrentTorrentHash();
+    if (current_hash === "") {
+        syncTorrentPeersLastResponseId = 0;
+        torrentPeersTable.clear();
+        clearTimeout(loadTorrentPeersTimer);
+        loadTorrentPeersTimer = loadTorrentPeersData.delay(getSyncMainDataInterval());
+        return;
+    }
+    var url = new URI('api/v2/sync/torrentPeers');
+    url.setData('rid', syncTorrentPeersLastResponseId);
+    url.setData('hash', current_hash);
+    new Request.JSON({
+        url: url,
+        noCache: true,
+        method: 'get',
+        onComplete: function() {
+            clearTimeout(loadTorrentPeersTimer);
+            loadTorrentPeersTimer = loadTorrentPeersData.delay(getSyncMainDataInterval());
+        },
+        onSuccess: function(response) {
+            $('error_div').set('html', '');
+            if (response) {
+                var full_update = (response['full_update'] === true);
+                if (full_update)
+                    torrentPeersTable.clear();
+                if (response['rid'])
+                    syncTorrentPeersLastResponseId = response['rid'];
+                if (response['peers']) {
+                    for (var key in response['peers']) {
+                        response['peers'][key]['rowId'] = key;
+
+                        if (response['peers'][key]['client'])
+                            response['peers'][key]['client'] = escapeHtml(response['peers'][key]['client']);
+
+                        torrentPeersTable.updateRowData(response['peers'][key]);
+                    }
+                }
+                if (response['peers_removed']) {
+                    response['peers_removed'].each(function(hash) {
+                        torrentPeersTable.removeRow(hash);
+                    });
+                }
+                torrentPeersTable.updateTable(full_update);
+                torrentPeersTable.altRow();
+
+                if (response['show_flags']) {
+                    if (show_flags != response['show_flags']) {
+                        show_flags = response['show_flags'];
+                        torrentPeersTable.columns['country'].force_hide = !show_flags;
+                        torrentPeersTable.updateColumn('country');
+                    }
+                }
+            }
+            else {
+                torrentPeersTable.clear();
+            }
+        }
+    }).send();
+};
+
+updateTorrentPeersData = function() {
+    clearTimeout(loadTorrentPeersTimer);
+    loadTorrentPeersData();
+};
+
+torrentPeersTable.setup('torrentPeersTableDiv', 'torrentPeersTableFixedHeaderDiv', null);

src/webui/www/private/scripts/prop-trackers.js

@@ -1,61 +1,6 @@
 'use strict';
 
-var trackersDynTable = new Class({
-
-    initialize: function() {},
-
-    setup: function(table, contextMenu) {
-        this.table = $(table);
-        this.rows = new Hash();
-        this.contextMenu = contextMenu;
-    },
-
-    removeRow: function(url) {
-        if (this.rows.has(url)) {
-            var tr = this.rows.get(url);
-            tr.dispose();
-            this.rows.erase(url);
-            return true;
-        }
-        return false;
-    },
-
-    removeAllRows: function() {
-        this.rows.each(function(tr, url) {
-            this.removeRow(url);
-        }.bind(this));
-    },
-
-    updateRow: function(tr, row) {
-        var tds = tr.getElements('td');
-        for (var i = 0; i < row.length; ++i) {
-            tds[i].set('html', row[i]);
-        }
-        return true;
-    },
-
-    insertRow: function(row) {
-        var url = row[1];
-        if (this.rows.has(url)) {
-            var tableRow = this.rows.get(url);
-            this.updateRow(tableRow, row);
-            return;
-        }
-        //this.removeRow(id);
-        var tr = new Element('tr');
-        this.rows.set(url, tr);
-        for (var i = 0; i < row.length; ++i) {
-            var td = new Element('td');
-            td.set('html', row[i]);
-            td.injectInside(tr);
-        }
-        this.contextMenu.addTarget(tr);
-        tr.injectInside(this.table);
-    }
-});
-
 var current_hash = "";
-var selectedTracker = "";
 
 var loadTrackersDataTimer;
 var loadTrackersData = function() {
@@ -66,13 +11,13 @@ var loadTrackersData = function() {
     }
     var new_hash = torrentsTable.getCurrentTorrentHash();
     if (new_hash === "") {
-        torrentTrackersTable.removeAllRows();
+        torrentTrackersTable.clear();
         clearTimeout(loadTrackersDataTimer);
         loadTrackersDataTimer = loadTrackersData.delay(10000);
         return;
     }
     if (new_hash != current_hash) {
-        torrentTrackersTable.removeAllRows();
+        torrentTrackersTable.clear();
         current_hash = new_hash;
     }
     var url = new URI('api/v2/torrents/trackers?hash=' + current_hash);
@@ -80,18 +25,17 @@ var loadTrackersData = function() {
         url: url,
         noCache: true,
         method: 'get',
-        onFailure: function() {
+        onComplete: function() {
-            $('error_div').set('html', 'QBT_TR(qBittorrent client is not reachable)QBT_TR[CONTEXT=HttpServer]');
             clearTimeout(loadTrackersDataTimer);
-            loadTrackersDataTimer = loadTrackersData.delay(20000);
+            loadTrackersDataTimer = loadTrackersData.delay(10000);
         },
         onSuccess: function(trackers) {
-            $('error_div').set('html', '');
+            var selectedTrackers = torrentTrackersTable.selectedRowsIds();
-            torrentTrackersTable.removeAllRows();
+            torrentTrackersTable.clear();
 
             if (trackers) {
-                // Update Trackers data
                 trackers.each(function(tracker) {
+                    var url = escapeHtml(tracker.url);
                     var status;
                     switch (tracker.status) {
                         case 0:
@@ -111,22 +55,27 @@ var loadTrackersData = function() {
                             break;
                     }
 
-                    var row = [
+                    var row = {
-                        tracker.tier,
+                        rowId: url,
-                        escapeHtml(tracker.url),
+                        tier: tracker.tier,
-                        status,
+                        url: url,
-                        tracker.num_peers,
+                        status: status,
-                        (tracker.num_seeds >= 0) ? tracker.num_seeds : "QBT_TR(N/A)QBT_TR[CONTEXT=TrackerListWidget]",
+                        peers: tracker.num_peers,
-                        (tracker.num_leeches >= 0) ? tracker.num_leeches : "QBT_TR(N/A)QBT_TR[CONTEXT=TrackerListWidget]",
+                        seeds: (tracker.num_seeds >= 0) ? tracker.num_seeds : "QBT_TR(N/A)QBT_TR[CONTEXT=TrackerListWidget]",
-                        (tracker.num_downloaded >= 0) ? tracker.num_downloaded : "QBT_TR(N/A)QBT_TR[CONTEXT=TrackerListWidget]",
+                        leeches: (tracker.num_leeches >= 0) ? tracker.num_leeches : "QBT_TR(N/A)QBT_TR[CONTEXT=TrackerListWidget]",
-                        escapeHtml(tracker.msg)
+                        downloaded: (tracker.num_downloaded >= 0) ? tracker.num_downloaded : "QBT_TR(N/A)QBT_TR[CONTEXT=TrackerListWidget]",
-                    ];
+                        message: escapeHtml(tracker.msg)
+                    };
 
-                    torrentTrackersTable.insertRow(row);
+                    torrentTrackersTable.updateRowData(row);
                 });
+
+                torrentTrackersTable.updateTable(false);
+                torrentTrackersTable.altRow();
+
+                if (selectedTrackers.length > 0)
+                    torrentTrackersTable.reselectRows(selectedTrackers);
             }
-            clearTimeout(loadTrackersDataTimer);
-            loadTrackersDataTimer = loadTrackersData.delay(10000);
         }
     }).send();
 };
@@ -137,13 +86,15 @@ var updateTrackersData = function() {
 };
 
 var torrentTrackersContextMenu = new ContextMenu({
-    targets: '.torrentTrackersMenuTarget',
+    targets: '#torrentTrackersTableDiv',
     menu: 'torrentTrackersMenu',
     actions: {
         AddTracker: function(element, ref) {
             addTrackerFN();
         },
         EditTracker: function(element, ref) {
+            // only allow editing of one row
+            element.firstChild.click();
             editTrackerFN(element);
         },
         RemoveTracker: function(element, ref) {
@@ -155,9 +106,12 @@ var torrentTrackersContextMenu = new ContextMenu({
         y: 2
     },
     onShow: function() {
-        var element = this.options.element;
+        var selectedTrackers = torrentTrackersTable.selectedRowsIds();
-        selectedTracker = element;
+        var containsStaticTracker = selectedTrackers.some(function(tracker) {
-        if (element.childNodes[1].innerText.indexOf("** [") === 0) {
+            return (tracker.indexOf("** [") === 0);
+        });
+
+        if (containsStaticTracker || (selectedTrackers.length === 0)) {
             this.hideItem('EditTracker');
             this.hideItem('RemoveTracker');
             this.hideItem('CopyTrackerUrl');
@@ -167,7 +121,6 @@ var torrentTrackersContextMenu = new ContextMenu({
             this.showItem('RemoveTracker');
             this.showItem('CopyTrackerUrl');
         }
-        this.options.element.firstChild.click();
     }
 });
 
@@ -218,13 +171,13 @@ var editTrackerFN = function(element) {
 var removeTrackerFN = function(element) {
     if (current_hash.length === 0) return;
 
-    var trackerUrl = element.childNodes[1].innerText;
+    var selectedTrackers = torrentTrackersTable.selectedRowsIds();
     new Request({
         url: 'api/v2/torrents/removeTrackers',
         method: 'post',
         data: {
             hash: current_hash,
-            urls: trackerUrl
+            urls: selectedTrackers.join("|")
         },
         onSuccess: function() {
             updateTrackersData();
@@ -232,15 +185,10 @@ var removeTrackerFN = function(element) {
     }).send();
 };
 
-var torrentTrackersTable = new trackersDynTable();
-torrentTrackersTable.setup($('trackersTable'), torrentTrackersContextMenu);
-
 new ClipboardJS('#CopyTrackerUrl', {
     text: function(trigger) {
-        if (selectedTracker) {
+        return torrentTrackersTable.selectedRowsIds().join("\n");
-            var url = selectedTracker.childNodes[1].innerText;
-            selectedTracker = "";
-            return url;
-        }
     }
 });
+
+torrentTrackersTable.setup('torrentTrackersTableDiv', 'torrentTrackersTableFixedHeaderDiv', torrentTrackersContextMenu);

src/webui/www/webui.qrc

@@ -38,6 +38,7 @@
         <file>private/scripts/progressbar.js</file>
         <file>private/scripts/prop-files.js</file>
         <file>private/scripts/prop-general.js</file>
+        <file>private/scripts/prop-peers.js</file>
         <file>private/scripts/prop-trackers.js</file>
         <file>private/scripts/prop-webseeds.js</file>
         <file>private/setlocation.html</file>