refactor code
This commit is contained in:
MaysWind
parent
d2db91403b
commit
f6e9e9878e
|
|
@ -276,6 +276,7 @@
|
|||
<script src="scripts/controllers/settings-aria2.js"></script>
|
||||
<script src="scripts/controllers/status.js"></script>
|
||||
<script src="scripts/directives/placeholder.js"></script>
|
||||
<script src="scripts/directives/setting.js"></script>
|
||||
<script src="scripts/filters/dateDuration.js"></script>
|
||||
<script src="scripts/filters/fileOrderBy.js"></script>
|
||||
<script src="scripts/filters/percent.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module('ariaNg').controller('Aria2SettingsController', ['$rootScope', '$scope', '$location', '$timeout', 'ariaNgConstants', 'ariaNgCommonService', 'aria2SettingService', function ($rootScope, $scope, $location, $timeout, ariaNgConstants, ariaNgCommonService, aria2SettingService) {
|
||||
angular.module('ariaNg').controller('Aria2SettingsController', ['$rootScope', '$scope', '$location', 'ariaNgConstants', 'ariaNgCommonService', 'aria2SettingService', function ($rootScope, $scope, $location, ariaNgConstants, ariaNgCommonService, aria2SettingService) {
|
||||
var location = $location.path().substring($location.path().lastIndexOf('/') + 1);
|
||||
var pendingSaveRequests = {};
|
||||
|
||||
var getAvailableOptions = function (type) {
|
||||
var keys = aria2SettingService.getAvailableOptionsKeys(type);
|
||||
|
|
@ -19,13 +18,11 @@
|
|||
$scope.optionStatus = {};
|
||||
$scope.availableOptions = getAvailableOptions(location);
|
||||
|
||||
$scope.setGlobalOption = function (option, value, lazySave) {
|
||||
if (!option || !option.key || option.readonly) {
|
||||
return;
|
||||
}
|
||||
$scope.pendingGlobalOption = function (key, value) {
|
||||
$scope.optionStatus[key] = 'pending';
|
||||
};
|
||||
|
||||
var key = option.key;
|
||||
var invoke = function () {
|
||||
$scope.setGlobalOption = function (key, value) {
|
||||
$scope.optionStatus[key] = 'saving';
|
||||
|
||||
return aria2SettingService.setGlobalOption(key, value, function (result) {
|
||||
|
|
@ -33,21 +30,6 @@
|
|||
});
|
||||
};
|
||||
|
||||
delete $scope.optionStatus[key];
|
||||
|
||||
if (lazySave) {
|
||||
if (pendingSaveRequests[key]) {
|
||||
$timeout.cancel(pendingSaveRequests[key]);
|
||||
}
|
||||
|
||||
pendingSaveRequests[key] = $timeout(function () {
|
||||
invoke();
|
||||
}, ariaNgConstants.lazySaveTimeout);
|
||||
} else {
|
||||
invoke();
|
||||
}
|
||||
};
|
||||
|
||||
$rootScope.loadPromise = (function () {
|
||||
return aria2SettingService.getGlobalOption(function (result) {
|
||||
$scope.globalOptions = result;
|
||||
|
|
|
|||
72
app/scripts/directives/setting.js
Normal file
72
app/scripts/directives/setting.js
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
(function () {
|
||||
'use strict';
|
||||
|
||||
angular.module("ariaNg").directive('ngSetting', ['$timeout', 'ariaNgConstants', function ($timeout, ariaNgConstants) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: "views/setting.html",
|
||||
require: '?ngModel',
|
||||
replace: true,
|
||||
scope: {
|
||||
option: '=',
|
||||
ngModel: '=',
|
||||
status: '=',
|
||||
beforeChangeValue: '&',
|
||||
onChangeValue: '&'
|
||||
},
|
||||
link: function (scope, element, attrs, ngModel) {
|
||||
var pendingSaveRequest = null;
|
||||
var options = {
|
||||
lazySaveTimeout: ariaNgConstants.lazySaveTimeout
|
||||
};
|
||||
|
||||
angular.extend(options, attrs);
|
||||
|
||||
scope.getTotalCount = function () {
|
||||
if (!scope.optionValue && !angular.isString(scope.optionValue)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return scope.optionValue.split(scope.option.split).length;
|
||||
};
|
||||
|
||||
scope.changeValue = function (optionValue, lazySave) {
|
||||
scope.optionValue = optionValue;
|
||||
|
||||
if (!scope.option || !scope.option.key || scope.option.readonly) {
|
||||
return;
|
||||
}
|
||||
|
||||
var data = {
|
||||
key: scope.option.key,
|
||||
value: optionValue
|
||||
};
|
||||
|
||||
if (scope.beforeChangeValue) {
|
||||
scope.beforeChangeValue(data);
|
||||
}
|
||||
|
||||
if (pendingSaveRequest) {
|
||||
$timeout.cancel(pendingSaveRequest);
|
||||
}
|
||||
|
||||
if (scope.onChangeValue) {
|
||||
if (lazySave) {
|
||||
pendingSaveRequest = $timeout(function () {
|
||||
scope.onChangeValue(data);
|
||||
}, options.lazySaveTimeout);
|
||||
} else {
|
||||
scope.onChangeValue(data);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
scope.$watch(function () {
|
||||
return ngModel.$viewValue;
|
||||
}, function (value) {
|
||||
scope.optionValue = value;
|
||||
});
|
||||
}
|
||||
};
|
||||
}]);
|
||||
})();
|
||||
54
app/views/setting.html
Normal file
54
app/views/setting.html
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<div class="row" data-option-key="{{option.key}}">
|
||||
<div class="setting-key setting-key-without-desc col-sm-4">
|
||||
<span ng-bind="option.nameKey | translate"></span>
|
||||
<em ng-bind="'(' + option.key + ')'"></em>
|
||||
<i class="icon-primary fa fa-question-circle" data-toggle="tooltip" data-placement="right"
|
||||
title="{{option.descriptionKey | translate}}" ng-if="(option.descriptionKey | translate) != ''"></i>
|
||||
<span class="description" ng-if="option.showCount && option.split && optionValue"
|
||||
ng-bind="'(' + ('Total Count' | translate) + ': ' + getTotalCount() + ')'"></span>
|
||||
</div>
|
||||
<div class="setting-value col-sm-8">
|
||||
<div ng-class="{'input-group': option.suffix}">
|
||||
<div class="form-group" ng-if="option.type == 'string' || option.type == 'integer' || option.type == 'float'"
|
||||
ng-class="{'has-success': status && status == 'saved'}">
|
||||
<div class="has-feedback">
|
||||
<input class="form-control" type="text" ng-disabled="!!option.readonly" ng-model="optionValue" ng-change="changeValue(optionValue, true)"/>
|
||||
<div class="form-control-icon" ng-if="status">
|
||||
<span class="fa form-control-feedback" ng-class="{'fa-hourglass-start': status == 'pending', 'fa-spin fa-pulse fa-spinner': status == 'saving', 'fa-check': status == 'saved'}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" ng-if="option.type == 'text'" ng-class="{'has-success': status && status == 'saved'}">
|
||||
<div class="has-feedback">
|
||||
<textarea class="form-control" rows="6" ng-disabled="!!option.readonly" ng-model="optionValue" ng-change="changeValue(optionValue, true)"></textarea>
|
||||
<div class="form-control-icon" ng-if="status">
|
||||
<span class="fa form-control-feedback" ng-class="{'fa-hourglass-start': status == 'pending', 'fa-spin fa-pulse fa-spinner': status == 'saving', 'fa-check': status == 'saved'}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" ng-if="option.type == 'boolean'" ng-class="{'has-success': status && status == 'saved'}">
|
||||
<div class="has-feedback">
|
||||
<select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly" ng-model="optionValue" ng-change="changeValue(optionValue, false)">
|
||||
<option value="true" translate>True</option>
|
||||
<option value="false" translate>False</option>
|
||||
</select>
|
||||
<div class="form-control-icon" ng-if="status">
|
||||
<span class="fa form-control-feedback" ng-class="{'fa-hourglass-start': status == 'pending', 'fa-spin fa-pulse fa-spinner': status == 'saving', 'fa-check': status == 'saved'}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group" ng-if="option.type == 'option'" ng-class="{'has-success': status && status == 'saved'}">
|
||||
<div class="has-feedback">
|
||||
<select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly"
|
||||
ng-model="optionValue" ng-change="changeValue(optionValue, false)"
|
||||
ng-options="(value | translate) for value in option.options">
|
||||
</select>
|
||||
<div class="form-control-icon" ng-if="status">
|
||||
<span class="fa form-control-feedback" ng-class="{'fa-hourglass-start': status == 'pending', 'fa-spin fa-pulse fa-spinner': status == 'saving', 'fa-check': status == 'saved'}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="input-group-addon" ng-if="option.suffix" ng-bind="option.suffix | translate"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,73 +1,6 @@
|
|||
<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.nameKey | translate"></span>
|
||||
<em ng-bind="'(' + option.key + ')'"></em>
|
||||
<i class="icon-primary fa fa-question-circle" data-toggle="tooltip" data-placement="right"
|
||||
title="{{option.descriptionKey | translate}}"
|
||||
ng-if="(option.descriptionKey | translate) != ''"></i>
|
||||
<span class="description" ng-if="option.showCount && option.split && globalOptions[option.key]"
|
||||
ng-bind="'(' + ('Total Count' | translate) + ': ' + globalOptions[option.key].split(option.split).length + ')'"></span>
|
||||
</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>
|
||||
<ng-setting ng-repeat="option in availableOptions" option="option" ng-model="globalOptions[option.key]" status="optionStatus[option.key]"
|
||||
before-change-value="pendingGlobalOption(key, value)" on-change-value="setGlobalOption(key, value)"></ng-setting>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Reference in a new issue