add aria2 settings, translate aria2 basic/rpc settings

app/index.html

@@ -130,9 +130,24 @@
                         <li data-href-match="/settings/aria2/basic">
                             <a href="#/settings/aria2/basic"><i class="fa fa-circle-o"></i> <span translate>Basic Settings</span></a>
                         </li>
+                        <li data-href-match="/settings/aria2/http-ftp-sftp">
+                            <a href="#/settings/aria2/http-ftp-sftp"><i class="fa fa-circle-o"></i> <span translate>HTTP/FTP/SFTP Settings</span></a>
+                        </li>
+                        <li data-href-match="/settings/aria2/http">
+                            <a href="#/settings/aria2/http"><i class="fa fa-circle-o"></i> <span translate>HTTP Settings</span></a>
+                        </li>
+                        <li data-href-match="/settings/aria2/ftp-sftp">
+                            <a href="#/settings/aria2/ftp-sftp"><i class="fa fa-circle-o"></i> <span translate>FTP/SFTP Settings</span></a>
+                        </li>
+                        <li data-href-match="/settings/aria2/bt-metalink">
+                            <a href="#/settings/aria2/bt-metalink"><i class="fa fa-circle-o"></i> <span translate>BitTorrent/MegaLink Settings</span></a>
+                        </li>
                         <li data-href-match="/settings/aria2/bt">
                             <a href="#/settings/aria2/bt"><i class="fa fa-circle-o"></i> <span translate>BitTorrent Settings</span></a>
                         </li>
+                        <li data-href-match="/settings/aria2/metalink">
+                            <a href="#/settings/aria2/metalink"><i class="fa fa-circle-o"></i> <span translate>MegaLink Settings</span></a>
+                        </li>
                         <li data-href-match="/settings/aria2/rpc">
                             <a href="#/settings/aria2/rpc"><i class="fa fa-circle-o"></i> <span translate>RPC Settings</span></a>
                         </li>
@@ -212,6 +227,7 @@
 <script src="scripts/core/__core.js"></script>
 <script src="scripts/core/__fix.js"></script>
 <script src="scripts/core/app.js"></script>
+<script src="scripts/core/aria2options.js"></script>
 <script src="scripts/core/config.js"></script>
 <script src="scripts/core/constants.js"></script>
 <script src="scripts/core/router.js"></script>

app/scripts/controllers/settings-aria2.js

