github/docker-labs
1
0
Fork 0
mirror of https://github.com/bingohuang/docker-labs.git synced 2025-07-14 01:57:32 +08:00
Code Issues Releases Wiki Activity

Add visual state of New instance and Delete buttons (#75)

Browse Source 
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>
This commit is contained in:
Antonis Kalipetis 2017-01-04 18:42:49 +02:00 committed by Marcos Nils
parent fd52a544d1
commit 81280517bf
2 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
www/assets/app.js
View File

@ -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) {

4
www/index.html
View File

@ -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 >