Changeset 10788

Timestamp:

Jun 17, 2010, 4:40:06 AM (12 years ago)

Author:

Longinus00

Message:

(web) #3285:Add peer list to inspector

Location:

trunk/web

Files:

• images/buttons/info_peers.png (added)
• images/graphics/lock_icon.png (added)
• index.html (modified) (2 diffs)
• javascript/torrent.js (modified) (2 diffs)
• javascript/transmission.js (modified) (5 diffs)
• stylesheets/common.css (modified) (4 diffs)

trunk/web/index.html

@@ -70 +70 @@
                                 <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>
@@ -179 +180 @@
                                 </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">

trunk/web/javascript/torrent.js

@@ -40 +40 @@
 
 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' ]
@@ -384 +384 @@
                 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;

trunk/web/javascript/transmission.js

@@ -78 +78 @@
                 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];
@@ -702 +703 @@
         
                 this.updateVisibleFileLists();
+                this.updatePeersLists();
                 this.updateTrackersLists();
         },
@@ -1192 +1194 @@
                         setInnerHTML( tab.error, na );
                         this.updateVisibleFileLists();
+                        this.updatePeersLists();
                         this.updateTrackersLists();
                         $("#torrent_inspector_size, .inspector_row > div:contains('N/A')").css('color', '#666');
@@ -1268 +1271 @@
                 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');
@@ -1292 +1296 @@
                         }
                 }
+        },
+
+        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);
         },
 

trunk/web/stylesheets/common.css

@@ -526 +526 @@
         bottom: 22px;
         right: 0px;
-        width: 350px;
+        width: 500px;
         background-color: #ddd;
         border-left: 1px solid #888;
@@ -550 +550 @@
 }
 div#inspector_tabs {
-        width: 243px;
+        width: 303px;
         margin: 0 auto;
         padding-top: 10px;
@@ -586 +586 @@
 .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;
 }
 
@@ -626 +690 @@
         float: left;
         color: #666;
-        width: 200px;
+        width: 350px;
         display: table;
         margin-top: 1px;