@@ -1,7 +1,82 @@
 (function () {
     'use strict';
 
-    angular.module('ariaNg').controller('Aria2SettingsController', ['$scope', 'SweetAlert', 'aria2RpcService', function ($scope, SweetAlert, aria2RpcService) {
+    angular.module('ariaNg').controller('Aria2SettingsController', ['$scope', '$location', '$timeout', 'SweetAlert', 'translateFilter', 'ariaNgConstants', 'aria2AvailableOptions', 'aria2RpcService', function ($scope, $location, $timeout, SweetAlert, translateFilter, ariaNgConstants, aria2AvailableOptions, aria2RpcService) {
+        var location = $location.path().substring($location.path().lastIndexOf('/') + 1);
+        var pendingSaveRequest = {};
 
+        var getAvailableOptions = function (location) {
+            if (location == 'basic') {
+                return aria2AvailableOptions.basicOptions;
+            } else if (location == 'http-ftp-sftp') {
+                return aria2AvailableOptions.httpFtpSFtpOptions;
+            } else if (location == 'http') {
+                return aria2AvailableOptions.httpOptions;
+            } else if (location == 'ftp-sftp') {
+                return aria2AvailableOptions.ftpSFtpOptions;
+            } else if (location == 'bt-metalink') {
+                return aria2AvailableOptions.btMetalinkOptions;
+            } else if (location == 'bt') {
+                return aria2AvailableOptions.btOptions;
+            } else if (location == 'metalink') {
+                return aria2AvailableOptions.metalinkOptions;
+            } else if (location == 'rpc') {
+                return aria2AvailableOptions.rpcOptions;
+            } else if (location == 'advanced') {
+                return aria2AvailableOptions.advancedOptions;
+            } else {
+                SweetAlert.swal({
+                    title: translateFilter('Error'),
+                    text: translateFilter('Type is illegal!'),
+                    type: 'error',
+                    confirmButtonText: translateFilter('OK')
+                });
+            }
+        };
+
+        $scope.optionStatus = {};
+        $scope.availableOptions = getAvailableOptions(location);
+        $scope.setGlobalOption = function (option, value, lazySave) {
+            if (!option || !option.key || option.readonly) {
+                return;
+            }
+
+            var key = option.key;
+            var invoke = function () {
+                var data = {};
+                data[key] = value;
+
+                $scope.optionStatus[key] = 'saving';
+
+                return aria2RpcService.changeGlobalOption({
+                    params: [data],
+                    callback: function () {
+                        $scope.optionStatus[key] = 'saved';
+                    }
+                });
+            };
+
+            delete $scope.optionStatus[key];
+
+            if (lazySave) {
+                if (pendingSaveRequest[key]) {
+                    $timeout.cancel(pendingSaveRequest[key]);
+                }
+
+                pendingSaveRequest[key] = $timeout(function () {
+                    invoke();
+                }, ariaNgConstants.lazySaveTimeout);
+            } else {
+                invoke();
+            }
+        };
+
+        $scope.loadPromise = (function () {
+            return aria2RpcService.getGlobalOption({
+                callback: function (result) {
+                    $scope.globalOptions = result;
+                }
+            })
+        })();
     }]);
 })();

app/scripts/core/config.js

@@ -17,21 +17,21 @@
         });
 
         amMoment.changeLocale(ariaNgSettingService.getLanguage());
-    }]).run(['$rootScope', '$location', '$document', 'SweetAlert', 'ariaNgConstants', function ($rootScope, $location, $document, SweetAlert, ariaNgConstants) {
+    }]).run(['$rootScope', '$location', '$document', 'SweetAlert', 'ariaNgConstants', 'utils', function ($rootScope, $location, $document, SweetAlert, ariaNgConstants, utils) {
         var setNavbarSelected = function (location) {
             angular.element('section.sidebar > ul li').removeClass('active');
             angular.element('section.sidebar > ul > li[data-href-match]').each(function (index, element) {
-                var prefix = angular.element(element).attr('data-href-match');
+                var match = angular.element(element).attr('data-href-match');
 
-                if (location.indexOf(prefix) == 0) {
+                if (utils.isUrlMatchUrl2(match, location)) {
                     angular.element(element).addClass('active');
                 }
             });
 
             angular.element('section.sidebar > ul > li.treeview > ul.treeview-menu > li[data-href-match]').each(function (index, element) {
-                var prefix = angular.element(element).attr('data-href-match');
+                var match = angular.element(element).attr('data-href-match');
 
-                if (location.indexOf(prefix) == 0) {
+                if (utils.isUrlMatchUrl2(match, location)) {
                     angular.element(element).addClass('active').parent().parent().addClass('active');
                 }
             });

app/scripts/core/constants.js

@@ -4,7 +4,8 @@
     angular.module('ariaNg').constant('ariaNgConstants', {
         title: 'Aria Ng',
         appPrefix: 'AriaNg',
-        optionStorageKey: 'Options'
+        optionStorageKey: 'Options',
+        lazySaveTimeout: 500
     }).constant('ariaNgDefaultOptions', {
         language: 'en-US',
         rpcHost: '',

app/scripts/core/router.js

@@ -23,10 +23,30 @@
                 templateUrl: 'views/settings-aria2.html',
                 controller: 'Aria2SettingsController'
             })
+            .when('/settings/aria2/http-ftp-sftp', {
+                templateUrl: 'views/settings-aria2.html',
+                controller: 'Aria2SettingsController'
+            })
+            .when('/settings/aria2/http', {
+                templateUrl: 'views/settings-aria2.html',
+                controller: 'Aria2SettingsController'
+            })
+            .when('/settings/aria2/ftp-sftp', {
+                templateUrl: 'views/settings-aria2.html',
+                controller: 'Aria2SettingsController'
+            })
+            .when('/settings/aria2/bt-metalink', {
+                templateUrl: 'views/settings-aria2.html',
+                controller: 'Aria2SettingsController'
+            })
             .when('/settings/aria2/bt', {
                 templateUrl: 'views/settings-aria2.html',
                 controller: 'Aria2SettingsController'
             })
+            .when('/settings/aria2/metalink', {
+                templateUrl: 'views/settings-aria2.html',
+                controller: 'Aria2SettingsController'
+            })
             .when('/settings/aria2/rpc', {
                 templateUrl: 'views/settings-aria2.html',
                 controller: 'Aria2SettingsController'

app/scripts/core/utils.js

@@ -37,6 +37,25 @@
 
                 return path.substring(index + 1);
             },
+            isUrlMatchUrl2: function (url, url2) {
+                if (url === url2) {
+                    return true;
+                }
+
+                var index = url2.indexOf(url);
+
+                if (index !== 0) {
+                    return false;
+                }
+
+                var lastPart = url2.substring(url.length);
+
+                if (lastPart.indexOf('/') == 0) {
+                    return true;
+                }
+
+                return false;
+            },
             parseOrderType: function (value) {
                 var values = value.split(':');
 

app/scripts/langs/en-US.js

@@ -4,6 +4,13 @@
     angular.module('ariaNg').config(['$translateProvider', function ($translateProvider) {
         $translateProvider.translations('en-US', {
             'English': 'English',
+            'Error': 'Error',
+            'OK': 'OK',
+            'Cancel': 'Cancel',
+            'True': 'True',
+            'true': 'True',
+            'False': 'False',
+            'false': 'False',
             'New': 'New',
             'Start': 'Start',
             'Pause': 'Pause',
@@ -23,7 +30,12 @@
             'AriaNg Settings': 'AriaNg Settings',
             'Aria2 Settings': 'Aria2 Settings',
             'Basic Settings': 'Basic Settings',
+            'HTTP/FTP/SFTP Settings': 'HTTP/FTP/SFTP Settings',
+            'HTTP Settings': 'HTTP Settings',
+            'FTP/SFTP Settings': 'FTP/SFTP Settings',
+            'BitTorrent/MegaLink Settings': 'BitTorrent/MegaLink Settings',
             'BitTorrent Settings': 'BitTorrent Settings',
+            'MegaLink Settings': 'MegaLink Settings',
             'RPC Settings': 'RPC Settings',
             'Advanced Settings': 'Advanced Settings',
             'Aria2 Status': 'Aria2 Status',
@@ -45,10 +57,55 @@
             'Loading': 'Loading...',
             'More Than One Day': 'More than 1 day',
             'Unknown': 'Unknown',
+            'Bytes': 'Bytes',
+            'Minutes': 'Minutes',
             'Seconds': 'Seconds',
             'Milliseconds': 'Milliseconds',
             '(0 is disabled)': '(0 is disabled)',
-            'Changes to the settings take effect after refreshing page.': 'Changes to the settings take effect after refreshing page.'
+            'Changes to the settings take effect after refreshing page.': 'Changes to the settings take effect after refreshing page.',
+            'Download Path': 'Download Path',
+            'The directory to store the downloaded file.': '',
+            'Input File': 'Input File',
+            'The input file can contain a list of URIs for aria2 to download.': '',
+            'Log File': 'Log File',
+            'The file name of the log file. If - is specified, log is written to stdout. If empty string("") is specified, or this option is omitted, no log is written to disk at all.': 'The file name of the log file. If - is specified, log is written to stdout. If empty string("") is specified, or this option is omitted, no log is written to disk at all.',
+            'Max Concurrent Downloads': 'Max Concurrent Downloads',
+            'Set the maximum number of parallel downloads for every queue item.': '',
+            'Check Integrity': 'Check Integrity',
+            'Check file integrity by validating piece hashes or a hash of entire file. This option has effect only in BitTorrent, Metalink downloads with checksums or HTTP(S)/FTP downloads with --checksum option.': 'Check file integrity by validating piece hashes or a hash of entire file. This option has effect only in BitTorrent, Metalink downloads with checksums or HTTP(S)/FTP downloads with --checksum option.',
+            'Resume Download': 'Resume Download',
+            'Continue downloading a partially downloaded file. Use this option to resume a download started by a web browser or another program which downloads files sequentially from the beginning. Currently this option is only applicable to HTTP(S)/FTP downloads.': 'Continue downloading a partially downloaded file. Use this option to resume a download started by a web browser or another program which downloads files sequentially from the beginning. Currently this option is only applicable to HTTP(S)/FTP downloads.',
+            'Enable JSON-RPC/XML-RPC Server': 'Enable JSON-RPC/XML-RPC Server',
+            'Enable JSON-RPC/XML-RPC server.': '',
+            'Pause After Metadata Downloaded': 'Pause After Metadata Downloaded',
+            'Pause downloads created as a result of metadata download. There are 3 types of metadata downloads in aria2: (1) downloading .torrent file. (2) downloading torrent metadata using magnet link. (3) downloading metalink file. These metadata downloads will generate downloads using their metadata. This option pauses these subsequent downloads. This option is effective only when --enable-rpc=true is given.': 'Pause downloads created as a result of metadata download. There are 3 types of metadata downloads in aria2: (1) downloading .torrent file. (2) downloading torrent metadata using magnet link. (3) downloading metalink file. These metadata downloads will generate downloads using their metadata. This option pauses these subsequent downloads. This option is effective only when --enable-rpc=true is given.',
+            'Allow All Origin Request': 'Allow All Origin Request',
+            'Add Access-Control-Allow-Origin header field with value * to the RPC response.': 'Add Access-Control-Allow-Origin header field with value * to the RPC response.',
+            'Listen on All Network Interfaces': 'Listen on All Network Interfaces',
+            'Listen incoming JSON-RPC/XML-RPC requests on all network interfaces. If false is given, listen only on local loopback interface.': 'Listen incoming JSON-RPC/XML-RPC requests on all network interfaces. If false is given, listen only on local loopback interface.',
+            'Listen Port': 'Listen Port',
+            'Specify a port number for JSON-RPC/XML-RPC server to listen to.': '',
+            'Max Request Size': 'Max Request Size',
+            'Set max size of JSON-RPC/XML-RPC request. If aria2 detects the request is more than SIZE bytes, it drops connection.': 'Set max size of JSON-RPC/XML-RPC request. If aria2 detects the request is more than SIZE bytes, it drops connection.',
+            'Save Upload Metadata': 'Save Upload Metadata',
+            'Save the uploaded torrent or metalink meta data in the directory specified by --dir option. The file name consists of SHA-1 hash hex string of meta data plus extension. For torrent, the extension is \'.torrent\'. For metalink, it is \'.meta4\'. If false is given to this option, the downloads added by aria2.addTorrent() or aria2.addMetalink() will not be saved by --save-session option.': 'Save the uploaded torrent or metalink meta data in the directory specified by --dir option. The file name consists of SHA-1 hash hex string of meta data plus extension. For torrent, the extension is \'.torrent\'. For metalink, it is \'.meta4\'. If false is given to this option, the downloads added by aria2.addTorrent() or aria2.addMetalink() will not be saved by --save-session option.',
+            'Enable SSL/TLS': 'Enable SSL/TLS',
+            'RPC transport will be encrypted by SSL/TLS. The RPC clients must use https scheme to access the server. For WebSocket client, use wss scheme. Use --rpc-certificate and --rpc-private-key options to specify the server certificate and private key.': 'RPC transport will be encrypted by SSL/TLS. The RPC clients must use https scheme to access the server. For WebSocket client, use wss scheme. Use --rpc-certificate and --rpc-private-key options to specify the server certificate and private key.',
+            'Type is illegal!': 'Type is illegal!',
+            'none': 'None',
+            'http': 'Http',
+            'https': 'Https',
+            'ftp': 'Ftp',
+            'mem': 'Memory Only',
+            'plain': 'Plain',
+            'arc4': 'ARC4',
+            'binary': 'Binary',
+            'ascii': 'ASCII',
+            'debug': 'Debug',
+            'info': 'Info',
+            'notice': 'Notice',
+            'warn': 'Warn',
+            'error': 'Error'
         });
     }])
 })();

app/scripts/langs/zh-CN.js

@@ -4,6 +4,13 @@
     angular.module('ariaNg').config(['$translateProvider', function ($translateProvider) {
         $translateProvider.translations('zh-CN', {
             'Simplified Chinese': '简体中文',
+            'Error': '错误',
+            'OK': '确定',
+            'Cancel': '取消',
+            'True': '是',
+            'true': '是',
+            'False': '否',
+            'false': '否',
             'New': '新建',
             'Start': '开始下载任务',
             'Pause': '暂停下载任务',
@@ -23,7 +30,12 @@
             'AriaNg Settings': 'AriaNg 设置',
             'Aria2 Settings': 'Aria2 设置',
             'Basic Settings': '基本设置',
+            'HTTP/FTP/SFTP Settings': 'HTTP/FTP/SFTP 设置',
+            'HTTP Settings': 'HTTP 设置',
+            'FTP/SFTP Settings': 'FTP/SFTP 设置',
+            'BitTorrent/MegaLink Settings': 'BitTorrent/磁链设置',
             'BitTorrent Settings': 'BitTorrent 设置',
+            'MegaLink Settings': '磁链设置',
             'RPC Settings': 'RPC 设置',
             'Advanced Settings': '高级设置',
             'Aria2 Status': 'Aria2 状态',
@@ -45,10 +57,55 @@
             'Loading': '正在加载...',
             'More Than One Day': '超过1天',
             'Unknown': '未知',
+            'Bytes': '字节',
+            'Minutes': '分',
             'Seconds': '秒',
             'Milliseconds': '毫秒',
             '(0 is disabled)': '(0为禁用)',
-            'Changes to the settings take effect after refreshing page.': '设置将在页面刷新后生效.'
+            'Changes to the settings take effect after refreshing page.': '设置将在页面刷新后生效.',
+            'Download Path': '下载路径',
+            'The directory to store the downloaded file.': '',
+            'Input File': '输入文件',
+            'The input file can contain a list of URIs for aria2 to download.': '',
+            'Log File': '日志文件',
+            'The file name of the log file. If - is specified, log is written to stdout. If empty string("") is specified, or this option is omitted, no log is written to disk at all.': '日志文件的路径. 如果设置为 "-", 日志则写入到 stdout. 如果设置为空字符串(""), 日志将不会记录到磁盘上.',
+            'Max Concurrent Downloads': '最大同时下载数',
+            'Set the maximum number of parallel downloads for every queue item.': '',
+            'Check Integrity': '检查完整性',
+            'Check file integrity by validating piece hashes or a hash of entire file. This option has effect only in BitTorrent, Metalink downloads with checksums or HTTP(S)/FTP downloads with --checksum option.' : '通过对文件的每个分块或整个文件进行哈希验证来检查文件的完整性. 此选项仅对于BT、磁力链接及设置了 --checksum 选项的 HTTP(S)/FTP 链接.',
+            'Resume Download': '断点续传',
+            'Continue downloading a partially downloaded file. Use this option to resume a download started by a web browser or another program which downloads files sequentially from the beginning. Currently this option is only applicable to HTTP(S)/FTP downloads.': '继续下载部分完成的文件. 启用此选项可以继续下载从浏览器或其他程序按顺序下载的文件. 此选项目前只支持 HTTP(S)/FTP 下载的文件.',
+            'Enable JSON-RPC/XML-RPC Server': '启用 JSON-RPC/XML-RPC 服务器',
+            'Enable JSON-RPC/XML-RPC server.': '',
+            'Pause After Metadata Downloaded': '元数据下载完后暂停',
+            'Pause downloads created as a result of metadata download. There are 3 types of metadata downloads in aria2: (1) downloading .torrent file. (2) downloading torrent metadata using magnet link. (3) downloading metalink file. These metadata downloads will generate downloads using their metadata. This option pauses these subsequent downloads. This option is effective only when --enable-rpc=true is given.': '当元数据下载完成后暂停后续的下载. 在 aria2 中有三种类型的元数据下载: (1) 下载 .torrent 文件. (2) 通过磁链下载种子元数据. (3) 下载磁链文件. 这些元数据下载完后会根据元数据内容进行下载. 这个选项会暂停这些后续的下载. 此选项仅当 --enable-rpc 启用时生效.',
+            'Allow All Origin Request': '接受所有远程请求',
+            'Add Access-Control-Allow-Origin header field with value * to the RPC response.': '在 RPC 响应头增加 Access-Control-Allow-Origin 字段, 值为 * .',
+            'Listen on All Network Interfaces': '在所有网卡上监听',
+            'Listen incoming JSON-RPC/XML-RPC requests on all network interfaces. If false is given, listen only on local loopback interface.': '在所有网络适配器上监听 JSON-RPC/XML-RPC 的请求, 如果设置为否, 仅监听本地网络的请求.',
+            'Listen Port': '监听端口',
+            'Specify a port number for JSON-RPC/XML-RPC server to listen to.': '',
+            'Max Request Size': '最大请求大小',
+            'Set max size of JSON-RPC/XML-RPC request. If aria2 detects the request is more than SIZE bytes, it drops connection.': '设置 JSON-RPC/XML-RPC 最大的请求大小. 如果 aria2 检测到请求超过设定的字节数, 会直接取消连接.',
+            'Save Upload Metadata': '保存上传的元数据',
+            'Save the uploaded torrent or metalink meta data in the directory specified by --dir option. The file name consists of SHA-1 hash hex string of meta data plus extension. For torrent, the extension is \'.torrent\'. For metalink, it is \'.meta4\'. If false is given to this option, the downloads added by aria2.addTorrent() or aria2.addMetalink() will not be saved by --save-session option.': '在 dir 参数设置的目录中保存上传的种子文件或磁链的元数据. 文件名包括 SHA-1 哈希后的元数据和扩展名两部分. 对于种子文件, 扩展名为 \'.torrent\'. 对于磁链为 \'.meta4\'. 如果此选项设置为否, 通过 aria2.addTorrent() 或 aria2.addMetalink() 方法添加的下载将无法通过 --save-session 选项保存.',
+            'Enable SSL/TLS': '启用 SSL/TLS',
+            'RPC transport will be encrypted by SSL/TLS. The RPC clients must use https scheme to access the server. For WebSocket client, use wss scheme. Use --rpc-certificate and --rpc-private-key options to specify the server certificate and private key.': 'RPC 将通过 SSL/TLS 加密传输. RPC 客户端需要使用 https 协议连接服务器. 对于 WebSocket 客户端, 使用 wss 协议. 使用 --rpc-certificate 和 --rpc-private-key 选项设置服务器的证书和私钥.',
+            'Type is illegal!': '类型错误!',
+            'none': '无',
+            'http': 'Http',
+            'https': 'Https',
+            'ftp': 'Ftp',
+            'mem': '仅内存',
+            'plain': '明文',
+            'arc4': 'ARC4',
+            'binary': '二进制',
+            'ascii': 'ASCII',
+            'debug': '调试 (Debug)',
+            'info': '普通 (Info)',
+            'notice': '一般 (Notice)',
+            'warn': '警告 (Warn)',
+            'error': '错误 (Error)'
         });
     }])
 })();

app/styles/aria-ng.css

@@ -157,6 +157,10 @@
     background-color: #208fe5;
 }
 
+.skin-aria-ng .icon-primary {
+    color: #3c8dbc;
+}
+
 /* override */
 td {
     vertical-align: middle !important;
@@ -347,10 +351,6 @@ td {
     background-color: #eee;
 }
 
-.settings-table .setting-key {
-    padding-top: 6px;
-}
-
 .settings-table .asterisk {
     color: red;
 }
@@ -358,13 +358,32 @@ td {
 .settings-table .description {
     color: #888;
     font-size: 12px;
+    font-weight: normal;
     display: block;
 }
 
+.settings-table em {
+    color: #888;
+    font-size: 12px;
+    font-weight: normal;
+}
+
 .settings-table .wholeline {
     display: block;
 }
 
+.settings-table .setting-value .form-group {
+    margin-bottom: 0;
+}
+
+.settings-table .setting-value .form-group .form-control-icon {
+    color: #3c8dbc;
+}
+
+.settings-table .setting-value .form-group .form-control-feedback {
+    right: 10px;
+}
+
 .settings-table .tip {
     background-color: #fff !important;
     font-size: 12px;
@@ -379,15 +398,17 @@ td {
         font-weight: bold;
     }
 
-    .settings-table .status-key {
-        font-weight: bold;
-    }
-
     .settings-table .description {
         display: inline-block;
     }
 }
 
+@media (min-width: 768px) {
+    .settings-table .setting-key-without-desc {
+        padding-top: 6px;
+    }
+}
+
 /* miscellaneous */
 span.realtime-upload, span.realtime-download {
     padding: 0 15px 0 15px;

app/views/settings-aria2.html

@@ -1,5 +1,72 @@
 <section class="content no-padding">
     <div class="settings-table">
+        <div class="row" ng-repeat="option in availableOptions" data-option-key="{{option.key}}">
+            <div class="setting-key setting-key-without-desc col-sm-4">
+                <span ng-bind="option.name | translate"></span>
+                <em class="" ng-bind="'(' + option.key + ')'"></em>
+                <i class="icon-primary fa fa-question-circle" data-toggle="tooltip" data-placement="right"
+                   title="{{option.description | translate}}"
+                   ng-if="option.description && (option.description | translate) != ''"></i>
+            </div>
+            <div class="setting-value col-sm-8">
+                <div ng-class="{'input-group': option.suffix}">
+                    <div class="form-group" ng-class="{'has-success': optionStatus[option.key] && optionStatus[option.key] == 'saved'}"
+                         ng-if="option.type == 'string' || option.type == 'integer' || option.type == 'float'">
+                        <div class="has-feedback">
+                            <input class="form-control" type="text" ng-disabled="!!option.readonly"
+                                   ng-model="globalOptions[option.key]"
+                                   ng-change="setGlobalOption(option, globalOptions[option.key], true)"/>
+                            <div class="form-control-icon" ng-if="optionStatus[option.key]">
+                                <span class="fa form-control-feedback"
+                                      ng-class="{'fa-spin fa-spinner': optionStatus[option.key] == 'saving', 'fa-check': optionStatus[option.key] == 'saved'}"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group" ng-class="{'has-success': optionStatus[option.key] && optionStatus[option.key] == 'saved'}"
+                         ng-if="option.type == 'text'">
+                        <div class="has-feedback">
+                            <textarea class="form-control" rows="6" ng-disabled="!!option.readonly"
+                                      ng-model="globalOptions[option.key]"
+                                      ng-change="setGlobalOption(option, globalOptions[option.key], true)"></textarea>
+                            <div class="form-control-icon" ng-if="optionStatus[option.key]">
+                                <span class="fa form-control-feedback"
+                                      ng-class="{'fa-spin fa-spinner': optionStatus[option.key] == 'saving', 'fa-check': optionStatus[option.key] == 'saved'}"></span>
+                            </div>
+                        </div>
+                    </div>
 
+                    <div class="form-group" ng-class="{'has-success': optionStatus[option.key] && optionStatus[option.key] == 'saved'}"
+                         ng-if="option.type == 'boolean'">
+                        <div class="has-feedback">
+                            <select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly"
+                                    ng-model="globalOptions[option.key]"
+                                    ng-change="setGlobalOption(option, globalOptions[option.key], false)">
+                                <option value="true" translate>True</option>
+                                <option value="false" translate>False</option>
+                            </select>
+                            <div class="form-control-icon" ng-if="optionStatus[option.key]">
+                                <span class="fa form-control-feedback"
+                                      ng-class="{'fa-spin fa-spinner': optionStatus[option.key] == 'saving', 'fa-check': optionStatus[option.key] == 'saved'}"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="form-group" ng-class="{'has-success': optionStatus[option.key] && optionStatus[option.key] == 'saved'}"
+                         ng-if="option.type == 'option'">
+                        <div class="has-feedback">
+                            <select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly"
+                                    ng-model="globalOptions[option.key]"
+                                    ng-change="setGlobalOption(option, globalOptions[option.key], false)" ng-options="(value | translate) for value in option.options">
+                            </select>
+                            <div class="form-control-icon" ng-if="optionStatus[option.key]">
+                                <span class="fa form-control-feedback"
+                                      ng-class="{'fa-spin fa-spinner': optionStatus[option.key] == 'saving', 'fa-check': optionStatus[option.key] == 'saved'}"></span>
+                            </div>
+                        </div>
+                    </div>
+                    <span class="input-group-addon" ng-if="option.suffix" ng-bind="option.suffix | translate"></span>
+                </div>
+            </div>
+        </div>
+        <div class="row tip"></div>
     </div>
 </section>

app/views/settings-ariang.html

@@ -1,7 +1,7 @@
 <section class="content no-padding">
     <div class="settings-table">
         <div class="row">
-            <div class="setting-key col-sm-4">
+            <div class="setting-key setting-key-without-desc col-sm-4">
                 <span translate>Language</span>
             </div>
             <div class="setting-value col-sm-8">
@@ -12,7 +12,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="setting-key col-sm-4">
+            <div class="setting-key setting-key-without-desc col-sm-4">
                 <span translate>Aria2 RPC Host</span>
                 <span class="asterisk">*</span>
             </div>
@@ -21,12 +21,12 @@
                     <span class="input-group-addon" ng-bind="settings.protocol + '://'"></span>
                     <input class="form-control" type="text" ng-model="settings.rpcHost" ng-change="settingService.setRpcHost(settings.rpcHost)"/>
                     <span class="input-group-addon" style="border-left: 0">:</span>
-                    <span class="input-group-addon" style="border-left: 0" ng-bind="settings.rpcPort"></span>
+                    <span class="input-group-addon" ng-bind="settings.rpcPort"></span>
                 </div>
             </div>
         </div>
         <div class="row">
-            <div class="setting-key col-sm-4">
+            <div class="setting-key setting-key-without-desc col-sm-4">
                 <span translate>Aria2 RPC Port</span>
                 <span class="asterisk">*</span>
             </div>
@@ -35,7 +35,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="setting-key col-sm-4">
+            <div class="setting-key setting-key-without-desc col-sm-4">
                 <span translate>Aria2 RPC Protocol</span>
                 <span class="asterisk">*</span>
             </div>
@@ -56,7 +56,7 @@
                 <div class="input-group">
                     <input class="form-control" type="text" ng-model="settings.globalStatRefreshInterval"
                            ng-change="settingService.setGlobalStatRefreshInterval(settings.globalStatRefreshInterval)"/>
-                    <span class="input-group-addon" style="border-left: 0" translate>Milliseconds</span>
+                    <span class="input-group-addon" translate>Milliseconds</span>
                 </div>
             </div>
         </div>
@@ -70,7 +70,7 @@
                 <div class="input-group">
                     <input class="form-control" type="text" ng-model="settings.downloadTaskRefreshInterval"
                            ng-change="settingService.setDownloadTaskRefreshInterval(settings.downloadTaskRefreshInterval)"/>
-                    <span class="input-group-addon" style="border-left: 0" translate>Milliseconds</span>
+                    <span class="input-group-addon" translate>Milliseconds</span>
                 </div>
             </div>
         </div>

app/views/status.html

@@ -1,18 +1,18 @@
 <section class="content no-padding">
     <div class="settings-table">
         <div class="row">
-            <div class="status-key col-sm-4">
+            <div class="setting-key col-sm-4">
                 <span translate>Aria2 Version</span>
             </div>
-            <div class="status-value col-sm-8">
+            <div class="setting-value col-sm-8">
                 <span ng-bind="serverStatus.version"></span>
             </div>
         </div>
         <div class="row">
-            <div class="status-key col-sm-4">
+            <div class="setting-key col-sm-4">
                 <span translate>Enabled Features</span>
             </div>
-            <div class="status-value col-sm-8">
+            <div class="setting-value col-sm-8">
                 <span class="wholeline" ng-repeat="feature in serverStatus.enabledFeatures" ng-bind="feature"></span>
             </div>
         </div>