Initial rework of the upgrade view

webadmin/src/theme.scss

@@ -464,3 +464,87 @@ footer a {
     padding: 10px;
 }
 
+
+// ----------------------------
+// Upgrade
+// ----------------------------
+
+.region-select-map {
+    width: 600px;
+    height: 300px;
+    display: table;
+    margin: auto;
+    cursor: pointer;
+}
+
+.region-selected {
+    opacity: 1 !important;
+}
+
+.region-select {
+    display: inline-block;
+    float: left;
+    opacity: 0.5;
+    height: 300px;
+    transition: all 250ms;
+}
+
+.region-select:hover {
+    opacity: 1;
+}
+
+.region-pin {
+    position: relative;
+    top: 0;
+    opacity: 0;
+    transition: all 250ms cubic-bezier(0.430, 0.950, 0.810, 1.280);
+}
+
+.region-pin-left {
+    left: -18px;
+}
+
+.region-pin-right {
+    left: -132px;
+}
+
+.region-pin-selected-left {
+    top: 95px;
+    opacity: 1;
+}
+
+.region-pin-selected-right {
+    top: 73px;
+    opacity: 1;
+}
+
+.cloudron-model-list {
+    display: table;
+    width: 100%;
+}
+
+.cloudron-model-item {
+    display: table-cell;
+    padding: 10px;
+    margin: auto;
+    transition: all 250ms;
+    max-width: 200px;
+    transform: scale(0.95);
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.cloudron-model-item:hover,
+.cloudron-model-item-selected {
+    background-color: rgba(255, 255, 255, 0.5);
+    color: highlight !important;
+    transform: scale(1);
+}
+
+.cloudron-model-item:hover h4,
+.cloudron-model-item:hover h5,
+.cloudron-model-item-selected h4,
+.cloudron-model-item-selected h5,  {
+    transition: all 250ms;
+    color: black;
+}

webadmin/src/views/upgrade.html

@@ -17,50 +17,39 @@
     </div>
 </div>
 
-<div style="max-width: 600px; margin: 0 auto;" ng-show="user.admin">
-    <div class="text-left">
-        <h3>Upgrade</h3>
-    </div>
-</div>
-
-<div class="card" style="margin-bottom: 15px;" ng-show="user.admin">
-    <div class="row">
-        <div class="col-xs-6">
-            <h4>Current</h4>
+<div style="margin-bottom: 15px; text-align: center" ng-show="user.admin">
+    <form name="migrate_form" role="form" novalidate ng-submit="showMigrationConfirm()">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+                <h3>Choose a Model to upgrade to</h3>
+                <div class="cloudron-model-list">
+                    <div class="cloudron-model-item" ng-click="setSize(size.slug)" ng-class="{ 'cloudron-model-item-selected': size === migration.size }" ng-repeat="size in availableSizes">
+                        <img src="img/box.png" style="transform: scale({{ size.price/50.0 }});"/><br/>
+                        <h4>{{ size.name }}</h4>
+                        <h5>${{ size.price }}/mo</h5>
+                    </div>
+                </div>
+            </div>
         </div>
-    </div>
-    <div class="row">
-        <div class="col-xs-6">
-            <span class="text-muted">Size:</span>
+        <br/>
+        <div class="row">
+            <div class="form-group col-md-12">
+                <h3>Choose your Region, in case you want to relocate your Cloudron</h3>
+                <div class="region-select-map">
+                    <div class="region-select" ng-click="setRegion('sfo1')" ng-class="{ 'region-selected': migration.region.slug === 'sfo1' }" style="width: 270px; background-image: url('img/world_left.png');">
+                        <img src="img/pin.png" height="32px" width="16px" class="region-pin region-pin-left" ng-class="{ 'region-pin-selected-left': migration.region.slug === 'sfo1' }"/>
+                    </div>
+                    <div class="region-select" ng-click="setRegion('ams3')" ng-class="{ 'region-selected': migration.region.slug === 'ams3' }" style="width: 330px; background-image: url('img/world_right.png');">
+                        <img src="img/pin.png" height="32px" width="16px" class="region-pin region-pin-right" ng-class="{ 'region-pin-selected-right': migration.region.slug === 'ams3' }"/>
+                    </div>
+                </div>
+                <p>{{ migration.region.name || '&nbsp;' }}</p>
+            </div>
         </div>
-        <div class="col-xs-6 text-right">
-            <span>{{config.size}}</span>
+        <div class="row">
+            <div class="form-group col-md-12">
+                <button type="submit" class="btn btn-default" ng-disabled="migrate_form.$invalid || !migration.region || !migration.size || busy">Migrate</button>
+            </div>
         </div>
-    </div>
-    <div class="row">
-        <div class="col-xs-6">
-            <span class="text-muted">Region:</span>
-        </div>
-        <div class="col-xs-6 text-right">
-            <span>{{config.region}}</span>
-        </div>
-    </div>
-</div>
-
-<div class="card" style="margin-bottom: 15px;" ng-show="user.admin">
-    <div class="row">
-        <div class="col-xs-3">
-            <select class="form-control" id="regionSlug" ng-model="migration.regionSlug">
-                <option value="{{region.slug}}" ng-repeat="region in availableRegions">{{region.name}}</option>
-            </select>
-        </div>
-        <div class="col-xs-3 text-right">
-            <select class="form-control" id="sizeSlug" ng-model="migration.sizeSlug">
-                <option value="{{size.slug}}" ng-repeat="size in availableSizes">{{size.name}}</option>
-            </select>
-        </div>
-        <div class="col-xs-6 text-right">
-            <button class="btn btn-outline btn-primary" ng-click="showMigrationConfirm()">Migrate</button>
-        </div>
-    </div>
-</div>
+    </form>
+</div>

webadmin/src/views/upgrade.js

@@ -9,8 +9,8 @@ angular.module('Application').controller('UpgradeController', ['$scope', '$locat
     $scope.availableSizes = [];
 
     $scope.migration = {
-        regionSlug: '',
-        sizeSlug: ''
+        region: null,
+        size: null
     };
 
     $scope.showMigrationConfirm = function () {
@@ -18,24 +18,48 @@ angular.module('Application').controller('UpgradeController', ['$scope', '$locat
     };
 
     $scope.doMigration = function () {
-        Client.migrate($scope.migration.sizeSlug, $scope.migration.regionSlug, function (error) {
+        Client.migrate($scope.migration.size.slug, $scope.migration.region.slug, function (error) {
             if (error) return console.error(error);
             $('#migrationModal').modal('hide');
         });
     };
 
+    $scope.setRegion = function (regionSlug) {
+        $scope.availableRegions.forEach(function (region) {
+            if (region.slug.indexOf(regionSlug) === 0) $scope.migration.region = region;
+        });
+    };
+
+    $scope.setSize = function (sizeSlug) {
+        $scope.availableSizes.forEach(function (size) {
+            if (size.slug.indexOf(sizeSlug) === 0) $scope.migration.size = size;
+        });
+    };
+
     Client.onReady(function () {
         AppStore.getSizes(function (error, result) {
             if (error) return console.error(error);
 
+            // restult array is ordered by size
+            var found = false;
+            result = result.filter(function (size) {
+                if (size.slug === $scope.config.size) {
+                    $scope.setSize($scope.config.size);
+                    found = true;
+                    return true;
+                } else {
+                    return found;
+                }
+            });
             angular.copy(result, $scope.availableSizes);
-            $scope.migration.sizeSlug = $scope.availableSizes[0].slug;
 
             AppStore.getRegions(function (error, result) {
                 if (error) return console.error(error);
 
                 angular.copy(result, $scope.availableRegions);
-                $scope.migration.regionSlug = $scope.availableRegions[0].slug;
+
+                $scope.setRegion($scope.config.region);
+                $scope.setSize($scope.config.size);
             });
         });
     });