q3aql/webui-aria2
q3aql/webui-aria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

minimal download statistics

Browse Source
This commit is contained in:
Hamza Zia 2012-06-05 20:53:52 +08:00
parent 2608575e54
commit 53971cf220
2 changed files with 43 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
index.html
View File

@ -24,13 +24,18 @@
<script type="text/mustache" id="download_active_template"> <script type="text/mustache" id="download_active_template">
<div class="row download_active_item" data-gid="{{gid}}"> <div class="row download_active_item" data-gid="{{gid}}">
<div class="span5" style="overflow: hidden;"> <div class="span4" style="overflow: hidden;">
<h3>{{name}}</h3> <h3>{{name}}</h3>
</div> </div>
<div class="span4"> <div class="span6">
<span class="badge badge-success">Status: {{status}}</span> <span class="badge badge-success">Status: {{status}}</span>
<b style='display:inline; float:right;'>
Size: {{size}} |
Progress: {{percentage}}% |
down: {{down}}
</b>
</div> </div>
<div class="span3"> <div class="span2">
<div style="float:right"> <div style="float:right">
<button class="btn btn-mini download_pause"><i class="icon-pause"></i>Pause</button> <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> <button class="btn btn-mini btn-danger download_remove"><i class="icon-remove"></i> Remove</button>
@ -38,19 +43,23 @@
</div> </div>
<br><br> <br><br>
<div class="span12 progress progress-striped"> <div class="span12 progress progress-striped">
<div class="bar" style="width: {{percentage}}%"></div> <div class="bar" style="width: {{percentage}}%;"></div>
</div> </div>
</div> </div>
</script> </script>
<script type="text/mustache" id="download_waiting_template"> <script type="text/mustache" id="download_waiting_template">
<div class="row download_waiting_item" data-gid="{{gid}}"> <div class="row download_waiting_item" data-gid="{{gid}}">
<div class="span5" style="overflow: hidden;"> <div class="span4" style="overflow: hidden;">
<h3>{{name}}</h3> <h3>{{name}}</h3>
</div> </div>
<div class="span4"> <div class="span6">
<span class="badge badge-info">Status: {{status}}</span> <span class="badge badge-warning">Status: {{status}}</span>
<b style='display:inline; float:right;'>
Size: {{size}} |
Progress: {{percentage}}%
</b>
</div> </div>
<div class="span3"> <div class="span2">
<div style="float:right"> <div style="float:right">
<button class="btn btn-mini download_play"><i class="icon-play"></i> Play</button> <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> <button class="btn btn-mini btn-danger download_remove"><i class="icon-remove"></i> Remove</button>
@ -58,19 +67,23 @@
</div> </div>
<br><br> <br><br>
<div class="span12 progress progress-striped"> <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>
</div> </div>
</script> </script>
<script type="text/mustache" id="download_stopped_template"> <script type="text/mustache" id="download_stopped_template">
<div class="row download_stopped_item" data-gid="{{gid}}"> <div class="row download_stopped_item" data-gid="{{gid}}">
<div class="span5" style="overflow: hidden;"> <div class="span4" style="overflow: hidden;">
<h3>{{name}}</h3> <h3>{{name}}</h3>
</div> </div>
<div class="span4"> <div class="span6">
<span class="badge badge-important">Status: {{status}}</span> <span class="badge badge-important">Status: {{status}}</span>
<b style='display:inline; float:right;'>
Size: {{size}} |
Progress: {{percentage}}%
</b>
</div> </div>
<div class="span3"> <div class="span2">
<div style="float:right"> <div style="float:right">
<button class="btn btn-mini download_restart"><i class="icon-repeat"></i> Restart</button> <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> <button class="btn btn-mini btn-danger download_remove"><i class="icon-fire"></i> Purge</button>
@ -78,7 +91,7 @@
</div> </div>
<br><br> <br><br>
<div class="span12 progress progress-striped"> <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>
</div> </div>
</script> </script>

20
js/script.js
View File

@ -83,6 +83,13 @@ var d_files = {
waiting: [], waiting: [],
stopped: [] 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) { function updateActiveDownloads(data) {
var down_template = $('#download_active_template').text(); var down_template = $('#download_active_template').text();
$('#active_downloads').html(""); $('#active_downloads').html("");
@ -96,7 +103,9 @@ function updateActiveDownloads(data) {
name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''), name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
status: data[i].status, status: data[i].status,
percentage:percentage, 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); var item = Mustache.render(down_template, ctx);
$('#active_downloads').append(item); $('#active_downloads').append(item);
@ -143,7 +152,9 @@ function updateWaitingDownloads(data) {
name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''), name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
status: data[i].status, status: data[i].status,
percentage:percentage, 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); var item = Mustache.render(down_template, ctx);
$('#waiting_downloads').append(item); $('#waiting_downloads').append(item);
@ -177,6 +188,7 @@ function updateWaitingDownloads(data) {
}); });
}); });
} }
function updateStoppedDownloads(data) { function updateStoppedDownloads(data) {
var down_template = $('#download_stopped_template').text(); var down_template = $('#download_stopped_template').text();
$('#stopped_downloads').html(""); $('#stopped_downloads').html("");
@ -190,7 +202,9 @@ function updateStoppedDownloads(data) {
name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''), name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
status: data[i].status, status: data[i].status,
percentage:percentage, 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); var item = Mustache.render(down_template, ctx);
$('#stopped_downloads').append(item); $('#stopped_downloads').append(item);