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

major downloads refactoring and efficient updating of dom elements

Browse Source
This commit is contained in:
Hamza Zia 2012-06-07 16:10:19 +08:00
parent d006bdeab1
commit aff99f1fc6
2 changed files with 87 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
index.html
View File

@ -23,31 +23,41 @@
<script src="js/libs/mustache.js"></script> <script src="js/libs/mustache.js"></script>
<script src="js/aria2_settings.js"></script> <script src="js/aria2_settings.js"></script>
<style>
.button_set {
float: right;
margin-bottom: 5px;
}
</style>
<!--{{{ active downloads template start --> <!--{{{ active downloads template start -->
<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="span4" style="overflow: hidden;"> <div class="span3" style="overflow: hidden;">
<h3>{{name}}</h3> <b style="font-size: 14px;" class="name">{{name}}</b>
</div> </div>
<div class="span6"> <div class="span6">
<b style='display:inline; float:right;'> <div class="pull-right">
<span class="label label-success">Remaining: {{remaining}}</span> | <span class="label label-success">Remaining: <span class="remaining">{{remaining}}</span></span> |
<span class="label label-success">Progress: {{percentage}}%</span> | <span class="label label-success">Progress: <span class="percentage">{{percentage}}</span>%</span> |
<span class="label label-success">Speed: {{down}}</span> | <span class="label label-success">Speed: <span class="down">{{down}}</span></span> |
<span class="label label-success">Time left: {{eta}}</span> <span class="label label-success">Time left: <span class="eta">{{eta}}</span></span>
</b> </div>
</div> </div>
<div class="span2"> <div class="span3">
<div style="float:right"> <div class="button_set">
<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-info" data-toggle="collapse" data-target="[data-gid={{gid}}] .more_info">More Info</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>
</div> </div>
</div> </div>
<br><br> <br>
<div class="span12 progress progress-striped"> <div class="span12 progress progress-striped active">
<div class="bar" style="width: {{percentage}}%;"></div> <div class="bar" style="width: {{percentage}}%;"></div>
</div> </div>
<br>
<div class="span12 more_info collapse">Hello!!!</div>
</div> </div>
</script> </script>
<!-- active downloads template end }}}--> <!-- active downloads template end }}}-->
@ -55,23 +65,23 @@
<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="span4" style="overflow: hidden;"> <div class="span4" style="overflow: hidden;">
<h3>{{name}}</h3> <b style="font-size: 14px;">{{name}}</b>
</div> </div>
<div class="span6"> <div class="span6">
<span class="badge badge-warning">Status: {{status}}</span> <span class="badge badge-warning">Status: {{status}}</span>
<b style='display:inline; float:right;'> <div class="pull-right">
<span class="label label-warning">Size: {{size}}</span> | <span class="label label-warning">Size: {{size}}</span> |
<span class="label label-warning">Remaining: {{remaining}}</span> | <span class="label label-warning">Remaining: {{remaining}}</span> |
<span class="label label-warning">Progress: {{percentage}}%</span> <span class="label label-warning">Progress: {{percentage}}%</span>
</b> </div>
</div> </div>
<div class="span2"> <div class="span2">
<div style="float:right"> <div class="button_set">
<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-fire"></i> Purge</button> <button class="btn btn-mini btn-danger download_remove"><i class="icon-fire"></i> Purge</button>
</div> </div>
</div> </div>
<br><br> <br>
<div class="span12 progress progress-striped"> <div class="span12 progress progress-striped">
<div class="bar" style="width: {{percentage}}%; background-color:#FBB450"></div> <div class="bar" style="width: {{percentage}}%; background-color:#FBB450"></div>
</div> </div>
@ -83,23 +93,23 @@
<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="span4" style="overflow: hidden;"> <div class="span4" style="overflow: hidden;">
<h3>{{name}}</h3> <b style="font-size: 14px;">{{name}}</b>
</div> </div>
<div class="span6"> <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;'> <div class="pull-right">
<span class="label label-important">Size: {{size}}</span> | <span class="label label-important">Size: {{size}}</span> |
<span class="label label-important">Downloaded: {{downloaded}}</span> | <span class="label label-important">Downloaded: {{downloaded}}</span> |
<span class="label label-important">Progress: {{percentage}}%</span> <span class="label label-important">Progress: {{percentage}}%</span>
</b> </div>
</div> </div>
<div class="span2"> <div class="span2">
<div style="float:right"> <div class="button_set">
<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>
</div> </div>
</div> </div>
<br><br> <br>
<div class="span12 progress progress-striped"> <div class="span12 progress progress-striped">
<div class="bar" style="width: {{percentage}}%; background-color:#EE5F5B"></div> <div class="bar" style="width: {{percentage}}%; background-color:#EE5F5B"></div>
</div> </div>
@ -198,13 +208,10 @@
<div role="main" class="container"> <div role="main" class="container">
<!-- Download items here --> <!-- Download items here -->
<h2>Current Downloads</h2>
<div id="active_downloads"></div> <div id="active_downloads"></div>
<h2>Waiting Downloads</h2>
<div id="waiting_downloads"></div> <div id="waiting_downloads"></div>
<h2>Stopped Downloads</h2>
<div id="stopped_downloads"></div> <div id="stopped_downloads"></div>
</div> </div>

