From aff99f1fc65823dd0f58ccc434adee77704427ec Mon Sep 17 00:00:00 2001
From: Hamza Zia <ziahamza2007@gmail.com>
Date: Thu, 7 Jun 2012 16:10:19 +0800
Subject: [PATCH] major downloads refactoring and efficient updating of dom
 elements

---
 index.html   | 57 +++++++++++++++++--------------
 js/script.js | 96 ++++++++++++++++++++++++++++++----------------------
 2 files changed, 87 insertions(+), 66 deletions(-)

diff --git a/index.html b/index.html
index 082e510..c9baaad 100755
--- a/index.html
+++ b/index.html
@@ -23,31 +23,41 @@
   <script src="js/libs/mustache.js"></script>
   <script src="js/aria2_settings.js"></script>
 
+  <style>
+	.button_set {
+		float: right;
+		margin-bottom: 5px;
+	}
+  </style>
   <!--{{{ active downloads template start -->
   <script type="text/mustache" id="download_active_template">
 	  <div class="row download_active_item" data-gid="{{gid}}">
-		<div class="span4" style="overflow: hidden;">
-			<h3>{{name}}</h3>
+		<div class="span3" style="overflow: hidden;">
+			<b style="font-size: 14px;" class="name">{{name}}</b>
 		</div>
 		<div class="span6">
-			<b style='display:inline; float:right;'>
-				<span class="label label-success">Remaining: {{remaining}}</span> |
-				<span class="label label-success">Progress: {{percentage}}%</span> |
-				<span class="label label-success">Speed: {{down}}</span> |
-				<span class="label label-success">Time left: {{eta}}</span>
-			</b>
+			<div class="pull-right">
+				<span class="label label-success">Remaining: <span class="remaining">{{remaining}}</span></span> |
+				<span class="label label-success">Progress: <span class="percentage">{{percentage}}</span>%</span> |
+				<span class="label label-success">Speed: <span class="down">{{down}}</span></span> |
+				<span class="label label-success">Time left: <span class="eta">{{eta}}</span></span>
+			</div>
 		</div>
-		<div class="span2">
-			<div style="float:right">
+		<div class="span3">
+			<div class="button_set">
 				<button class="btn btn-mini download_pause"><i class="icon-pause"></i>Pause</button>
+				<button class="btn btn-mini btn-info" data-toggle="collapse" data-target="[data-gid={{gid}}] .more_info">More Info</button>
 				<button class="btn btn-mini btn-danger download_remove"><i class="icon-remove"></i> Remove</button>
 			</div>
 		</div>
-		<br><br>
-		<div class="span12 progress progress-striped">
+		<br>
+		<div class="span12 progress progress-striped active">
 			<div class="bar" style="width: {{percentage}}%;"></div>
 		</div>
+		<br>
+		<div class="span12 more_info collapse">Hello!!!</div>
 	</div>
+
   </script>
   <!-- active downloads template end }}}-->
 
@@ -55,23 +65,23 @@
   <script type="text/mustache" id="download_waiting_template">
 	  <div class="row download_waiting_item" data-gid="{{gid}}">
 		<div class="span4" style="overflow: hidden;">
-			<h3>{{name}}</h3>
+			<b style="font-size: 14px;">{{name}}</b>
 		</div>
 		<div class="span6">
 			<span class="badge badge-warning">Status: {{status}}</span>
-			<b style='display:inline; float:right;'>
+			<div class="pull-right">
 				<span class="label label-warning">Size: {{size}}</span> |
 				<span class="label label-warning">Remaining: {{remaining}}</span> |
 				<span class="label label-warning">Progress: {{percentage}}%</span>
-			</b>
+			</div>
 		</div>
 		<div class="span2">
-			<div style="float:right">
+			<div class="button_set">
 				<button class="btn btn-mini download_play"><i class="icon-play"></i> Play</button>
 				<button class="btn btn-mini btn-danger download_remove"><i class="icon-fire"></i> Purge</button>
 			</div>
 		</div>
-		<br><br>
+		<br>
 		<div class="span12 progress progress-striped">
 			<div class="bar" style="width: {{percentage}}%; background-color:#FBB450"></div>
 		</div>
