initial migrate UI

This commit is contained in:
Girish Ramakrishnan
2016-06-28 13:45:50 -05:00
parent ed5ebcbd5c
commit 41e33e71c8
5 changed files with 114 additions and 47 deletions

View File

@@ -316,11 +316,6 @@ angular.module('Application').controller('AppStoreController', ['$scope', '$loca
$('#appNotFoundModal').modal('show');
};
$scope.showRequestUpgrade = function () {
$('#appInstallModal').modal('hide');
$('#upgradeModal').modal('show');
};
$scope.gotoApp = function (app) {
$location.path('/appstore/' + app.manifest.id, false).search({ version : app.manifest.version });
};

View File

@@ -75,6 +75,28 @@
</div>
</div>
<!-- Modal plan change -->
<div class="modal fade" id="changePlanModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<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>.
<br/>
<br/>
Your apps and data will be migrated to the new Cloudron and will take around 15 minutes.
</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>
</div>
</div>
</div>
</div>
<br/>
<div class="section-header">
@@ -107,14 +129,35 @@
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.version }}</td>
</tr>
</table>
<br/>
<br/>
<br/>
<button class="btn btn-primary pull-right" data-toggle="modal" data-target="#upgradeModal">Upgrade</button>
</div>
</div>
</div>
<div class="section-header" ng-show="user.admin">
<div class="text-left">
<h3>Plans</h3>
</div>
</div>
<div class="card" style="margin-bottom: 15px;" ng-show="user.admin">
<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)
</span>
</label>
</div>
</div>
</div>
<div class="row">
<button class="btn btn-primary pull-right" ng-disabled="requestedSize.name === currentSize.name" ng-click="showChangePlan()">Change Plan</button>
</div>
</div>
<div class="section-header" ng-show="user.admin">
<div class="text-left">
<h3>Backups</h3>

View File

@@ -1,6 +1,6 @@
'use strict';
angular.module('Application').controller('SettingsController', ['$scope', '$location', '$rootScope', 'Client', function ($scope, $location, $rootScope, Client) {
angular.module('Application').controller('SettingsController', ['$scope', '$location', '$rootScope', 'Client', 'AppStore', function ($scope, $location, $rootScope, Client, AppStore) {
Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
$scope.client = Client;
@@ -11,6 +11,20 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
$scope.lastBackup = null;
$scope.backups = [];
$scope.currency = true ? '€' : '$';
$scope.availableRegions = [];
$scope.currentRegionSlug = null;
$scope.availableSizes = [];
$scope.requestedSize = null;
$scope.currentSize = null;
$scope.changePlan = {
busy: false,
error: {}
};
$scope.developerModeChange = {
busy: false,
error: {},
@@ -109,6 +123,57 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
});
}
function getSizes() {
AppStore.getSizes(function (error, result) {
if (error) return console.error(error);
// result array is ordered by size. only select higher sizes
var found = false;
result = result.filter(function (size) {
if (size.slug === $scope.config.size) {
$scope.currentSize = $scope.requestedSize = size;
found = true;
return true;
} else {
return found;
}
});
angular.copy(result, $scope.availableSizes);
AppStore.getRegions(function (error, result) {
if (error) return console.error(error);
angular.copy(result, $scope.availableRegions);
$scope.currentRegionSlug = $scope.config.region;
});
});
}
$scope.setRequestedPlan = function (plan) {
$scope.requestedSize = plan;
};
$scope.showChangePlan = function () {
$('#changePlanModal').modal('show');
};
$scope.doChangePlan = function () {
$scope.changePlan.busy = true;
Client.migrate($scope.requestedSize.slug, $scope.currentRegionSlug, $scope.plans.password, function (error) {
$scope.changePlan.busy = false;
if (error) {
return console.error(error);
}
// we will get redirected at some point
$('#changePlanModal').modal('hide');
$scope.changePlan.busy = false;
});
};
function developerModeChangeReset () {
$scope.developerModeChange.error.password = null;
$scope.developerModeChange.password = '';
@@ -260,6 +325,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
Client.onReady(function () {
fetchBackups();
getSizes();
});
// setup all the dialog focus handling