Add Status column to webui (addresses #6815) (#7032)

* Add Status column to webui (addresses #6815)

src/webui/www/public/css/dynamicTable.css

@@ -33,7 +33,7 @@
     cursor: pointer;
 }
 
-#transferList img.statusIcon {
+#transferList img.stateIcon {
 	height: 1.3em;
 	vertical-align: middle;
     margin-bottom: -1px;

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

@@ -312,6 +312,8 @@ window.addEvent('load', function () {
                         for (var key in response['torrents']) {
                             response['torrents'][key]['hash'] = key;
                             response['torrents'][key]['rowId'] = key;
+                            if (response['torrents'][key]['state'])
+                                response['torrents'][key]['status'] = response['torrents'][key]['state'];
                             torrentsTable.updateRowData(response['torrents'][key]);
                             if (addTorrentToCategoryList(response['torrents'][key]))
                                 update_categories = true;

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

@@ -734,6 +734,7 @@ var TorrentsTable = new Class({
             this.newColumn('name', '', 'QBT_TR(Name)QBT_TR[CONTEXT=TorrentModel]', 200, true);
             this.newColumn('size', '', 'QBT_TR(Size)QBT_TR[CONTEXT=TorrentModel]', 100, true);
             this.newColumn('progress', '', 'QBT_TR(Done)QBT_TR[CONTEXT=TorrentModel]', 85, true);
+            this.newColumn('status', '', 'QBT_TR(Status)QBT_TR[CONTEXT=TorrentModel]', 100, true);
             this.newColumn('num_seeds', '', 'QBT_TR(Seeds)QBT_TR[CONTEXT=TorrentModel]', 100, true);
             this.newColumn('num_leechs', '', 'QBT_TR(Peers)QBT_TR[CONTEXT=TorrentModel]', 100, true);
             this.newColumn('dlspeed', '', 'QBT_TR(Down Speed)QBT_TR[CONTEXT=TorrentModel]', 100, true);
@@ -771,26 +772,25 @@ var TorrentsTable = new Class({
         initColumnsFunctions : function () {
 
             // state_icon
-
             this.columns['state_icon'].updateTd = function (td, row) {
                 var state = this.getRowValue(row);
 
-                if (state == "forcedDL" || state == "metaDL")
+                if ((state === "forcedDL") || (state === "metaDL"))
                     state = "downloading";
-                else if (state == "allocating")
+                else if (state === "allocating")
                     state = "stalledDL";
-                else if (state == "forcedUP")
+                else if (state === "forcedUP")
                     state = "uploading";
-                else if (state == "pausedDL")
+                else if (state === "pausedDL")
                     state = "paused";
-                else if (state == "pausedUP")
+                else if (state === "pausedUP")
                     state = "completed";
-                else if (state == "queuedDL" || state == "queuedUP")
+                else if ((state === "queuedDL") || (state === "queuedUP"))
                     state = "queued";
-                else if (state == "checkingDL" || state == "checkingUP" ||
+                else if ((state === "checkingDL") || (state === "checkingUP") ||
-                        state == "queuedForChecking" || state == "checkingResumeData")
+                        (state === "queuedForChecking") || (state === "checkingResumeData"))
                     state = "checking";
-                else if (state == "unknown" || state == "error" || state == "missingFiles")
+                else if ((state === "unknown") || (state === "error") || (state === "missingFiles"))
                     state = "error";
 
                 var img_path = 'images/skin/' + state + '.png';
@@ -803,12 +803,37 @@ var TorrentsTable = new Class({
                 else
                     td.adopt(new Element('img', {
                         'src' : img_path,
-                        'class' : 'statusIcon'
+                        'class' : 'stateIcon'
                     }));
             };
 
-            // priority
+            // status
+            this.columns['status'].updateTd = function (td, row) {
+                var status = this.getRowValue(row);
+                if (!status) return;
+
+                if ((status === "downloading") || (status === "forcedDL") || (status === "metaDL"))
+                    status = "Downloading";
+                else if ((status === "stalledDL") || (status === "stalledUP") || (status === "allocating"))
+                    status = "Stalled";
+                else if ((status === "uploading") || (status === "forcedUP"))
+                    status = "Uploading";
+                else if (status === "pausedDL")
+                    status = "Paused";
+                else if (status === "pausedUP")
+                    status = "Completed";
+                else if ((status === "queuedDL") || (status === "queuedUP"))
+                    status = "Queued";
+                else if ((status === "checkingDL") || (status === "checkingUP") ||
+                        (status === "queuedForChecking") || (status === "checkingResumeData"))
+                    status = "Checking";
+                else if ((status === "unknown") || (status === "error") || (status === "missingFiles"))
+                    status = "Error";
+
+                td.set('html', status);
+            };
 
+            // priority
             this.columns['priority'].updateTd = function (td, row) {
                 var priority = this.getRowValue(row);
                 td.set('html', priority < 1 ? '*' : priority);
@@ -829,21 +854,18 @@ var TorrentsTable = new Class({
             };
 
             // name, category
-
             this.columns['name'].updateTd = function (td, row) {
                 td.set('html', escapeHtml(this.getRowValue(row)));
             };
             this.columns['category'].updateTd = this.columns['name'].updateTd;
 
             // size
-
             this.columns['size'].updateTd = function (td, row) {
                 var size = this.getRowValue(row);
                 td.set('html', friendlyUnit(size, false));
             };
 
             // progress
-
             this.columns['progress'].updateTd = function (td, row) {
                 var progress = this.getRowValue(row);
                 var progressFormated = (progress * 100).round(1);
@@ -883,7 +905,6 @@ var TorrentsTable = new Class({
             }.bind(this);
 
             // num_seeds
-
             this.columns['num_seeds'].updateTd = function (td, row) {
                 var num_seeds = this.getRowValue(row, 0);
                 var num_complete = this.getRowValue(row, 1);
@@ -911,30 +932,25 @@ var TorrentsTable = new Class({
             };
 
             // num_leechs
-
             this.columns['num_leechs'].updateTd = this.columns['num_seeds'].updateTd;
             this.columns['num_leechs'].compareRows = this.columns['num_seeds'].compareRows;
 
             // dlspeed
-
             this.columns['dlspeed'].updateTd = function (td, row) {
                 var speed = this.getRowValue(row);
                 td.set('html', friendlyUnit(speed, true));
             };
 
             // upspeed
-
             this.columns['upspeed'].updateTd = this.columns['dlspeed'].updateTd;
 
             // eta
-
             this.columns['eta'].updateTd = function (td, row) {
                 var eta = this.getRowValue(row);
                 td.set('html', friendlyDuration(eta, true));
             };
 
             // ratio
-
             this.columns['ratio'].updateTd = function (td, row) {
                 var ratio = this.getRowValue(row);
                 var html = null;
@@ -946,14 +962,12 @@ var TorrentsTable = new Class({
             };
 
             // added on
-
             this.columns['added_on'].updateTd = function (td, row) {
                 var date = new Date(this.getRowValue(row) * 1000).toLocaleString();
                 td.set('html', date);
             };
 
             // completion_on
-
             this.columns['completion_on'].updateTd = function (td, row) {
                 var val = this.getRowValue(row);
                 if (val === 0xffffffff || val < 0)
@@ -965,11 +979,9 @@ var TorrentsTable = new Class({
             };
 
             // seen_complete
-
             this.columns['seen_complete'].updateTd = this.columns['completion_on'].updateTd;
 
             //  dl_limit, up_limit
-
             this.columns['dl_limit'].updateTd = function (td, row) {
                 var speed = this.getRowValue(row);
                 if (speed === 0)
@@ -981,7 +993,6 @@ var TorrentsTable = new Class({
             this.columns['up_limit'].updateTd = this.columns['dl_limit'].updateTd;
 
             // downloaded, uploaded, downloaded_session, uploaded_session, amount_left, completed, total_size
-
             this.columns['downloaded'].updateTd = this.columns['size'].updateTd;
             this.columns['uploaded'].updateTd = this.columns['size'].updateTd;
             this.columns['downloaded_session'].updateTd = this.columns['size'].updateTd;
@@ -992,16 +1003,13 @@ var TorrentsTable = new Class({
             this.columns['total_size'].updateTd = this.columns['size'].updateTd;
 
             // save_path, tracker
-
             this.columns['save_path'].updateTd = this.columns['name'].updateTd;
             this.columns['tracker'].updateTd = this.columns['name'].updateTd;
 
             // ratio_limit
-
             this.columns['ratio_limit'].updateTd = this.columns['ratio'].updateTd;
 
             // last_activity
-
             this.columns['last_activity'].updateTd = function (td, row) {
                 var val = this.getRowValue(row);
                 if (val < 1)