96
js/script.js
View File

@ -288,10 +288,10 @@ var d_files = {
}; };
function changeLength(len, pref) { function changeLength(len, pref) {
len = parseInt(len); len = parseInt(len);
if(len <= 1000) return len + " " + pref; if(len <= (1<<10)) return len + " " + pref;
else if(len <= 1000000) return (len/1000).toFixed(1) + " k" + pref; else if(len <= (1<<20)) return (len/(1<<10)).toFixed(1) + " K" + pref;
else if(len <= 1000000000) return (len/1000000).toFixed(1) + " m" + pref; else if(len <= (1<<30)) return (len/(1<<20)).toFixed(1) + " M" + pref;
else if(len <= 1000000000000) return (len/1000000000).toFixed(1) + " g" + pref; else return (len/(1<<30)).toFixed(1) + " G" + pref;
} }
function changeTime(time) { function changeTime(time) {
time = parseInt(time); time = parseInt(time);
@ -320,25 +320,57 @@ function getTemplateCtx(data) {
status: data.status, status: data.status,
percentage:percentage, percentage:percentage,
gid: data.gid, gid: data.gid,
size: changeLength(data.totalLength, "b"), size: changeLength(data.totalLength, "B"),
down: changeLength(data.downloadSpeed, "b/s"), down: changeLength(data.downloadSpeed, "B/s"),
remaining: changeLength(data.totalLength - data.completedLength, "b"), remaining: changeLength(data.totalLength - data.completedLength, "B"),
eta: eta, eta: eta,
downloaded: changeLength(data.completedLength, "b") downloaded: changeLength(data.completedLength, "B")
}; };
} }
function updateActiveDownloads(data) { function updateDownloadTemplates(elem, ctx) {
var down_template = $('#download_active_template').text(); elem = $(elem);
$('#active_downloads').html(""); for(var i in ctx) {
if(!data || (data && data.length === 0)) { elem.find('.' + i).text(ctx[i]);
$('#active_downloads').append('no active downloads yet!!!!');
} }
elem.find('.bar').css('width', ctx.percentage + '%');
}
function deleteDownloadTemplates(top_elem, data) {
if(!data) {
$(top_elem).html("");
}
else {
var elems = $(top_elem).find('[data-gid]');
for(var i = 0; i < elems.length; i++) {
var elem = $(elems[i]);
var gid = elem.attr('data-gid').toString();
var found = false;
for(var j = 0; j < data.length; j++) {
if(gid === data[j].gid.toString())
found = true;
}
if(!found)
elem.remove();
}
}
}
function refreshDownloadTemplates(top_elem, data) {
var down_template = $('#download_' + top_elem + '_template').text();
deleteDownloadTemplates('#' + top_elem + '_downloads', data);
for(var i = 0; i < data.length; i++) { for(var i = 0; i < data.length; i++) {
var ctx = getTemplateCtx(data[i]); var ctx = getTemplateCtx(data[i]);
var item = Mustache.render(down_template, ctx); var elem = $('[data-gid=' + ctx.gid + ']');
$('#active_downloads').append(item); if(elem.length) {
updateDownloadTemplates(elem, ctx);
} else {
var item = Mustache.render(down_template, ctx);
$('#' + top_elem + '_downloads').append(item);
}
} }
$('.download_active_item .download_pause').click(function() {
}
function updateActiveDownloads(data) {
refreshDownloadTemplates('active', data);
$('.download_active_item .download_pause').unbind('click').click(function() {
var gid = $(this).parents('.download_active_item').attr('data-gid'); var gid = $(this).parents('.download_active_item').attr('data-gid');
aria_syscall({ aria_syscall({
func: 'pause', func: 'pause',
@ -352,7 +384,7 @@ function updateActiveDownloads(data) {
} }
}); });
}); });
$('.download_active_item .download_remove').click(function() { $('.download_active_item .download_remove').unbind('click').click(function() {
var gid = $(this).parents('.download_active_item').attr('data-gid'); var gid = $(this).parents('.download_active_item').attr('data-gid');
aria_syscall({ aria_syscall({
func: 'remove', func: 'remove',
@ -368,17 +400,8 @@ function updateActiveDownloads(data) {
}); });
} }
function updateWaitingDownloads(data) { function updateWaitingDownloads(data) {
var down_template = $('#download_waiting_template').text(); refreshDownloadTemplates('waiting', data);
$('#waiting_downloads').html(""); $('.download_waiting_item .download_play').unbind('click').click(function() {
if(!data || (data && data.length === 0)) {
$('#waiting_downloads').append('no waiting downloads yet!!!!');
}
for(var i = 0; i < data.length; i++) {
var ctx = getTemplateCtx(data[i]);
var item = Mustache.render(down_template, ctx);
$('#waiting_downloads').append(item);
}
$('.download_waiting_item .download_play').click(function() {
var gid = $(this).parents('.download_waiting_item').attr('data-gid'); var gid = $(this).parents('.download_waiting_item').attr('data-gid');
aria_syscall({ aria_syscall({
func: 'unpause', func: 'unpause',
@ -392,7 +415,7 @@ function updateWaitingDownloads(data) {
} }
}); });
}); });
$('.download_waiting_item .download_remove').click(function() { $('.download_waiting_item .download_remove').unbind('click').click(function() {
var gid = $(this).parents('.download_waiting_item').attr('data-gid'); var gid = $(this).parents('.download_waiting_item').attr('data-gid');
aria_syscall({ aria_syscall({
func: 'remove', func: 'remove',
@ -409,17 +432,8 @@ function updateWaitingDownloads(data) {
} }
function updateStoppedDownloads(data) { function updateStoppedDownloads(data) {
var down_template = $('#download_stopped_template').text(); refreshDownloadTemplates('stopped', data);
$('#stopped_downloads').html(""); $('.download_stopped_item .download_remove').unbind('click').click(function() {
if(!data || (data && data.length === 0)) {
$('#stopped_downloads').append('no stopped downloads yet!!!!');
}
for(var i = 0; i < data.length; i++) {
var ctx = getTemplateCtx(data[i]);
var item = Mustache.render(down_template, ctx);
$('#stopped_downloads').append(item);
}
$('.download_stopped_item .download_remove').click(function() {
var gid = $(this).parents('.download_stopped_item').attr('data-gid'); var gid = $(this).parents('.download_stopped_item').attr('data-gid');
aria_syscall({ aria_syscall({
func: 'removeDownloadResult', func: 'removeDownloadResult',
@ -433,7 +447,7 @@ function updateStoppedDownloads(data) {
} }
}); });
}); });
$('.download_stopped_item .download_restart').click(function() { $('.download_stopped_item .download_restart').unbind('click').click(function() {
var gid = $(this).parents('.download_stopped_item').attr('data-gid'); var gid = $(this).parents('.download_stopped_item').attr('data-gid');
var files; var files;
var uris = []; var uris = [];