refactor code

This commit is contained in:
MaysWind 2016-06-03 00:16:27 +08:00
parent 6ec1d0586c
commit 40f6ac9f19
7 changed files with 103 additions and 46 deletions

View file

@ -15,18 +15,15 @@
return aria2SettingService.getSpecifiedOptions(keys); return aria2SettingService.getSpecifiedOptions(keys);
}; };
$scope.optionStatus = {};
$scope.availableOptions = getAvailableOptions(location); $scope.availableOptions = getAvailableOptions(location);
$scope.pendingGlobalOption = function (key, value) { $scope.setGlobalOption = function (key, value, optionStatus) {
$scope.optionStatus[key] = 'pending';
};
$scope.setGlobalOption = function (key, value) {
$scope.optionStatus[key] = 'saving';
return aria2SettingService.setGlobalOption(key, value, function (result) { return aria2SettingService.setGlobalOption(key, value, function (result) {
$scope.optionStatus[key] = 'saved'; if (result == 'OK') {
optionStatus.setSuccess();
} else {
optionStatus.setFailed();
}
}); });
}; };

View file

@ -53,7 +53,6 @@
}; };
$scope.healthPercent = 0; $scope.healthPercent = 0;
$scope.optionStatus = {};
$scope.availableOptions = []; $scope.availableOptions = [];
$rootScope.swipeActions.extentLeftSwipe = function () { $rootScope.swipeActions.extentLeftSwipe = function () {
@ -106,15 +105,13 @@
}); });
}; };
$scope.pendingOption = function (key, value) { $scope.setOption = function (key, value, optionStatus) {
$scope.optionStatus[key] = 'pending';
};
$scope.setOption = function (key, value) {
$scope.optionStatus[key] = 'saving';
return aria2TaskService.setTaskOption($scope.task.gid, key, value, function (result) { return aria2TaskService.setTaskOption($scope.task.gid, key, value, function (result) {
$scope.optionStatus[key] = 'saved'; if (result == 'OK') {
optionStatus.setSuccess();
} else {
optionStatus.setFailed();
}
}); });
}; };

View file

@ -10,8 +10,6 @@
scope: { scope: {
option: '=', option: '=',
ngModel: '=', ngModel: '=',
status: '=',
onPendingChangeValue: '&',
onChangeValue: '&' onChangeValue: '&'
}, },
link: function (scope, element, attrs, ngModel) { link: function (scope, element, attrs, ngModel) {
@ -22,6 +20,63 @@
angular.extend(options, attrs); angular.extend(options, attrs);
scope.optionStatus = (function () {
var value = 'ready';
return {
getValue: function () {
return value;
},
setReady: function () {
value = 'ready';
},
setPending: function () {
value = 'pending';
},
setSaving: function () {
value = 'pending';
},
setSuccess: function () {
value = 'success';
},
setFailed: function () {
value = 'failed';
},
setError: function () {
value = 'error';
},
getStatusFeedbackStyle: function () {
if (value == 'success') {
return 'has-success';
} else if (value == 'failed') {
return 'has-warning';
} else if (value == 'error') {
return 'has-error';
} else {
return '';
}
},
getStatusIcon: function () {
if (value == 'pending') {
return 'fa-hourglass-start';
} else if (value == 'saving') {
return 'fa-spin fa-pulse fa-spinner';
} else if (value == 'success') {
return 'fa-check';
} else if (value == 'failed') {
return 'fa-exclamation';
} else if (value == 'error') {
return 'fa-times';
} else {
return '';
}
},
isShowStatusIcon: function () {
return this.getStatusIcon() != '';
}
};
})();
scope.getTotalCount = function () { scope.getTotalCount = function () {
if (!scope.optionValue && !angular.isString(scope.optionValue)) { if (!scope.optionValue && !angular.isString(scope.optionValue)) {
return 0; return 0;
@ -32,6 +87,7 @@
scope.changeValue = function (optionValue, lazySave) { scope.changeValue = function (optionValue, lazySave) {
scope.optionValue = optionValue; scope.optionValue = optionValue;
scope.optionStatus.setReady();
if (!scope.option || !scope.option.key || scope.option.readonly) { if (!scope.option || !scope.option.key || scope.option.readonly) {
return; return;
@ -39,24 +95,28 @@
var data = { var data = {
key: scope.option.key, key: scope.option.key,
value: optionValue value: optionValue,
optionStatus: scope.optionStatus
}; };
if (scope.onPendingChangeValue) {
scope.onPendingChangeValue(data);
}
if (pendingSaveRequest) { if (pendingSaveRequest) {
$timeout.cancel(pendingSaveRequest); $timeout.cancel(pendingSaveRequest);
} }
var invokeChange = function () {
scope.optionStatus.setSaving();
scope.onChangeValue(data);
};
if (scope.onChangeValue) { if (scope.onChangeValue) {
if (lazySave) { if (lazySave) {
scope.optionStatus.setPending();
pendingSaveRequest = $timeout(function () { pendingSaveRequest = $timeout(function () {
scope.onChangeValue(data); invokeChange();
}, options.lazySaveTimeout); }, options.lazySaveTimeout);
} else { } else {
scope.onChangeValue(data); invokeChange();
} }
} }
}; };

View file

@ -25,7 +25,13 @@
context.callback(data.result); context.callback(data.result);
} }
}).error(function (data, header, config, status) { }).error(function (data, header, config, status) {
//Do Nothing if (!data) {
return;
}
if (context.callback) {
context.callback(data.result);
}
}); });
} }
}; };

