From c6b31a6f70a06e8c384cf89d6f8c3e3940ff67d3 Mon Sep 17 00:00:00 2001
From: Jordan Lee <jordan@transmissionbt.com>
Date: Wed, 14 Sep 2011 16:29:24 +0000
Subject: [PATCH] (trunk web) #4481 "preference window no longer provides
 version info" -- add server version information to the server statistics
 dialog.

---
 web/index.html                 |  65 +++++-------------
 web/javascript/transmission.js | 120 ++++++++++++++++++---------------
 web/stylesheets/common.css     |  64 ------------------
 web/stylesheets/mobile.css     |   2 +-
 4 files changed, 81 insertions(+), 170 deletions(-)

diff --git a/web/index.html b/web/index.html
index 0f6e9df68..fe9d13500 100755
--- a/web/index.html
+++ b/web/index.html
@@ -331,56 +331,21 @@
 			</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">Running Time:</div>
-							<div id="stats_session_duration"></div>
-						</div>
-					</div>
-					<div class="stats_group">
-						<label class="category">Total:</label>
-						<div class="stats_row">
-							<div class="item">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">Running Time:</div>
-							<div id="stats_total_duration"></div>
-						</div>
-					</div>
-				</div>
-				<a href="#close" id="stats_close_button">Close</a>
+		<div id="stats-dialog" style="display:none;">
+			<div class="prefs-section">
+				<div class="title">Current Session</div>
+				<div class="row"><div class="key">Uploaded:</div><div class="value" id='stats-session-uploaded'>&nbsp;</div></div>
+				<div class="row"><div class="key">Downloaded:</div><div class="value" id='stats-session-downloaded'>&nbsp;</div></div>
+				<div class="row"><div class="key">Ratio:</div><div class="value" id='stats-session-ratio'>&nbsp;</div></div>
+				<div class="row"><div class="key">Running Time:</div><div class="value" id='stats-session-duration'>&nbsp;</div></div>
+			</div>
+			<div class="prefs-section">
+				<div class="title">Total</div>
+				<div class="row"><div class="key">Started:</div><div class="value" id='stats-total-count'>&nbsp;</div></div>
+				<div class="row"><div class="key">Uploaded:</div><div class="value" id='stats-total-uploaded'>&nbsp;</div></div>
+				<div class="row"><div class="key">Downloaded:</div><div class="value" id='stats-total-downloaded'>&nbsp;</div></div>
+				<div class="row"><div class="key">Ratio:</div><div class="value" id='stats-total-ratio'>&nbsp;</div></div>
+				<div class="row"><div class="key">Running Time:</div><div class="value" id='stats-total-duration'>&nbsp;</div></div>
 			</div>
 		</div>
 
diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js
index a1032a264..ebbc704f2 100644
--- a/web/javascript/transmission.js
+++ b/web/javascript/transmission.js
@@ -46,7 +46,6 @@ Transmission.prototype =
 		$('#pause_selected_link').click($.proxy(this.stopSelectedClicked,this));
 		$('#resume_selected_link').click($.proxy(this.startSelectedClicked,this));
 		$('#remove_link').click($.proxy(this.removeClicked,this));
-		$('#stats_close_button').click($.proxy(this.hideStatsDialog,this));
 		$('#open_link').click($.proxy(this.openTorrentClicked,this));
 
 		$('#prefs-button').click($.proxy(this.showPrefsDialog,this));
@@ -118,12 +117,6 @@ Transmission.prototype =
 		}, this, async);
 	},
 
