- Still remodeling the UI

- Improved Web UI performance by make more work on server side (C++) and less work on client side (Javascript)

src/eventmanager.cpp

@@ -31,6 +31,7 @@
 
 #include "eventmanager.h"
 #include "bittorrent.h"
+#include "misc.h"
 #include <QDebug>
 
 EventManager::EventManager(QObject *parent, Bittorrent *BTSession)
@@ -56,7 +57,7 @@ void EventManager::modifiedTorrent(QTorrentHandle h)
 {
   QString hash = h.hash();
   QVariantMap event;
-
+  event["eta"] = QVariant(QString::fromUtf8("∞"));
   if(h.is_paused()) {
     if(h.is_seed())
       event["state"] = QVariant("pausedUP");
@@ -73,19 +74,21 @@ void EventManager::modifiedTorrent(QTorrentHandle h)
       {
       case torrent_status::finished:
       case torrent_status::seeding:
-        if(h.upload_payload_rate() > 0)
+        if(h.upload_payload_rate() > 0) {
           event["state"] = QVariant("seeding");
-        else
+        } else {
           event["state"] = QVariant("stalledUP");
+        }
         break;
       case torrent_status::allocating:
       case torrent_status::checking_files:
       case torrent_status::queued_for_checking:
       case torrent_status::checking_resume_data:
-        if(h.is_seed())
+        if(h.is_seed()) {
           event["state"] = QVariant("checkingUP");
-        else
+        } else {
           event["state"] = QVariant("checkingDL");
+        }
         break;
       case torrent_status::downloading:
       case torrent_status::downloading_metadata:
@@ -93,6 +96,7 @@ void EventManager::modifiedTorrent(QTorrentHandle h)
           event["state"] = QVariant("downloading");
         else
           event["state"] = QVariant("stalledDL");
+        event["eta"] = misc::userFriendlyDuration(BTSession->getETA(hash));
         break;
                         default:
         qDebug("No status, should not happen!!! status is %d", h.state());
@@ -101,15 +105,23 @@ void EventManager::modifiedTorrent(QTorrentHandle h)
     }
   }
   event["name"] = QVariant(h.name());
-  event["size"] = QVariant((qlonglong)h.actual_size());
+  event["size"] = QVariant(misc::friendlyUnit(h.actual_size()));
   event["progress"] = QVariant(h.progress());
-  event["dlspeed"] = QVariant(h.download_payload_rate());
+  event["dlspeed"] = QVariant(tr("%1/s", "e.g. 120 KiB/s").arg(misc::friendlyUnit(h.download_payload_rate())));
   if(BTSession->isQueueingEnabled()) {
     event["priority"] = QVariant(h.queue_position());
   } else {
     event["priority"] = -1;
   }
-  event["upspeed"] = QVariant(h.upload_payload_rate());
+  event["upspeed"] = QVariant(tr("%1/s", "e.g. 120 KiB/s").arg(misc::friendlyUnit(h.upload_payload_rate())));
+  QString seeds = QString::number(h.num_seeds());
+  if(h.num_complete() > 0)
+    seeds += " ("+QString::number(h.num_complete())+")";
+  event["num_seeds"] = QVariant(seeds);
+  QString leechs = QString::number(h.num_peers()-h.num_seeds());
+  if(h.num_incomplete() > 0)
+    leechs += " ("+QString::number(h.num_incomplete())+")";
+  event["num_leechs"] = QVariant(leechs);
   event["seed"] = QVariant(h.is_seed());
   event["hash"] = QVariant(hash);
   event_list[hash] = event;

src/transferlistwidget.cpp

@@ -283,6 +283,20 @@ int TransferListWidget::updateTorrent(int row) {
         return s;
       }
     }
