added global statistics to tweat the webui

This commit is contained in:
hamza zia 2014-06-03 03:36:21 +08:00
parent 50567d98fa
commit b85de64746
11 changed files with 93 additions and 46 deletions

View File

@ -3,7 +3,7 @@ webui-aria2
![Main interface](/screenshots/overview.png?raw=true) ![Main interface](/screenshots/overview.png?raw=true)
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 brings more power than necessary. The project was created as part of the GSOC scheme with tremendous support and feedback from the aria2 community. 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 brings more power than necessary. The project was initially created as part of the GSOC scheme, however it has rapidly grown and changed with tremendous support and feedback from the aria2 community.
Very simple to use, no build scripts, no installation scripts. First start aria2 in the background either in your local machine or in a remote one. You can do that as follows: Very simple to use, no build scripts, no installation scripts. First start aria2 in the background either in your local machine or in a remote one. You can do that as follows:
````bash ````bash
@ -13,13 +13,17 @@ If aria2 is not installed in your local machine then head on to http://aria2.sou
Then download the webui, you can either do that by downloading this repository and running index.html in the browser. Or you could just head on to http://ziahamza.github.io/webui-aria2/ and just start downloading files! After that you can also save it for offline use by saving from the browser save page as option. Then download the webui, you can either do that by downloading this repository and running index.html in the browser. Or you could just head on to http://ziahamza.github.io/webui-aria2/ and just start downloading files! After that you can also save it for offline use by saving from the browser save page as option.
Configuration
=============
Read and edit [configuration.js](configuration.js).
Dependencies Dependencies
============ ============
Well, you need aria2. And a web browser (if that even counts!) Well, you need aria2. And a web browser (if that even counts!)
Support Support
======= =======
For any support, feature request and bug report add an issue in the github project tab or head on the aria2 forums (https://sourceforge.net/apps/phpbb/aria2) and post your issue there. For any support, feature request and bug report add an issue in the github project. [link](https://github.com/ziahamza/webui-aria2/issues)
License License
======= =======

37
configuration.js Normal file
View File

@ -0,0 +1,37 @@
angular
.module('webui.services.configuration', [])
.constant('$name', 'webui-aria2') // name used accross the entire UI
.constant('$globalTimeout', 1000) // interval to update the individual downloads
.constant('$authconf', { // default authentication configuration, never fill it in case the webui is hosted in public IP as it can be compromised
host: 'localhost',
port: 6800,
encrypt: false,
auth: { // either add the token field or the user and pass field, not both.
// token: '$YOUR_SECRET_ATOKEN$',
// user: '*YOUR_USERNAME*',
// pass: '*YOUR_SECRET_PASS*',
}
})
.constant('$enable', {
torrent: true, // bittorrent support only enabled if supported by aria2 build, set to false otherwise to permanantly disable it
metalink: true, // metalink support only enabled if supported by aria2 build, set to false to permanantly disable it
sidebar: { // configuration related to the sidebar next to the list of downloads
show: true, // set to false to completly hide the sidebar. Other elements inside will be automatically hidden
stats: true, // set to false to hide the global statistic section (containts the speed graph for now)
filters: true, // set to false to hide the Download Filters
starredProps: true, // only shown when atleast one property is added to the starred list, set to false to permanantly hide the Quick Access Settings inside the sidebar
}
})
.constant('$starredProps', [ // default list of Quick Access Properties. Can be overwriden by making modification through the Global Settings dialog
// go to Global Settings dialog to see their description
'dir', 'conf-path', 'auto-file-renaming', 'max-connection-per-server',
])
;

View File

@ -45,6 +45,7 @@
<!-- webui core --> <!-- webui core -->
<script src="js/init.js"></script> <script src="js/init.js"></script>
<script src="configuration.js"></script>
<script src="js/directives/chunkbar.js"></script> <script src="js/directives/chunkbar.js"></script>
<script src="js/directives/dgraph.js"></script> <script src="js/directives/dgraph.js"></script>
@ -52,7 +53,6 @@
<script src="js/filters/bytes.js"></script> <script src="js/filters/bytes.js"></script>
<script src="js/services/constants.js"></script>
<script src="js/services/deps.js"></script> <script src="js/services/deps.js"></script>
<script src="js/services/base64.js"></script> <script src="js/services/base64.js"></script>
<script src="js/services/utils.js"></script> <script src="js/services/utils.js"></script>
@ -112,12 +112,12 @@
<i class="icon-download">&nbsp;</i> By URIs <i class="icon-download">&nbsp;</i> By URIs
</a> </a>
</li> </li>
<li ng-show="isFeatureEnabled('BitTorrent')"> <li ng-show="isFeatureEnabled('BitTorrent') && enable.torrent">
<a href="#" ng-click="addTorrents()"> <a href="#" ng-click="addTorrents()">
<i class="icon-file">&nbsp;</i> By Torrents <i class="icon-file">&nbsp;</i> By Torrents
</a> </a>
</li> </li>
<li ng-show="isFeatureEnabled('Metalink')"> <li ng-show="isFeatureEnabled('Metalink') && enable.metalink">
<a href="#" ng-click="addMetalinks()"> <a href="#" ng-click="addMetalinks()">
<i class="icon-file">&nbsp;</i> By Metalinks <i class="icon-file">&nbsp;</i> By Metalinks
</a> </a>
@ -217,7 +217,7 @@
<div role="main" class="container-fluid"> <div role="main" class="container-fluid">
<!-- {{{ alerts --> <!-- {{{ alerts -->
<div ng-controller="AlertCtrl" class="row alerts"> <div ng-controller="AlertCtrl" class="row-fluid alerts">
<div class="alert alert-{{alert.type}}" ng-repeat="alert in pendingAlerts"> <div class="alert alert-{{alert.type}}" ng-repeat="alert in pendingAlerts">
<span ng-bind-html="alert.msg"></span> <span ng-bind-html="alert.msg"></span>
<button type="button" class="close" ng-click="removeAlert($index)">x</button> <button type="button" class="close" ng-click="removeAlert($index)">x</button>
@ -226,12 +226,12 @@
<!-- }}} --> <!-- }}} -->
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div ng-class="{'span3': enable.sidebar.show}" ng-if="enable.sidebar.show">
<!-- {{{ nav side bar --> <!-- {{{ nav side bar -->
<div class="well sidebar-nav"> <div class="well sidebar-nav">
<!-- {{{ download filters --> <!-- {{{ download filters -->
<ul id="filters" class="clearfix nav nav-list"> <ul id="filters" class="clearfix nav nav-list" ng-if="enable.sidebar.filters">
<li class="nav-header">Download Filters</li> <li class="nav-header">Download Filters</li>
<li> <li>
<label for="filter-speed"> <label for="filter-speed">
@ -291,7 +291,7 @@
<br> <br>
<!-- {{{ starred properties --> <!-- {{{ starred properties -->
<ul class="clearfix nav nav-list" ng-controller="StarredPropsCtrl" ng-show="properties.length"> <ul class="clearfix nav nav-list" ng-controller="StarredPropsCtrl" ng-show="properties.length && enable.sidebar.starredProps">
<li class="nav-header">Quick Access Settings</li> <li class="nav-header">Quick Access Settings</li>
<li ng-repeat="prop in properties"> <li ng-repeat="prop in properties">
<label title="{{prop.desc}}"> <label title="{{prop.desc}}">
@ -311,11 +311,12 @@
<br> <br>
<!-- {{{ global statistics --> <!-- {{{ global statistics -->
<ul class="nav nav-list"> <ul class="nav nav-list" ng-if="enable.sidebar.stats">
<li class="nav-header">Global Statistics</li> <li class="nav-header">Global Statistics</li>
<li> <li>
<div <div
minTickSize="300" yticks="3"
xticks="3"
dspeed="gstats.downloadSpeed" dspeed="gstats.downloadSpeed"
uspeed="gstats.uploadSpeed" uspeed="gstats.uploadSpeed"
dgraph ng-show="totalAria2Downloads()" dgraph ng-show="totalAria2Downloads()"
@ -331,7 +332,7 @@
<!-- }}} --> <!-- }}} -->
</div> </div>
<div class="span9"> <div ng-class="{'span9': enable.sidebar.show, 'span12': !enable.sidebar.show }">
<!-- {{{ downloads --> <!-- {{{ downloads -->
<!-- Bug?? <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">--> <!-- Bug?? <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">-->
<div ng-show="!totalAria2Downloads()" class="hero-unit"> <div ng-show="!totalAria2Downloads()" class="hero-unit">
@ -343,7 +344,7 @@
<table <table
ng-repeat="download in getDownloads()" ng-repeat="download in getDownloads()"
class="row download" data-gid="{{download.gid}}"> class="row-fluid download" data-gid="{{download.gid}}">
<tbody> <tbody>
<tr> <tr>
<td class="download-name download-item" ng-click="download.collapsed = !download.collapsed"> <td class="download-name download-item" ng-click="download.collapsed = !download.collapsed">
@ -582,7 +583,7 @@
<li class="label" ng-repeat="file in download.files">{{file.relpath}} ({{file.fmtLength}})</li> <li class="label" ng-repeat="file in download.files">{{file.relpath}} ({{file.fmtLength}})</li>
</ul> </ul>
<div ng-show="hasStatus(download, 'active')" class="download-item hidden-phone"> <div ng-show="hasStatus(download, 'active')" class="download-item hidden-phone">
<div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" dgraph draw="!download.collapsed"></div> <div class="download-graph" dspeed="download.downloadSpeed" uspeed="download.uploadSpeed" xticks="7" yticks="7" dgraph draw="!download.collapsed"></div>
</div> </div>
</div> </div>
</td> </td>

View File

@ -2,19 +2,20 @@ angular
.module('webui.ctrls.download', [ .module('webui.ctrls.download', [
"ui.bootstrap", "ui.bootstrap",
'webui.services.utils', 'webui.services.rpc', 'webui.services.alerts', 'webui.services.utils', 'webui.services.rpc', 'webui.services.alerts',
'webui.services.settings', 'webui.services.modals' 'webui.services.settings', 'webui.services.modals', 'webui.services.configuration',
]) ])
.controller('MainCtrl', [ .controller('MainCtrl', [
'$scope', '$name', '$rpc', '$utils', '$alerts', '$modals', '$scope', '$name', '$enable', '$rpc', '$utils', '$alerts', '$modals',
'$fileSettings', '$activeInclude', '$waitingExclude', '$fileSettings', '$activeInclude', '$waitingExclude',
// for document title // for document title
'$window', '$window',
function( function(
scope, name, rpc, utils, alerts, modals, scope, name, enable, rpc, utils, alerts, modals,
fsettings, activeInclude, waitingExclude, window fsettings, activeInclude, waitingExclude, window
) { ) {
scope.name = name; scope.name = name; // default UI name
scope.enable = enable; // UI enable options
var re_slashes = /\\/g; var re_slashes = /\\/g;
var slash = "/"; var slash = "/";

View File

@ -1,6 +1,6 @@
angular angular
.module('webui.ctrls.nav', [ .module('webui.ctrls.nav', [
'webui.services.constants', 'webui.services.modals', 'webui.services.configuration', 'webui.services.modals',
'webui.services.rpc', 'webui.services.rpc.helpers', 'webui.services.rpc', 'webui.services.rpc.helpers',
'webui.services.settings', 'webui.services.utils' 'webui.services.settings', 'webui.services.utils'
]) ])
@ -104,12 +104,14 @@ angular
var starred = []; var starred = [];
for (var i in settings) { for (var i in settings) {
sets[i] = settings[i].val sets[i] = settings[i].val
if (settings[i].starred) { if (settings[i].starred) {
starred.push(i); starred.push(i);
} }
}; };
console.log('saving aria2 starred:', starred); console.log('saving aria2 starred:', starred);
rpc.once('changeGlobalOption', [sets]); rpc.once('changeGlobalOption', [sets]);
utils.setCookie('aria2props', starred); utils.setCookie('aria2props', starred);
}); });

View File

@ -1,14 +1,15 @@
angular.module('webui.ctrls.props', [ angular.module('webui.ctrls.props', [
'webui.services.utils', 'webui.services.settings', 'webui.services.deps', 'webui.services.utils', 'webui.services.settings', 'webui.services.deps',
'webui.services.rpc' 'webui.services.rpc', 'webui.services.configuration',
]) ])
.controller('StarredPropsCtrl', ['$scope', '$_', '$utils', '$rpc', '$globalSettings', '$fileSettings', function(scope, _, utils, rpc, gsettings, fsettings) { .controller('StarredPropsCtrl', ['$scope', '$_', '$utils', '$rpc', '$globalSettings', '$fileSettings', '$starredProps',
function(scope, _, utils, rpc, gsettings, fsettings, starredProps) {
scope._props = []; scope._props = [];
scope.dirty = true; scope.dirty = true;
scope.properties = []; scope.properties = [];
scope.getProps = function() { scope.getProps = function() {
var props = utils.getCookie('aria2props'); var props = utils.getCookie('aria2props');
if (!props || !props.indexOf) props = []; if (!props || !props.indexOf) props = starredProps; // default properties starred in the global configuration file
return props; return props;
}; };

View File

@ -7,6 +7,7 @@ angular
var ratio = 0.4; var ratio = 0.4;
var xfmt = "%H:%M:%S"; var xfmt = "%H:%M:%S";
var yTicks = 7; // Number of y-axis ticks (sans 0) var yTicks = 7; // Number of y-axis ticks (sans 0)
var xticks = 10; // Number of x-axis ticks (sans 0)
var yTickBase = 10240; // y-axis ticks must be a multiple of this (bytes). var yTickBase = 10240; // y-axis ticks must be a multiple of this (bytes).
try { try {
// Try to detect AM/PM locales. // Try to detect AM/PM locales.
@ -56,21 +57,25 @@ angular
show: true, show: true,
mode: "time", mode: "time",
timeformat: xfmt, timeformat: xfmt,
minTickSize: [+attrs.minTickSize || 30, "second"] // 180 / 30 == 6 ticks: +attrs.xticks || xticks, // allow users of the directive to overwride xticks
minTickSize: [30, "second"] // 180 / 30 == 6
}, },
yaxis: { yaxis: {
position: "right", position: "right",
ticks: function(axis) { ticks: function(axis) {
var res = [0]; var res = [0];
var round = Math.max(1, Math.ceil(axis.max / yTickBase)); yt = +attrs.yticks || yticks; // allow users of directive to overwride yticks
var step = Math.max(1, Math.ceil(round / yTicks));
for (var s = 1; s <= yTicks; ++s) { var step = yTickBase * Math.max(1, Math.ceil(axis.max / (yt * yTickBase)))
var c = yTickBase * step * s;
res.push(c); for (var s = 0; s < yt; s++) {
if (c > axis.max) { var c = step * s;
if (c > axis.max)
break; break;
res.push(step * s);
} }
}
return res; return res;
}, },
tickFormatter: function(val, axis) { tickFormatter: function(val, axis) {

View File

@ -1,6 +1,6 @@
var webui = angular.module('webui', [ var webui = angular.module('webui', [
'webui.services.utils', 'webui.services.deps', 'webui.services.base64', 'webui.services.utils', 'webui.services.deps', 'webui.services.base64',
'webui.services.constants', 'webui.services.rpc', 'webui.services.configuration', 'webui.services.rpc',
'webui.services.modals', 'webui.services.alerts', 'webui.services.modals', 'webui.services.alerts',
'webui.services.settings', 'webui.services.settings.filters', 'webui.services.settings', 'webui.services.settings.filters',
'webui.filters.bytes', 'webui.filters.bytes',

View File

@ -1,5 +0,0 @@
angular
.module('webui.services.constants', [])
.constant('$name', 'webui-aria2')
.constant('$globalTimeout', 1000)

View File

@ -1,23 +1,28 @@
angular angular
.module('webui.services.rpc', [ .module('webui.services.rpc', [
'webui.services.rpc.syscall', 'webui.services.constants', 'webui.services.alerts', 'webui.services.rpc.syscall', 'webui.services.configuration', 'webui.services.alerts',
'webui.services.utils' 'webui.services.utils'
]) ])
.factory('$rpc', [ .factory('$rpc', [
'$syscall', '$globalTimeout', '$alerts', '$utils', '$syscall', '$globalTimeout', '$alerts', '$utils',
'$rootScope', '$location', '$rootScope', '$location', '$authconf',
function(syscall, time, alerts, utils, rootScope, uri) { function(syscall, time, alerts, utils, rootScope, uri, authconf) {
var subscriptions = [] var subscriptions = []
, configurations = [{ host: 'localhost', port: 6800, encrypt: false }] , configurations = [authconf]
, currentConf = {} , currentConf = {}
, currentToken , currentToken
, timeout = null , timeout = null
, forceNextUpdate = false; , forceNextUpdate = false;
var cookieConf = utils.getCookie('aria2conf');
// try at the start, so that it is presistant even when default authconf works
if (cookieConf) configurations.push(cookieConf);
if (['http', 'https'].indexOf(uri.protocol()) != -1 && uri.host() != 'localhost') { if (['http', 'https'].indexOf(uri.protocol()) != -1 && uri.host() != 'localhost') {
console.log(uri.host()); console.log(uri.host());
configurations.unshift({ configurations.push({
host: uri.host(), host: uri.host(),
port: 6800, port: 6800,
encrypt: false encrypt: false
@ -25,10 +30,6 @@ function(syscall, time, alerts, utils, rootScope, uri) {
console.log(configurations); console.log(configurations);
} }
var cookieConf = utils.getCookie('aria2conf');
// try at the end, so that it is not overwridden in case it doesnt work
if (cookieConf) configurations.unshift(cookieConf);
// update is implemented such that // update is implemented such that
// only one syscall at max is ongoing // only one syscall at max is ongoing

View File

@ -1,4 +1,4 @@
angular.module('webui.services.utils', ['webui.services.constants']) angular.module('webui.services.utils', ['webui.services.configuration'])
.factory('$utils', ['$filter', "$name", function(filter, $name) { .factory('$utils', ['$filter', "$name", function(filter, $name) {
var rnd16 = (function() { var rnd16 = (function() {
"use strict"; "use strict";