add AriaNg setting page, support set language and rpc server
This commit is contained in:
parent
c42300aee2
commit
723cec3d1c
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
$interval.cancel($rootScope.downloadTaskRefreshTimer);
|
||||
}
|
||||
|
||||
$rootScope.downloadTaskRefreshTimer = $interval(function () {
|
||||
var downloadTaskRefreshPromise = $interval(function () {
|
||||
var invokeMethod = null;
|
||||
var params = [];
|
||||
|
||||
|
@ -92,5 +88,11 @@
|
|||
});
|
||||
}
|
||||
}, ariaNgSettingService.getDownloadTaskRefreshInterval());
|
||||
|
||||
$scope.$on('$destroy', function () {
|
||||
if (downloadTaskRefreshPromise) {
|
||||
$interval.cancel(downloadTaskRefreshPromise);
|
||||
}
|
||||
});
|
||||
}]);
|
||||
})();
|
||||
|
|
8
app/scripts/controllers/settings-ariang.js
Normal file
8
app/scripts/controllers/settings-ariang.js
Normal file
|
@ -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;
|
||||
}]);
|
||||
})();
|
|
@ -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');
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
title: 'Aria Ng',
|
||||
appPrefix: 'AriaNg'
|
||||
}).constant('ariaNgDefaultOptions', {
|
||||
localeName: 'en-US',
|
||||
language: 'en-US',
|
||||
protocol: 'http',
|
||||
globalStatRefreshInterval: 1000,
|
||||
downloadTaskRefreshInterval: 1000
|
||||
|
|
|
@ -15,6 +15,10 @@
|
|||
templateUrl: 'views/list.html',
|
||||
controller: 'DownloadListController'
|
||||
})
|
||||
.when('/settings/ariang', {
|
||||
templateUrl: 'views/settings-ariang.html',
|
||||
controller: 'AriaNgSettingsController'
|
||||
})
|
||||
.otherwise({
|
||||
redirectTo: '/downloading'
|
||||
});
|
||||
|
|
|
@ -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.'
|
||||
});
|
||||
}])
|
||||
})();
|
||||
|
|
|
@ -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.': '设置将在刷新页面后生效.'
|
||||
});
|
||||
}])
|
||||
})();
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -3,9 +3,13 @@
|
|||
|
||||
angular.module('ariaNg').factory('aria2WebSocketRpcService', ['$websocket', 'ariaNgSettingService', function ($websocket, ariaNgSettingService) {
|
||||
var rpcUrl = ariaNgSettingService.getJsonRpcUrl('ws');
|
||||
var socketClient = $websocket(rpcUrl);
|
||||
var socketClient = null;
|
||||
var sendIdMapping = {};
|
||||
|
||||
var getSocketClient = function () {
|
||||
if (socketClient == null) {
|
||||
socketClient = $websocket(rpcUrl);
|
||||
|
||||
socketClient.onMessage(function (message) {
|
||||
if (!message || !message.data) {
|
||||
return;
|
||||
|
@ -33,6 +37,10 @@
|
|||
|
||||
delete sendIdMapping[uniqueId];
|
||||
});
|
||||
}
|
||||
|
||||
return socketClient;
|
||||
};
|
||||
|
||||
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);
|
||||
}
|
||||
};
|
||||
}]);
|
||||
|
|
|
@ -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 () {
|
||||
return getOption('localeName');
|
||||
getAllOptions: function () {
|
||||
var options = angular.extend({}, ariaNgDefaultOptions, getOptions());
|
||||
|
||||
if (!options.aria2RpcHost) {
|
||||
options.aria2RpcHost = getDefaultJsonRpcHost();
|
||||
}
|
||||
|
||||
return options;
|
||||
},
|
||||
setLocaleName: function (value) {
|
||||
setOption('localeName', value);
|
||||
setAllOptions: function (options) {
|
||||
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');
|
||||
},
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
|
|
40
app/views/settings-ariang.html
Normal file
40
app/views/settings-ariang.html
Normal file
|
@ -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>
|
Reference in a new issue