(trunk web) #2774 "Support stats display feature in the web client" -- implemented...

diff --git a/web/index.html b/web/index.html
index 0f8e7c63700f83375280120bc046156485bd76c7..082e0d096479120aa35718e7c5b6e501cd4bf60b 100755 (executable)
--- a/web/index.html
+++ b/web/index.html
@@ -316,6 +316,59 @@
                                </form>
                        </div>
                </div>
+
+               <div class="dialog_container" id="stats_container" style="display:none;">
+                       <div class="dialog_top_bar"></div>
+                       <div class="dialog_window">
+                               <h2 class="dialog_heading">Statistics</h2>
+                               <div id="stats_error"></div>
+                               <div id="stats_info_container" class="stats_info_container">
+                                       <div class="stats_group">
+                                               <label class="category">Current Session:</label>
+                                               <div class="stats_row">
+                                                       <div class="item">Uploaded:</div>
+                                                       <div id="stats_session_uploaded"></div>
+                                               </div>
+                                               <div class="stats_row">
+                                                       <div class="item">Downloaded:</div>
+                                                       <div id="stats_session_downloaded"></div>
+                                               </div>
+                                               <div class="stats_row">
+                                                       <div class="item">Ratio:</div>
+                                                       <div id="stats_session_ratio"></div>
+                                               </div>
+                                               <div class="stats_row">
+                                                       <div class="item">Duration:</div>
+                                                       <div id="stats_session_duration"></div>
+                                               </div>
+                                       </div>
+                                       <div class="stats_group">
+                                               <label class="category">Total:</label>
+                                               <div class="stats_row">
+                                                       <div class="item2">Started </div>
+                                                       <div id="stats_total_count"></div>
+                                               </div>
+                                               <div class="stats_row">
+                                                       <div class="item">Uploaded:</div>
+                                                       <div id="stats_total_uploaded"></div>
+                                               </div>
+                                               <div class="stats_row">
+                                                       <div class="item">Downloaded:</div>
+                                                       <div id="stats_total_downloaded"></div>
+                                               </div>
+                                               <div class="stats_row">
+                                                       <div class="item">Ratio:</div>
+                                                       <div id="stats_total_ratio"></div>
+                                               </div>
+                                               <div class="stats_row">
+                                                       <div class="item">Duration:</div>
+                                                       <div id="stats_total_duration"></div>
+                                               </div>
+                                       </div>
+                               </div>
+                               <a href="#close" id="stats_close_button">Close</a>
+                       </div>
+               </div>
                
                <div class="dialog_container" id="upload_container" style="display:none;">
                        <div class="dialog_top_bar"></div>
@@ -343,6 +396,7 @@
                                <li id="button">&nbsp;
                                        <ul id="footer_super_menu">
                                                <li id="preferences">Preferences</li>
+                                               <li id="statistics">Statistics</li>
                                                <li class="separator"></li>
                                                <li>Total Download Rate
                                                        <ul id="footer_download_rate_menu">

diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js
index f01534da55ffa28a8af9f4340ed196b5a9ee249a..53b921a9832ef19b266b16ba4542e6292ea4e838 100644 (file)
--- a/web/javascript/transmission.js
+++ b/web/javascript/transmission.js
@@ -46,6 +46,7 @@ Transmission.prototype =
                $('#filter_paused_link').parent().bind('click', function(e){ tr.showPausedClicked(e); });
                $('#prefs_save_button').bind('click', function(e) { tr.savePrefsClicked(e); return false;});
                $('#prefs_cancel_button').bind('click', function(e){ tr.cancelPrefsClicked(e); return false; });
+               $('#stats_close_button').bind('click', function(e){ tr.closeStatsClicked(e); return false; });
                $('.inspector_tab').bind('click', function(e){ tr.inspectorTabClicked(e, this); });
                $('.file_wanted_control').live('click', function(e){ tr.fileWantedClicked(e, this); });
                $('.file_priority_control').live('click', function(e){ tr.filePriorityClicked(e, this); });
