chunk progress bar refined, peer info for torrents added

index.html

@@ -121,7 +121,7 @@
 			<b class="span2 label active_settings">Upload Length: <span class="tmp_uploadLength">{{uploadLength}}</span></b>
 			<b class="span2 label active_settings">Connections: <span class="tmp_connections">{{connections}}</span></b>
 			<div class="pull-right" style="margin-right: 5px;">
-				<button class="btn btn-mini download_settings"><i class="icon-cog"></i> Download Settings for {{sett_name}}</button>
+				<button class="btn btn-mini download_settings"><i class="icon-cog"></i> Download Settings for {{sett_name}}</button>{{#bittorrent}}<button class="btn btn-mini torrent_info"><i class="icon-list-alt"></i> Peers</button>{{/bittorrent}}
 			</div>
 			<div class="span11">
 				<div class="active_graph"></div>
@@ -285,6 +285,43 @@
   </script>
   <!-- global settings template end }}}-->
 
+  <!-- {{{ torrent info template -->
+  <script type="text/mustache" id="torrent_info_template">
+	  <div class="modal-header">
+		<button class="close" data-dismiss="modal">x</button>
+		<h3>Peers for {{info_name}}</h3>
+	  </div>
+	  <div class="modal-body">
+		  <table class="table table-bordered table-striped table-condensed">
+			  <thead>
+				  <td>Address</td>
+				  <td>Peer Choking Aria2</td>
+				  <td>Aria2 Choking Peer</td>
+				  <td>Seeder</td>
+				  <td>Upload Speed</td>
+				  <td>Download Speed</td>
+			  </thead>
+			  <tbody>
+				  {{#peers}}
+				  <tr>
+					  <td>{{ip}}:{{port}}</td>
+					  <td>{{peerChoking}}</td>
+					  <td>{{amChoking}}</td>
+					  <td>{{seeder}}</td>
+					  <td>{{downloadSpeed}}</td>
+					  <td>{{uploadSpeed}}</td>
+				  {{/peers}}
+				  {{^peers}}
+				  	<td colspan="6" style="text-align: center;"><h2>No peers connected!</h2></td>
+				  {{/peers}}
+			  </tbody>
+		  </table>
+	  </div>
+	  <div class="modal-footer">
+		  <button class="btn btn-success" data-dismiss="modal">Close</button>
+	  </div>
+  </script>
+  <!-- }}} -->
   <!--{{{ download settings template start -->
   <script type="text/mustache" id="download_settings_template">
 
@@ -669,6 +706,11 @@
 </div>
 <!-- download settings template end }}}-->
 
+<!--{{{ torrent info modal -->
+<div class="modal hide" id="torrent_info_modal" style="width: 600px;">
+</div>
+<!-- }}} -->
+
 <!-- }}} hidden modals end -->
 
 <script src="js/plugins.js"></script>

js/script.js

@@ -6,6 +6,7 @@ var modals = {
 	change_conf: undefined,
 	newDownload_modal: undefined,
 	global_settings_modal: undefined,
+	torrent_info_modal: undefined,
 	global_statistics_modal: undefined,
 	about_modal: undefined,
 	err_file_api_modal: undefined,
@@ -195,6 +196,7 @@ $(function() {
 	modals.newDownload_modal = $('#newDownload_modal').modal(modal_conf);
 	modals.global_settings_modal = $('#global_settings_modal').modal(modal_conf);
 	modals.download_settings_modal = $('#download_settings_modal').modal(modal_conf);
+	modals.torrent_info_modal = $('#torrent_info_modal').modal(modal_conf);
 	modals.global_statistics_modal = $('#global_statistics_modal').modal(modal_conf);
 	modals.about_modal = $('#about_modal').modal(modal_conf);
 	modals.err_file_api_modal = $('#error_file_api').modal(modal_conf);
@@ -480,7 +482,7 @@ function getTemplateCtx(data) {
 	var name;
 	var seed = (data.files[0].path || data.files[0].uris[0].uri).split(/[/\\]/);
 	name = seed[seed.length - 1];
-	var chunks =  percentage !== 100 ? getChunksFromHex(data.bitfield, data.numPieces) : [];
+	var chunks =  percentage !== 100 && data.bitfield ? getChunksFromHex(data.bitfield, data.numPieces) : [];
 
 	var eta = changeTime((data.totalLength-data.completedLength)/data.downloadSpeed);
 	return {
@@ -503,7 +505,8 @@ function getTemplateCtx(data) {
 		booleans: {
 			is_error: data.status === "error",
 		},
-		chunks: chunks
+		chunks: chunks,
+		bittorrent: !!data.bittorrent
 	};
 }
 function updateDownloadTemplates(elem, ctx) {
@@ -518,11 +521,11 @@ function updateDownloadTemplates(elem, ctx) {
 	}
 	var canvas = elem.find(".chunk-canvas")[0];
 	if (!canvas) {
-		console.log("cant find canvas!!!", elem);
 		return;
 	}
 	var ctx = canvas.getContext('2d');
 	ctx.fillStyle = "#149BDF";
+	ctx.clearRect(0, 0, canvas.width, canvas.height);
 	var x = 0,
 		 width = canvas.width,
 		 height = canvas.height;
@@ -810,6 +813,38 @@ function updateActiveDownloads(data) {
 			}
 		});
 	});
+	$('.download_active_item .torrent_info').unbind('click').click(function() {
+		var info_name = $(this).parents('.download_active_item').attr('data-settingsName');
+		var gid = $(this).parents('.download_active_item').attr('data-gid');
+		aria_syscall({
+			func: 'getPeers',
+			params: [gid],
+			success: function(data) {
+				var peers = data.result.map(function(e) {
+					e.downloadSpeed = changeLength(e.downloadSpeed, "B/s");
+					e.uploadSpeed = changeLength(e.uploadSpeed, "B/s");
+					return e;
+				});
+				var download = d_files.active.filter(function(d) {
+					d.gid == gid
+				})[1];
+				var templ = $('#torrent_info_template').text();
+				var item = Mustache.render(templ, {
+					info_name: info_name,
+					gid: gid,
+					peers: peers
+				});
+				$('#torrent_info_modal').html(item);
+				modals.torrent_info_modal.modal('show');
+				console.log($('#torrent_info_modal'));
+				update_ui();
+			},
+			error: function(err) {
+				console.log("error pausing active download!!!");
+				console.log(err);
+			}
+		});
+	});
 	$('.download_active_item .download_remove').unbind('click').click(function() {
 		var gid = $(this).parents('.download_active_item').attr('data-gid');
 		aria_syscall({
@@ -1014,14 +1049,14 @@ function updateDownloads() {
 }
 
 function updateGlobalStatistics(data) {
-	globalGraphData.addDown(parseFloat(data.downloadSpeed));
-	globalGraphData.addUp(parseFloat(data.uploadSpeed));
 	data.downloadSpeed = changeLength(data.downloadSpeed, "B/s");
 	data.uploadSpeed = changeLength(data.uploadSpeed, "B/s");
 	for(var i in data) {
 		$('.stat_' + i).text(data[i]);
 	}
 	if (globalGraphData) {
+		globalGraphData.addDown(parseFloat(data.downloadSpeed));
+		globalGraphData.addUp(parseFloat(data.uploadSpeed));
 		globalGraphData.plot.setData([{
 			label: "Download Speed",
 			data: globalGraphData.downSpeed,