jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

migrate UI fixes

Browse Source
This commit is contained in:
Girish Ramakrishnan
2016-06-28 14:36:19 -05:00
parent b9f0efa778
commit 3ec3f172bb
2 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
webadmin/src/views/settings.html
View File

@@ -84,11 +84,13 @@
<h4 class="modal-title">Cloudron Change Plan</h4>
</div>
<div class="modal-body">
This will change your plan from <b>{{ currentSize.name }}</b> to <b>{{ requestedSize.name }}</b>.
This will change your plan from <b>{{ currentPlan.name }}</b> to <b>{{ requestedPlan.name }}</b>.
<br/>
<br/>
Your apps and data will be migrated to the new Cloudron and will take around 15 minutes.
<br/>
<br/>
<br/>
<form name="planChangeForm" role="form" novalidate ng-submit="doChangePlan(planChangeForm)" autocomplete="off">
<fieldset>
<div class="form-group" ng-class="{ 'has-error': (!planChangeForm.password.$dirty && planChange.error.password) || (planChangeForm.password.$dirty && planChangeForm.password.$invalid) }">
@@ -97,7 +99,7 @@
<small ng-show=" planChangeForm.password.$dirty && planChangeForm.password.$invalid">A password is required</small>
<small ng-show="!planChangeForm.password.$dirty && planChange.error.password">Wrong password</small>
</div>
<input type="password" class="form-control" ng-model="planChange.password" id="inputDeveloperModeChangePassword" name="password" required autofocus>
<input type="password" class="form-control" ng-model="planChange.password" id="inputPlanChangePassword" name="password" required autofocus>
</div>
<input class="ng-hide" type="submit" ng-disabled="planChangeForm.$invalid"/>
</fieldset>
@@ -105,7 +107,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-success" ng-click="doChangePlan()" ng-disabled="changePlan.busy"><i class="fa fa-spinner fa-pulse" ng-show="changePlan.busy"></i> Confirm</button>
<button type="button" class="btn btn-success" ng-click="doChangePlan()" ng-disabled="planChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="planChange.busy"></i> Confirm</button>
</div>
</div>
</div>
@@ -157,10 +159,10 @@
<div class="row">
<div class="col-xs-12">
<div class="btn-group" data-toggle="buttons">
<label class="radio" ng-repeat="size in availableSizes">
<input type="radio" name="options" autocomplete="off" checked ng-click="setRequestedPlan(size)">
{{ size.name }} ({{ size.slug | uppercase }}) - {{ size.price/100 }}{{ currency }}/month
<span ng-show="currentSize.slug === size.slug"> (current plan)
<label class="radio" ng-repeat="plan in availablePlans">
<input type="radio" name="options" autocomplete="off" checked ng-click="setRequestedPlan(plan)">
{{ plan.name }} ({{ plan.slug | uppercase }}) - {{ plan.price/100 }}{{ currency }}/month
<span ng-show="currentPlan.slug === plan.slug"> (current plan)
</span>
</label>
</div>
@@ -168,7 +170,7 @@
</div>
<div class="row">
<button class="btn btn-primary pull-right" ng-disabled="requestedSize.name === currentSize.name" ng-click="showChangePlan()">Change Plan</button>
<button class="btn btn-primary pull-right" ng-disabled="requestedPlan.name === currentPlan.name" ng-click="showChangePlan()">Change Plan</button>
</div>
</div>

44
webadmin/src/views/settings.js
View File

@@ -16,11 +16,11 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
$scope.availableRegions = [];
$scope.currentRegionSlug = null;
$scope.availableSizes = [];
$scope.requestedSize = null;
$scope.currentSize = null;
$scope.availablePlans = [];
$scope.requestedPlan = null;
$scope.currentPlan = null;
$scope.changePlan = {
$scope.planChange = {
busy: false,
error: {},
password: ''
@@ -124,7 +124,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
});
}
function getSizes() {
function getPlans() {
AppStore.getSizes(function (error, result) {
if (error) return console.error(error);
@@ -132,14 +132,14 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
var found = false;
result = result.filter(function (size) {
if (size.slug === $scope.config.size) {
$scope.currentSize = $scope.requestedSize = size;
$scope.currentPlan = $scope.requestedPlan = size;
found = true;
return true;
} else {
return found;
}
});
angular.copy(result, $scope.availableSizes);
angular.copy(result, $scope.availablePlans);
AppStore.getRegions(function (error, result) {
if (error) return console.error(error);
@@ -152,14 +152,14 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
}
$scope.setRequestedPlan = function (plan) {
$scope.requestedSize = plan;
$scope.requestedPlan = plan;
};
$scope.showChangePlan = function () {
$('#planChangeModal').modal('show');
};
function changePlanReset() {
function planChangeReset() {
$scope.planChange.error.password = null;
$scope.planChange.password = '';
@@ -168,19 +168,27 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
}
$scope.doChangePlan = function () {
$scope.changePlan.busy = true;
$scope.planChange.busy = true;
Client.migrate($scope.requestedSize.slug, $scope.currentRegionSlug, $scope.changePlan.password, function (error) {
$scope.changePlan.busy = false;
Client.migrate($scope.requestedPlan.slug, $scope.currentRegionSlug, $scope.planChange.password, function (error) {
$scope.planChange.busy = false;
if (error) {
return console.error(error);
if (error.statusCode === 403) {
$scope.planChange.error.password = true;
$scope.planChange.password = '';
$scope.planChangeForm.password.$setPristine();
$('#inputPlanChangePassword').focus();
} else {
console.error('Unable to change plan.', error);
}
} else {
planChangeReset();
$('#planChangeModal').modal('hide');
}
// we will get redirected at some point
changePlanReset();
$('#planChangeModal').modal('hide');
$scope.changePlan.busy = false;
$scope.planChange.busy = false;
});
};
@@ -335,7 +343,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
Client.onReady(function () {
fetchBackups();
getSizes();
getPlans();
});
// setup all the dialog focus handling