@@ -83,23 +93,23 @@
   <script type="text/mustache" id="download_stopped_template">
 	  <div class="row download_stopped_item" data-gid="{{gid}}">
 		<div class="span4" style="overflow: hidden;">
-			<h3>{{name}}</h3>
+			<b style="font-size: 14px;">{{name}}</b>
 		</div>
 		<div class="span6">
 			<span class="badge badge-important">Status: {{status}}</span>
-			<b style='display:inline; float:right;'>
+			<div class="pull-right">
 				<span class="label label-important">Size: {{size}}</span> |
 				<span class="label label-important">Downloaded: {{downloaded}}</span> |
 				<span class="label label-important">Progress: {{percentage}}%</span>
-			</b>
+			</div>
 		</div>
 		<div class="span2">
-			<div style="float:right">
+			<div class="button_set">
 				<button class="btn btn-mini download_restart"><i class="icon-repeat"></i> Restart</button>
 				<button class="btn btn-mini btn-danger download_remove"><i class="icon-fire"></i> Purge</button>
 			</div>
 		</div>
-		<br><br>
+		<br>
 		<div class="span12 progress progress-striped">
 			<div class="bar" style="width: {{percentage}}%; background-color:#EE5F5B"></div>
 		</div>
@@ -198,13 +208,10 @@
 <div role="main" class="container">
 	<!-- Download items here -->
 
-	<h2>Current Downloads</h2>
 	<div id="active_downloads"></div>
 
-	<h2>Waiting Downloads</h2>
 	<div id="waiting_downloads"></div>
 
-	<h2>Stopped Downloads</h2>
 	<div id="stopped_downloads"></div>
 
 </div>
diff --git a/js/script.js b/js/script.js
index affbb78..6020cb7 100755
--- a/js/script.js
+++ b/js/script.js
@@ -288,10 +288,10 @@ var d_files = {
 };
 function changeLength(len, pref) {
 	len = parseInt(len);
-	if(len <= 1000) return len  + " " + pref;
-	else if(len <= 1000000) return (len/1000).toFixed(1) + " k" + pref;
-	else if(len <= 1000000000) return (len/1000000).toFixed(1) + " m" + pref;
-	else if(len <= 1000000000000) return (len/1000000000).toFixed(1) + " g" + pref;
+	if(len <= (1<<10)) return len  + " " + pref;
+	else if(len <= (1<<20)) return (len/(1<<10)).toFixed(1) + " K" + pref;
+	else if(len <= (1<<30)) return (len/(1<<20)).toFixed(1) + " M" + pref;
+	else return (len/(1<<30)).toFixed(1) + " G" + pref;
 }
 function changeTime(time) {
 	time = parseInt(time);
@@ -320,25 +320,57 @@ function getTemplateCtx(data) {
 		status: data.status,
 		percentage:percentage,
 		gid: data.gid,
-		size: changeLength(data.totalLength, "b"),
-		down: changeLength(data.downloadSpeed, "b/s"),
-		remaining: changeLength(data.totalLength - data.completedLength, "b"),
+		size: changeLength(data.totalLength, "B"),
+		down: changeLength(data.downloadSpeed, "B/s"),
+		remaining: changeLength(data.totalLength - data.completedLength, "B"),
 		eta: eta,
-		downloaded: changeLength(data.completedLength, "b")
+		downloaded: changeLength(data.completedLength, "B")
 	};
 }
