(web) #3285:Add peer list to inspector

web/index.html

@@ -69,6 +69,7 @@
 			<div id="inspector_tabs">
 				<div class="inspector_tab selected" id="inspector_tab_info"><a href="#info"><img src="images/buttons/info_general.png" alt="Information"/></a></div>
 				<div class="inspector_tab" id="inspector_tab_activity"><a href="#activity"><img src="images/buttons/info_activity.png" alt="Activity"/></a></div>
+				<div class="inspector_tab" id="inspector_tab_peers"><a href="#peers"><img src="images/buttons/info_peers.png" alt="Peers"/></a></div>
 				<div class="inspector_tab" id="inspector_tab_trackers"><a href="#trackers"><img src="images/buttons/info_trackers.png" alt="Trackers"/></a></div>
 				<div class="inspector_tab" id="inspector_tab_files"><a href="#files"><img src="images/buttons/info_files.png" alt="Files"/></a></div>
 			</div>
@@ -179,6 +180,11 @@
 				</div><!-- class="inspector_group"-->
 			</div><!-- id="inspector_tab_activity_container" -->
 
+			<div style="display:none;" class="inspector_container" id="inspector_tab_peers_container">
+				<div id="inspector_peers_list">
+				</div>
+			</div><!-- id="inspector_tab_peers_container" -->
+
 			<div style="display:none;" class="inspector_container" id="inspector_tab_trackers_container">
 				<div id="inspector_trackers_list">
 				</div>

web/javascript/torrent.js

@@ -39,8 +39,8 @@ Torrent._MetaDataFields = [ 'addedDate', 'comment', 'creator', 'dateCreated',
 		'isPrivate', 'name', 'totalSize', 'pieceCount', 'pieceSize' ]
 
 Torrent._DynamicFields = [ 'downloadedEver', 'error', 'errorString', 'eta',
-    'haveUnchecked', 'haveValid', 'leftUntilDone', 'metadataPercentComplete', 'peersConnected',
-    'peersGettingFromUs', 'peersSendingToUs', 'rateDownload', 'rateUpload',
+    'haveUnchecked', 'haveValid', 'leftUntilDone', 'metadataPercentComplete', 'peers',
+    'peersConnected', 'peersGettingFromUs', 'peersSendingToUs', 'rateDownload', 'rateUpload',
     'recheckProgress', 'sizeWhenDone', 'status', 'trackerStats', 'desiredAvailable',
     'uploadedEver', 'uploadRatio', 'seedRatioLimit', 'seedRatioMode', 'downloadDir', 'isFinished' ]
 
@@ -383,6 +383,7 @@ Torrent.prototype =
 		this._seed_ratio_mode         = data.seedRatioMode;
 		this._download_speed          = data.rateDownload;
 		this._upload_speed            = data.rateUpload;
+		this._peers                   = data.peers;
 		this._peers_connected         = data.peersConnected;
 		this._peers_getting_from_us   = data.peersGettingFromUs;
 		this._peers_sending_to_us     = data.peersSendingToUs;

web/javascript/transmission.js

@@ -77,6 +77,7 @@ Transmission.prototype =
 
 		this._torrent_list             = $('#torrent_list')[0];
 		this._inspector_file_list      = $('#inspector_file_list')[0];
+		this._inspector_peers_list     = $('#inspector_peers_list')[0];
 		this._inspector_trackers_list  = $('#inspector_trackers_list')[0];
 		this._inspector_tab_files      = $('#inspector_tab_files')[0];
 		this._toolbar_buttons          = $('#torrent_global_menu ul li');
@@ -701,6 +702,7 @@ Transmission.prototype =
 		this.hideiPhoneAddressbar();
 	
 		this.updateVisibleFileLists();
+		this.updatePeersLists();
 		this.updateTrackersLists();
 	},
 
@@ -1191,6 +1193,7 @@ Transmission.prototype =
 			setInnerHTML( tab.download_dir, na );
 			setInnerHTML( tab.error, na );
 			this.updateVisibleFileLists();
+			this.updatePeersLists();
 			this.updateTrackersLists();
 			$("#torrent_inspector_size, .inspector_row > div:contains('N/A')").css('color', '#666');
 			return;
@@ -1267,7 +1270,8 @@ Transmission.prototype =
 		setInnerHTML( tab.creator, creator );
 		setInnerHTML( tab.download_dir, download_dir == na ? download_dir : download_dir.replace(/([\/_\.])/g, "$1​") );
 		setInnerHTML( tab.error, error );
-		
+
+		this.updatePeersLists();
 		this.updateTrackersLists();
 		$(".inspector_row > div:contains('N/A')").css('color', '#666');
 		this.updateVisibleFileLists();
