split ariang settings into global and RPC settings

src/langs/zh_CN.txt

@@ -7,6 +7,8 @@ Confirm=确认
 Cancel=取消
 True=是
 False=否
+Global=全局
+RPC=RPC
 New=新建
 Start=开始下载任务
 Pause=暂停下载任务

src/scripts/config/defaultLanguage.js

@@ -11,6 +11,8 @@
             'Cancel': 'Cancel',
             'True': 'True',
             'False': 'False',
+            'Global': 'Global',
+            'RPC': 'RPC',
             'New': 'New',
             'Start': 'Start',
             'Pause': 'Pause',

src/scripts/controllers/settings-ariang.js

@@ -2,13 +2,43 @@
     'use strict';
 
     angular.module('ariaNg').controller('AriaNgSettingsController', ['$rootScope', '$scope', '$timeout', 'ariaNgLanguages', 'ariaNgCommonService', 'ariaNgSettingService', 'ariaNgNotificationService', function ($rootScope, $scope, $timeout, ariaNgLanguages, ariaNgCommonService, ariaNgSettingService, ariaNgNotificationService) {
+        var tabOrders = ['global', 'rpc'];
+
         $scope.context = {
+            currentTab: 'global',
             languages: ariaNgLanguages,
             availableTime: ariaNgCommonService.getTimeOptions([1000, 2000, 3000, 5000, 10000, 30000, 60000], true),
             trueFalseOptions: [{name: 'True', value: true}, {name: 'False', value: false}],
             settings: ariaNgSettingService.getAllOptions()
         };
 
+
+        $scope.changeTab = function (tabName) {
+            $scope.context.currentTab = tabName;
+        };
+
+        $rootScope.swipeActions.extentLeftSwipe = function () {
+            var tabIndex = tabOrders.indexOf($scope.context.currentTab);
+
+            if (tabIndex < tabOrders.length - 1) {
+                $scope.changeTab(tabOrders[tabIndex + 1]);
+                return true;
+            } else {
+                return false;
+            }
+        };
+
+        $rootScope.swipeActions.extentRightSwipe = function () {
+            var tabIndex = tabOrders.indexOf($scope.context.currentTab);
+
+            if (tabIndex > 0) {
+                $scope.changeTab(tabOrders[tabIndex - 1]);
+                return true;
+            } else {
+                return false;
+            }
+        };
+
         $scope.settingService = ariaNgSettingService;
 
         $scope.isSupportNotification = function () {

src/views/settings-ariang.html

@@ -1,4 +1,15 @@
 <section class="content no-padding">
+    <div class="nav-tabs-custom">
+        <ul class="nav nav-tabs">
+            <li ng-class="{'active': context.currentTab == 'global'}">
+                <a class="pointer-cursor" ng-click="changeTab('global')" translate>Global</a>
+            </li>
+            <li ng-class="{'active': context.currentTab == 'rpc'}">
+                <a class="pointer-cursor" ng-click="changeTab('rpc')" translate>RPC</a>
+            </li>
+        </ul>
+        <div class="tab-content no-padding">
+            <div class="tab-pane" ng-class="{'active': context.currentTab == 'global'}">
                 <div class="settings-table striped hoverable">
                     <div class="row">
                         <div class="setting-key setting-key-without-desc col-sm-4">
@@ -14,11 +25,13 @@
                     <div class="row">
                         <div class="setting-key setting-key-without-desc col-sm-4">
                             <span translate>Page Title</span>
-                <i class="icon-primary fa fa-question-circle" ng-tooltip="{{'Supported Placeholder: AriaNg Title ${title}, Downloading Count ${downloading}, Waiting Count ${waiting}, Stopped Count ${stopped}, Download Speed ${downspeed}, Upload Speed ${upspeed}.'| translate}}"
+                            <i class="icon-primary fa fa-question-circle"
+                               ng-tooltip="{{'Supported Placeholder: AriaNg Title ${title}, Downloading Count ${downloading}, Waiting Count ${waiting}, Stopped Count ${stopped}, Download Speed ${downspeed}, Upload Speed ${upspeed}.'| translate}}"
                                ng-tooltip-container="body" ng-tooltip-placement="right"></i>
                         </div>
                         <div class="setting-value col-sm-8">
-                <input class="form-control" type="text" ng-model="context.settings.title" ng-change="settingService.setTitle(context.settings.title)"/>
+                            <input class="form-control" type="text" ng-model="context.settings.title"
+                                   ng-change="settingService.setTitle(context.settings.title)"/>
                         </div>
                     </div>
                     <div class="row">
@@ -27,12 +40,59 @@
                             <span class="asterisk">*</span>
                         </div>
                         <div class="setting-value col-sm-8">
-                <select class="form-control" style="width: 100%;" ng-model="context.settings.titleRefreshInterval"
+                            <select class="form-control" style="width: 100%;"
+                                    ng-model="context.settings.titleRefreshInterval"
                                     ng-change="settingService.setTitleRefreshInterval(context.settings.titleRefreshInterval)"
                                     ng-options="time.optionValue as (time.name | translate: {value: time.value}) for time in context.availableTime">
                             </select>
                         </div>
                     </div>
+                    <div class="row" ng-if="isSupportNotification()">
+                        <div class="setting-key setting-key-without-desc col-sm-4">
+                            <span translate>Enable Browser Notification</span>
+                        </div>
+                        <div class="setting-value col-sm-8">
+                            <select class="form-control" style="width: 100%;"
+                                    ng-model="context.settings.browserNotification"
+                                    ng-change="setEnableBrowserNotification(context.settings.browserNotification)"
+                                    ng-options="option.value as (option.name | translate) for option in context.trueFalseOptions">
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="setting-key setting-key-without-desc col-sm-4">
+                            <span translate>Global Stat Refresh Interval</span>
+                            <span class="asterisk">*</span>
+                        </div>
+                        <div class="setting-value col-sm-8">
+                            <select class="form-control" style="width: 100%;"
+                                    ng-model="context.settings.globalStatRefreshInterval"
+                                    ng-change="settingService.setGlobalStatRefreshInterval(context.settings.globalStatRefreshInterval)"
+                                    ng-options="time.optionValue as (time.name | translate: {value: time.value}) for time in context.availableTime">
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="setting-key setting-key-without-desc col-sm-4">
+                            <span translate>Download Task Refresh Interval</span>
+                            <span class="asterisk">*</span>
+                        </div>
+                        <div class="setting-value col-sm-8">
+                            <select class="form-control" style="width: 100%;"
+                                    ng-model="context.settings.downloadTaskRefreshInterval"
+                                    ng-change="settingService.setDownloadTaskRefreshInterval(context.settings.downloadTaskRefreshInterval)"
+                                    ng-options="time.optionValue as (time.name | translate: {value: time.value}) for time in context.availableTime">
+                            </select>
+                        </div>
+                    </div>
+                    <div class="row tip no-background no-hover">
+                        <span class="asterisk">*</span>
+                        <span translate>Changes to the settings take effect after refreshing page.</span>
+                    </div>
+                </div>
+            </div>
+            <div class="tab-pane" ng-class="{'active': context.currentTab == 'rpc'}">
+                <div class="settings-table striped hoverable">
                     <div class="row">
                         <div class="setting-key setting-key-without-desc col-sm-4">
                             <span translate>Aria2 RPC Host</span>
@@ -41,7 +101,8 @@
                         <div class="setting-value col-sm-8">
                             <div class="input-group">
                                 <span class="input-group-addon" ng-bind="context.settings.protocol + '://'"></span>
-                    <input class="form-control" type="text" ng-model="context.settings.rpcHost" ng-change="settingService.setRpcHost(context.settings.rpcHost)"/>
+                                <input class="form-control" type="text" ng-model="context.settings.rpcHost"
+                                       ng-change="settingService.setRpcHost(context.settings.rpcHost)"/>
                                 <span class="input-group-addon" style="border-left: 0">:</span>
                                 <span class="input-group-addon" ng-bind="context.settings.rpcPort"></span>
                             </div>
@@ -53,7 +114,8 @@
                             <span class="asterisk">*</span>
                         </div>
                         <div class="setting-value col-sm-8">
-                <input class="form-control" type="text" ng-model="context.settings.rpcPort" ng-change="settingService.setRpcPort(context.settings.rpcPort)"/>
+                            <input class="form-control" type="text" ng-model="context.settings.rpcPort"
+                                   ng-change="settingService.setRpcPort(context.settings.rpcPort)"/>
                         </div>
                     </div>
                     <div class="row">
@@ -62,7 +124,8 @@
                             <span class="asterisk">*</span>
                         </div>
                         <div class="setting-value col-sm-8">
-                <select class="form-control" style="width: 100%;" ng-model="context.settings.protocol" ng-change="settingService.setProtocol(context.settings.protocol)">
+                            <select class="form-control" style="width: 100%;" ng-model="context.settings.protocol"
+                                    ng-change="settingService.setProtocol(context.settings.protocol)">
                                 <option value="http" translate>Http</option>
                                 <option value="https" translate>Https</option>
                                 <option value="ws" translate>WebSocket</option>
@@ -76,42 +139,8 @@
                             <span class="asterisk">*</span>
                         </div>
                         <div class="setting-value col-sm-8">
-                <input class="form-control" type="password" ng-model="context.settings.secret" ng-change="settingService.setSecret(context.settings.secret)"/>
+                            <input class="form-control" type="password" ng-model="context.settings.secret"
-            </div>
+                                   ng-change="settingService.setSecret(context.settings.secret)"/>
-        </div>
-        <div class="row" ng-if="isSupportNotification()">
-            <div class="setting-key setting-key-without-desc col-sm-4">
-                <span translate>Enable Browser Notification</span>
-            </div>
-            <div class="setting-value col-sm-8">
-                <select class="form-control" style="width: 100%;" ng-model="context.settings.browserNotification"
-                        ng-change="setEnableBrowserNotification(context.settings.browserNotification)"
-                        ng-options="option.value as (option.name | translate) for option in context.trueFalseOptions">
-                </select>
-            </div>
-        </div>
-        <div class="row">
-            <div class="setting-key setting-key-without-desc col-sm-4">
-                <span translate>Global Stat Refresh Interval</span>
-                <span class="asterisk">*</span>
-            </div>
-            <div class="setting-value col-sm-8">
-                <select class="form-control" style="width: 100%;" ng-model="context.settings.globalStatRefreshInterval"
-                        ng-change="settingService.setGlobalStatRefreshInterval(context.settings.globalStatRefreshInterval)"
-                        ng-options="time.optionValue as (time.name | translate: {value: time.value}) for time in context.availableTime">
-                </select>
-            </div>
-        </div>
-        <div class="row">
-            <div class="setting-key setting-key-without-desc col-sm-4">
-                <span translate>Download Task Refresh Interval</span>
-                <span class="asterisk">*</span>
-            </div>
-            <div class="setting-value col-sm-8">
-                <select class="form-control" style="width: 100%;" ng-model="context.settings.downloadTaskRefreshInterval"
-                        ng-change="settingService.setDownloadTaskRefreshInterval(context.settings.downloadTaskRefreshInterval)"
-                        ng-options="time.optionValue as (time.name | translate: {value: time.value}) for time in context.availableTime">
-                </select>
                         </div>
                     </div>
                     <div class="row tip no-background no-hover">
@@ -119,4 +148,7 @@
                         <span translate>Changes to the settings take effect after refreshing page.</span>
                     </div>
                 </div>
+            </div>
+        </div>
+    </div>
 </section>