added global statistics to tweat the webui

README.md

@@ -3,7 +3,7 @@ webui-aria2
 
 ![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:
 ````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.
 
+Configuration
+=============
+Read and edit [configuration.js](configuration.js).
+
 Dependencies
 ============
 Well, you need aria2. And a web browser (if that even counts!)
 
 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
 =======

configuration.js

@@ -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',
+])
+;
+
+

index.html

@@ -45,6 +45,7 @@
 
   <!-- webui core -->
   <script src="js/init.js"></script>
+  <script src="configuration.js"></script>
 
   <script src="js/directives/chunkbar.js"></script>
   <script src="js/directives/dgraph.js"></script>
@@ -52,7 +53,6 @@
 
   <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/base64.js"></script>
   <script src="js/services/utils.js"></script>
@@ -112,12 +112,12 @@
               <i class="icon-download">&nbsp;</i> By URIs
             </a>
           </li>
-          <li ng-show="isFeatureEnabled('BitTorrent')">
+          <li ng-show="isFeatureEnabled('BitTorrent') && enable.torrent">
             <a href="#" ng-click="addTorrents()">
               <i class="icon-file">&nbsp;</i> By Torrents
             </a>
           </li>
-          <li ng-show="isFeatureEnabled('Metalink')">
+          <li ng-show="isFeatureEnabled('Metalink') && enable.metalink">
             <a href="#" ng-click="addMetalinks()">
               <i class="icon-file">&nbsp;</i> By Metalinks
             </a>
@@ -217,7 +217,7 @@
 <div role="main" class="container-fluid">
 
   <!-- {{{ 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">
       <span ng-bind-html="alert.msg"></span>
       <button type="button" class="close" ng-click="removeAlert($index)">x</button>
@@ -226,12 +226,12 @@
   <!-- }}} -->
 
 <div class="row-fluid">
-  <div class="span3">
+  <div ng-class="{'span3': enable.sidebar.show}" ng-if="enable.sidebar.show">
     <!-- {{{ nav side bar -->
     <div class="well sidebar-nav">
 
       <!-- {{{ 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>
           <label for="filter-speed">
@@ -291,7 +291,7 @@
       <br>
 
       <!-- {{{ 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 ng-repeat="prop in properties">
           <label title="{{prop.desc}}">
@@ -311,11 +311,12 @@
       <br>
 
       <!-- {{{ 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>
           <div
-            minTickSize="300"
+            yticks="3"
+            xticks="3"
             dspeed="gstats.downloadSpeed"
             uspeed="gstats.uploadSpeed"
             dgraph ng-show="totalAria2Downloads()"
@@ -331,7 +332,7 @@
     <!-- }}} -->
   </div>
 
-  <div class="span9">
+  <div ng-class="{'span9': enable.sidebar.show, 'span12': !enable.sidebar.show }">
     <!-- {{{ downloads -->
     <!-- Bug?? <div ng-show="!totalAria2Downloads() && totalAria2Downloads() > getDownloads()" class="hero-unit">-->
     <div ng-show="!totalAria2Downloads()" class="hero-unit">
@@ -343,7 +344,7 @@
 
     <table
       ng-repeat="download in getDownloads()"
-      class="row download" data-gid="{{download.gid}}">
+      class="row-fluid download" data-gid="{{download.gid}}">
       <tbody>
       <tr>
         <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>
             </ul>
             <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>
         </td>

js/ctrls/main.js

@@ -2,19 +2,20 @@ angular
 .module('webui.ctrls.download', [
   "ui.bootstrap",
   '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', [
-  '$scope', '$name', '$rpc', '$utils', '$alerts', '$modals',
+  '$scope', '$name', '$enable', '$rpc', '$utils', '$alerts', '$modals',
   '$fileSettings', '$activeInclude', '$waitingExclude',
   // for document title
   '$window',
 function(
-  scope, name, rpc, utils, alerts, modals,
+  scope, name, enable, rpc, utils, alerts, modals,
   fsettings, activeInclude, waitingExclude, window
 ) {
 
-  scope.name = name;
+  scope.name = name;   // default UI name
+  scope.enable = enable; // UI enable options
 
   var re_slashes = /\\/g;
   var slash = "/";

js/ctrls/nav.js

@@ -1,6 +1,6 @@
 angular
 .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.settings', 'webui.services.utils'
 ])
@@ -104,12 +104,14 @@ angular
         var starred = [];
         for (var i in settings) {
           sets[i] = settings[i].val
+
           if (settings[i].starred) {
             starred.push(i);
           }
         };
 
         console.log('saving aria2 starred:', starred);
+
         rpc.once('changeGlobalOption', [sets]);
         utils.setCookie('aria2props', starred);
       });

js/ctrls/props.js

@@ -1,14 +1,15 @@
 angular.module('webui.ctrls.props', [
   '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.dirty = true;
   scope.properties = [];
   scope.getProps = function() {
     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;
   };

js/directives/dgraph.js

@@ -7,6 +7,7 @@ angular
   var ratio = 0.4;
   var xfmt = "%H:%M:%S";
   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).
   try {
     // Try to detect AM/PM locales.
@@ -56,21 +57,25 @@ angular
         show: true,
         mode: "time",
         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: {
         position: "right",
         ticks: function(axis) {
           var res = [0];
-          var round = Math.max(1, Math.ceil(axis.max / yTickBase));
-          var step = Math.max(1, Math.ceil(round / yTicks));
-          for (var s = 1; s <= yTicks; ++s) {
-            var c = yTickBase * step * s;
-            res.push(c);
-            if (c > axis.max) {
+          yt = +attrs.yticks || yticks; // allow users of directive to overwride yticks
+
+          var step = yTickBase * Math.max(1, Math.ceil(axis.max / (yt * yTickBase)))
+
+          for (var s = 0; s < yt; s++) {
+            var c = step * s;
+            if (c > axis.max)
               break;
+
+            res.push(step * s);
           }
-          }
+
           return res;
         },
         tickFormatter: function(val, axis) {

js/init.js

@@ -1,6 +1,6 @@
 var webui = angular.module('webui', [
   '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.settings', 'webui.services.settings.filters',
   'webui.filters.bytes',

js/services/constants.js

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

js/services/rpc/rpc.js

@@ -1,23 +1,28 @@
 angular
 .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'
 ])
 .factory('$rpc', [
   '$syscall', '$globalTimeout', '$alerts', '$utils',
-  '$rootScope', '$location',
-function(syscall, time, alerts, utils, rootScope, uri) {
+  '$rootScope', '$location', '$authconf',
+function(syscall, time, alerts, utils, rootScope, uri, authconf) {
 
   var subscriptions = []
-    , configurations = [{ host: 'localhost', port: 6800, encrypt: false }]
+    , configurations = [authconf]
     , currentConf = {}
     , currentToken
     , timeout = null
     , 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') {
     console.log(uri.host());
-    configurations.unshift({
+    configurations.push({
       host: uri.host(),
       port: 6800,
       encrypt: false
@@ -25,10 +30,6 @@ function(syscall, time, alerts, utils, rootScope, uri) {
     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
   // only one syscall at max is ongoing

js/services/utils.js

@@ -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) {
   var rnd16 = (function() {
     "use strict";