initial migrate UI

webadmin/src/index.html

@@ -146,26 +146,6 @@
         </div>
     </div>
 
-    <!-- Modal plan upgrade -->
-    <div class="modal fade" id="upgradeModal" 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 Upgrade</h4>
-                </div>
-                <div class="modal-body">
-                    <p>See available plans for upgrade at <a href="{{ config.webServerOrigin + '/pricing.html' }}" target="_blank">cloudron.io</a>.</p>
-                    <p>If you request an upgrade, we will get back to you as soon as possible.</p>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                    <button type="button" class="btn btn-success" ng-click="requestUpgrade()" ng-disabled="upgradeRequest.busy"><i class="fa fa-spinner fa-pulse" ng-show="upgradeRequest.busy"></i> Request Upgrade</button>
-                </div>
-            </div>
-        </div>
-    </div>
-
     <div class="animateMe ng-hide" ng-show="initialized">
 
         <!-- Navigation -->

webadmin/src/js/main.js

@@ -77,23 +77,6 @@ angular.module('Application').controller('MainController', ['$scope', '$route',
         window.location.href = '/error.html';
     };
 
-    $scope.requestUpgrade = function () {
-        $scope.upgradeRequest.busy = true;
-
-        var subject = 'User requested upgrade for ' + $scope.config.fqdn;
-        var description = 'User ' + $scope.user.email + ' requested an upgrade for ' + $scope.config.fqdn + '. Get back to him!!';
-
-        Client.feedback('upgrade_request', subject, description, function (error) {
-            $scope.upgradeRequest.busy = false;
-
-            if (error) return Client.notify('Error', error.message, false, 'error');
-
-            Client.notify('Success', 'We will get back to you as soon as possible for the upgrade.', true, 'success');
-
-            $('#upgradeModal').modal('hide');
-        });
-    };
-
     $scope.showUpdateModal = function (form) {
         $scope.update.error.password = null;
         $scope.update.password = '';

webadmin/src/views/appstore.js

@@ -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 });
     };

webadmin/src/views/settings.html

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

webadmin/src/views/settings.js

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