minimal download statistics
This commit is contained in:
parent
2608575e54
commit
53971cf220
39
index.html
39
index.html
|
@ -24,13 +24,18 @@
|
|||
|
||||
<script type="text/mustache" id="download_active_template">
|
||||
<div class="row download_active_item" data-gid="{{gid}}">
|
||||
<div class="span5" style="overflow: hidden;">
|
||||
<div class="span4" style="overflow: hidden;">
|
||||
<h3>{{name}}</h3>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="span6">
|
||||
<span class="badge badge-success">Status: {{status}}</span>
|
||||
<b style='display:inline; float:right;'>
|
||||
Size: {{size}} |
|
||||
Progress: {{percentage}}% |
|
||||
down: {{down}}
|
||||
</b>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="span2">
|
||||
<div style="float:right">
|
||||
<button class="btn btn-mini download_pause"><i class="icon-pause"></i>Pause</button>
|
||||
<button class="btn btn-mini btn-danger download_remove"><i class="icon-remove"></i> Remove</button>
|
||||
|
@ -38,19 +43,23 @@
|
|||
</div>
|
||||
<br><br>
|
||||
<div class="span12 progress progress-striped">
|
||||
<div class="bar" style="width: {{percentage}}%"></div>
|
||||
<div class="bar" style="width: {{percentage}}%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/mustache" id="download_waiting_template">
|
||||
<div class="row download_waiting_item" data-gid="{{gid}}">
|
||||
<div class="span5" style="overflow: hidden;">
|
||||
<div class="span4" style="overflow: hidden;">
|
||||
<h3>{{name}}</h3>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<span class="badge badge-info">Status: {{status}}</span>
|
||||
<div class="span6">
|
||||
<span class="badge badge-warning">Status: {{status}}</span>
|
||||
<b style='display:inline; float:right;'>
|
||||
Size: {{size}} |
|
||||
Progress: {{percentage}}%
|
||||
</b>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="span2">
|
||||
<div style="float:right">
|
||||
<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-remove"></i> Remove</button>
|
||||
|
@ -58,19 +67,23 @@
|
|||
</div>
|
||||
<br><br>
|
||||
<div class="span12 progress progress-striped">
|
||||
<div class="bar" style="width: {{percentage}}%"></div>
|
||||
<div class="bar" style="width: {{percentage}}%; background-color:#FBB450"></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<script type="text/mustache" id="download_stopped_template">
|
||||
<div class="row download_stopped_item" data-gid="{{gid}}">
|
||||
<div class="span5" style="overflow: hidden;">
|
||||
<div class="span4" style="overflow: hidden;">
|
||||
<h3>{{name}}</h3>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<div class="span6">
|
||||
<span class="badge badge-important">Status: {{status}}</span>
|
||||
<b style='display:inline; float:right;'>
|
||||
Size: {{size}} |
|
||||
Progress: {{percentage}}%
|
||||
</b>
|
||||
</div>
|
||||
<div class="span3">
|
||||
<div class="span2">
|
||||
<div style="float:right">
|
||||
<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>
|
||||
|
@ -78,7 +91,7 @@
|
|||
</div>
|
||||
<br><br>
|
||||
<div class="span12 progress progress-striped">
|
||||
<div class="bar" style="width: {{percentage}}%"></div>
|
||||
<div class="bar" style="width: {{percentage}}%; background-color:#EE5F5B"></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
|
20
js/script.js
20
js/script.js
|
@ -83,6 +83,13 @@ var d_files = {
|
|||
waiting: [],
|
||||
stopped: []
|
||||
};
|
||||
function changeLength(len, pref) {
|
||||
len = parseInt(len);
|
||||
if(len <= 1000) return len + " " + pref;
|
||||
else if(len <= 1000000) return Math.round(len/1000 * 100)/100 + " k" + pref;
|
||||
else if(len <= 1000000000) return Math.round(len/1000000 *100)/100 + " m" + pref;
|
||||
else if(len <= 1000000000000) return Math.round(len/1000000000 *100)/100 + " g" + pref;
|
||||
}
|
||||
function updateActiveDownloads(data) {
|
||||
var down_template = $('#download_active_template').text();
|
||||
$('#active_downloads').html("");
|
||||
|
@ -96,7 +103,9 @@ function updateActiveDownloads(data) {
|
|||
name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
|
||||
status: data[i].status,
|
||||
percentage:percentage,
|
||||
gid: data[i].gid
|
||||
gid: data[i].gid,
|
||||
size: changeLength(data[i].totalLength, "b"),
|
||||
down: changeLength(data[i].downloadSpeed, "b/s")
|
||||
};
|
||||
var item = Mustache.render(down_template, ctx);
|
||||
$('#active_downloads').append(item);
|
||||
|
@ -143,7 +152,9 @@ function updateWaitingDownloads(data) {
|
|||
name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
|
||||
status: data[i].status,
|
||||
percentage:percentage,
|
||||
gid: data[i].gid
|
||||
gid: data[i].gid,
|
||||
size: changeLength(data[i].totalLength, "b"),
|
||||
down: changeLength(data[i].downloadSpeed, "b/s")
|
||||
};
|
||||
var item = Mustache.render(down_template, ctx);
|
||||
$('#waiting_downloads').append(item);
|
||||
|
@ -177,6 +188,7 @@ function updateWaitingDownloads(data) {
|
|||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateStoppedDownloads(data) {
|
||||
var down_template = $('#download_stopped_template').text();
|
||||
$('#stopped_downloads').html("");
|
||||
|
@ -190,7 +202,9 @@ function updateStoppedDownloads(data) {
|
|||
name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
|
||||
status: data[i].status,
|
||||
percentage:percentage,
|
||||
gid: data[i].gid
|
||||
gid: data[i].gid,
|
||||
size: changeLength(data[i].totalLength, "b"),
|
||||
down: changeLength(data[i].downloadSpeed, "b/s")
|
||||
};
|
||||
var item = Mustache.render(down_template, ctx);
|
||||
$('#stopped_downloads').append(item);
|
||||
|
|
Loading…
Reference in New Issue
Block a user