View file

@ -9,42 +9,41 @@
</div> </div>
<div class="setting-value col-sm-8"> <div class="setting-value col-sm-8">
<div ng-class="{'input-group': option.suffix}"> <div ng-class="{'input-group': option.suffix}">
<div class="form-group" ng-if="option.type == 'string' || option.type == 'integer' || option.type == 'float'" <div class="form-group" ng-if="option.type == 'string' || option.type == 'integer' || option.type == 'float'" ng-class="[optionStatus.getStatusFeedbackStyle()]">
ng-class="{'has-success': status && status == 'saved'}">
<div class="has-feedback"> <div class="has-feedback">
<input class="form-control" type="text" ng-disabled="!!option.readonly" ng-model="optionValue" ng-change="changeValue(optionValue, true)"/> <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"> <div class="form-control-icon" ng-if="optionStatus.isShowStatusIcon()">
<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> <span class="fa form-control-feedback" ng-class="[optionStatus.getStatusIcon()]"></span>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group" ng-if="option.type == 'text'" ng-class="{'has-success': status && status == 'saved'}"> <div class="form-group" ng-if="option.type == 'text'" ng-class="[optionStatus.getStatusFeedbackStyle()]">
<div class="has-feedback"> <div class="has-feedback">
<textarea class="form-control" rows="6" ng-disabled="!!option.readonly" ng-model="optionValue" ng-change="changeValue(optionValue, true)"></textarea> <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"> <div class="form-control-icon" ng-if="optionStatus.isShowStatusIcon()">
<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> <span class="fa form-control-feedback" ng-class="[optionStatus.getStatusIcon()]"></span>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group" ng-if="option.type == 'boolean'" ng-class="{'has-success': status && status == 'saved'}"> <div class="form-group" ng-if="option.type == 'boolean'" ng-class="[optionStatus.getStatusFeedbackStyle()]">
<div class="has-feedback"> <div class="has-feedback">
<select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly" ng-model="optionValue" ng-change="changeValue(optionValue, false)"> <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="true" translate>True</option>
<option value="false" translate>False</option> <option value="false" translate>False</option>
</select> </select>
<div class="form-control-icon" ng-if="status"> <div class="form-control-icon" ng-if="optionStatus.isShowStatusIcon()">
<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> <span class="fa form-control-feedback" ng-class="[optionStatus.getStatusIcon()]"></span>
</div> </div>
</div> </div>
</div> </div>
<div class="form-group" ng-if="option.type == 'option'" ng-class="{'has-success': status && status == 'saved'}"> <div class="form-group" ng-if="option.type == 'option'" ng-class="[optionStatus.getStatusFeedbackStyle()]">
<div class="has-feedback"> <div class="has-feedback">
<select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly" <select class="form-control" style="width: 100%;" ng-disabled="!!option.readonly"
ng-model="optionValue" ng-change="changeValue(optionValue, false)" ng-model="optionValue" ng-change="changeValue(optionValue, false)"
ng-options="(value | translate) for value in option.options"> ng-options="(value | translate) for value in option.options">
</select> </select>
<div class="form-control-icon" ng-if="status"> <div class="form-control-icon" ng-if="optionStatus.isShowStatusIcon()">
<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> <span class="fa form-control-feedback" ng-class="[optionStatus.getStatusIcon()]"></span>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,6 +1,6 @@
<section class="content no-padding"> <section class="content no-padding">
<div class="settings-table"> <div class="settings-table">
<ng-setting ng-repeat="option in availableOptions" option="option" ng-model="globalOptions[option.key]" status="optionStatus[option.key]" <ng-setting ng-repeat="option in availableOptions" option="option" ng-model="globalOptions[option.key]"
on-pending-change-value="pendingOption(key, value)" on-change-value="setGlobalOption(key, value)"></ng-setting> on-change-value="setGlobalOption(key, value, optionStatus)"></ng-setting>
</div> </div>
</section> </section>

View file

@ -209,9 +209,7 @@
<div class="tab-pane" ng-class="{'active': context.currentTab == 'settings'}" ng-if="task && (task.status == 'active' || task.status == 'waiting' || task.status == 'paused')"> <div class="tab-pane" ng-class="{'active': context.currentTab == 'settings'}" ng-if="task && (task.status == 'active' || task.status == 'waiting' || task.status == 'paused')">
<div class="settings-table settings-table-firstrow-noborder"> <div class="settings-table settings-table-firstrow-noborder">
<ng-setting ng-repeat="option in availableOptions" option="option" <ng-setting ng-repeat="option in availableOptions" option="option"
ng-model="options[option.key]" status="optionStatus[option.key]" ng-model="options[option.key]" on-change-value="setOption(key, value, optionStatus)"></ng-setting>
on-pending-change-value="pendingOption(key, value)"
on-change-value="setOption(key, value)"></ng-setting>
</div> </div>
</div> </div>
</div> </div>