From 81280517bf8b9159f4d81e56f1470653ca7ec4ef Mon Sep 17 00:00:00 2001
From: Antonis Kalipetis <akalipetis@gmail.com>
Date: Wed, 4 Jan 2017 18:42:49 +0200
Subject: [PATCH] Add visual state of New instance and Delete buttons (#75)

The buttons now get disabled when pressed and their text changes to the action being made.
If the action ends (either with success or failure), state is reverted to the normal one.

Signed-off-by: Antonis Kalipetis <akalipetis@gmail.com>
---
 www/assets/app.js | 30 ++++++++++++++++++++++++++++++
 www/index.html    |  4 ++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/www/assets/app.js b/www/assets/app.js
index 28461a3..c2f54ce 100644
--- a/www/assets/app.js
+++ b/www/assets/app.js
@@ -20,6 +20,10 @@
         $scope.isAlive = true;
         $scope.ttl = '--:--:--';
         $scope.connected = true;
+        $scope.isInstanceBeingCreated = false;
+        $scope.newInstanceBtnText = '+ Add new instance';
+        $scope.deleteInstanceBtnText = 'Delete';
+        $scope.isInstanceBeingDeleted = false;
 
         angular.element($window).bind('resize', function() {
             if ($scope.selectedInstance) {
@@ -62,6 +66,7 @@
         }
 
         $scope.newInstance = function() {
+            updateNewInstanceBtnState(true);
             $http({
                 method: 'POST',
                 url: '/sessions/' + $scope.sessionId + '/instances',
@@ -72,6 +77,8 @@
                 if (response.status == 409) {
                     $scope.showAlert('Max instances reached', 'Maximum number of instances reached')
                 }
+            }).finally(function() {
+                updateNewInstanceBtnState(false);
             });
         }
 
@@ -203,6 +210,7 @@
         }
 
         $scope.deleteInstance = function(instance) {
+            updateDeleteInstanceBtnState(true);
             $http({
                 method: 'DELETE',
                 url: '/sessions/' + $scope.sessionId + '/instances/' + instance.name,
@@ -210,6 +218,8 @@
                 $scope.removeInstance(instance.name);
             }, function(response) {
                 console.log('error', response);
+            }).finally(function() {
+                updateDeleteInstanceBtnState(false);
             });
         }
 
@@ -256,6 +266,26 @@
                 cb();
             }
         }
+
+        function updateNewInstanceBtnState(isInstanceBeingCreated) {
+            if (isInstanceBeingCreated === true) {
+                $scope.newInstanceBtnText = '+ Creating...';
+                $scope.isInstanceBeingCreated = true;
+            } else {
+                $scope.newInstanceBtnText = '+ Add new instance';
+                $scope.isInstanceBeingCreated = false;
+            }
+        }
+
+        function updateDeleteInstanceBtnState(isInstanceBeingDeleted) {
+            if (isInstanceBeingDeleted === true) {
+                $scope.deleteInstanceBtnText = 'Deleting...';
+                $scope.isInstanceBeingDeleted = true;
+            } else {
+                $scope.deleteInstanceBtnText = 'Delete';
+                $scope.isInstanceBeingDeleted = false;
+            }
+        }
     }])
 
         .config(['$mdIconProvider', function($mdIconProvider) {
diff --git a/www/index.html b/www/index.html
index e2f25b8..41470b0 100644
--- a/www/index.html
+++ b/www/index.html
@@ -47,7 +47,7 @@
                   <h1 class="md-toolbar-tools">Instances</h1>
                 </md-toolbar>
                 <md-content layout-padding>
-                  <md-button ng-click="newInstance()" class="md-primary">+ Add new instance</md-button>
+                  <md-button ng-click="newInstance()" ng-disabled="isInstanceBeingCreated" class="md-primary">{{newInstanceBtnText}}</md-button>
               <md-list>
                 <md-list-item ng-switch on="instance.isManager" class="md-3-line" ng-repeat="instance in instances" ng-click="showInstance(instance)" ng-class="instance.name == selectedInstance.name ? 'selected' : false">
                     <md-icon ng-switch-when="true" style="color: blue" md-svg-icon="person"></md-icon>
@@ -96,7 +96,7 @@
                           <md-card-title-text>
                       </md-card-title>
                       <md-card-actions>
-                          <md-button class="md-warn md-raised" ng-click="deleteInstance(instance)">Delete</md-button>
+                          <md-button class="md-warn md-raised" ng-click="deleteInstance(instance)" ng-disabled="isInstanceBeingDeleted">{{deleteInstanceBtnText}}</md-button>
                           </md-card-actions>
                   </md-card>
                   <md-card flex md-theme="default" md-theme-watch >