- started to remodel the UI to match the new qBT UI

Changelog

@@ -33,6 +33,7 @@
     - FEATURE: Include DHT traffic in the rate limiter (libtorrent >= v0.15 only)
     - FEATURE: Support for bitcomet padding files (libtorrent >= v0.15 only)
     - FEATURE: Option to skip file checking and start seeding immediately in torrent addition dialog (Stephanos Antaris) (libtorrent >= v0.15 only)
+    - WEB UI: Removed Web UI to match new qBittorrent UI
     - COSMETIC: Merged download / upload lists
     - COSMETIC: Torrents can be filtered based on their status
     - COSMETIC: Torrent properties are now displayed in main window

src/eventmanager.cpp

@@ -58,29 +58,41 @@ void EventManager::modifiedTorrent(QTorrentHandle h)
   QVariantMap event;
 
   if(h.is_paused()) {
-    event["state"] = QVariant("paused");
+    if(h.is_seed())
+      event["state"] = QVariant("pausedUP");
+    else
+      event["state"] = QVariant("pausedDL");
   } else {
     if(BTSession->isQueueingEnabled() && h.is_queued()) {
-      event["state"] = QVariant("queued");
+      if(h.is_seed())
+        event["state"] = QVariant("queuedUP");
+      else
+        event["state"] = QVariant("queuedDL");
     } else {
       switch(h.state())
       {
-                        case torrent_status::finished:
-                        case torrent_status::seeding:
-        event["state"] = QVariant("seeding");
+      case torrent_status::finished:
+      case torrent_status::seeding:
+        if(h.upload_payload_rate() > 0)
+          event["state"] = QVariant("seeding");
+        else
+          event["state"] = QVariant("stalledUP");
         break;
-                case torrent_status::allocating:
+      case torrent_status::allocating:
       case torrent_status::checking_files:
       case torrent_status::queued_for_checking:
       case torrent_status::checking_resume_data:
-        event["state"] = QVariant("checking");
+        if(h.is_seed())
+          event["state"] = QVariant("checkingUP");
+        else
+          event["state"] = QVariant("checkingDL");
         break;
-                        case torrent_status::downloading:
-                        case torrent_status::downloading_metadata:
+      case torrent_status::downloading:
+      case torrent_status::downloading_metadata:
         if(h.download_payload_rate() > 0)
           event["state"] = QVariant("downloading");
         else
-          event["state"] = QVariant("stalled");
+          event["state"] = QVariant("stalledDL");
         break;
                         default:
         qDebug("No status, should not happen!!! status is %d", h.state());
@@ -90,14 +102,12 @@ void EventManager::modifiedTorrent(QTorrentHandle h)
   }
   event["name"] = QVariant(h.name());
   event["size"] = QVariant((qlonglong)h.actual_size());
-  if(!h.is_seed()) {
-    event["progress"] = QVariant(h.progress());
-    event["dlspeed"] = QVariant(h.download_payload_rate());
-    if(BTSession->isQueueingEnabled()) {
-      event["priority"] = QVariant(h.queue_position());
-    } else {
-      event["priority"] = -1;
-    }
+  event["progress"] = QVariant(h.progress());
+  event["dlspeed"] = QVariant(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["seed"] = QVariant(h.is_seed());

src/webui/css/style.css

@@ -120,3 +120,22 @@ hr {
 	height:100%;
 }
 
+#Filters {
+	width: 120px;
+	border-right: 1px solid #ccc;
+	color: #000;
+}
+
+#Filters ul {
+	list-style-type: none;
+}
+
+#Filters ul img {
+	padding-right: 2px;
+	margin-top: 2px;
+}
+
+#Transfers {
+	vertical-align: top;
+}
+

src/webui/index.html

@@ -6,13 +6,11 @@
 	<link rel="stylesheet" href="css/dynamicTable.css" type="text/css" />
 	<link rel="stylesheet" href="css/style.css" type="text/css" />
 	<link rel="stylesheet" href="css/mocha.css" type="text/css" />
