add AriaNg setting page, support set language and rpc server

app/index.html

@@ -90,11 +90,6 @@
                         </li>
                     </ul>
                 </li>
-                <li>
-                    <a class="pointer-cursor" title="{{'Settings' | translate}}">
-                        <i class="fa fa-cog"></i>
-                    </a>
-                </li>
             </ul>
         </nav>
     </header>
@@ -112,6 +107,10 @@
                 <li data-href-match="/stopped">
                     <a href="#/stopped"><i class="fa fa-stop-circle-o"></i> <span ng-bind="('Stopped' | translate) + (globalStat && globalStat.numStopped > 0 ? ' (' + globalStat.numStopped + ')' : '')">Stopped</span></a>
                 </li>
+                <li class="header" translate>Settings</li>
+                <li data-href-match="/settings/ariang">
+                    <a href="#/settings/ariang"><i class="fa fa-cog"></i> <span translate>AriaNg Settings</span></a>
+                </li>
             </ul>
         </section>
     </aside>
@@ -185,6 +184,7 @@
 <script src="scripts/core/utils.js"></script>
 <script src="scripts/controllers/list.js"></script>
 <script src="scripts/controllers/main.js"></script>
+<script src="scripts/controllers/settings-ariang.js"></script>
 <script src="scripts/filters/dateDuration.js"></script>
 <script src="scripts/filters/substring.js"></script>
 <script src="scripts/filters/taskOrderBy.js"></script>

app/scripts/controllers/list.js

@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').controller('DownloadListController', ['$rootScope', '$scope', '$window', '$location', '$interval', 'translateFilter',  'aria2RpcService', 'ariaNgSettingService', 'utils', function ($rootScope, $scope, $window, $location, $interval, translateFilter, aria2RpcService, ariaNgSettingService, utils) {
+    angular.module('ariaNg').controller('DownloadListController', ['$scope', '$window', '$location', '$interval', 'translateFilter',  'aria2RpcService', 'ariaNgSettingService', 'utils', function ($scope, $window, $location, $interval, translateFilter, aria2RpcService, ariaNgSettingService, utils) {
         var location = $location.path().substring(1);
 
         var getTitleWidth = function () {
@@ -57,11 +57,7 @@
             return ariaNgSettingService.getDisplayOrder();
         };
 
-        if ($rootScope.downloadTaskRefreshTimer) {
+        var downloadTaskRefreshPromise = $interval(function () {
-            $interval.cancel($rootScope.downloadTaskRefreshTimer);
-        }
-
-        $rootScope.downloadTaskRefreshTimer = $interval(function () {
             var invokeMethod = null;
             var params = [];
 
@@ -92,5 +88,11 @@
                 });
             }
         }, ariaNgSettingService.getDownloadTaskRefreshInterval());
+
+        $scope.$on('$destroy', function () {
+            if (downloadTaskRefreshPromise) {
+                $interval.cancel(downloadTaskRefreshPromise);
+            }
+        });
     }]);
 })();

app/scripts/controllers/settings-ariang.js

@@ -0,0 +1,8 @@
+(function () {
+    'use strict';
+
+    angular.module('ariaNg').controller('AriaNgSettingsController', ['$scope', 'SweetAlert', 'ariaNgSettingService', function ($scope, SweetAlert, ariaNgSettingService) {
+        $scope.settings = ariaNgSettingService.getAllOptions();
+        $scope.settingService = ariaNgSettingService;
+    }]);
+})();

app/scripts/core/config.js

