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

fixed rpc and modal issues

Browse Source
This commit is contained in:
hamza zia 2013-01-15 16:19:26 +05:00
parent 571eaf8257
commit 50218debae
6 changed files with 241 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
angular.html
View File

@ -12,7 +12,9 @@
<link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/download.css">
<!-- external javascript dependencies --> <!-- external javascript dependencies -->

82
css/download.css Normal file
View File

@ -0,0 +1,82 @@
.download-name {
font-size: 12px;
}
.active-download {
width: 100%;
margin-bottom: 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);
}
.waiting-download {
width: 100%;
margin-bottom: 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);
}
.stopped-download {
width: 100%;
margin-bottom: 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);
}
.stats {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.stats li {
padding: 5px;
}
.download-controls {
width: 60px;
}
.download-controls .btn-group {
height: 70px;
width: 100%;
float: right;
}
.download-controls .btn-group .btn:nth-child(1) {
width: 70%;
}
.download-controls .btn-group .btn:nth-child(2) {
width: 30%;
}
.download-controls .btn-group .btn {
height: 100%;
}
.download-controls .btn-group .btn i {
height: 100%;
font-size: 28px;
color: gray;
}
.download-overview {
padding: 10px;
cursor: pointer;
}
.download-detail {
cursor: pointer;
}
.download-detail .stats li {
width: 150px;
margin-bottom: 5px;
}
.download-detail h4 {
margin-left: 10px;
}
.download-files {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.download-files li {
padding: 5px;
margin: 5px;
}

84
css/style.css
View File

@ -1,84 +1,6 @@
.download-name { /* fix modal overflow on low resolutions */
font-size: 12px; .modal {
} position: absolute;
.active-download {
width: 100%;
margin-bottom: 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);
}
.waiting-download {
width: 100%;
margin-bottom: 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);
}
.stopped-download {
width: 100%;
margin-bottom: 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);
}
.stats {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.stats li {
padding: 5px;
}
.download-controls {
width: 60px;
}
.download-controls .btn-group {
height: 70px;
width: 100%;
float: right;
}
.download-controls .btn-group .btn:nth-child(1) {
width: 70%;
}
.download-controls .btn-group .btn:nth-child(2) {
width: 30%;
}
.download-controls .btn-group .btn {
height: 100%;
}
.download-controls .btn-group .btn i {
height: 100%;
font-size: 28px;
color: gray;
}
.download-overview {
padding: 10px;
cursor: pointer;
}
.download-detail {
cursor: pointer;
}
.download-detail .stats li {
width: 150px;
margin-bottom: 5px;
}
.download-detail h4 {
margin-left: 10px;
}
.download-files {
width: 90%;
margin-left: auto;
margin-right: auto;
}
.download-files li {
padding: 5px;
margin: 5px;
} }
@media all and (min-width: 980px) { @media all and (min-width: 980px) {
body { body {

2
index.html
View File

@ -12,7 +12,9 @@
<link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/download.css">
<!-- external javascript dependencies --> <!-- external javascript dependencies -->

277
js/connection.js
View File

@ -1,154 +1,163 @@
var JsonRPC = function(conf) { var JsonRPC = function(conf) {
if (!this instanceof JsonRPC) if (!this instanceof JsonRPC)
return new JsonRPC(); return new JsonRPC();
this.avgTimeout = 2000; this.avgTimeout = 2000;
this.serverConf = conf; this.serverConf = conf;
}; };
JsonRPC.prototype = { JsonRPC.prototype = {
encode: function(obj) { encode: function(obj) {
return base64.btoa(JSON.stringify(obj)); return base64.btoa(JSON.stringify(obj));
}, },
ariaRequest: function(url, multicall, funcName, params, success, error) { ariaRequest: function(url, multicall, funcName, params, success, error) {
var startTime = new Date(); var startTime = new Date();
var conn = this; var conn = this;
$.ajax({ $.ajax({
url: url, url: url,
timeout: this.avgTimeout, timeout: this.avgTimeout,
data: { data: {
jsonrpc: 2.0, jsonrpc: 2.0,
id: 'webui', id: 'webui',
method: funcName.search(/\./g) == -1 ? 'aria2.' + funcName : funcName, method: funcName.search(/\./g) == -1 ? 'aria2.' + funcName : funcName,
params: params.length ? this.encode(params) : undefined params: params.length ? this.encode(params) : undefined
}, },
success: function(data) { success: function(data) {
conn.avgTimeout = 3 * (new Date() - startTime); conn.avgTimeout = 3 * (new Date() - startTime);
return success(data) return success(data)
}, },
error: error, error: error,
dataType: 'jsonp', dataType: 'jsonp',
jsonp: 'jsoncallback' jsonp: 'jsoncallback'
}); });
}, },
invoke: function(opts) { invoke: function(opts) {
var rpc = this; var rpc = this;
var scheme = rpc.serverConf.encryption ? 'https' : 'http'; var scheme = rpc.serverConf.encryption ? 'https' : 'http';
rpc.ariaRequest( rpc.ariaRequest(
scheme + '://' + rpc.serverConf.host + ':' + rpc.serverConf.port + '/jsonrpc', scheme + '://' + rpc.serverConf.host + ':' + rpc.serverConf.port + '/jsonrpc',
opts.multicall, opts.multicall,
opts.func, opts.func,
opts.params, opts.params,
opts.success, opts.success,
function() { function() {
// check if authentication details are given, if yes then use a hack to support // check if authentication details are given, if yes then use a hack to support
// http authentication otherwise emit error // http authentication otherwise emit error
if (!rpc.serverConf.user.length) { if (!rpc.serverConf.user.length) {
console.log("no user name and still error!!!"); console.log("no user name and still error!!!");
return opts.error(); return opts.error();
} }
var authUrl = scheme + '://' + var authUrl = scheme + '://' +
rpc.serverConf.user + ":" + rpc.serverConf.user + ":" +
rpc.serverConf.pass + "@" + rpc.serverConf.pass + "@" +
rpc.serverConf.host + ':' + rpc.serverConf.host + ':' +
rpc.serverConf.port + '/jsonrpc'; rpc.serverConf.port + '/jsonrpc';
// hack is to basically inject an image with same uri as the aria2 rpc url, // hack is to basically inject an image with same uri as the aria2 rpc url,
// most browsers will then cache the authentication details and we dont have // most browsers will then cache the authentication details and we dont have
// to give them next time we make a request // to give them next time we make a request
var img = $('<img/>').attr("src", authUrl); var img = $('<img/>').attr("src", authUrl);
$('body').append(img); $('body').append(img);
img.remove(); img.remove();
// timeout to let the image load and then make a request, // timeout to let the image load and then make a request,
setTimeout(function() { setTimeout(function() {
rpc.ariaRequest( rpc.ariaRequest(
authUrl, authUrl,
opts.multicall, opts.multicall,
opts.params, opts.params,
opts.success, opts.success,
opts.error opts.error
); );
}, rpc.avgTimeout); }, rpc.avgTimeout);
} }
); );
} }
}; };
var SocketRPC = function(conf) { var SocketRPC = function(conf) {
if (!this instanceof SocketRPC) if (!this instanceof SocketRPC)
return new SocketRPC(); return new SocketRPC();
var rpc = this; var rpc = this;
rpc.serverConf = conf; rpc.initialized = false;
rpc.initialized = false; rpc.serverConf = conf;
rpc.handles = []; rpc.handles = [];
var scheme = rpc.serverConf.encryption ? 'wss' : 'ws'; var scheme = rpc.serverConf.encryption ? 'wss' : 'ws';
rpc.sock = new WebSocket(scheme + '://' + conf.host + ':' + conf.port + '/jsonrpc');
rpc.sock.onopen = function() { if (typeof WebSocket == "undefined")
rpc.initialized = true; return;
};
rpc.sock.onclose = rpc.sock.onerror = function() { try {
_.each(rpc.handles, function(h) { h.error() }); rpc.sock = new WebSocket(scheme + '://' + conf.host + ':' + conf.port + '/jsonrpc');
rpc.handles = []; rpc.sock.onopen = function() {
}; rpc.initialized = true;
rpc.sock.onmessage = function(message) { };
var data = JSON.parse(message.data); rpc.sock.onclose = rpc.sock.onerror = function() {
for (var i = rpc.handles.length; i--; ) { _.each(rpc.handles, function(h) { h.error() });
if (rpc.handles[i].id === data.id) { rpc.handles = [];
if (data.error) };
rpc.handles[i].error(); rpc.sock.onmessage = function(message) {
else var data = JSON.parse(message.data);
rpc.handles[i].success(data); for (var i = rpc.handles.length; i--; ) {
rpc.handles.splice(i, 1); if (rpc.handles[i].id === data.id) {
return; if (data.error)
} rpc.handles[i].error();
} else
}; rpc.handles[i].success(data);
rpc.handles.splice(i, 1);
return;
}
}
};
}
catch(ex) {
rpc.initialized = false;
}
} }
SocketRPC.prototype = { SocketRPC.prototype = {
invoke: function(opts) { invoke: function(opts) {
var data = { var data = {
jsonrpc: 2.0, jsonrpc: 2.0,
id: 'webui_' + utils.randStr(), id: 'webui_' + utils.randStr(),
method: opts.func.search(/\./g) == -1 ? 'aria2.' + opts.func : opts.func, method: opts.func.search(/\./g) == -1 ? 'aria2.' + opts.func : opts.func,
params: opts.params.length ? opts.params : undefined params: opts.params.length ? opts.params : undefined
}; };
this.handles.push({ this.handles.push({
success: opts.success, success: opts.success,
error: opts.error, error: opts.error,
id: data.id id: data.id
}); });
this.sock.send(JSON.stringify(data)); this.sock.send(JSON.stringify(data));
}, },
}; };
var AriaConnection = function(conf) { var AriaConnection = function(conf) {
var conf = conf || { var conf = conf || {
host: 'localhost', host: 'localhost',
port: 6800, port: 6800,
user: '', user: '',
pass: '' pass: ''
}; };
var jRPC = new JsonRPC(conf); var jRPC = new JsonRPC(conf);
if (typeof WebSocket != "undefined") { if (typeof WebSocket != "undefined") {
var sockRPC = new SocketRPC(conf); var sockRPC = new SocketRPC(conf);
} }
return { return {
conf: conf, conf: conf,
invoke: function(opts) { invoke: function(opts) {
opts = utils.mixin(opts, { opts = utils.mixin(opts, {
success: function() {}, success: function() {},
error: function() {}, error: function() {},
params: [], params: [],
func: '' func: ''
}); });
if (!sockRPC || !sockRPC.initialized) if (!sockRPC || !sockRPC.initialized)
return jRPC.invoke(opts); return jRPC.invoke(opts);
else else
return sockRPC.invoke(opts); return sockRPC.invoke(opts);
} }
}; };
} }

13
js/services/rpc/sockcall.js
View File

@ -78,10 +78,15 @@ app.factory('$sockcall', ['$_', '$json', '$name', '$utils', function(_, JSON, na
this.onerror(); this.onerror();
} }
this.sock = new WebSocket(this.scheme + '://' + conf.host + ':' + conf.port + '/jsonrpc'); try {
this.sock.onopen = this.onopen; this.sock = new WebSocket(this.scheme + '://' + conf.host + ':' + conf.port + '/jsonrpc');
this.sock.onclose = this.sock.onerror = this.onerror; this.sock.onopen = this.onopen;
this.sock.onmessage = this.onmessage; this.sock.onclose = this.sock.onerror = this.onerror;
this.sock.onmessage = this.onmessage;
}
catch (ex) {
// ignoring IE securty exception on local ip addresses
}
}, },
}; };
}]); }]);