basic download resume and pause functionality added!!!

README.md

@@ -3,7 +3,12 @@ webui-aria2
 
 The aim for this project is to create the worlds best and hottest interface to interact with aria2. Aria2 is the worlds best file downloader, but sometimes the command line just brings more power than necessary.
 
-Very simple to use, no build scripts, no installation scripts. Just download, fireup your favourite web browser and open index.html and start downloading files!!
+Very simple to use, no build scripts, no installation scripts. Just download, fireup your favourite web browser and open index.html and start downloading files!! Be sure to start aria2 in the background either in your local machine or in a remote one. You can do that as follows:
+aria2c --enable-rpc
+
+Status
+===========
+Basic working prototype with minimal functionality. A lot more to features to come so stay tuned.
 
 
 Dependencies

index.html

@@ -24,16 +24,16 @@
 
   <script type="text/mustache" id="download_active_template">
 	  <div class="row download_active_item" data-gid="{{gid}}">
-		<div class="span5">
+		<div class="span5" style="overflow: hidden;">
 			<h3>{{name}}</h3>
 		</div>
 		<div class="span4">
-			<span class="badge badge-success">Active:{{status}}</span>
+			<span class="badge badge-success">Status: {{status}}</span>
 		</div>
 		<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>
+				<button class="btn btn-mini btn-danger download_remove"><i class="icon-remove"></i> Remove</button>
 			</div>
 		</div>
 		<br><br>
@@ -44,16 +44,16 @@
   </script>
   <script type="text/mustache" id="download_waiting_template">
 	  <div class="row download_waiting_item" data-gid="{{gid}}">
-		<div class="span5">
+		<div class="span5" style="overflow: hidden;">
 			<h3>{{name}}</h3>
 		</div>
 		<div class="span4">
-			<span class="badge badge-success">Waiting:{{status}}</span>
+			<span class="badge badge-info">Status: {{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>
+				<button class="btn btn-mini btn-danger download_remove"><i class="icon-remove"></i> Remove</button>
 			</div>
 		</div>
 		<br><br>
@@ -64,16 +64,16 @@
   </script>
   <script type="text/mustache" id="download_stopped_template">
 	  <div class="row download_stopped_item" data-gid="{{gid}}">
-		<div class="span5">
+		<div class="span5" style="overflow: hidden;">
 			<h3>{{name}}</h3>
 		</div>
 		<div class="span4">
-			<span class="badge badge-success">Stopped:{{status}}</span>
+			<span class="badge badge-important">Status: {{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 download_restart"><i class="icon-repeat"></i> Restart</button>
-				<button class="btn btn-mini btn-danger"><i class="icon-remove"></i> Delete</button>
+				<button class="btn btn-mini btn-danger download_remove"><i class="icon-fire"></i> Purge</button>
 			</div>
 		</div>
 		<br><br>
@@ -123,10 +123,6 @@
 	<h2>Stopped Downloads</h2>
 	<div id="stopped_downloads"></div>
 
-	<h3 id="console"></h3>
-	<footer>
-		intital footer!!
-	</footer>
 </div>
 
 

js/;

@@ -0,0 +1,246 @@
+var modals = {
+	err_connect: undefined,
+	change_conf: undefined,
+	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
+};
+var custom_aria2_connect = function() {
+	modals.err_connect.modal('hide');
+	modals.change_conf.modal('show');
+};
+var update_server_conf = function() {
+	server_conf.host = $('#input_host').val();
+	server_conf.port = $('#input_port').val();
+	clear_dialogs();
+	update_ui();
+};
+
+function param_encode(param) {
+	if(param) {
+		param = base64.btoa(JSON.stringify(param));
+	}
+	return param;
+}
+var aria_syscall = function(conf, multicall) {
+	$.ajax({
+		url: 'http://' + server_conf.host + ':' + server_conf.port + '/jsonrpc',
+		timeout: 1000,
+		data: {
+			jsonrpc: 2.0,
+			id: 'webui',
+			method: multicall? conf.func:'aria2.' + conf.func,
+			params: param_encode(conf.params)
+		},
+		success: conf.sucess,
+		error: conf.error,
+		dataType: 'jsonp',
+		jsonp: 'jsoncallback'
+	});
+
+}
+var log = $('#console');
+var update_ui = function() {
+	updateDownloads();
+};
+
+$(function() {
+	clear_dialogs();
+	update_ui();
+	$('#newDownload').click(function() {
+		modals.newDownload_modal.modal('show');
+	});
+	$('#addNewDownload').click(newDownload);
+});
+
+function newDownload() {
+
+	var url = $('#newDownload_url').val();
+	aria_syscall({
+		func: 'addUri',
+		params: [[url]],
+		sucess: function() {
+			clear_dialogs();
+			update_ui();
+		}
+	});
+}
+
+var d_files = {
+	active: [],
+	waiting: [],
+	stopped: []
+};
+function updateActiveDownloads(data) {
+	var down_template = $('#download_active_template').text();
+	$('#active_downloads').html("");
+	if(!data || (data && data.length === 0)) {
+		$('#active_downloads').append('no active 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);
+		$('#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);
+			}
+		});
+	});
+	$('.download_active_item .download_remove').click(function() {
+		var gid = $(this).parents('.download_active_item').attr('data-gid');
+		aria_syscall({
+			func: 'remove',
+			params: [gid],
+			sucess: function() {
+				update_ui();
+			},
+			error: function(err) {
+				console.log("error removing active download!!!");
+				console.log(err);
+			}
+		});
+	});
+}
+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);
+			}
+		});
+	});
+	$('.download_waiting_item .download_remove').click(function() {
+		var gid = $(this).parents('.download_waiting_item').attr('data-gid');
+		aria_syscall({
+			func: 'remove',
+			params: [gid],
+			sucess: function() {
+				update_ui();
+			},
+			error: function(err) {
+				console.log("error removing waiting download!!!");
+				console.log(err);
+			}
+		});
+	});
+}
+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_restart').click(function() {
+		var gid = $(this).parents('.download_stopped_item').attr('data-gid');
+		var files;
+		var uris = [];
+		for(var i = 0; i < d_files.stopped.length; i++) {
+			if(d_files.stopped[i].gid === gid) {
+				files = d_files.stopped[i].files;
+				break;
+			}
+		}
+		for(var i = 0; i < files.length; i++) {
+			var tmp_uris = [];
+			for(var j = 0; j < files[i].uris.length; j++) {
+				tmp_uris.push(files[i].uris[j].uri;
+			}
+			uris.push(tmp_uris);
+		}
+	});
+}
+
+
+function mergeDownloads(data) {
+	d_files.active = data[0][0];
+	d_files.waiting = data[1][0];
+	d_files.stopped = data[2][0];
+}
+
+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) {
+			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);

