Ticket #2774: webuiStats.patch

web/index.html

@@ -316 +316 @@
                                 </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 +396 @@
                                 <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">

web/javascript/transmission.js

@@ -46 +46 @@
                 $('#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 +121 @@
                 var tr = this;
                 var async = false;
                 this.loadDaemonPrefs( async );
+                this.loadDaemonStats( async );
                 this.initializeAllTorrents();
 
                 this.togglePeriodicRefresh( true );
@@ -135 +137 @@
                 }, 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 +659 @@
                 tr.hidePrefsDialog( );
         },
 
+        closeStatsClicked: function(event) {
+                this.hideStatsDialog( );
+        },
+
         removeClicked: function( event ) {      
                 var tr = this;
                 if( tr.isButtonEnabled( event ) ) {
@@ -817 +831 @@
                 }
         },
 
+        /*
+         * 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 +955 @@
                 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 +1035 @@
                                         $('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

web/javascript/transmission.remote.js

@@ -108 +108 @@
                 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',

web/stylesheets/common.css

@@ -894 +894 @@
         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 +1091 @@
         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;