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

basic download pausing and playing

Browse Source
This commit is contained in:
Hamza Zia 2012-06-05 17:44:54 +08:00
parent 5d779e3b1a
commit c723dd8762
2 changed files with 203 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
index.html
View File

@ -22,15 +22,19 @@
<script src="js/libs/bootstrap.js"></script> <script src="js/libs/bootstrap.js"></script>
<script src="js/libs/mustache.js"></script> <script src="js/libs/mustache.js"></script>
<script type="text/mustache" id="download_item_template"> <script type="text/mustache" id="download_active_template">
<div class="row download_item"> <div class="row download_active_item" data-gid="{{gid}}">
<div class="span8"> <div class="span5">
<h3>{{name}}</h3> <h3>{{name}}</h3>
</div> </div>
<div class="span4"> <div class="span4">
<button class="btn btn-mini"><i class="icon-pause"></i>Pause</button> <span class="badge badge-success">Active:{{status}}</span>
<button class="btn btn-mini btn-danger"><i class="icon-remove"></i> Delete</button> </div>
<span class="label label-success">Status: {{status}} {{percentage}}%</span> <div class="span3">
<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_delete"><i class="icon-remove"></i> Delete</button>
</div>
</div> </div>
<br><br> <br><br>
<div class="span12 progress progress-striped"> <div class="span12 progress progress-striped">
@ -38,6 +42,47 @@
</div> </div>
</div> </div>
</script> </script>
<script type="text/mustache" id="download_waiting_template">
<div class="row download_waiting_item" data-gid="{{gid}}">
<div class="span5">
<h3>{{name}}</h3>
</div>
<div class="span4">
<span class="badge badge-success">Waiting:{{status}}</span>
</div>
<div class="span3">
<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"><i class="icon-remove"></i> Delete</button>
</div>
</div>
<br><br>
<div class="span12 progress progress-striped">
<div class="bar" style="width: {{percentage}}%"></div>
</div>
</div>
</script>
<script type="text/mustache" id="download_stopped_template">
<div class="row download_stopped_item" data-gid="{{gid}}">
<div class="span5">
<h3>{{name}}</h3>
</div>
<div class="span4">
<span class="badge badge-success">Stopped:{{status}}</span>
</div>
<div class="span3">
<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"><i class="icon-remove"></i> Delete</button>
</div>
</div>
<br><br>
<div class="span12 progress progress-striped">
<div class="bar" style="width: {{percentage}}%"></div>
</div>
</div>
</script>
<style> <style>
body { body {
padding-top: 60px; padding-top: 60px;
@ -67,11 +112,16 @@
</div> </div>
<div role="main" class="container"> <div role="main" class="container">
<h2>Current Downloads</h2>
<!-- Download items here --> <!-- Download items here -->
<div id="downloads">
</div> <h2>Current Downloads</h2>
<div id="active_downloads"></div>
<h2>Waiting Downloads</h2>
<div id="waiting_downloads"></div>
<h2>Stopped Downloads</h2>
<div id="stopped_downloads"></div>
<h3 id="console"></h3> <h3 id="console"></h3>
<footer> <footer>
@ -80,7 +130,7 @@
</div> </div>
<!-- Hidden dialogs and out of screen HTML elements --> <!--{{{ Hidden dialogs and out of screen HTML elements -->
<!-- error connection template --> <!-- error connection template -->
<div class="modal fade" id="error_connect"> <div class="modal fade" id="error_connect">
@ -157,6 +207,7 @@
<button id="addNewDownload" class="btn">Add Download</button> <button id="addNewDownload" class="btn">Add Download</button>
</div> </div>
</div> </div>
<!-- }}} hidden modals end -->
<script src="js/plugins.js"></script> <script src="js/plugins.js"></script>

195
js/script.js
View File

@ -23,15 +23,22 @@ var update_server_conf = function() {
clear_dialogs(); clear_dialogs();
update_ui(); update_ui();
}; };
var aria_syscall = function(conf) {
function param_encode(param) {
if(param) {
param = base64.btoa(JSON.stringify(param));
}
return param;
}
var aria_syscall = function(conf, multicall) {
$.ajax({ $.ajax({
url: 'http://' + server_conf.host + ':' + server_conf.port + '/jsonrpc', url: 'http://' + server_conf.host + ':' + server_conf.port + '/jsonrpc',
timeout: 3000, timeout: 1000,
data: { data: {
jsonrpc: 2.0, jsonrpc: 2.0,
id: 'webui', id: 'webui',
method: 'aria2.' + conf.func.toString(), method: multicall? conf.func:'aria2.' + conf.func,
params: conf.params params: param_encode(conf.params)
}, },
success: conf.sucess, success: conf.sucess,
error: conf.error, error: conf.error,
@ -42,17 +49,7 @@ var aria_syscall = function(conf) {
} }
var log = $('#console'); var log = $('#console');
var update_ui = function() { var update_ui = function() {
updateDownloads();
aria_syscall({
func: 'getVersion',
sucess: function(data) {
updateDownloads();
},
error: function() {
modals.err_connect.modal('show');
log.append('error connecting!!<br>');
}
});
}; };
$(function() { $(function() {
@ -64,17 +61,12 @@ $(function() {
$('#addNewDownload').click(newDownload); $('#addNewDownload').click(newDownload);
}); });
/*function updateDownloads() {
updateDownloads();
updateWaiting();
updateStopDownloads();
}*/
function newDownload() { function newDownload() {
var url = $('#newDownload_url').val(); var url = $('#newDownload_url').val();
aria_syscall({ aria_syscall({
func: 'addUri', func: 'addUri',
params: base64.btoa(JSON.stringify([[url]])), params: [[url]],
sucess: function() { sucess: function() {
clear_dialogs(); clear_dialogs();
update_ui(); update_ui();
@ -82,45 +74,142 @@ function newDownload() {
}); });
} }
var d_files = []; var d_files = {
active: [],
function updateDownloads() { waiting: [],
aria_syscall({ stopped: []
func: 'tellActive', };
sucess: function(data) { function updateActiveDownloads(data) {
var down_template = $('#download_item_template').text(); var down_template = $('#download_active_template').text();
var results = data.result; $('#active_downloads').html("");
$('#downloads').html(""); if(!data || (data && data.length === 0)) {
for(var i = 0; i < results.length; i++) { $('#active_downloads').append('no active downloads!!!!');
console.log('adding downloads!!!'); }
var percentage =(results[i].completedLength / results[i].totalLength)*100; for(var i = 0; i < data.length; i++) {
percentage = Math.round(percentage*1000)/1000; var percentage =(data[i].completedLength / data[i].totalLength)*100;
ctx = { percentage = Math.round(percentage*1000)/1000;
name: results[i].files[0].path, ctx = {
status: results[i].status, name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
percentage:percentage status: data[i].status,
}; percentage:percentage,
var item = Mustache.render(down_template, ctx); gid: data[i].gid
console.log(ctx); };
console.log(results[i]); var item = Mustache.render(down_template, ctx);
$('#downloads').append(item); $('#active_downloads').append(item);
}
$('.download_active_item .download_pause').click(function() {
var gid = $(this).parents('.download_active_item').attr('data-gid');
aria_syscall({
func: 'pause',
params: [gid],
sucess: function() {
update_ui();
},
error: function(err) {
console.log("error pausing active download!!!");
console.log(err);
} }
if(results && results.length === 0) { });
$('#downloads').append('no downloads!!!!'); });
}
function updateWaitingDownloads(data) {
var down_template = $('#download_waiting_template').text();
$('#waiting_downloads').html("");
if(!data || (data && data.length === 0)) {
$('#waiting_downloads').append('no waiting downloads!!!!');
}
for(var i = 0; i < data.length; i++) {
var percentage =(data[i].completedLength / data[i].totalLength)*100;
percentage = Math.round(percentage*1000)/1000;
ctx = {
name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
status: data[i].status,
percentage:percentage,
gid: data[i].gid
};
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');
aria_syscall({
func: 'unpause',
params: [gid],
sucess: function(data) {
update_ui();
},
error: function(err) {
console.log("error playing waiting download!!!");
console.log(err);
} }
}, });
error: function() { });
modals.err_connect.modal('show'); }
log.append('error connecting!!<br>'); function updateStoppedDownloads(data) {
} var down_template = $('#download_stopped_template').text();
$('#stopped_downloads').html("");
if(!data || (data && data.length === 0)) {
$('#stopped_downloads').append('no stopped downloads!!!!');
}
for(var i = 0; i < data.length; i++) {
var percentage =(data[i].completedLength / data[i].totalLength)*100;
percentage = Math.round(percentage*1000)/1000;
ctx = {
name: data[i].files[0].uris[0].uri.replace(/^.*[\\\/]/, ''),
status: data[i].status,
percentage:percentage,
gid: data[i].gid
};
var item = Mustache.render(down_template, ctx);
$('#stopped_downloads').append(item);
}
$('.download_stopped_item .download_play').click(function() {
var gid = $(this).parents('.download_stopped_item').attr('data-gid');
aria_syscall({
func: 'unpause',
params: [gid],
sucess: function() {
update_ui();
},
error: function(err) {
console.log("error playing stopped download!!!");
console.log(err);
}
});
}); });
} }
function updateWaiting() {
function mergeDownloads(data) {
d_files.active = data[0][0];
d_files.waiting = data[1][0];
d_files.stopped = data[2][0];
} }
function updateStopDownloads() { function updateDownloads() {
aria_syscall({
func: 'system.multicall',
params:[[{
methodName: 'aria2.tellActive'
}, {
methodName: 'aria2.tellWaiting',
params: [0,5]
}, {
methodName: 'aria2.tellStopped',
params: [0, 5]
}]],
sucess: function(data) {
//updateActiveDownloads(data.result);
mergeDownloads(data.result);
updateActiveDownloads(d_files.active);
updateWaitingDownloads(d_files.waiting);
updateStoppedDownloads(d_files.stopped);
},
error: function() {
modals.err_connect.modal('show');
log.append('error connecting for downloads!!<br>');
}
}, true);
} }
setInterval(update_ui, 1000); setInterval(update_ui, 1000);