-	loadDaemonStats: function(async) {
-		this.remote.loadDaemonStats(function(data) {
-			this.updateStats(data['arguments']);
-		}, this, async);
-	},
-
 	preloadImages: function() {
 		if (isMobileDevice) {
 			this.loadImages(
@@ -589,17 +582,6 @@ Transmission.prototype =
 		}
 	},
 
-	// turn the periodic ajax stats refresh on & off
-	togglePeriodicStatsRefresh: function(enabled) {
-		clearInterval(this.statsInterval);
-		delete this.statsInterval;
-		if (enabled) {
-			var callback = $.proxy(this.loadDaemonStats,this),
-                            msec = 5000;
-			this.statsInterval = setInterval(callback, msec);
-		}
-	},
-
 	toggleTurtleClicked: function()
 	{
 		var o = {};
@@ -618,41 +600,6 @@ Transmission.prototype =
 		this.prefsDialog.show();
 	},
 
-	showStatsDialog: function() {
-		this.loadDaemonStats();
-		$('#stats_container').fadeIn();
-		this.hideMobileAddressbar();
-		this.togglePeriodicStatsRefresh(true);
-	},
-
-	hideStatsDialog: function() {
-		$('#stats_container').fadeOut();
-		this.hideMobileAddressbar();
-		this.togglePeriodicStatsRefresh(false);
-	},
-
-	// Process new session stats from the server
-	updateStats: function(stats)
-	{
-		var s, ratio,
-		    fmt = Transmission.fmt;
-
-		s = stats["current-stats"];
-		ratio = Math.ratio(s.uploadedBytes,s.downloadedBytes);
-		$('#stats_session_uploaded').html(fmt.size(s.uploadedBytes));
-		$('#stats_session_downloaded').html(fmt.size(s.downloadedBytes));
-		$('#stats_session_ratio').html(fmt.ratioString(ratio));
-		$('#stats_session_duration').html(fmt.timeInterval(s.secondsActive));
-
-		s = stats["cumulative-stats"];
-		ratio = Math.ratio(s.uploadedBytes,s.downloadedBytes);
-		$('#stats_total_count').html(s.sessionCount + " times");
-		$('#stats_total_uploaded').html(fmt.size(s.uploadedBytes));
-		$('#stats_total_downloaded').html(fmt.size(s.downloadedBytes));
-		$('#stats_total_ratio').html(fmt.ratioString(ratio));
-		$('#stats_total_duration').html(fmt.timeInterval(s.secondsActive));
-	},
-
 	setFilterText: function(search) {
 		this.filterText = search ? search.trim() : null;
 		this.refilter(true);
@@ -674,6 +621,8 @@ Transmission.prototype =
                     fmt = Transmission.fmt,
                     menu = $('#settings_menu');
 
+		this.serverVersion = o.version;
+
 		this.prefsDialog.set(o);
 
 		if (RPC._TurtleState in o)
@@ -755,8 +704,6 @@ Transmission.prototype =
 				break;
 
 			case 'statistics':
-				$('div#stats_container div#stats_error').hide();
-				$('div#stats_container h2.dialog_heading').show();
 				this.showStatsDialog();
 				break;
 
@@ -1661,5 +1608,68 @@ Transmission.prototype =
 		this.torrentRenderer = compact ? new TorrentRendererCompact()
 		                               : new TorrentRendererFull();
 		this.refilter(true);
+	},
+
+	/***
+	****
+	****  Statistics
+	****
+	***/
+
+	// turn the periodic ajax stats refresh on & off
+	togglePeriodicStatsRefresh: function(enabled) {
+		clearInterval(this.statsInterval);
+		delete this.statsInterval;
+		if (enabled) {
+			var callback = $.proxy(this.loadDaemonStats,this),
+                            msec = 5000;
+			this.statsInterval = setInterval(callback, msec);
+		}
+	},
+
+	loadDaemonStats: function(async) {
+		this.remote.loadDaemonStats(function(data) {
+			this.updateStats(data['arguments']);
+		}, this, async);
+	},
+
+	// Process new session stats from the server
+	updateStats: function(stats)
+	{
+		var s, ratio,
+		    fmt = Transmission.fmt;
+
+		s = stats["current-stats"];
+		ratio = Math.ratio(s.uploadedBytes,s.downloadedBytes);
+		$('#stats-session-uploaded').html(fmt.size(s.uploadedBytes));
+		$('#stats-session-downloaded').html(fmt.size(s.downloadedBytes));
+		$('#stats-session-ratio').html(fmt.ratioString(ratio));
+		$('#stats-session-duration').html(fmt.timeInterval(s.secondsActive));
+
+		s = stats["cumulative-stats"];
+		ratio = Math.ratio(s.uploadedBytes,s.downloadedBytes);
+		$('#stats-total-count').html(s.sessionCount + " times");
+		$('#stats-total-uploaded').html(fmt.size(s.uploadedBytes));
+		$('#stats-total-downloaded').html(fmt.size(s.downloadedBytes));
+		$('#stats-total-ratio').html(fmt.ratioString(ratio));
+		$('#stats-total-duration').html(fmt.timeInterval(s.secondsActive));
+	},
+
+
+	showStatsDialog: function() {
+		this.loadDaemonStats();
+		this.hideMobileAddressbar();
+		this.togglePeriodicStatsRefresh(true);
+		$('#stats-dialog').dialog({
+			'close': $.proxy(this.onStatsDialogClosed,this),
+			'show': 'fade',
+			'hide': 'fade',
+			'title': 'Transmission ' + this.serverVersion
+		});
+	},
+
+	onStatsDialogClosed: function() {
+		this.hideMobileAddressbar();
+		this.togglePeriodicStatsRefresh(false);
 	}
 };
diff --git a/web/stylesheets/common.css b/web/stylesheets/common.css
index 4bc98c923..da3a3194d 100644
--- a/web/stylesheets/common.css
+++ b/web/stylesheets/common.css
@@ -1013,16 +1013,6 @@ div.dialog_container div.dialog_window {
 	}
 }
 
-div#prefs_container div.dialog_window {
-	width: 410px;
-	padding: 0 15px;
-}
-
-div#stats_container div.dialog_window {
-	width: 255px;
-	padding: 0 15px;
-}
-
 div.dialog_container div.dialog_window img {
 	margin: 20px 20px 0 20px;
 	float: left;
@@ -1111,60 +1101,6 @@ iframe#torrent_upload_frame {
 	margin: 0;
 }
 
-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;
-}
-
 /****
 *****
 *****  POPUP MENU
diff --git a/web/stylesheets/mobile.css b/web/stylesheets/mobile.css
index 36a16e1b7..52e68d83c 100644
--- a/web/stylesheets/mobile.css
+++ b/web/stylesheets/mobile.css
@@ -42,7 +42,7 @@ body.landscape div#dialog_container, body.landscape div#torrent_inspector {
 }
 
 body.inspector_showing #torrent_filter_bar, body.inspector_showing #torrent_container,
-body.dialog_showing #torrent_filter_bar, body.dialog_showing #torrent_container, body.dialog_showing #torrent_inspector, body.dialog_showing #prefs_container,
+body.dialog_showing #torrent_filter_bar, body.dialog_showing #torrent_container, body.dialog_showing #torrent_inspector,
 body.prefs_showing #torrent_inspector, body.prefs_showing #torrent_filter_bar, body.prefs_showing #torrent_container,
 body.open_showing #torrent_filter_bar, body.open_showing #torrent_container {
 	display: none !important;
-- 
2.40.0