-	<link rel="stylesheet" href="css/mootabs1.2.css" type="text/css" />
 	<script type="text/javascript" src="scripts/mootools-1.2-core-yc.js" charset="utf-8"></script>
 	<script type="text/javascript" src="scripts/mootools-1.2-more.js" charset="utf-8"></script>
 	<!--[if IE]>
 		<script type="text/javascript" src="scripts/excanvas-compressed.js"></script>
 	<![endif]-->
-	<script type="text/javascript" src="scripts/mootabs1.2.js" charset="utf-8"></script>
 	<script type="text/javascript" src="scripts/mocha.js"></script>
 	<script type="text/javascript" src="scripts/mocha-init.js"></script>
 	<script type="text/javascript" src="scripts/progressbar.js"></script>
@@ -23,7 +21,7 @@
 	<div id="desktop">
 		<div id="desktopHeader">
 			<div id="desktopTitlebar">
-				<h1 class="applicationTitle">qBittorrent Web User Interface <span class="version">version 1.3.2</span></h1>
+				<h1 class="applicationTitle">qBittorrent Web User Interface <span class="version">version 2.0.0</span></h1>
 			</div>
 			<div id="desktopNavbar">
 				<ul>
@@ -74,12 +72,17 @@
 			</div>
 		</div>
 		<div id="pageWrapper">						<span id="error_div"></span>
-		<div id="myTabs" class="toolbarTabs">
-			<ul class="mootabs_title">
-				<li title="Tab1"><a>Downloads</a></li>
-				<li title="Tab2"><a>Uploads</a></li>
-			</ul>
-			<div id="Tab1" class="mootabs_panel">
+			<table>
+				<tr><td id="Filters">
+				<ul>
+					<li><a href="#" onclick="setFilter('all');"><img src="images/oxygen/folder.png"/>All</li>
+					<li><a href="#" onclick="setFilter('downloading');"><img src="images/skin/downloading.png"/>Downloading</li>
+					<li><a href="#" onclick="setFilter('completed');"><img src="images/skin/seeding.png"/>Completed</li>
+					<li><a href="#" onclick="setFilter('active');"><img src="images/oxygen/draw-triangle2.png"/>Active</li>
+					<li><a href="#" onclick="setFilter('inactive');"><img src="images/oxygen/draw-rectangle.png"/>Inactive</li>
+				</ul>
+				</td>
+			<td id="Transfers">
 								<table class="torrentTable" cellpadding="0" cellspacing="0">
 									<thead>
 										<tr>
@@ -94,21 +97,8 @@
 									</thead>
 									<tbody id="myTable"></tbody>
 								</table>
+			</td><tr>
 			</div><!-- tab1 -->
-			<div id="Tab2" class="mootabs_panel">
-								<table class="torrentTable" cellpadding="0" cellspacing="0">
-									<thead>
-										<tr>
-											<th></th>
-											<th>Name</th>
-											<th>Size</th>
-											<th>UP Speed</th>
-										</tr>
-									</thead>
-									<tbody id="myTableUP"></tbody>
-								</table>
-			</div>
-		</div><!-- tabs -->
 	</div>
 	</div>
 </body>

src/webui/scripts/client.js

@@ -23,7 +23,7 @@
  */
 
 myTable = new dynamicTable();
