chunked progress bar added!, somewhat experimental and very unstable (slow) for large download pieces

index.html

@@ -28,6 +28,9 @@
   <script src="js/libs/jquery.flot.min.js"></script>
 
   <style>
+	body {
+		min-width: 1230px;
+	}
 	.button_set {
 		float: right;
 		margin-bottom: 5px;
@@ -54,6 +57,14 @@
 		overflow: hidden;
 		word-wrap: break-word;
 	}
+	.progress-chunk {
+		margin:0px;
+		padding:0px;
+		border-radius:0px;
+		display: inline-block;
+		float:left;
+		margin-bottom:5px;
+	}
     @media all and (min-width: 980px) {
       body {
         padding-top: 60px;
@@ -62,6 +73,15 @@
     }
 
   </style>
+  <!-- {{{ progress chunk template -->
+  <script type="text/mustache" id="download_progress_chunk">
+	   {{#chunks}}
+		<div class="progress progress-striped progress-chunk active">
+			<div class="bar" style="width: 100%;"></div>
+		</div>
+	   {{/chunks}}
+  </script>
+  <!-- }}} -->
   <!--{{{ active downloads template -->
   <script type="text/mustache" id="download_active_template">
 	  <div class="row download_item download_active_item" data-gid="{{gid}}" data-settingsName={{sett_name}}>
@@ -84,10 +104,17 @@
 			</div>
 		</div>
 		<br>
-		<div class="span11 progress progress-striped active">
+		<div class="span11 progress full-progress progress-striped active">
 			<div class="bar" style="width: {{percentage}}%;"></div>
 		</div>
 		<div class="span11 more_info collapse">
+			<div class="span11 active_chunks">
+				{{#chunks}}
+				<div class="progress progress-chunk" style="width:{{width}}%;">
+					<div class="bar chunk_{{id}}" style="width: {{progress}}%;"></div>
+				</div>
+				{{/chunks}}
+			</div>
 			<b class="span2 label active_settings">Status: <span class="tmp_status">{{status}}</span></b>
 			<b class="span2 label active_settings">GID: <span class="tmp_gid">{{gid}}</span></b>
 			<b class="span2 label active_settings">Dir: <span class="tmp_dir">{{dir}}</span></b>
@@ -133,7 +160,7 @@
 			</div>
 		</div>
 		<br>
-		<div class="span11 progress progress-striped">
+		<div class="span11 full-progress progress progress-striped">
 			<div class="bar" style="width: {{percentage}}%; background-color:#FBB450"></div>
 		</div>
 		<div class="span12 more_info collapse">
@@ -185,7 +212,7 @@
 			</div>
 		</div>
 		<br>
-		<div class="span11 progress progress-striped">
+		<div class="span11 full-progress progress progress-striped">
 			{{#booleans.is_error}}
 			<div class="bar" style="width: {{percentage}}%; background-color:rgb(185, 74, 72)"></div>
 			{{/booleans.is_error}}

js/script.js

@@ -422,6 +422,25 @@ function changeTime(time) {
 	else return (time/(60*60*24)).toFixed(2) + " days!!";
 
 }
+function getChunksFromHex(bitfield, numOfPieces) {
+	var chunks =  [], numPieces = parseInt(numOfPieces);
+	if (numPieces > 1) {
+		var chunk_width = 100 / numPieces;
+		for (var i = 0; i < bitfield.length; i++) {
+			var hex = parseInt(bitfield[i], 16);
+			for (var j = 1; j <= 4; j++) {
+				var bit = hex & (1 << (4 - j));
+				var len = chunks.length;
+				chunks.push({
+					width: chunk_width,
+					progress: bit ? 100 : 0,
+					id: len
+				});
+			}
+		}
+	}
+	return chunks;
+}
 function getTemplateCtx(data) {
 	var percentage =(data.completedLength / data.totalLength)*100;
 	percentage = percentage.toFixed(2);
@@ -429,6 +448,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 =  getChunksFromHex(data.bitfield, data.numPieces);
 
 	var eta = changeTime((data.totalLength-data.completedLength)/data.downloadSpeed);
 	return {
@@ -450,7 +470,8 @@ function getTemplateCtx(data) {
 		upload_speed: changeLength(data.uploadSpeed, "B/s"),
 		booleans: {
 			is_error: data.status === "error",
-		}
+		},
+		chunks: chunks
 	};
 }
 function updateDownloadTemplates(elem, ctx) {
@@ -458,7 +479,12 @@ function updateDownloadTemplates(elem, ctx) {
 	for(var i in ctx) {
 		elem.find('.tmp_' + i).text(ctx[i]);
 	}
-	elem.find('.bar').css('width', ctx.percentage + '%');
+	elem.find('.full-progress .bar').css('width', ctx.percentage + '%');
+	for (var j = 0; j < ctx.chunks; j++) {
+		if (ctx.chunks[j].progress == 100) {
+			elem.find(".chunk_" + ctx.id.toString()).css(width, "100%");
+		}
+	}
 }
 function deleteDownloadTemplates(top_elem, data) {
 	if(!data) {
@@ -478,7 +504,6 @@ function deleteDownloadTemplates(top_elem, data) {
 			if(!found) {
 				for (var k = 0; k < graphData.length; k++) {
 					if (graphData[k].gid == gid) {
-						console.log("removing a graph with gid:" + gid);
 						graphData.splice(k, 1);
 						break;
 					}
@@ -554,10 +579,8 @@ function updateGraphData(data) {
 	for (var i = 0; i < data.length; i++) {
 		var gid = data[i].gid;
 		var graph = null;
-		console.log(data[i].gid);
 		for (var k = 0; k < graphData.length; k++) {
 			if (graphData[k].gid == gid) {
-				console.log("found a graph with gid:" + gid);
 				graph = graphData[k];
 				break;
 			}
@@ -566,7 +589,6 @@ function updateGraphData(data) {
 		var upSpeed = data[i].uploadSpeed;
 		var that = this;
 		if (!graph) {
-			console.log("creating a new Graph with gid:" + gid);
 			graphData.push((function() {
 				return {
 					gid: gid,