@@ -10,13 +10,13 @@
         $translateProvider.preferredLanguage('en-US');
         $translateProvider.useSanitizeValueStrategy('escape');
     }]).run(['$translate', 'amMoment', 'moment', 'ariaNgConstants', 'ariaNgSettingService', function ($translate, amMoment, moment, ariaNgConstants, ariaNgSettingService) {
-        $translate.use(ariaNgSettingService.getLocaleName());
+        $translate.use(ariaNgSettingService.getLanguage());
 
         moment.updateLocale('zh-cn', {
             week: null
         });
 
-        amMoment.changeLocale(ariaNgSettingService.getLocaleName());
+        amMoment.changeLocale(ariaNgSettingService.getLanguage());
     }]).run(['$rootScope', '$location', '$document', 'SweetAlert', 'ariaNgConstants', function ($rootScope, $location, $document, SweetAlert, ariaNgConstants) {
         var setNavbarSelected = function (location) {
             angular.element('section.sidebar > ul li').removeClass('active');

app/scripts/core/constants.js

@@ -5,7 +5,7 @@
         title: 'Aria Ng',
         appPrefix: 'AriaNg'
     }).constant('ariaNgDefaultOptions', {
-        localeName: 'en-US',
+        language: 'en-US',
         protocol: 'http',
         globalStatRefreshInterval: 1000,
         downloadTaskRefreshInterval: 1000

app/scripts/core/router.js

@@ -15,6 +15,10 @@
                 templateUrl: 'views/list.html',
                 controller: 'DownloadListController'
             })
+            .when('/settings/ariang', {
+                templateUrl: 'views/settings-ariang.html',
+                controller: 'AriaNgSettingsController'
+            })
             .otherwise({
                 redirectTo: '/downloading'
             });

app/scripts/langs/en-US.js

@@ -3,6 +3,7 @@
 
     angular.module('ariaNg').config(['$translateProvider', function ($translateProvider) {
         $translateProvider.translations('en-US', {
+            'English': 'English',
             'New': 'New',
             'Start': 'Start',
             'Pause': 'Pause',
@@ -13,15 +14,20 @@
             'By File Size': 'By File Size',
             'By Completed Percent': 'By Completed Percent',
             'By Remain Time': 'By Remain Time',
-            'Settings': 'Settings',
             'Download': 'Download',
             'Downloading': 'Downloading',
             'Waiting': 'Waiting',
             'Stopped': 'Stopped',
+            'Settings': 'Settings',
+            'AriaNg Settings': 'AriaNg Settings',
+            'Language': 'Language',
+            'Aria2 RPC Host': 'Aria2 RPC Host',
+            'Aria2 RPC Protocol': 'Aria2 RPC Protocol',
             'Toggle Navigation': 'Toggle Navigation',
             'Loading': 'Loading...',
             'More Than One Day': 'More than 1 day',
-            'Unknown': 'Unknown'
+            'Unknown': 'Unknown',
+            'Changes to the settings take effect after refreshing page.': 'Changes to the settings take effect after refreshing page.'
         });
     }])
 })();

app/scripts/langs/zh-CN.js

@@ -3,6 +3,7 @@
 
     angular.module('ariaNg').config(['$translateProvider', function ($translateProvider) {
         $translateProvider.translations('zh-CN', {
+            'Simplified Chinese': '简体中文',
             'New': '新建',
             'Start': '开始下载任务',
             'Pause': '暂停下载任务',
@@ -13,15 +14,20 @@
             'By File Size': '按文件大小',
             'By Completed Percent': '按完成度',
             'By Remain Time': '按剩余时间',
-            'Settings': '系统设置',
             'Download': '下载',
             'Downloading': '正在下载',
             'Waiting': '正在等待',
             'Stopped': '已停止',
+            'Settings': '系统设置',
+            'AriaNg Settings': 'AriaNg 设置',
+            'Language': '语言',
+            'Aria2 RPC Host': 'Aria2 RPC 主机',
+            'Aria2 RPC Protocol': 'Aria2 RPC 协议',
             'Toggle Navigation': '切换导航',
             'Loading': '正在加载...',
             'More Than One Day': '超过1天',
-            'Unknown': '未知'
+            'Unknown': '未知',
+            'Changes to the settings take effect after refreshing page.': '设置将在刷新页面后生效.'
         });
     }])
 })();

app/scripts/services/aria2RpcService.js

