Add loading button when clicking in run/stop button

This will give an interface that shows something is being processed. Also, this patch instroduces a fix that don't allow to send multiple requests when a run/stop is being loading. Signed-off-by: Bruno Bottazzini <bruno.bottazzini@intel.com>
solettaproject · May 11, 2016 · 3fb7474 · 3fb7474
1 parent e8af7c2
commit 3fb7474
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 30 deletions.
diff --git a/client/css/app.css b/client/css/app.css
@@ -299,6 +299,16 @@ iframe{
     margin-left: 5px;
 }
 
+.button_loading {
+    background:url(../imgs/button_loading.gif);
+    background-repeat: no-repeat;
+    width:78px;
+    height:32px;
+    outline: 0;
+    margin-top: -5px;
+    margin-left: 5px;
+}
+
 .button_stop {
     background:url(../imgs/button_stop.png);
     background-repeat: no-repeat;

diff --git a/client/imgs/button_loading.gif b/client/imgs/button_loading.gif
diff --git a/client/js/controllers/editor.js b/client/js/controllers/editor.js
@@ -36,6 +36,7 @@
                 $scope.loginConf = false;
                 $scope.runJournal = false;
                 $scope.shouldSave = false;
+                $scope.runningStartStop = false;
                 svConf.fetchConf().success(function(data){
                     $scope.runConf = data.run_fbp_access;
                     $scope.loginConf = data.login_system;
@@ -328,40 +329,48 @@
                 };
 
                 $scope.run = function() {
-                    if ($scope.isServiceRunning) {
-                        //Post stop service
-                        $http.post('/api/fbp/stop').success(function(data) {
-                                if (data == 1) {
-                                   alert("FBP Service failed to stop");
-                                }
-                         });
-                    } else if ($scope.fbpType === true) {
-                        var fbpCode = editor.getSession().getValue();
-                        var fbpName = $scope.fileName;
-                        $scope.newFile = true;
-                        var conf = $scope.selectConfigPath;
-                        if (conf === "none") {
-                            conf = null;
-                        }
-                        if (!filePath) {
-                            filePath = "/tmp/cached.fbp";
-                        }
-                        $http.post('/api/fbp/run',
-                                {params: {
-                                    "fbp_name": fbpName,
-                                    "fbp_path": filePath,
-                                    "code": fbpCode,
-                                    "conf": conf
-                                }
+                    if (!$scope.runningStartStop) {
+                        if ($scope.isServiceRunning) {
+                            //Post stop service
+                            $scope.runningStartStop = true;
+                            $http.post('/api/fbp/stop').success(function(data) {
+                                    if (data == 1) {
+                                       alert("FBP Service failed to stop");
+                                    }
+                            }).error(function(){
+                                $scope.runningStartStop = false;
+                            });
+                        } else if ($scope.fbpType === true) {
+                            $scope.runningStartStop = true;
+                            var fbpCode = editor.getSession().getValue();
+                            var fbpName = $scope.fileName;
+                            $scope.newFile = true;
+                            var conf = $scope.selectConfigPath;
+                            if (conf === "none") {
+                                conf = null;
+                            }
+                            if (!filePath) {
+                                filePath = "/tmp/cached.fbp";
+                            }
+                            $http.post('/api/fbp/run',
+                                    {params: {
+                                        "fbp_name": fbpName,
+                                        "fbp_path": filePath,
+                                        "code": fbpCode,
+                                        "conf": conf
+                                    }
                             }).success(function(data) {
                                 if (data) {
                                     $scope.openRunDialog();
                                 } else {
                                     alert("FBP Failed to run");
                                 }
+                                $scope.runningStartStop = false;
                             }).error(function(){
                                 $scope.openRunDialog();
+                                $scope.runningStartStop = false;
                             });
+                        }
                     }
                 };
 
@@ -902,13 +911,17 @@
                     if (!$scope.runConf) {
                         return "disable_div";
                     } else {
-                        if ($scope.isServiceRunning) {
-                            return "button_stop";
+                        if ($scope.runningStartStop) {
+                            return "button_loading";
                         } else {
-                            if ($scope.fbpType === true) {
-                                return "button_run_on";
+                            if ($scope.isServiceRunning) {
+                                return "button_stop";
                             } else {
-                                return "button_run_off";
+                                if ($scope.fbpType === true) {
+                                    return "button_run_on";
+                                } else {
+                                    return "button_run_off";
+                                }
                             }
                         }
                     }