-myTableUP = new dynamicTable();
+ajaxfn = function(){};
 
 window.addEvent('domready', function(){
   MochaUI.Desktop = new MochaUI.Desktop();
@@ -32,29 +32,27 @@ window.addEvent('domready', function(){
 	'visibility': 'visible'
   });
   initializeWindows();
-  // Tabs
-  myTabs1 = new mootabs('myTabs', {
-      width: '100%',
-      height: '100%'
-  });
   myTable.setup('myTable', 3);
-  myTableUP.setup('myTableUP', -1);
   var r=0;
   var waiting=false;
   var stateToImg = function(state){
     switch (state)
     {
-      case 'paused':
+      case 'pausedUP':
+      case 'pausedDL':
           return '<img src="images/skin/paused.png"/>';
       case 'seeding':
+      case 'stalledUP':
           return '<img src="images/skin/seeding.png"/>';
-      case 'checking':
+      case 'checkingUP':
+      case 'checkingDL':
           return '<img src="images/oxygen/run-build.png"/>';
       case 'downloading':
           return '<img src="images/skin/downloading.png"/>';
-      case 'stalled':
+      case 'stalledDL':
           return '<img src="images/skin/stalled.png"/>';
-      case 'queued':
+      case 'queuedUP':
+      case 'queuedDL':
           return '<img src="images/oxygen/mail-queue.png"/>';
       default:
 	  return '<img src="images/skin/stalled.png"/>';
@@ -90,33 +88,10 @@ window.addEvent('domready', function(){
 					 $('error_div').set('html', '');
 					if(events){
             // Add new torrents or update them
-            unfinished_hashes = myTable.getRowIds();
-            finished_hashes = myTableUP.getRowIds();
+            torrent_hashes = myTable.getRowIds();
             events_hashes = new Array();
             events.each(function(event){
               events_hashes[events_hashes.length] = event.hash;
-              if(event.seed) {
-                var row = new Array();
-                row.length = 4;
-                row[0] = stateToImg(event.state);
-                row[1] = event.name;
-                row[2] = fsize(event.size);
-                row[3] = fspeed(event.upspeed);
-                if(!finished_hashes.contains(event.hash)) {
-                  // New finished torrent
-                  finished_hashes[finished_hashes.length] = event.hash;
-                  myTableUP.insertRow(event.hash, row);
-                  if(unfinished_hashes.contains(event.hash)) {
-                    // Torrent used to be in unfinished list
-                    // Remove it
-                    myTable.removeRow(event.hash);
-                    unfinished_hashes.erase(event.hash);
-                  }
-                } else {
-                  // Update torrent data
-                  myTableUP.updateRow(event.hash, row);
-                }
-              } else {
                 var row = new Array();
                 row.length = 6;
                 row[0] = stateToImg(event.state);
@@ -128,33 +103,21 @@ window.addEvent('domready', function(){
 		row[6] = event.priority
 		if(row[6] != -1)
 			queueing_enabled = true;
-               if(!unfinished_hashes.contains(event.hash)) {
+               if(!torrent_hashes.contains(event.hash)) {
                   // New unfinished torrent
-                  unfinished_hashes[unfinished_hashes.length] = event.hash;
+                  torrent_hashes[torrent_hashes.length] = event.hash;
                   myTable.insertRow(event.hash, row);
-                  if(finished_hashes.contains(event.hash)) {
-                    // Torrent used to be in unfinished list
-                    // Remove it
-                    myTableUP.removeRow(event.hash);
-                    finished_hashes.erase(event.hash);
-                  }
                 } else {
                   // Update torrent data
-                  myTable.updateRow(event.hash, row);
+                  myTable.updateRow(event.hash, row, event.state);
                 }
-              }
             });
             // Remove deleted torrents
-            unfinished_hashes.each(function(hash){
+            torrent_hashes.each(function(hash){
               if(!events_hashes.contains(hash)) {
                 myTable.removeRow(hash);
               }
             });
-            finished_hashes.each(function(hash){
-              if(!events_hashes.contains(hash)) {
-                myTableUP.removeRow(hash);
-              }
-            });
 	    if(queueing_enabled) {
 		$('queueingButtons').removeClass('invisible');
 		myTable.showPriority();
@@ -171,6 +134,11 @@ window.addEvent('domready', function(){
 	};
 	ajaxfn();
 // 	ajaxfn.periodical(5000);
+setFilter = function(f) {
+  myTable.setFilter(f);
+  ajaxfn();
+}
+
 });
 
 // This runs when a person leaves your page.

src/webui/scripts/dynamicTable.js

@@ -42,6 +42,7 @@ var dynamicTable = new Class	({
 		this.cur = new Array();
 		this.priority_hidden = false;
 		this.progressIndex = progressIndex;
+		this.filter = 'all';
 	},
 
 	altRow: function()
@@ -67,6 +68,10 @@ var dynamicTable = new Class	({
 		this.priority_hidden = true;
 	},
 	
+	setFilter: function(f) {
+		this.filter = f;
+	},
+
 	showPriority: function(){
                 if(!this.priority_hidden) return;
 		$('prioHeader').removeClass('invisible');
@@ -78,13 +83,51 @@ var dynamicTable = new Class	({
                 this.priority_hidden = false;
         },
 	
-	insertRow: function(id, row){
+	applyFilterOnRow: function(tr, status) {
+		switch(this.filter) {
+			case 'all':
+				tr.removeClass("invisible");
+				return;
+			case 'downloading':
+				if(status == "downloading" || status == "stalledDL" || status == "checkingDL" || status == "pausedDL" || status == "queuedDL") {
+					tr.removeClass("invisible");
+				} else {
+					tr.addClass("invisible");
+				}
+				return;
+			case 'completed':
+				if(status == "seeding" || status == "stalledUP" || status == "checkingUP" || status == "pausedUP" || status == "queuedUP") {
+					tr.removeClass("invisible");
+				} else {
+					tr.addClass("invisible");
+				}
+				return;
+			case 'active':
+				if(status == "downloading" || status == "seeding") {
+					tr.removeClass("invisible");
+				} else {
+					tr.addClass("invisible");
+				}
+				return;
+			case 'inactive':
+				if(status != "downloading" && status != "seeding") {
+					tr.removeClass("invisible");
+				} else {
+					tr.addClass("invisible");
+				}
+				return;
+		}
+	},
+
+	insertRow: function(id, row, status){
 		var tr = this.rows[id];
 		if($defined(tr))
 		  return;
 		//this.removeRow(id);
 		var tr = new Element('tr');
 		this.rows[id] = tr;
+		// Apply filter
+		this.applyFilterOnRow(tr, status);
 		for(var i=0; i<row.length; i++)
 		{
 			var td = new Element('td');
@@ -181,10 +224,12 @@ var dynamicTable = new Class	({
 		}
 	},
 
-	updateRow: function(id, row){
+	updateRow: function(id, row, status){
 		var tr = this.rows[id];
 		if($defined(tr))
 		{
+			// Apply filter
+			this.applyFilterOnRow(tr, status);
 			var tds = tr.getElements('td');
 			for(var i=0; i<row.length; i++) {
         	                if(i==this.progressIndex) {

src/webui/scripts/mocha-init.js

@@ -63,11 +63,7 @@ initializeWindows = function(){
 
 	addClickEvent('delete', function(e){
 		new Event(e).stop();
-		if($("Tab1").hasClass('active')) {
-			var h = myTable.selectedIds();
-		} else {
-			var h = myTableUP.selectedIds();
-		}
+		var h = myTable.selectedIds();
 		if(h.length && confirm('Are you sure you want to delete the selected item in download list?')) {
 			h.each(function(item, index){
 				new Request({url: '/command/delete', method: 'post', data: {hash: item}}).send();
@@ -79,11 +75,7 @@ initializeWindows = function(){
 
 	addClickEvent('deletePerm', function(e){
                 new Event(e).stop();
-                if($("Tab1").hasClass('active')) {
-                        var h = myTable.selectedIds();
-                } else {
-                        var h = myTableUP.selectedIds();
-                }
+                var h = myTable.selectedIds();
                 if(h.length && confirm('Are you sure you want to delete from hard drive the selected item in download list?')) {
                         h.each(function(item, index){
                                 new Request({url: '/command/deletePerm', method: 'post', data: {hash: item}}).send();
@@ -94,13 +86,7 @@ initializeWindows = function(){
 	['pause','resume','decreasePrio','increasePrio','recheck'].each(function(item) {
 		addClickEvent(item, function(e){
 			new Event(e).stop();
-			if($("Tab1").hasClass('active')) {
-			  var h = myTable.selectedIds();
-			} else {
-				if(item=='decreasePrio' || item=='increasePrio')
-					return;
-				var h = myTableUP.selectedIds();
-			}
+			var h = myTable.selectedIds();
 			if(h.length){
 				h.each(function(hash, index){
 				  new Request({url: '/command/'+item, method: 'post', data: {hash: hash}}).send();