refactor code

app/scripts/controllers/settings-aria2.js

@@ -15,18 +15,15 @@
             return aria2SettingService.getSpecifiedOptions(keys);
         };
 
-        $scope.optionStatus = {};
         $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) {
-                $scope.optionStatus[key] = 'saved';
+                if (result == 'OK') {
+                    optionStatus.setSuccess();
+                } else {
+                    optionStatus.setFailed();
+                }
             });
         };
 

app/scripts/controllers/task-detail.js

@@ -53,7 +53,6 @@
         };
 
         $scope.healthPercent = 0;
-        $scope.optionStatus = {};
         $scope.availableOptions = [];
 
         $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) {
-                $scope.optionStatus[key] = 'saved';
+                if (result == 'OK') {
+                    optionStatus.setSuccess();
+                } else {
+                    optionStatus.setFailed();
+                }
             });
         };
 

app/scripts/directives/setting.js

@@ -10,8 +10,6 @@
             scope: {
                 option: '=',
                 ngModel: '=',
-                status: '=',
-                onPendingChangeValue: '&',
                 onChangeValue: '&'
             },
             link: function (scope, element, attrs, ngModel) {
@@ -22,6 +20,63 @@
 
                 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 () {
                     if (!scope.optionValue && !angular.isString(scope.optionValue)) {
                         return 0;
@@ -32,6 +87,7 @@
 
                 scope.changeValue = function (optionValue, lazySave) {
                     scope.optionValue = optionValue;
+                    scope.optionStatus.setReady();
 
                     if (!scope.option || !scope.option.key || scope.option.readonly) {
                         return;
@@ -39,24 +95,28 @@
 
                     var data = {
                         key: scope.option.key,
-                        value: optionValue
+                        value: optionValue,
+                        optionStatus: scope.optionStatus
                     };
 
-                    if (scope.onPendingChangeValue) {
-                        scope.onPendingChangeValue(data);
-                    }
-
                     if (pendingSaveRequest) {
                         $timeout.cancel(pendingSaveRequest);
                     }
 
+                    var invokeChange = function () {
+                        scope.optionStatus.setSaving();
+                        scope.onChangeValue(data);
+                    };
+
                     if (scope.onChangeValue) {
                         if (lazySave) {
+                            scope.optionStatus.setPending();
+
                             pendingSaveRequest = $timeout(function () {
-                                scope.onChangeValue(data);
+                                invokeChange();
                             }, options.lazySaveTimeout);
                         } else {
-                            scope.onChangeValue(data);
+                            invokeChange();
                         }
                     }
                 };

app/scripts/services/aria2HttpRpcService.js

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

app/views/setting.html

@@ -9,42 +9,41 @@
     </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'"
+            <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">
                     <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 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">
                     <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 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">
                     <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">
+                    <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 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">
                     <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">
+                    <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>

app/views/settings-aria2.html

@@ -1,6 +1,6 @@
 <section class="content no-padding">
     <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>
 </section>

app/views/task-detail.html

@@ -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="settings-table settings-table-firstrow-noborder">
                     <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>