+    // Connected_seeds*100000+total_seeds*10 (if total_seeds is available)
+    // Connected_seeds*100000+1 (if total_seeds is unavailable)
+    qulonglong seeds = h.num_seeds()*1000000;
+    if(h.num_complete() >= h.num_seeds())
+      seeds += h.num_complete()*10;
+    else
+      seeds += 1;
+    listModel->setData(listModel->index(row, TR_SEEDS), QVariant(seeds));
+    qulonglong peers = (h.num_peers()-h.num_seeds())*1000000;
+    if(h.num_incomplete() >= (h.num_peers()-h.num_seeds()))
+      peers += h.num_incomplete()*10;
+    else
+      peers += 1;
+    listModel->setData(listModel->index(row, TR_PEERS), QVariant(peers));
     if(h.is_paused()) {
       if(h.is_seed())
         return STATE_PAUSED_UP;
@@ -331,20 +345,6 @@ int TransferListWidget::updateTorrent(int row) {
     // Common to both downloads and uploads
     listModel->setData(listModel->index(row, TR_STATUS), s);
     listModel->setData(listModel->index(row, TR_UPSPEED), QVariant((double)h.upload_payload_rate()));
-    // Connected_seeds*100000+total_seeds*10 (if total_seeds is available)
-    // Connected_seeds*100000+1 (if total_seeds is unavailable)
-    qulonglong seeds = h.num_seeds()*1000000;
-    if(h.num_complete() >= h.num_seeds())
-      seeds += h.num_complete()*10;
-    else
-      seeds += 1;
-    listModel->setData(listModel->index(row, TR_SEEDS), QVariant(seeds));
-    qulonglong peers = (h.num_peers()-h.num_seeds())*1000000;
-    if(h.num_incomplete() >= (h.num_peers()-h.num_seeds()))
-      peers += h.num_incomplete()*10;
-    else
-      peers += 1;
-    listModel->setData(listModel->index(row, TR_PEERS), QVariant(peers));
     // Share ratio
     listModel->setData(listModel->index(row, TR_RATIO), QVariant(BTSession->getRealRatio(hash)));
   }catch(invalid_handle e) {

src/webui/index.html

@@ -88,11 +88,15 @@
 										<tr>
 											<th></th>
 											<th>Name</th>
+											<th id='prioHeader'>#</th>
 											<th>Size</th>
-											<th style="width: 90px;">Progress</th>
-											<th>DL Speed</th>
-											<th>UP Speed</th>
-											<th id='prioHeader'>Priority</th>
+											<th style="width: 90px;">Done</th>
+											<th>Seeds</th>
+											<th>Peers</th>
+											<th>Down Speed</th>
+											<th>Up Speed</th>
+											<th>ETA</th>
+											
 										</tr>
 									</thead>
 									<tbody id="myTable"></tbody>

src/webui/scripts/client.js

@@ -32,7 +32,7 @@ window.addEvent('domready', function(){
 	'visibility': 'visible'
   });
   initializeWindows();
-  myTable.setup('myTable', 3);
+  myTable.setup('myTable', 4);
   var r=0;
   var waiting=false;
   var stateToImg = function(state){
@@ -59,18 +59,6 @@ window.addEvent('domready', function(){
     }
     return '';
   };
-	var round1 = function(val){return Math.round(val*10)/10};
-	var fspeed = function(val){return round1(val/1024) + ' KiB/s';};
-	var fsize = function(val){
-		var units = ['B', 'KiB', 'MiB', 'GiB'];
-		for(var i=0; i<5; i++){
-			if (val < 1024) {
-				return round1(val) + ' ' + units[i];
-			}
-			val /= 1024;
-		}
-		return round1(val) + ' TiB';
-	};
 	var ajaxfn = function(){
 		var queueing_enabled = false;
 		var url = 'json/events';
@@ -93,19 +81,22 @@ window.addEvent('domready', function(){
             events.each(function(event){
               events_hashes[events_hashes.length] = event.hash;
                 var row = new Array();
-                row.length = 6;
+                row.length = 9;
                 row[0] = stateToImg(event.state);
                 row[1] = event.name;
-                row[2] = fsize(event.size);
-                row[3] = round1(event.progress*100);
-                row[4] = fspeed(event.dlspeed);
-                row[5] = fspeed(event.upspeed);
-		row[6] = event.priority
-		if(row[6] != -1)
+		row[2] = event.priority
+                row[3] = event.size;
+                row[4] = event.progress*100;
+		row[5] = event.num_seeds;
+		row[6] = event.num_leechs;
+                row[7] = event.dlspeed;
+                row[8] = event.upspeed;
+		row[9] = event.eta;
+		if(row[2] != -1)
 			queueing_enabled = true;
                if(!torrent_hashes.contains(event.hash)) {
                   // New unfinished torrent
-                  torrent_hashes[torrent_hashes.length] = event.hash;
+                  //torrent_hashes[torrent_hashes.length] = event.hash;
                   myTable.insertRow(event.hash, row);
                 } else {
                   // Update torrent data
@@ -134,10 +125,11 @@ window.addEvent('domready', function(){
 	};
 	ajaxfn();
 // 	ajaxfn.periodical(5000);
-setFilter = function(f) {
-  myTable.setFilter(f);
-  ajaxfn();
-}
+
+	setFilter = function(f) {
+	  myTable.setFilter(f);
+	  ajaxfn();
+	}
 
 });
 
@@ -150,10 +142,6 @@ window.addEvent('unload', function(){
 window.addEvent('keydown', function(event){
   if (event.key == 'a' && event.control) {
     event.stop();
-    if($("Tab1").hasClass('active')) {
-      myTable.selectAll();
-    } else {
-      myTableUP.selectAll();
-    }
+    myTable.selectAll();
   }
 });

src/webui/scripts/dynamicTable.js

@@ -63,7 +63,7 @@ var dynamicTable = new Class	({
 		 var trs = this.table.getElements('tr');
                         trs.each(function(tr,i){
 				var tds = tr.getElements('td');
-				tds.getLast().addClass('invisible');
+				tds[2].addClass('invisible');
                         }.bind(this));
 		this.priority_hidden = true;
 	},