@@ -120,6 +121,7 @@ Transmission.prototype =
                var tr = this;
                var async = false;
                this.loadDaemonPrefs( async );
+               this.loadDaemonStats( async );
                this.initializeAllTorrents();
 
                this.togglePeriodicRefresh( true );
@@ -135,6 +137,14 @@ Transmission.prototype =
                }, async );
        },
 
+       loadDaemonStats: function( async ){
+               var tr = this;
+               this.remote.loadDaemonStats( function(data){
+                       var o = data.arguments;
+                       tr.updateStats( o );
+               }, async );
+       },
+
        preloadImages: function() {
                if (iPhone) {
                        this.loadImages(
@@ -649,6 +659,10 @@ Transmission.prototype =
                tr.hidePrefsDialog( );
        },
 
+       closeStatsClicked: function(event) {
+               this.hideStatsDialog( );
+       },
+
        removeClicked: function( event ) {      
                var tr = this;
                if( tr.isButtonEnabled( event ) ) {
@@ -817,6 +831,25 @@ Transmission.prototype =
                }
        },
 
+       /*
+        * Turn the periodic ajax stats refresh on & off
+        */
+       togglePeriodicStatsRefresh: function(state) {
+               var tr = this;
+               if (state && this._periodic_stats_refresh == null) {
+                       // sanity check
+                       if( !this[Prefs._SessionRefreshRate] )
+                            this[Prefs._SessionRefreshRate] = 5;
+                       remote = this.remote;
+                       this._periodic_stats_refresh = setInterval(
+                               function(){ tr.loadDaemonStats(); }, this[Prefs._SessionRefreshRate] * 1000
+                       );
+               } else {
+                       clearInterval(this._periodic_stats_refresh);
+                       this._periodic_stats_refresh = null;
+               }
+       },
+
        toggleTurtleClicked: function() {
                // Toggle the value
                this[Prefs._TurtleState] = !this[Prefs._TurtleState];
@@ -922,6 +955,54 @@ Transmission.prototype =
                this.updateTurtleButton();
        },
 
+       showStatsDialog: function( ) {
+               this.loadDaemonStats();
+               $('body').addClass('stats_showing');
+               $('#stats_container').show();
+               this.hideiPhoneAddressbar();
+               if( Safari3 )
+                       setTimeout("$('div#stats_container div.dialog_window').css('top', '0px');",10);
+               this.updateButtonStates( );
+               this.togglePeriodicStatsRefresh(true);
+       },
+
+       hideStatsDialog: function( ){
+               $('body.stats_showing').removeClass('stats_showing');
+               if (iPhone) {
+                       this.hideiPhoneAddressbar();
+                       $('#stats_container').hide();
+               } else if (Safari3) {
+                       $('div#stats_container div.dialog_window').css('top', '-425px');
+                       setTimeout("$('#stats_container').hide();",500);
+               } else {
+                       $('#stats_container').hide();
+               }
+               this.updateButtonStates( );
+               this.togglePeriodicStatsRefresh(false);
+       },
+
+       /*
+        * Process got some new session stats from the server
+        */
+       updateStats: function( stats )
+       {
+               // can't think of a reason to remember this
+               //this._stats = stats;
+
+               var session = stats["current-stats"];
+               var total = stats["cumulative-stats"];
+
+               setInnerHTML( $('#stats_session_uploaded')[0], Math.formatBytes(session["uploadedBytes"]) );
+               setInnerHTML( $('#stats_session_downloaded')[0], Math.formatBytes(session["downloadedBytes"]) );
+               setInnerHTML( $('#stats_session_ratio')[0], Math.ratio(session["uploadedBytes"],session["downloadedBytes"]));
+               setInnerHTML( $('#stats_session_duration')[0], Math.formatSeconds(session["secondsActive"]) );
+               setInnerHTML( $('#stats_total_count')[0], total["sessionCount"] + " times" );
+               setInnerHTML( $('#stats_total_uploaded')[0], Math.formatBytes(total["uploadedBytes"]) );
+               setInnerHTML( $('#stats_total_downloaded')[0], Math.formatBytes(total["downloadedBytes"]) );
+               setInnerHTML( $('#stats_total_ratio')[0], Math.ratio(total["uploadedBytes"],total["downloadedBytes"]));
+               setInnerHTML( $('#stats_total_duration')[0], Math.formatSeconds(total["secondsActive"]) );
+       },
+
        setSearch: function( search ) {
                this._current_search = search ? search.trim() : null;
                this.refilter( );
@@ -954,6 +1035,11 @@ Transmission.prototype =
                                        $('div#prefs_container h2.dialog_heading').show();
                                        tr.showPrefsDialog( );
                                }
+                               else if ($element[0].id == 'statistics') {
+                                       $('div#stats_container div#stats_error').hide();
+                                       $('div#stats_container h2.dialog_heading').show();
+                                       tr.showStatsDialog( );
+                               }
                                break;
                        
                        // Limit the download rate

diff --git a/web/javascript/transmission.remote.js b/web/javascript/transmission.remote.js
index 6ff1f5920021da42b8e65b386d25fd24909613d4..2fa1a35edd95eae0930a1ca736dedcc2055fdd2f 100644 (file)
--- a/web/javascript/transmission.remote.js
+++ b/web/javascript/transmission.remote.js
@@ -108,6 +108,12 @@ TransmissionRemote.prototype =
                this.sendRequest( o, callback, async );
        },
 
+       loadDaemonStats: function( callback, async ) {
+               var tr = this._controller;
+               var o = { method: 'session-stats' };
+               this.sendRequest( o, callback, async );
+       },
+
        getInitialDataFor: function(torrent_ids, callback) {
                var o = {
                        method: 'torrent-get',

diff --git a/web/stylesheets/common.css b/web/stylesheets/common.css
index 8ffacce49184d9c4d6724b7d48c989e2d24015bd..d2a130fd01a98234bcf758494e9e6f7986067a9c 100644 (file)
--- a/web/stylesheets/common.css
+++ b/web/stylesheets/common.css
@@ -894,6 +894,11 @@ div#prefs_container div.dialog_window {
        padding: 0 15px;
 }
 
+div#stats_container div.dialog_window {
+       width: 230px;
+       padding: 0 15px;
+}
+
 div.dialog_container div.dialog_window img {
        margin: 20px 20px 0 20px;
        float: left;
@@ -1086,6 +1091,60 @@ div#prefs_container div#prefs_tabs ul li {
        background: none;
        border-bottom: 1px solid #efefef;
 }
+div#stats_container h2.dialog_heading {
+       display: none;
+}
+div#stats_container div#stats_error {
+       display: none;
+       width: 395px;
+       margin: 6px auto 6px auto;
+       padding: 3px 0 3px 0;
+       border: 2px solid #cc3333;
+       color: #cc3333;
+       font-size: 1.2em;
+       vertical-align: middle;
+       text-align: center;
+       height: 20px;
+       line-height: 20px;
+       background-color: #FFEFEF;
+}
+.stats_info_container {
+       clear: both;
+       padding: 0px 7px 0px 7px;
+}
+.stats_group {
+       display: table;
+       margin: 5px 0px 0px 0px;
+       padding: 5px 0px 0px 0px;
+       width: 100%;
+}
+.stats_row {
+       display: table-row;
+}
+.stats_row > div {
+       padding-top: 4px;
+}
+div#stats_container label.category {
+       clear: both;
+       font-size: 1.2em;
+       margin: 5px 0px;
+}
+div#stats_container div.item {
+       font-size: 11px !important;
+       margin: 0 5px 0 20px;
+       float: left;
+       width: 100px;
+}
+div#stats_container div.item2 {
+       font-size: 11px !important;
+       margin: 0 5px 0 20px;
+       float: left;
+}
+div#stats_container a {
+       clear: left;
+       margin: 10px 5px 10px 7px;
+}
+
 div.dialog_container div#prefs_tabs ul li.prefs_tab_disabled:hover,
 div.dialog_container div#prefs_tabs ul li.prefs_tab_disabled:active {
        background: none;