basic download display sucess!!
This commit is contained in:
Hamza Zia
parent
708bbd1ea0
commit
5d779e3b1a
47
index.html
47
index.html
|
|
@ -22,6 +22,22 @@
|
|||
<script src="js/libs/bootstrap.js"></script>
|
||||
<script src="js/libs/mustache.js"></script>
|
||||
|
||||
<script type="text/mustache" id="download_item_template">
|
||||
<div class="row download_item">
|
||||
<div class="span8">
|
||||
<h3>{{name}}</h3>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<button class="btn btn-mini"><i class="icon-pause"></i>Pause</button>
|
||||
<button class="btn btn-mini btn-danger"><i class="icon-remove"></i> Delete</button>
|
||||
<span class="label label-success">Status: {{status}} {{percentage}}%</span>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="span12 progress progress-striped">
|
||||
<div class="bar" style="width: {{percentage}}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
padding-top: 60px;
|
||||
|
|
@ -51,34 +67,12 @@
|
|||
</div>
|
||||
|
||||
<div role="main" class="container">
|
||||
<h2>Pending Downloads</h2>
|
||||
<table id="d_table" class="table table-bordered">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Progress</th>
|
||||
<th>Size</th>
|
||||
<th>Download Speed</th>
|
||||
</tr>
|
||||
</table>
|
||||
<h2>Current Downloads</h2>
|
||||
<!-- Download items here -->
|
||||
<div id="downloads">
|
||||
<h2>Current Downloads</h2>
|
||||
<div class="download_item">
|
||||
<div class="row">
|
||||
<div class="span8">
|
||||
<h3>Sample Download</h3>
|
||||
</div>
|
||||
<div class="span4">
|
||||
<button class="btn btn-mini"><i class="icon-pause"></i>Pause</button>
|
||||
<button class="btn btn-mini btn-danger"><i class="icon-remove"></i> Delete</button>
|
||||
<span class="label label-success">Status: Downloading 43%</span>
|
||||
</div>
|
||||
<br><br>
|
||||
<div class="span12 progress progress-striped active">
|
||||
<div class="bar" style="width: 40%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<h3 id="console"></h3>
|
||||
<footer>
|
||||
intital footer!!
|
||||
|
|
@ -153,6 +147,7 @@
|
|||
<label class="control-label" for="newDownload_url">Enter url for the Download:</label>
|
||||
<div class="controls">
|
||||
<input type="text" class="input-xlarge" id="newDownload_url" placeholder="http://example.com"/>
|
||||
<span class="help-block">URI can be HTTP(S)/FTP/BitTorrent Magnet URI</span>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
|
|||
1
js/base64.js
Normal file
1
js/base64.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
|
||||
|
|
@ -6,5 +6,60 @@ window.log = function f(){ log.history = log.history || []; log.history.push(arg
|
|||
(function(a){function b(){}for(var c="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","),d;!!(d=c.pop());){a[d]=a[d]||b;}})
|
||||
(function(){try{console.log();return window.console;}catch(a){return (window.console={});}}());
|
||||
|
||||
var base64 = (function (obj) {
|
||||
var a64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/',
|
||||
a256 = {
|
||||
indexOf: function (c) {
|
||||
return c.charCodeAt(0);
|
||||
},
|
||||
charAt: String.fromCharCode
|
||||
};
|
||||
|
||||
function code(s, discard, alpha, beta, w1, w2) {
|
||||
s = String(s);
|
||||
var b = 0, x = '', i, c, bs = 1, sb = 1, length = s.length, tmp;
|
||||
for (i = 0; i < length || (!discard && sb > 1); i += 1) {
|
||||
b *= w1;
|
||||
bs *= w1;
|
||||
if (i < length) {
|
||||
c = alpha.indexOf(s.charAt(i));
|
||||
if (c <= -1 || c >= w1) {
|
||||
throw new RangeError();
|
||||
}
|
||||
sb *= w1;
|
||||
b += c;
|
||||
}
|
||||
while (bs >= w2) {
|
||||
bs /= w2;
|
||||
if (sb > 1) {
|
||||
tmp = b;
|
||||
b %= bs;
|
||||
x += beta.charAt((tmp - b) / bs);
|
||||
sb /= w2;
|
||||
}
|
||||
}
|
||||
}
|
||||
return x;
|
||||
}
|
||||
|
||||
obj.btoa = function (s) {
|
||||
s = code(s, false, a256, a64, 256, 64);
|
||||
return s + '===='.slice((s.length % 4) || 4);
|
||||
};
|
||||
|
||||
obj.atob = function (s) {
|
||||
var i;
|
||||
s = String(s).split('=');
|
||||
for (i = s.length - 1; i >= 0; i -= 1) {
|
||||
if (s[i].length % 4 === 1) {
|
||||
throw new RangeError();
|
||||
}
|
||||
s[i] = code(s[i], true, a64, a256, 64, 256);
|
||||
}
|
||||
return s.join('');
|
||||
};
|
||||
|
||||
return obj;
|
||||
}({}));
|
||||
|
||||
|
||||
|
|
|
|||
65
js/script.js
65
js/script.js
|
|
@ -4,6 +4,11 @@ var modals = {
|
|||
newDownload_modal: undefined
|
||||
|
||||
};
|
||||
var clear_dialogs = function() {
|
||||
modals.err_connect = $('#error_connect').modal('hide');
|
||||
modals.change_conf = $('#change_conf').modal('hide');
|
||||
modals.newDownload_modal = $('#newDownload_modal').modal('hide');
|
||||
};
|
||||
var server_conf = {
|
||||
host: 'localhost',
|
||||
port: 6800
|
||||
|
|
@ -15,6 +20,7 @@ var custom_aria2_connect = function() {
|
|||
var update_server_conf = function() {
|
||||
server_conf.host = $('#input_host').val();
|
||||
server_conf.port = $('#input_port').val();
|
||||
clear_dialogs();
|
||||
update_ui();
|
||||
};
|
||||
var aria_syscall = function(conf) {
|
||||
|
|
@ -36,14 +42,10 @@ var aria_syscall = function(conf) {
|
|||
}
|
||||
var log = $('#console');
|
||||
var update_ui = function() {
|
||||
modals.err_connect = $('#error_connect').modal('hide');
|
||||
modals.change_conf = $('#change_conf').modal('hide');
|
||||
modals.newDownload_modal = $('#newDownload_modal').modal('hide');
|
||||
log.append('connecting!!!<br>');
|
||||
|
||||
aria_syscall({
|
||||
func: 'getVersion',
|
||||
sucess: function(data) {
|
||||
log.append(JSON.stringify(data) + '<br>');
|
||||
updateDownloads();
|
||||
},
|
||||
error: function() {
|
||||
|
|
@ -54,6 +56,7 @@ var update_ui = function() {
|
|||
};
|
||||
|
||||
$(function() {
|
||||
clear_dialogs();
|
||||
update_ui();
|
||||
$('#newDownload').click(function() {
|
||||
modals.newDownload_modal.modal('show');
|
||||
|
|
@ -67,55 +70,50 @@ $(function() {
|
|||
updateStopDownloads();
|
||||
}*/
|
||||
function newDownload() {
|
||||
|
||||
var url = $('#newDownload_url').val();
|
||||
aria_syscall({
|
||||
func: 'addUri',
|
||||
params: [["google.com"]],
|
||||
params: base64.btoa(JSON.stringify([[url]])),
|
||||
sucess: function() {
|
||||
clear_dialogs();
|
||||
update_ui();
|
||||
}
|
||||
});
|
||||
alert(url);
|
||||
}
|
||||
|
||||
var d_files = [];
|
||||
function d_fill() {
|
||||
for(var i = 0; i < 10; i++) {
|
||||
addDownload({
|
||||
name: 'final name:' + i,
|
||||
gid: i,
|
||||
status: 'active',
|
||||
totalLength: (i + 15) * 20,
|
||||
completedLength: (i + 15) * 19,
|
||||
downloadSpeed: 200 + i
|
||||
});
|
||||
}
|
||||
}
|
||||
function addDownload(conf) {
|
||||
d_files.push(conf);
|
||||
|
||||
var d_table = $('#d_table');
|
||||
var down = $('<tr></tr>');
|
||||
down.append($('<td></td>').text(conf.name));
|
||||
down.append($('<td></td>').text(conf.completedLength));
|
||||
down.append($('<td></td>').text(conf.totalLength));
|
||||
down.append($('<td></td>').text(conf.downloadSpeed));
|
||||
console.log(down.html());
|
||||
down.appendTo(d_table);
|
||||
|
||||
}
|
||||
function updateDownloads() {
|
||||
aria_syscall({
|
||||
func: 'tellActive',
|
||||
sucess: function(data) {
|
||||
log.append("download Active are:" + JSON.stringify(data) + '<br>');
|
||||
var down_template = $('#download_item_template').text();
|
||||
var results = data.result;
|
||||
$('#downloads').html("");
|
||||
for(var i = 0; i < results.length; i++) {
|
||||
console.log('adding downloads!!!');
|
||||
var percentage =(results[i].completedLength / results[i].totalLength)*100;
|
||||
percentage = Math.round(percentage*1000)/1000;
|
||||
ctx = {
|
||||
name: results[i].files[0].path,
|
||||
status: results[i].status,
|
||||
percentage:percentage
|
||||
};
|
||||
var item = Mustache.render(down_template, ctx);
|
||||
console.log(ctx);
|
||||
console.log(results[i]);
|
||||
$('#downloads').append(item);
|
||||
}
|
||||
if(results && results.length === 0) {
|
||||
$('#downloads').append('no downloads!!!!');
|
||||
}
|
||||
},
|
||||
error: function() {
|
||||
modals.err_connect.modal('show');
|
||||
log.append('error connecting!!<br>');
|
||||
}
|
||||
});
|
||||
d_fill();
|
||||
}
|
||||
|
||||
function updateWaiting() {
|
||||
|
|
@ -125,3 +123,4 @@ function updateWaiting() {
|
|||
function updateStopDownloads() {
|
||||
|
||||
}
|
||||
setInterval(update_ui, 1000);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user