@@ -2,6 +2,8 @@
     'use strict';
 
     angular.module('ariaNg').factory('aria2RpcService', ['aria2RpcConstants', 'ariaNgSettingService', 'aria2HttpRpcService', 'aria2WebSocketRpcService', 'utils', function (aria2RpcConstants, ariaNgSettingService, aria2HttpRpcService, aria2WebSocketRpcService, utils) {
+        var protocol = ariaNgSettingService.getProtocol();
+
         var invoke = function (method, context) {
             context.uniqueId = utils.generateUniqueId();
             context.requestBody = {
@@ -11,7 +13,7 @@
                 params: context.params
             };
 
-            if (ariaNgSettingService.getProtocol() == 'ws') {
+            if (protocol == 'ws') {
                 return aria2WebSocketRpcService.request(context);
             } else {
                 return aria2HttpRpcService.request(context);

app/scripts/services/aria2WebSocketRpcService.js

@@ -3,36 +3,44 @@
 
     angular.module('ariaNg').factory('aria2WebSocketRpcService', ['$websocket', 'ariaNgSettingService', function ($websocket, ariaNgSettingService) {
         var rpcUrl = ariaNgSettingService.getJsonRpcUrl('ws');
-        var socketClient = $websocket(rpcUrl);
+        var socketClient = null;
         var sendIdMapping = {};
 
-        socketClient.onMessage(function (message) {
+        var getSocketClient = function () {
-            if (!message || !message.data) {
+            if (socketClient == null) {
-                return;
+                socketClient = $websocket(rpcUrl);
+
+                socketClient.onMessage(function (message) {
+                    if (!message || !message.data) {
+                        return;
+                    }
+
+                    var content = angular.fromJson(message.data);
+
+                    if (!content || !content.id) {
+                        return;
+                    }
+
+                    var uniqueId = content.id;
+                    var result = content.result;
+
+                    if (!sendIdMapping[uniqueId]) {
+                        return;
+                    }
+
+                    var context = sendIdMapping[uniqueId];
+                    var callbackMethod = context.callback;
+
+                    if (callbackMethod) {
+                        callbackMethod(result);
+                    }
+
+                    delete sendIdMapping[uniqueId];
+                });
             }
 
-            var content = angular.fromJson(message.data);
+            return socketClient;
-
+        };
-            if (!content || !content.id) {
-                return;
-            }
-
-            var uniqueId = content.id;
-            var result = content.result;
-
-            if (!sendIdMapping[uniqueId]) {
-                return;
-            }
-
-            var context = sendIdMapping[uniqueId];
-            var callbackMethod = context.callback;
-
-            if (callbackMethod) {
-                callbackMethod(result);
-            }
-
-            delete sendIdMapping[uniqueId];
-        });
 
         return {
             request: function (context) {
@@ -40,12 +48,13 @@
                     return;
                 }
 
+                var client = getSocketClient();
                 var uniqueId = context.uniqueId;
                 var requestBody = angular.toJson(context.requestBody);
 
                 sendIdMapping[uniqueId] = context;
 
-                return socketClient.send(requestBody);
+                return client.send(requestBody);
             }
         };
     }]);

app/scripts/services/ariaNgSettingService.js

@@ -1,7 +1,12 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').factory('ariaNgSettingService', ['$location', '$translate', 'localStorageService', 'ariaNgDefaultOptions', function ($location, $translate, localStorageService, ariaNgDefaultOptions) {
+    angular.module('ariaNg').factory('ariaNgSettingService', ['$location', '$translate', 'amMoment', 'localStorageService', 'ariaNgDefaultOptions', function ($location, $translate, amMoment, localStorageService, ariaNgDefaultOptions) {
+        var getDefaultJsonRpcHost = function () {
+            var rpcHost = $location.$$host + ':6800';
+            return rpcHost;
+        };
+
         var setOptions = function (options) {
             return localStorageService.set('Options', options);
         };
@@ -36,22 +41,38 @@
         };
 
         return {
-            getLocaleName: function () {
+            getAllOptions: function () {
-                return getOption('localeName');
+                var options = angular.extend({}, ariaNgDefaultOptions, getOptions());
+
+                if (!options.aria2RpcHost) {
+                    options.aria2RpcHost = getDefaultJsonRpcHost();
+                }
+
+                return options;
             },
-            setLocaleName: function (value) {
+            setAllOptions: function (options) {
-                setOption('localeName', value);
+                setOptions(options);
+            },
+            getLanguage: function () {
+                return getOption('language');
+            },
+            setLanguage: function (value) {
+                setOption('language', value);
                 $translate.use(value);
+                amMoment.changeLocale(value);
             },
             getJsonRpcUrl: function (protocol) {
                 var rpcHost = getOption('aria2RpcHost');
 
                 if (!rpcHost) {
-                    rpcHost = $location.$$host + ':6800';
+                    rpcHost = getDefaultJsonRpcHost();
                 }
 
                 return protocol + '://' + rpcHost + '/jsonrpc';
             },
+            setJsonRpcHost: function (value) {
+                setOption('aria2RpcHost', value);
+            },
             getProtocol: function () {
                 return getOption('protocol');
             },

app/styles/aria-ng.css

@@ -257,7 +257,7 @@ td {
 }
 
 .task-table > div.row:hover {
-    background-color: #f5f5f5 !important;
+    background-color: #f5f5f5;
 }
 
 .task-table .task-name {
@@ -283,6 +283,42 @@ td {
     font-size: 12px;
 }
 
+/* settings-table */
+.settings-table {
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+.settings-table > div.row {
+    padding: 8px;
+    border-top: 1px solid #ddd;
+}
+
+.settings-table > div.row:nth-of-type(odd) {
+    background-color: #f9f9f9;
+}
+
+.settings-table > div.row:hover {
+    background-color: #f5f5f5;
+}
+
+.settings-table .setting-key {
+    padding-top: 6px;
+}
+
+.settings-table .asterisk {
+    color: red;
+}
+
+.settings-table .tip {
+    background-color: #fff;
+    font-size: 12px;
+    padding: 4px;
+}
+.settings-table .tip:hover {
+    background-color: #fff !important;
+}
+
 /* miscellaneous */
 span.realtime-upload, span.realtime-download {
     padding: 0 15px 0 15px;

app/views/list.html

@@ -3,7 +3,7 @@
         <div class="row" ng-repeat="task in downloadTasks | taskOrderBy: getOrderType()" data-gid="{{task.gid}}">
             <div class="col-md-8">
                 <span class="task-name" ng-bind="task.taskName | substring: (titleWidth / 20)" title="{{task.taskName}}"></span>
-                <span class="task-volumn" ng-bind="task.totalLength | readableVolumn"></span>
+                <span class="task-volumn" ng-bind="task.fileSize | readableVolumn"></span>
             </div>
             <div class="col-md-2">
                 <div class="progress">

app/views/settings-ariang.html

@@ -0,0 +1,40 @@
+<section class="content no-padding">
+    <div class="settings-table">
+        <div class="row">
+            <div class="setting-key col-md-4">
+                <span translate>Language</span>
+            </div>
+            <div class="setting-value col-md-8">
+                <select class="form-control" style="width: 100%;" ng-model="settings.language" ng-change="settingService.setLanguage(settings.language)">
+                    <option value="en-US" translate translate-language="en-US">English</option>
+                    <option value="zh-CN" translate translate-language="zh-CN">Simplified Chinese</option>
+                </select>
+            </div>
+        </div>
+        <div class="row">
+            <div class="setting-key col-md-4">
+                <span translate>Aria2 RPC Host</span>
+                <span class="asterisk">*</span>
+            </div>
+            <div class="setting-value col-md-8" translate>
+                <input class="form-control" ng-model="settings.aria2RpcHost" ng-change="settingService.setJsonRpcHost(settings.aria2RpcHost)" />
+            </div>
+        </div>
+        <div class="row">
+            <div class="setting-key col-md-4">
+                <span translate>Aria2 RPC Protocol</span>
+                <span class="asterisk">*</span>
+            </div>
+            <div class="setting-value col-md-8">
+                <select class="form-control" style="width: 100%;" ng-model="settings.protocol" ng-change="settingService.setProtocol(settings.protocol)">
+                    <option value="http" translate>Http</option>
+                    <option value="ws" translate>WebSocket</option>
+                </select>
+            </div>
+        </div>
+        <div class="row tip">
+            <span class="asterisk">*</span>
+            <span translate>Changes to the settings take effect after refreshing page.</span>
+        </div>
+    </div>
+</section>