chunked progress bar added!, somewhat experimental and very unstable (slow) for large download pieces
This commit is contained in:
Hamza Zia
parent
8c411ec3d1
commit
72208fe579
33
index.html
33
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}}
|
||||
|
|
|
|||
34
js/script.js
34
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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user