@@ -1293,6 +1297,38 @@ Transmission.prototype =
 		}
 	},
 
+	updatePeersLists: function() {
+		var tr = this;
+		var html = '';
+		var torrents = this.getSelectedTorrents( );
+		if( $(this._inspector_peers_list).is(':visible') && torrents.length == 1 ) {
+			html += '<div class="inspector_group"><table class="peer_list">';
+			html += '<tr class="inspector_peer_entry even">';
+			html += '<th class="encryptedCol"></th>';
+			html += '<th class="upCol">Up</th>';
+			html += '<th class="downCol">Down</th>';
+			html += '<th class="percentCol">%</th>';
+			html += '<th class="statusCol">Status</th>';
+			html += '<th class="addressCol">Address</th>';
+			html += '<th class="clientCol">Client</th>';
+			html += '</tr>';
+			for( var i=0, peer; peer=torrents[0]._peers[i]; ++i ) {
+				var parity = ((i+1) % 2 == 0 ? 'even' : 'odd');
+				html += '<tr class="inspector_peer_entry ' + parity + '">';
+				html += '<td>' + (peer.isEncrypted ? '<img src="images/graphics/lock_icon.png" alt="Encrypted"/>' : '') + '</td>';
+				html += '<td>' + (peer.rateToPeer ? Math.formatBytes(peer.rateToPeer) + '/s' : '') + '</td>';
+				html += '<td>' + (peer.rateToClient ? Math.formatBytes(peer.rateToClient) + '/s' : '') + '</td>';
+				html += '<td class="percentCol">' + Math.floor(peer.progress*100) + '%' + '</td>';
+				html += '<td>' + peer.flagStr + '</td>';
+				html += '<td>' + peer.address + '</td>';
+				html += '<td>' + peer.clientName + '</td>';
+				html += '</tr>';
+			}
+			html += '</table></div>';
+		}
+		setInnerHTML(this._inspector_peers_list, html);
+	},
+
 	updateTrackersLists: function() {
 		// By building up the HTML as as string, then have the browser
 		// turn this into a DOM tree, this is a fast operation.

web/stylesheets/common.css

@@ -525,7 +525,7 @@ div#torrent_inspector {
 	top: 97px;
 	bottom: 22px;
 	right: 0px;
-	width: 350px;
+	width: 500px;
 	background-color: #ddd;
 	border-left: 1px solid #888;
 	z-index: 2;
@@ -549,7 +549,7 @@ div#inspector_header {
 	padding-right: 10px;
 }
 div#inspector_tabs {
-	width: 243px;
+	width: 303px;
 	margin: 0 auto;
 	padding-top: 10px;
 }
@@ -585,12 +585,76 @@ div#inspector_tabs {
 }
 .inspector_row > .inspector_label {
 	display: table-cell;
-	width: 100px; /* this + the next 230 == inspector_container_with */
+	width: 100px; /* this + the next 380 == inspector_container_with */
 }
 .inspector_row > div {
 	display: table-cell;
 	padding-top: 10px;
-	width: 230px; /* inspector_container_width==330 - inspector_label_width==100 */
+	width: 380px; /* inspector_container_width==480 - inspector_label_width==100 */
+}
+
+/* Peers Inspector Tab */
+#inspector_peers_list {
+	padding: 0 0 0 0;
+	margin: 0 0 0 0;
+	text-align: left;
+	cursor: default;
+	overflow: hidden;
+}
+
+#inspector_peers_list > div.inspector_group {
+	padding-bottom: 0;
+	margin-bottom: 0;
+}
+
+table.peer_list {
+	width: 100%;
+	border-collapse: collapse;
+	text-align: left;
+	cursor: default;
+	clear: both;
+}
+
+.peer_list .encryptedCol {
+	width: 16px;
+}
+
+.peer_list .upCol {
+	width: 70px;
+}
+
+.peer_list .downCol {
+	width: 70px;
+}
+
+.peer_list .percentCol {
+	width: 30px;
+	padding-right: 5px;
+}
+
+.peer_list td.percentCol {
+	text-align: right;
+}
+
+.peer_list .statusCol {
+	width: 40px;
+	padding-right: 5px;
+}
+
+.peer_list .addressCol {
+	width: 90px;
+}
+
+.peer_list .clientCol {
+	text-overflow: ellipsis;
+}
+
+tr.inspector_peer_entry {
+
+}
+
+tr.inspector_peer_entry.odd {
+	background-color: #EEEEEE;
 }
 
 /* Trackers Inspector Tab */
@@ -625,7 +689,7 @@ ul.tier_list {
 .tier_list .tracker_activity{
 	float: left;
 	color: #666;
-	width: 200px;
+	width: 350px;
 	display: table;
 	margin-top: 1px;
 }