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

further ui refinement and torrent metalink functionality added;

Browse Source
This commit is contained in:
Hamza Zia 2012-06-22 05:31:02 -07:00
parent 55dc64f355
commit 13f1df4900
2 changed files with 301 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
index.html
View File

@ -32,12 +32,22 @@
text-align: center; text-align: center;
margin-bottom: 3px; margin-bottom: 3px;
} }
.download_item {
margin-bottom: 10px;
padding-top: 10px;
background-color: rgb(245, 245, 245);
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 4px 4px 4px 4px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
}
</style> </style>
<!--{{{ active downloads template --> <!--{{{ active downloads template -->
<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}}" data-settingsName={{sett_name}}> <div class="row download_item download_active_item" data-gid="{{gid}}" data-settingsName={{sett_name}}>
<div class="span3" style="overflow: hidden;"> <div class="span2" style="overflow: hidden;">
<b style="font-size: 14px;" class="tmp_name">{{name}}</b> <b style="font-size: 12px;" class="tmp_name">{{name}}</b>
</div> </div>
<div class="span6"> <div class="span6">
<div class="pull-right"> <div class="pull-right">
@ -55,7 +65,7 @@
</div> </div>
</div> </div>
<br> <br>
<div class="span12 progress progress-striped active"> <div class="span11 progress progress-striped active">
<div class="bar" style="width: {{percentage}}%;"></div> <div class="bar" style="width: {{percentage}}%;"></div>
</div> </div>
<div class="span12 more_info collapse"> <div class="span12 more_info collapse">
@ -70,21 +80,20 @@
<b class="span2 label active_settings">Download Speed: <span class="tmp_down_speed">{{down_speed}}</span></b> <b class="span2 label active_settings">Download Speed: <span class="tmp_down_speed">{{down_speed}}</span></b>
<b class="span2 label active_settings">Upload Speed: <span class="tmp_upload_speed">{{upload_speed}}</span></b> <b class="span2 label active_settings">Upload Speed: <span class="tmp_upload_speed">{{upload_speed}}</span></b>
<b class="span2 label active_settings">Upload Length: <span class="tmp_uploadLength">{{uploadLength}}</span></b> <b class="span2 label active_settings">Upload Length: <span class="tmp_uploadLength">{{uploadLength}}</span></b>
<b class="span2 label active_settings">Connections: <span class="tmp_connections">{{connections}}</span></b>
<div class="span4 offset4"> <div class="span4 offset4">
<button class="btn btn-mini pull-right download_settings"><i class="icon-cog"></i> Download Settings for {{sett_name}}</button> <button class="btn btn-mini pull-right download_settings"><i class="icon-cog"></i> Download Settings for {{sett_name}}</button>
</div> </div>
</div> </div>
</div> </div>
<br>
</script> </script>
<!-- active downloads template end }}}--> <!-- active downloads template end }}}-->
<!--{{{ waiting downloads template--> <!--{{{ waiting downloads template-->
<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}}" data-settingsName={{sett_name}}> <div class="row download_item download_waiting_item" data-gid="{{gid}}" data-settingsName={{sett_name}}>
<div class="span3" style="overflow: hidden;"> <div class="span2" style="overflow: hidden;">
<b style="font-size: 14px;" class="tmp_name">{{name}}</b> <b style="font-size: 12px;" class="tmp_name">{{name}}</b>
</div> </div>
<div class="span6"> <div class="span6">
<span class="badge badge-warning">Status: <span class="tmp_status">{{status}}</span></span> <span class="badge badge-warning">Status: <span class="tmp_status">{{status}}</span></span>
@ -102,7 +111,7 @@
</div> </div>
</div> </div>
<br> <br>
<div class="span12 progress progress-striped"> <div class="span11 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>
<div class="span12 more_info collapse"> <div class="span12 more_info collapse">
@ -124,17 +133,27 @@
<!--{{{ stopped downloads template--> <!--{{{ stopped downloads template-->
<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_item download_stopped_item" data-gid="{{gid}}">
<div class="span3" style="overflow: hidden;"> <div class="span2" style="overflow: hidden;">
<b style="font-size: 14px;" class="tmp_name">{{settings_name}}</b> <b style="font-size: 12px;" class="tmp_name">{{settings_name}}</b>
</div> </div>
<div class="span6"> <div class="span6">
{{#booleans.is_error}}
<span class="badge badge-important">Status: <span class="tmp_status">{{status}}</span></span>
<div class="pull-right">
<span class="label label-important">Size: <span class="tmp_size">{{size}}</span></span> |
<span class="label label-important">Downloaded: <span class="tmp_downloaded">{{downloaded}}</span></span> |
<span class="label label-important">Progress: <span class="tmp_percentage">{{percentage}}</span>%</span>
</div>
{{/booleans.is_error}}
{{^booleans.is_error}}
<span class="badge badge-info">Status: <span class="tmp_status">{{status}}</span></span> <span class="badge badge-info">Status: <span class="tmp_status">{{status}}</span></span>
<div class="pull-right"> <div class="pull-right">
<span class="label label-info">Size: <span class="tmp_size">{{size}}</span></span> | <span class="label label-info">Size: <span class="tmp_size">{{size}}</span></span> |
<span class="label label-info">Downloaded: <span class="tmp_downloaded">{{downloaded}}</span></span> | <span class="label label-info">Downloaded: <span class="tmp_downloaded">{{downloaded}}</span></span> |
<span class="label label-info">Progress: <span class="tmp_percentage">{{percentage}}</span>%</span> <span class="label label-info">Progress: <span class="tmp_percentage">{{percentage}}</span>%</span>
</div> </div>
{{/booleans.is_error}}
</div> </div>
<div class="span3"> <div class="span3">
<div class="button_set"> <div class="button_set">
@ -144,8 +163,13 @@
</div> </div>
</div> </div>
<br> <br>
<div class="span12 progress progress-striped"> <div class="span11 progress progress-striped">
{{#booleans.is_error}}
<div class="bar" style="width: {{percentage}}%; background-color:rgb(185, 74, 72)"></div>
{{/booleans.is_error}}
{{^booleans.is_error}}
<div class="bar" style="width: {{percentage}}%; background-color:#3A87AD"></div> <div class="bar" style="width: {{percentage}}%; background-color:#3A87AD"></div>
{{/booleans.is_error}}
</div> </div>
<div class="span12 more_info collapse"> <div class="span12 more_info collapse">
<b class="span2 label active_settings">Status: <span class="tmp_status">{{status}}</span></b> <b class="span2 label active_settings">Status: <span class="tmp_status">{{status}}</span></b>
@ -304,7 +328,28 @@
<div class="nav-collapse"> <div class="nav-collapse">
<ul class="nav"> <ul class="nav">
<li class="active"><a href="#">All Downloads</a></li> <li class="active"><a href="#">All Downloads</a></li>
<li><a id="newDownload" href="#">Add Download</a></li> <li class="dropdown" id="add_download">
<a class="dropdown-toggle" data-toggle="dropdown" href="#add_download">
Add Download
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a id="newDownload" href="#">Add Download url</a></li>
<li><a id="newDownload_metalink" href="#">Add Metalink</a></li>
<li><a id="newDownload_torrent" href="#">Add Torrent</a></li>
</ul>
</li>
<li class="dropdown" id="stop_downloads">
<a class="dropdown-toggle" data-toggle="dropdown" href="#stop_downloads">
Stop Downloads
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#" onclick="force_pause_all()"><i class="icon-pause"></i> Pause All downloads</a></li>
<li><a href="#" onclick="force_remove_all()"><i class="icon-remove"></i> Remove All downloads</a></li>
<li><a href="#" onclick="force_purge_all()"><i class="icon-fire"></i> Purge All downloads</a></li>
</ul>
</li>
</ul> </ul>
<ul class="nav pull-right"> <ul class="nav pull-right">
@ -313,9 +358,13 @@
Other <b class="caret"></b> Other <b class="caret"></b>
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li><a href="#" onclick="custom_aria2_connect()">Connection settings</a></li> <li><a href="#" onclick="custom_aria2_connect()">
<li><a href="#" onclick="custom_global_settings()">Global settings</a></li> <i class="icon-wrench"></i> Connection settings</a>
<li><a href="#" onclick="custom_global_statistics()">Global Statistics</a></li> </li>
<li><a href="#" onclick="custom_global_settings()">
<i class="icon-wrench"></i> Global settings</a></li>
<li><a href="#" onclick="custom_global_statistics()">
<i class="icon-list-alt"></i> Global Statistics</a></li>
<li><a href="#" onclick="show_about()">About</a></li> <li><a href="#" onclick="show_about()">About</a></li>
</ul> </ul>
</li> </li>
@ -358,6 +407,25 @@
</div> </div>
<!-- error connection end }}}--> <!-- error connection end }}}-->
<!--{{{ No file api template -->
<div class="modal hide" id="error_file_api">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Unfortunately your browser does not support HTML5 File Api :( </h3>
</div>
<div class="modal-body">
<p>
To use this feature, please upgrade your browser to a somewhat recent version.
If you have no clue then head on to <a href="http://firefox.com">http://firefox.com</a>
and follow instructions there.
</p>
</div>
<div class="modal-footer">
<a href="#" onclick="clear_dialogs()" class="btn">Close</a>
</div>
</div>
<!-- no file api end }}}-->
<!--{{{ About template --> <!--{{{ About template -->
<div class="modal hide" id="about_modal"> <div class="modal hide" id="about_modal">
<div class="modal-header"> <div class="modal-header">
@ -376,6 +444,7 @@
</div> </div>
</div> </div>
<!-- About end }}}--> <!-- About end }}}-->
<!--{{{ global statistics template --> <!--{{{ global statistics template -->
<div class="modal hide" id="global_statistics_modal"> <div class="modal hide" id="global_statistics_modal">
<div class="modal-header"> <div class="modal-header">
@ -397,7 +466,6 @@
</div> </div>
<!-- global statistics end }}}--> <!-- global statistics end }}}-->
<!--{{{ change aria2 rpc host and port template --> <!--{{{ change aria2 rpc host and port template -->
<div class="modal hide" id="change_conf"> <div class="modal hide" id="change_conf">
<div class="modal-header"> <div class="modal-header">
@ -439,6 +507,64 @@
</div> </div>
<!-- change aria2 rpc host and port template }}}--> <!-- change aria2 rpc host and port template }}}-->
<!--{{{ add new torrent -->
<div class="modal hide" id="new_torrent">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Add new Torrents</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="input_torrent">Select the torrent file:</label>
<div class="controls">
<input type="file" class="input-xlarge" id="input_torrent" multiple/>
<p class="help-block">
Select the local torrent file to start download.
To add a magnet torrent url, use the add url option and add it there.
Note that you can select multiple torrent files to start at once.
</p>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<a href="#" onclick="add_torrent()" class="btn">Add</a>
<a href="#" onclick="clear_dialogs()" class="btn">Cancel</a>
</div>
</div>
<!-- add new torrent end }}}-->
<!--{{{ add new metalink -->
<div class="modal hide" id="new_metalink">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Add new Metalinks</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<fieldset>
<div class="control-group">
<label class="control-label" for="input_metalink">Select the Metalink file:</label>
<div class="controls">
<input type="file" class="input-xlarge" id="input_metalink" multiple/>
<p class="help-block">
Please select a local metalink file to initiate its downloads. Note that you
can select multiple metalink files at once to start
</p>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<a href="#" onclick="add_metalink()" class="btn">Add</a>
<a href="#" onclick="clear_dialogs()" class="btn">Cancel</a>
</div>
</div>
<!-- add new metalink end }}}-->
<!--{{{ add new Download template --> <!--{{{ add new Download template -->
<div class="modal hide" id="newDownload_modal"> <div class="modal hide" id="newDownload_modal">
@ -467,7 +593,6 @@
</div> </div>
<!-- add new Download template end }}}--> <!-- add new Download template end }}}-->
<!--{{{ global settings template start --> <!--{{{ global settings template start -->
<div class="modal hide" id="global_settings_modal"> <div class="modal hide" id="global_settings_modal">
<div class="modal-header"> <div class="modal-header">

164
js/script.js
View File

@ -5,6 +5,9 @@ var modals = {
global_settings_modal: undefined, global_settings_modal: undefined,
global_statistics_modal: undefined, global_statistics_modal: undefined,
about_modal: undefined, about_modal: undefined,
err_file_api_modal: undefined,
new_torrent_modal: undefined,
new_metalink_modal: undefined,
download_settings_modal: undefined download_settings_modal: undefined
}; };
var web_sock = undefined; var web_sock = undefined;
@ -59,7 +62,8 @@ var web_sock_message = function(message) {
for(var i = 0; i < web_sock_queue.length; i++) { for(var i = 0; i < web_sock_queue.length; i++) {
if(web_sock_queue[i].id === data.id) { if(web_sock_queue[i].id === data.id) {
if(data.error) { if(data.error) {
web_sock_queue[i].error(); if(web_sock_queue[i].error)
web_sock_queue[i].error();
} }
else { else {
web_sock_queue[i].success(data); web_sock_queue[i].success(data);
@ -166,7 +170,8 @@ var update_ui = function() {
$(function() { $(function() {
var modal_conf = { var modal_conf = {
show: false show: false,
backdrop: false
}; };
modals.err_connect = $('#error_connect').modal(modal_conf); modals.err_connect = $('#error_connect').modal(modal_conf);
modals.change_conf = $('#change_conf').modal(modal_conf); modals.change_conf = $('#change_conf').modal(modal_conf);
@ -175,6 +180,9 @@ $(function() {
modals.download_settings_modal = $('#download_settings_modal').modal(modal_conf); modals.download_settings_modal = $('#download_settings_modal').modal(modal_conf);
modals.global_statistics_modal = $('#global_statistics_modal').modal(modal_conf); modals.global_statistics_modal = $('#global_statistics_modal').modal(modal_conf);
modals.about_modal = $('#about_modal').modal(modal_conf); modals.about_modal = $('#about_modal').modal(modal_conf);
modals.err_file_api_modal = $('#error_file_api').modal(modal_conf);
modals.new_torrent_modal = $('#new_torrent').modal(modal_conf);
modals.new_metalink_modal = $('#new_metalink').modal(modal_conf);
if(WebSocket) if(WebSocket)
web_sock_init(); web_sock_init();
@ -185,6 +193,27 @@ $(function() {
$('.download_urls').html(""); $('.download_urls').html("");
modals.newDownload_modal.modal('show'); modals.newDownload_modal.modal('show');
}); });
$('#newDownload_torrent').click(function() {
$('#input_torrent').val("");
if(window.File && window.FileReader && window.FileList && window.Blob) {
modals.new_torrent_modal.modal('show');
}
else {
modals.err_file_api_modal.modal('show');
}
});
$('#newDownload_metalink').click(function() {
$('#input_metalink').val("");
if(window.File && window.FileReader && window.FileList && window.Blob) {
modals.new_metalink_modal.modal('show');
}
else {
modals.err_file_api_modal.modal('show');
}
});
$('#multiple_uris').click(function() { $('#multiple_uris').click(function() {
var url = $('#newDownload_url').val(); var url = $('#newDownload_url').val();
var html = '<li>'; var html = '<li>';
@ -382,11 +411,14 @@ function getTemplateCtx(data) {
percentage = percentage.toFixed(2); percentage = percentage.toFixed(2);
if(!percentage) percentage = 0; if(!percentage) percentage = 0;
var name; var name;
if(data.files[0].uris.length) { if(data.files[0].path && data.dir) {
name = data.files[0].uris[0].uri.replace(/^.*[\\\/]/, ''); //name = data.files[0].path.replace(/^.*[\\\/\]]/, '');
name = data.files[0].path.replace(data.dir, '').substr(1);
if(name.indexOf('/') !== -1)
name = name.substring(0, name.indexOf('/'));
} }
else { else {
name = data.files[0].path.replace(/^.*[\\\/\]]/, ''); name = data.files[0].uris[0].uri.replace(/^.*[\\\/]/, '');
} }
var eta = changeTime((data.totalLength-data.completedLength)/data.downloadSpeed); var eta = changeTime((data.totalLength-data.completedLength)/data.downloadSpeed);
@ -405,8 +437,11 @@ function getTemplateCtx(data) {
numPieces: data.numPieces, numPieces: data.numPieces,
pieceLength: changeLength(data.pieceLength, "B"), pieceLength: changeLength(data.pieceLength, "B"),
uploadLength: changeLength(data.uploadLength, "B"), uploadLength: changeLength(data.uploadLength, "B"),
upload_speed: changeLength(data.uploadSpeed, "B/s") connections: data.connections,
upload_speed: changeLength(data.uploadSpeed, "B/s"),
booleans: {
is_error: data.status === "error",
}
}; };
} }
function updateDownloadTemplates(elem, ctx) { function updateDownloadTemplates(elem, ctx) {
@ -584,7 +619,7 @@ function updateActiveDownloads(data) {
$('.download_active_item .download_pause').unbind('click').click(function() { $('.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: 'forcePause',
params: [gid], params: [gid],
success: function() { success: function() {
update_ui(); update_ui();
@ -820,3 +855,116 @@ function show_about() {
} }
}); });
} }
function force_pause_all() {
aria_syscall({
func: 'forcePauseAll',
success: update_ui
});
}
function force_remove_all(cb) {
var remove_params = [];
var func = function(downs) {
for(var i = 0; i < downs.length; i++) {
remove_params.push({
methodName: 'aria2.remove',
params: [downs[i].gid]
});
}
}
func(d_files.active);
func(d_files.waiting);
aria_syscall({
func: 'system.multicall',
params:[remove_params],
success: update_ui
}, true);
}
function force_purge_all() {
var remove_params = [];
var func = function(downs) {
for(var i = 0; i < downs.length; i++) {
remove_params.push({
methodName: 'aria2.remove',
params: [downs[i].gid]
});
}
}
func(d_files.active);
func(d_files.waiting);
aria_syscall({
func: 'system.multicall',
params:[remove_params],
success: function() {
aria_syscall({
func: "purgeDownloadResult",
success: update_ui
});
}
}, true);
}
function add_torrent() {
var file_node = $('#input_torrent')[0];
var files = file_node.files;
if (files.length) {
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = function(e) {
var txt = e.target.result;
txt = txt.split(',')[1];
aria_syscall({
func: 'addTorrent',
params: [txt],
success: function() {
clear_dialogs();
update_ui();
}
});
};
reader.onerror = function(e) {
alert('error reading torrent, your browser policy does not allow to read local files, please change to firefox');
};
reader.readAsDataURL(f);
}
}
else {
alert("please select a torrent first!");
}
}
function add_metalink() {
var file_node = $('#input_metalink')[0];
var files = file_node.files;
if (files.length) {
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
reader.onload = function(e) {
var txt = e.target.result;
txt = txt.split(',')[1];
aria_syscall({
func: 'addMetalink',
params: [txt],
success: function() {
clear_dialogs();
update_ui();
}
});
};
reader.onerror = function(e) {
alert('error reading metalink, your browser policy does not allow to read local files, please change to firefox');
};
reader.readAsDataURL(f);
}
}
else {
alert("please select a metalink first!");
}
}