-function updateActiveDownloads(data) {
-	var down_template = $('#download_active_template').text();
-	$('#active_downloads').html("");
-	if(!data || (data && data.length === 0)) {
-		$('#active_downloads').append('no active downloads yet!!!!');
+function updateDownloadTemplates(elem, ctx) {
+	elem = $(elem);
+	for(var i in ctx) {
+		elem.find('.' + i).text(ctx[i]);
 	}
+	elem.find('.bar').css('width', ctx.percentage + '%');
+}
+function deleteDownloadTemplates(top_elem, data) {
+	if(!data) {
+		$(top_elem).html("");
+	}
+	else {
+		var elems = $(top_elem).find('[data-gid]');
+		for(var i = 0; i < elems.length; i++) {
+			var elem = $(elems[i]);
+			var gid = elem.attr('data-gid').toString();
+			var found = false;
+			for(var j = 0; j < data.length; j++) {
+				if(gid === data[j].gid.toString())
+					found = true;
+			}
+			if(!found)
+				elem.remove();
+		}
+	}
+}
+function refreshDownloadTemplates(top_elem, data) {
+	var down_template = $('#download_' + top_elem + '_template').text();
+	deleteDownloadTemplates('#' + top_elem + '_downloads', data);
 	for(var i = 0; i < data.length; i++) {
 		var ctx = getTemplateCtx(data[i]);
-		var item = Mustache.render(down_template, ctx);
-		$('#active_downloads').append(item);
+		var elem = $('[data-gid=' + ctx.gid + ']');
+		if(elem.length) {
+			updateDownloadTemplates(elem, ctx);
+		} else {
+			var item = Mustache.render(down_template, ctx);
+			$('#' + top_elem + '_downloads').append(item);
+		}
 	}
-	$('.download_active_item .download_pause').click(function() {
+
+}
+function updateActiveDownloads(data) {
+	refreshDownloadTemplates('active', data);
+	$('.download_active_item .download_pause').unbind('click').click(function() {
 		var gid = $(this).parents('.download_active_item').attr('data-gid');
 		aria_syscall({
 			func: 'pause',
@@ -352,7 +384,7 @@ function updateActiveDownloads(data) {
 			}
 		});
 	});
-	$('.download_active_item .download_remove').click(function() {
+	$('.download_active_item .download_remove').unbind('click').click(function() {
 		var gid = $(this).parents('.download_active_item').attr('data-gid');
 		aria_syscall({
 			func: 'remove',
@@ -368,17 +400,8 @@ function updateActiveDownloads(data) {
 	});
 }
 function updateWaitingDownloads(data) {
-	var down_template = $('#download_waiting_template').text();
-	$('#waiting_downloads').html("");
-	if(!data || (data && data.length === 0)) {
-		$('#waiting_downloads').append('no waiting downloads yet!!!!');
-	}
-	for(var i = 0; i < data.length; i++) {
-		var ctx = getTemplateCtx(data[i]);
-		var item = Mustache.render(down_template, ctx);
-		$('#waiting_downloads').append(item);
-	}
-	$('.download_waiting_item .download_play').click(function() {
+	refreshDownloadTemplates('waiting', data);
+	$('.download_waiting_item .download_play').unbind('click').click(function() {
 		var gid = $(this).parents('.download_waiting_item').attr('data-gid');
 		aria_syscall({
 			func: 'unpause',
@@ -392,7 +415,7 @@ function updateWaitingDownloads(data) {
 			}
 		});
 	});
-	$('.download_waiting_item .download_remove').click(function() {
+	$('.download_waiting_item .download_remove').unbind('click').click(function() {
 		var gid = $(this).parents('.download_waiting_item').attr('data-gid');
 		aria_syscall({
 			func: 'remove',
@@ -409,17 +432,8 @@ function updateWaitingDownloads(data) {
 }
 
 function updateStoppedDownloads(data) {
-	var down_template = $('#download_stopped_template').text();
-	$('#stopped_downloads').html("");
-	if(!data || (data && data.length === 0)) {
-		$('#stopped_downloads').append('no stopped downloads yet!!!!');
-	}
-	for(var i = 0; i < data.length; i++) {
-		var ctx = getTemplateCtx(data[i]);
-		var item = Mustache.render(down_template, ctx);
-		$('#stopped_downloads').append(item);
-	}
-	$('.download_stopped_item .download_remove').click(function() {
+	refreshDownloadTemplates('stopped', data);
+	$('.download_stopped_item .download_remove').unbind('click').click(function() {
 		var gid = $(this).parents('.download_stopped_item').attr('data-gid');
 		aria_syscall({
 			func: 'removeDownloadResult',
@@ -433,7 +447,7 @@ function updateStoppedDownloads(data) {
 			}
 		});
 	});
-	$('.download_stopped_item .download_restart').click(function() {
+	$('.download_stopped_item .download_restart').unbind('click').click(function() {
 		var gid = $(this).parents('.download_stopped_item').attr('data-gid');
 		var files;
 		var uris = [];