From 5363c7d89b8b0280df1527578c5a2f6703f636b7 Mon Sep 17 00:00:00 2001
From: Charles Kerr <charles@transmissionbt.com>
Date: Thu, 11 Mar 2010 04:50:04 +0000
Subject: [PATCH] (trunk web) #2774 "Support stats display feature in the web
 client" -- implemented for 2.00

---
 web/index.html                        | 54 +++++++++++++++++
 web/javascript/transmission.js        | 86 +++++++++++++++++++++++++++
 web/javascript/transmission.remote.js |  6 ++
 web/stylesheets/common.css            | 59 ++++++++++++++++++
 4 files changed, 205 insertions(+)

diff --git a/web/index.html b/web/index.html
index 0f8e7c637..082e0d096 100755
--- 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 f01534da5..53b921a98 100644
--- 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 6ff1f5920..2fa1a35ed 100644
--- 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 8ffacce49..d2a130fd0 100644
--- 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;
-- 
2.40.0