js/;w

@@ -0,0 +1,275 @@
+var modals = {
+	err_connect: undefined,
+	change_conf: undefined,
+	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
+};
+var custom_aria2_connect = function() {
+	modals.err_connect.modal('hide');
+	modals.change_conf.modal('show');
+};
+var update_server_conf = function() {
+	server_conf.host = $('#input_host').val();
+	server_conf.port = $('#input_port').val();
+	clear_dialogs();
+	update_ui();
+};
+
+function param_encode(param) {
+	if(param) {
+		param = base64.btoa(JSON.stringify(param));
+	}
+	return param;
+}
+var aria_syscall = function(conf, multicall) {
+	$.ajax({
+		url: 'http://' + server_conf.host + ':' + server_conf.port + '/jsonrpc',
+		timeout: 1000,
+		data: {
+			jsonrpc: 2.0,
+			id: 'webui',
+			method: multicall? conf.func:'aria2.' + conf.func,
+			params: param_encode(conf.params)
+		},
+		success: conf.sucess,
+		error: conf.error,
+		dataType: 'jsonp',
+		jsonp: 'jsoncallback'
+	});
+
+}
+var update_ui = function() {
+	updateDownloads();
+};
+
+$(function() {
+	clear_dialogs();
+	update_ui();
+	$('#newDownload').click(function() {
+		modals.newDownload_modal.modal('show');
+	});
+	$('#addNewDownload').click(newDownload);
+});
+
+function addDownload(uris) {
+	console.log("adding download:");
+	console.log(uris);
+	aria_syscall({
+		func: 'addUri',
+		params: uris,
+		sucess: function() {
+			clear_dialogs();
+			update_ui();
+		}
+	});
+}
+
+function newDownload() {
+	var url = $('#newDownload_url').val();
+	addDownload([[url]]);
+}
+
+var d_files = {
+	active: [],
+	waiting: [],
+	stopped: []
+};
+function updateActiveDownloads(data) {
+	var down_template = $('#download_active_template').text();
+	$('#active_downloads').html("");
+	if(!data || (data && data.length === 0)) {
+		$('#active_downloads').append('no active 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);
+		$('#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);
+			}
+		});
+	});
+	$('.download_active_item .download_remove').click(function() {
+		var gid = $(this).parents('.download_active_item').attr('data-gid');
+		aria_syscall({
+			func: 'remove',
+			params: [gid],
+			sucess: function() {
+				update_ui();
+			},
+			error: function(err) {
+				console.log("error removing active download!!!");
+				console.log(err);
+			}
+		});
+	});
+}
+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 yet!!!");
+				console.log(err);
+			}
+		});
+	});
+	$('.download_waiting_item .download_remove').click(function() {
+		var gid = $(this).parents('.download_waiting_item').attr('data-gid');
+		aria_syscall({
+			func: 'remove',
+			params: [gid],
+			sucess: function() {
+				update_ui();
+			},
+			error: function(err) {
+				console.log("error removing waiting download!!!");
+				console.log(err);
+			}
+		});
+	});
+}
+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 yet!!!!');
+	}
+	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_remove').click(function() {
+		var gid = $(this).parents('.download_stopped_item').attr('data-gid');
+		aria_syscall({
+			func: 'removeDownloadResult',
+			params: [gid],
+			sucess: function() {
+				update_ui();
+			},
+			error: function(err) {
+				console.log("error removing stopped download!!!");
+				console.log(err);
+			}
+		});
+	});
+	$('.download_stopped_item .download_restart').click(function() {
+		var gid = $(this).parents('.download_stopped_item').attr('data-gid');
+		var files;
+		var uris = [];
+		for(var i = 0; i < d_files.stopped.length; i++) {
+			if(d_files.stopped[i].gid === gid) {
+				files = d_files.stopped[i].files;
+				break;
+			}
+		}
+		for(var i = 0; i < files.length; i++) {
+			var tmp_uris = [];
+			for(var j = 0; j < files[i].uris.length; j++) {
+				tmp_uris.push(files[i].uris[j].uri);
+			}
+			uris.push(tmp_uris);
+		}
+		addDownload(uris);
+		aria_syscall({
+			func: 'removeDownloadResult',
+			params: [gid],
+			sucess: function() {
+				update_ui();
+			},
+			error: function(err) {
+				console.log("error removing stopped download!!!");
+				console.log(err);
+			}
+		});
+	});
+}
+
+
+function mergeDownloads(data) {
+	d_files.active = data[0][0];
+	d_files.waiting = data[1][0];
+	d_files.stopped = data[2][0];
+}
+
+function updateDownloads() {
+	aria_syscall({
+		func: 'system.multicall',
+		params:[[{
+			methodName: 'aria2.tellActive'
+		}, {
+			methodName: 'aria2.tellWaiting',
+			params: [0,100]
+		}, {
+			methodName: 'aria2.tellStopped',
+			params: [0, 100]
+		}]],
+		sucess: function(data) {
+			mergeDownloads(data.result);
+			updateActiveDownloads(d_files.active);
+			updateWaitingDownloads(d_files.waiting);
+			updateStoppedDownloads(d_files.stopped);
+		},
+		error: function() {
+			modals.err_connect.modal('show');
+		}
+	}, true);
+}
+
+setInterval(update_ui, 1000);

