Changeset 10354


Ignore:
Timestamp:
Mar 11, 2010, 7:28:57 PM (12 years ago)
Author:
charles
Message:

(1.9x web) #2774 "Support stats display feature in the web client" -- implemented for 1.92

Location:
branches/1.9x/web
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • branches/1.9x/web/index.html

    r10050 r10354  
    317317                        </div>
    318318                </div>
     319
     320                <div class="dialog_container" id="stats_container" style="display:none;">
     321                        <div class="dialog_top_bar"></div>
     322                        <div class="dialog_window">
     323                                <h2 class="dialog_heading">Statistics</h2>
     324                                <div id="stats_error"></div>
     325                                <div id="stats_info_container" class="stats_info_container">
     326                                        <div class="stats_group">
     327                                                <label class="category">Current Session:</label>
     328                                                <div class="stats_row">
     329                                                        <div class="item">Uploaded:</div>
     330                                                        <div id="stats_session_uploaded"></div>
     331                                                </div>
     332                                                <div class="stats_row">
     333                                                        <div class="item">Downloaded:</div>
     334                                                        <div id="stats_session_downloaded"></div>
     335                                                </div>
     336                                                <div class="stats_row">
     337                                                        <div class="item">Ratio:</div>
     338                                                        <div id="stats_session_ratio"></div>
     339                                                </div>
     340                                                <div class="stats_row">
     341                                                        <div class="item">Duration:</div>
     342                                                        <div id="stats_session_duration"></div>
     343                                                </div>
     344                                        </div>
     345                                        <div class="stats_group">
     346                                                <label class="category">Total:</label>
     347                                                <div class="stats_row">
     348                                                        <div class="item2">Started </div>
     349                                                        <div id="stats_total_count"></div>
     350                                                </div>
     351                                                <div class="stats_row">
     352                                                        <div class="item">Uploaded:</div>
     353                                                        <div id="stats_total_uploaded"></div>
     354                                                </div>
     355                                                <div class="stats_row">
     356                                                        <div class="item">Downloaded:</div>
     357                                                        <div id="stats_total_downloaded"></div>
     358                                                </div>
     359                                                <div class="stats_row">
     360                                                        <div class="item">Ratio:</div>
     361                                                        <div id="stats_total_ratio"></div>
     362                                                </div>
     363                                                <div class="stats_row">
     364                                                        <div class="item">Duration:</div>
     365                                                        <div id="stats_total_duration"></div>
     366                                                </div>
     367                                        </div>
     368                                </div>
     369                                <a href="#close" id="stats_close_button">Close</a>
     370                        </div>
     371                </div>
    319372               
    320373                <div class="dialog_container" id="upload_container" style="display:none;">
     
    344397                                        <ul id="footer_super_menu">
    345398                                                <li id="preferences">Preferences</li>
     399                                                <li id="statistics">Statistics</li>
    346400                                                <li class="separator"></li>
    347401                                                <li>Total Download Rate
  • branches/1.9x/web/javascript/transmission.js

    r10299 r10354  
    4747                $('#prefs_save_button').bind('click', function(e) { tr.savePrefsClicked(e); return false;});
    4848                $('#prefs_cancel_button').bind('click', function(e){ tr.cancelPrefsClicked(e); return false; });
     49                $('#stats_close_button').bind('click', function(e){ tr.closeStatsClicked(e); return false; });
    4950                $('.inspector_tab').bind('click', function(e){ tr.inspectorTabClicked(e, this); });
    5051                $('.file_wanted_control').live('click', function(e){ tr.fileWantedClicked(e, this); });
     
    121122                var async = false;
    122123                this.loadDaemonPrefs( async );
     124                this.loadDaemonStats( async );
    123125                this.initializeAllTorrents();
    124126
     
    133135                        Prefs.getClutchPrefs( o );
    134136                        tr.updatePrefs( o );
     137                }, async );
     138        },
     139
     140        loadDaemonStats: function( async ){
     141                var tr = this;
     142                this.remote.loadDaemonStats( function(data){
     143                        var o = data.arguments;
     144                        tr.updateStats( o );
    135145                }, async );
    136146        },
     
    650660        },
    651661
     662        closeStatsClicked: function(event) {
     663                this.hideStatsDialog( );
     664        },
     665
    652666        removeClicked: function( event ) {     
    653667                var tr = this;
     
    815829                        clearInterval(this._periodic_session_refresh);
    816830                        this._periodic_session_refresh = null;
     831                }
     832        },
     833
     834        /*
     835         * Turn the periodic ajax stats refresh on & off
     836         */
     837        togglePeriodicStatsRefresh: function(state) {
     838                var tr = this;
     839                if (state && this._periodic_stats_refresh == null) {
     840                        // sanity check
     841                        if( !this[Prefs._SessionRefreshRate] )
     842                             this[Prefs._SessionRefreshRate] = 5;
     843                        remote = this.remote;
     844                        this._periodic_stats_refresh = setInterval(
     845                                function(){ tr.loadDaemonStats(); }, this[Prefs._SessionRefreshRate] * 1000
     846                        );
     847                } else {
     848                        clearInterval(this._periodic_stats_refresh);
     849                        this._periodic_stats_refresh = null;
    817850                }
    818851        },
     
    923956        },
    924957
     958        showStatsDialog: function( ) {
     959                this.loadDaemonStats();
     960                $('body').addClass('stats_showing');
     961                $('#stats_container').show();
     962                this.hideiPhoneAddressbar();
     963                if( Safari3 )
     964                        setTimeout("$('div#stats_container div.dialog_window').css('top', '0px');",10);
     965                this.updateButtonStates( );
     966                this.togglePeriodicStatsRefresh(true);
     967        },
     968
     969        hideStatsDialog: function( ){
     970                $('body.stats_showing').removeClass('stats_showing');
     971                if (iPhone) {
     972                        this.hideiPhoneAddressbar();
     973                        $('#stats_container').hide();
     974                } else if (Safari3) {
     975                        $('div#stats_container div.dialog_window').css('top', '-425px');
     976                        setTimeout("$('#stats_container').hide();",500);
     977                } else {
     978                        $('#stats_container').hide();
     979                }
     980                this.updateButtonStates( );
     981                this.togglePeriodicStatsRefresh(false);
     982        },
     983
     984        /*
     985         * Process got some new session stats from the server
     986         */
     987        updateStats: function( stats )
     988        {
     989                // can't think of a reason to remember this
     990                //this._stats = stats;
     991
     992                var session = stats["current-stats"];
     993                var total = stats["cumulative-stats"];
     994
     995                setInnerHTML( $('#stats_session_uploaded')[0], Math.formatBytes(session["uploadedBytes"]) );
     996                setInnerHTML( $('#stats_session_downloaded')[0], Math.formatBytes(session["downloadedBytes"]) );
     997                setInnerHTML( $('#stats_session_ratio')[0], Math.ratio(session["uploadedBytes"],session["downloadedBytes"]));
     998                setInnerHTML( $('#stats_session_duration')[0], Math.formatSeconds(session["secondsActive"]) );
     999                setInnerHTML( $('#stats_total_count')[0], total["sessionCount"] + " times" );
     1000                setInnerHTML( $('#stats_total_uploaded')[0], Math.formatBytes(total["uploadedBytes"]) );
     1001                setInnerHTML( $('#stats_total_downloaded')[0], Math.formatBytes(total["downloadedBytes"]) );
     1002                setInnerHTML( $('#stats_total_ratio')[0], Math.ratio(total["uploadedBytes"],total["downloadedBytes"]));
     1003                setInnerHTML( $('#stats_total_duration')[0], Math.formatSeconds(total["secondsActive"]) );
     1004        },
     1005
    9251006        setSearch: function( search ) {
    9261007                this._current_search = search ? search.trim() : null;
     
    9541035                                        $('div#prefs_container h2.dialog_heading').show();
    9551036                                        tr.showPrefsDialog( );
     1037                                }
     1038                                else if ($element[0].id == 'statistics') {
     1039                                        $('div#stats_container div#stats_error').hide();
     1040                                        $('div#stats_container h2.dialog_heading').show();
     1041                                        tr.showStatsDialog( );
    9561042                                }
    9571043                                break;
  • branches/1.9x/web/javascript/transmission.remote.js

    r10114 r10354  
    109109        },
    110110
     111        loadDaemonStats: function( callback, async ) {
     112                var tr = this._controller;
     113                var o = { method: 'session-stats' };
     114                this.sendRequest( o, callback, async );
     115        },
     116
    111117        getInitialDataFor: function(torrent_ids, callback) {
    112118                var o = {
  • branches/1.9x/web/stylesheets/common.css

    r10061 r10354  
    892892div#prefs_container div.dialog_window {
    893893        width: 410px;
     894        padding: 0 15px;
     895}
     896
     897div#stats_container div.dialog_window {
     898        width: 230px;
    894899        padding: 0 15px;
    895900}
     
    10871092        border-bottom: 1px solid #efefef;
    10881093}
     1094div#stats_container h2.dialog_heading {
     1095        display: none;
     1096}
     1097div#stats_container div#stats_error {
     1098        display: none;
     1099        width: 395px;
     1100        margin: 6px auto 6px auto;
     1101        padding: 3px 0 3px 0;
     1102        border: 2px solid #cc3333;
     1103        color: #cc3333;
     1104        font-size: 1.2em;
     1105        vertical-align: middle;
     1106        text-align: center;
     1107        height: 20px;
     1108        line-height: 20px;
     1109        background-color: #FFEFEF;
     1110}
     1111.stats_info_container {
     1112        clear: both;
     1113        padding: 0px 7px 0px 7px;
     1114}
     1115.stats_group {
     1116        display: table;
     1117        margin: 5px 0px 0px 0px;
     1118        padding: 5px 0px 0px 0px;
     1119        width: 100%;
     1120}
     1121.stats_row {
     1122        display: table-row;
     1123}
     1124.stats_row > div {
     1125        padding-top: 4px;
     1126}
     1127div#stats_container label.category {
     1128        clear: both;
     1129        font-size: 1.2em;
     1130        margin: 5px 0px;
     1131}
     1132div#stats_container div.item {
     1133        font-size: 11px !important;
     1134        margin: 0 5px 0 20px;
     1135        float: left;
     1136        width: 100px;
     1137}
     1138div#stats_container div.item2 {
     1139        font-size: 11px !important;
     1140        margin: 0 5px 0 20px;
     1141        float: left;
     1142}
     1143div#stats_container a {
     1144        clear: left;
     1145        margin: 10px 5px 10px 7px;
     1146}
     1147
    10891148div.dialog_container div#prefs_tabs ul li.prefs_tab_disabled:hover,
    10901149div.dialog_container div#prefs_tabs ul li.prefs_tab_disabled:active {
Note: See TracChangeset for help on using the changeset viewer.