js/script.js

@@ -47,7 +47,6 @@ var aria_syscall = function(conf, multicall) {
 	});
 
 }
-var log = $('#console');
 var update_ui = function() {
 	updateDownloads();
 };
@@ -61,12 +60,12 @@ $(function() {
 	$('#addNewDownload').click(newDownload);
 });
 
-function newDownload() {
+function addDownload(uris) {
-
+	console.log("adding download:");
-	var url = $('#newDownload_url').val();
+	console.log(uris);
 	aria_syscall({
 		func: 'addUri',
-		params: [[url]],
+		params: uris,
 		sucess: function() {
 			clear_dialogs();
 			update_ui();
@@ -74,6 +73,11 @@ function newDownload() {
 	});
 }
 
+function newDownload() {
+	var url = $('#newDownload_url').val();
+	addDownload([[url]]);
+}
+
 var d_files = {
 	active: [],
 	waiting: [],
@@ -83,7 +87,7 @@ function updateActiveDownloads(data) {
 	var down_template = $('#download_active_template').text();
 	$('#active_downloads').html("");
 	if(!data || (data && data.length === 0)) {
-		$('#active_downloads').append('no active downloads!!!!');
+		$('#active_downloads').append('no active downloads yet!!!!');
 	}
 	for(var i = 0; i < data.length; i++) {
 		var percentage =(data[i].completedLength / data[i].totalLength)*100;
@@ -111,12 +115,26 @@ function updateActiveDownloads(data) {
 			}
 		});
 	});
+	$('.download_active_item .download_remove').click(function() {
+		var gid = $(this).parents('.download_active_item').attr('data-gid');
+		aria_syscall({
+			func: 'remove',
+			params: [gid],
+			sucess: function() {
+				update_ui();
+			},
+			error: function(err) {
+				console.log("error removing active download!!!");
+				console.log(err);
+			}
+		});
+	});
 }
 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!!!!');
+		$('#waiting_downloads').append('no waiting downloads yet!!!!');
 	}
 	for(var i = 0; i < data.length; i++) {
 		var percentage =(data[i].completedLength / data[i].totalLength)*100;
@@ -144,12 +162,26 @@ function updateWaitingDownloads(data) {
 			}
 		});
 	});
+	$('.download_waiting_item .download_remove').click(function() {
+		var gid = $(this).parents('.download_waiting_item').attr('data-gid');
+		aria_syscall({
+			func: 'remove',
+			params: [gid],
+			sucess: function() {
+				update_ui();
+			},
+			error: function(err) {
+				console.log("error removing waiting download!!!");
+				console.log(err);
+			}
+		});
+	});
 }
 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!!!!');
+		$('#stopped_downloads').append('no stopped downloads yet!!!!');
 	}
 	for(var i = 0; i < data.length; i++) {
 		var percentage =(data[i].completedLength / data[i].totalLength)*100;
@@ -163,16 +195,46 @@ function updateStoppedDownloads(data) {
 		var item = Mustache.render(down_template, ctx);
 		$('#stopped_downloads').append(item);
 	}
-	$('.download_stopped_item .download_play').click(function() {
+	$('.download_stopped_item .download_remove').click(function() {
 		var gid = $(this).parents('.download_stopped_item').attr('data-gid');
 		aria_syscall({
-			func: 'unpause',
+			func: 'removeDownloadResult',
 			params: [gid],
 			sucess: function() {
 				update_ui();
 			},
 			error: function(err) {
-				console.log("error playing stopped download!!!");
+				console.log("error removing stopped download!!!");
+				console.log(err);
+			}
+		});
+	});
+	$('.download_stopped_item .download_restart').click(function() {
+		var gid = $(this).parents('.download_stopped_item').attr('data-gid');
+		var files;
+		var uris = [];
+		for(var i = 0; i < d_files.stopped.length; i++) {
+			if(d_files.stopped[i].gid === gid) {
+				files = d_files.stopped[i].files;
+				break;
+			}
+		}
+		for(var i = 0; i < files.length; i++) {
+			var tmp_uris = [];
+			for(var j = 0; j < files[i].uris.length; j++) {
+				tmp_uris.push(files[i].uris[j].uri);
+			}
+			uris.push(tmp_uris);
+		}
+		addDownload(uris);
+		aria_syscall({
+			func: 'removeDownloadResult',
+			params: [gid],
+			sucess: function() {
+				update_ui();
+			},
+			error: function(err) {
+				console.log("error removing stopped download!!!");
 				console.log(err);
 			}
 		});
@@ -193,13 +255,12 @@ function updateDownloads() {
 			methodName: 'aria2.tellActive'
 		}, {
 			methodName: 'aria2.tellWaiting',
-			params: [0,5]
+			params: [0,100]
 		}, {
 			methodName: 'aria2.tellStopped',
-			params: [0, 5]
+			params: [0, 100]
 		}]],
 		sucess: function(data) {
-			//updateActiveDownloads(data.result);
 			mergeDownloads(data.result);
 			updateActiveDownloads(d_files.active);
 			updateWaitingDownloads(d_files.waiting);
@@ -207,7 +268,6 @@ function updateDownloads() {
 		},
 		error: function() {
 			modals.err_connect.modal('show');
-			log.append('error connecting for downloads!!<br>');
 		}
 	}, true);
 }