refactor settings ui: scope the methods
This commit is contained in:
Girish Ramakrishnan
@@ -14,12 +14,12 @@
|
||||
|
||||
<div class="grid">
|
||||
<div class="item" ng-repeat="avatar in avatarChange.availableAvatars" style="background-image: url('{{avatar.data || avatar.url}}');" ng-click="setPreviewAvatar(avatar)"></div>
|
||||
<div class="item add" ng-click="showCustomAvatarSelector()"></div>
|
||||
<div class="item add" ng-click="avatarChange.showCustomAvatarSelector()"></div>
|
||||
</div>
|
||||
</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="doChangeAvatar()" ng-disabled="avatarChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="avatarChange.busy"></i> Change</button>
|
||||
<button type="button" class="btn btn-success" ng-click="avatarChange.doChangeAvatar()" ng-disabled="avatarChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="avatarChange.busy"></i> Change</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,7 +66,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="doCreateBackup()" ng-disabled="createBackup.busy"><i class="fa fa-spinner fa-pulse" ng-show="developerModeChange.busy"></i> Confirm</button>
|
||||
<button type="button" class="btn btn-success" ng-click="createBackup.doCreateBackup()" ng-disabled="createBackup.busy"><i class="fa fa-spinner fa-pulse" ng-show="developerModeChange.busy"></i> Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -88,7 +88,7 @@
|
||||
<br/>
|
||||
<br/>
|
||||
<br/>
|
||||
<form name="planChangeForm" role="form" novalidate ng-submit="doChangePlan(planChangeForm)" autocomplete="off">
|
||||
<form name="planChangeForm" role="form" novalidate ng-submit="planChange.doChangePlan(planChangeForm)" autocomplete="off">
|
||||
<fieldset>
|
||||
<input type="password" style="display: none;">
|
||||
<div class="form-group" ng-class="{ 'has-error': (!planChangeForm.password.$dirty && planChange.error.password) || (planChangeForm.password.$dirty && planChangeForm.password.$invalid) }">
|
||||
@@ -105,7 +105,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="planChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="planChange.busy"></i> Confirm</button>
|
||||
<button type="button" class="btn btn-success" ng-click="planChange.doChangePlan()" ng-disabled="planChange.busy"><i class="fa fa-spinner fa-pulse" ng-show="planChange.busy"></i> Confirm</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -128,7 +128,7 @@
|
||||
<div class="card" style="margin-bottom: 15px;">
|
||||
<div class="row">
|
||||
<div class="col-xs-4" style="min-width: 150px;">
|
||||
<div class="settings-avatar" ng-click="showChangeAvatar()" style="background-image: url('{{ client.avatar }}');">
|
||||
<div class="settings-avatar" ng-click="avatarChange.showChangeAvatar()" style="background-image: url('{{ client.avatar }}');">
|
||||
<div class="overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -186,7 +186,7 @@
|
||||
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<button class="btn btn-primary pull-right" ng-disabled="planChange.requestedPlan.name === currentPlan.name" ng-click="showChangePlan()">Change Plan</button>
|
||||
<button class="btn btn-primary pull-right" ng-disabled="planChange.requestedPlan.name === currentPlan.name" ng-click="planChange.showChangePlan()">Change Plan</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -265,7 +265,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-3 text-right">
|
||||
<button class="btn btn-outline btn-primary" ng-click="showCreateBackup()" ng-disabled="createBackup.busy">Backup now</button>
|
||||
<button class="btn btn-outline btn-primary" ng-click="createBackup.showCreateBackup()" ng-disabled="createBackup.busy">Backup now</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,12 +26,94 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
|
||||
busy: false,
|
||||
error: {},
|
||||
password: '',
|
||||
requestedPlan: null
|
||||
requestedPlan: null,
|
||||
|
||||
showChangePlan: function () {
|
||||
$('#planChangeModal').modal('show');
|
||||
},
|
||||
|
||||
planChangeReset: function () {
|
||||
$scope.planChange.error.password = null;
|
||||
$scope.planChange.password = '';
|
||||
|
||||
$scope.planChangeForm.$setPristine();
|
||||
$scope.planChangeForm.$setUntouched();
|
||||
},
|
||||
|
||||
doChangePlan: function () {
|
||||
$scope.planChange.busy = true;
|
||||
|
||||
var options = {
|
||||
size: $scope.planChange.requestedPlan.slug,
|
||||
name: $scope.planChange.requestedPlan.name,
|
||||
price: $scope.planChange.requestedPlan.price,
|
||||
region: $scope.currentRegionSlug
|
||||
};
|
||||
|
||||
Client.migrate(options, $scope.planChange.password, function (error) {
|
||||
$scope.planChange.busy = false;
|
||||
|
||||
if (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 {
|
||||
$scope.planChange.planChangeReset();
|
||||
|
||||
$('#planChangeModal').modal('hide');
|
||||
|
||||
window.location.href = '/update.html';
|
||||
}
|
||||
|
||||
$scope.planChange.busy = false;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$scope.createBackup = {
|
||||
busy: false,
|
||||
percent: 100
|
||||
percent: 100,
|
||||
|
||||
doCreateBackup: function () {
|
||||
$('#createBackupModal').modal('hide');
|
||||
$scope.createBackup.busy = true;
|
||||
$scope.createBackup.percent = 100;
|
||||
|
||||
Client.backup(function (error) {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
$scope.createBackup.busy = false;
|
||||
}
|
||||
|
||||
function checkIfDone() {
|
||||
Client.progress(function (error, data) {
|
||||
if (error) return window.setTimeout(checkIfDone, 250);
|
||||
|
||||
// check if we are done
|
||||
if (!data.backup || data.backup.percent >= 100) {
|
||||
if (data.backup && data.backup.message) console.error('Backup message: ' + data.backup.message); // backup error message
|
||||
fetchBackups();
|
||||
$scope.createBackup.busy = false;
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.createBackup.percent = data.backup.percent;
|
||||
window.setTimeout(checkIfDone, 250);
|
||||
});
|
||||
}
|
||||
|
||||
checkIfDone();
|
||||
});
|
||||
},
|
||||
|
||||
showCreateBackup: function () {
|
||||
$('#createBackupModal').modal('show');
|
||||
}
|
||||
};
|
||||
|
||||
$scope.avatarChange = {
|
||||
@@ -90,22 +172,82 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
|
||||
file: null,
|
||||
data: null,
|
||||
url: '/img/avatars/jar.png'
|
||||
}]
|
||||
};
|
||||
}],
|
||||
|
||||
$scope.setPreviewAvatar = function (avatar) {
|
||||
$scope.avatarChange.avatar = avatar;
|
||||
};
|
||||
getBlobFromImg: function (img, callback) {
|
||||
var size = 256;
|
||||
|
||||
$scope.showCustomAvatarSelector = function () {
|
||||
$('#avatarFileInput').click();
|
||||
};
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
|
||||
function avatarChangeReset() {
|
||||
$scope.avatarChange.error.avatar = null;
|
||||
$scope.avatarChange.avatar = null;
|
||||
$scope.avatarChange.busy = false;
|
||||
}
|
||||
var imageDimensionRatio = img.width / img.height;
|
||||
var canvasDimensionRatio = canvas.width / canvas.height;
|
||||
var renderableHeight, renderableWidth, xStart, yStart;
|
||||
|
||||
if (imageDimensionRatio > canvasDimensionRatio) {
|
||||
renderableHeight = canvas.height;
|
||||
renderableWidth = img.width * (renderableHeight / img.height);
|
||||
xStart = (canvas.width - renderableWidth) / 2;
|
||||
yStart = 0;
|
||||
} else if (imageDimensionRatio < canvasDimensionRatio) {
|
||||
renderableWidth = canvas.width;
|
||||
renderableHeight = img.height * (renderableWidth / img.width);
|
||||
xStart = 0;
|
||||
yStart = (canvas.height - renderableHeight) / 2;
|
||||
} else {
|
||||
renderableHeight = canvas.height;
|
||||
renderableWidth = canvas.width;
|
||||
xStart = 0;
|
||||
yStart = 0;
|
||||
}
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, xStart, yStart, renderableWidth, renderableHeight);
|
||||
|
||||
canvas.toBlob(callback);
|
||||
},
|
||||
|
||||
doChangeAvatar: function () {
|
||||
$scope.avatarChange.error.avatar = null;
|
||||
$scope.avatarChange.busy = true;
|
||||
|
||||
var img = document.getElementById('previewAvatar');
|
||||
$scope.avatarChange.avatar.file = $scope.avatarChange.getBlobFromImg(img, function (blob) {
|
||||
Client.changeCloudronAvatar(blob, function (error) {
|
||||
if (error) {
|
||||
console.error('Unable to change cloudron avatar.', error);
|
||||
} else {
|
||||
Client.resetAvatar();
|
||||
}
|
||||
|
||||
$('#avatarChangeModal').modal('hide');
|
||||
$scope.avatarChange.avatarChangeReset();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
setPreviewAvatar: function (avatar) {
|
||||
$scope.avatarChange.avatar = avatar;
|
||||
},
|
||||
|
||||
avatarChangeReset: function () {
|
||||
$scope.avatarChange.error.avatar = null;
|
||||
$scope.avatarChange.avatar = null;
|
||||
$scope.avatarChange.busy = false;
|
||||
},
|
||||
|
||||
showChangeAvatar: function () {
|
||||
$scope.avatarChange.avatarChangeReset();
|
||||
$('#avatarChangeModal').modal('show');
|
||||
},
|
||||
|
||||
showCustomAvatarSelector: function () {
|
||||
$('#avatarFileInput').click();
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
function fetchBackups() {
|
||||
Client.getBackups(function (error, backups) {
|
||||
@@ -174,147 +316,6 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
|
||||
});
|
||||
}
|
||||
|
||||
$scope.showChangePlan = function () {
|
||||
$('#planChangeModal').modal('show');
|
||||
};
|
||||
|
||||
function planChangeReset() {
|
||||
$scope.planChange.error.password = null;
|
||||
$scope.planChange.password = '';
|
||||
|
||||
$scope.planChangeForm.$setPristine();
|
||||
$scope.planChangeForm.$setUntouched();
|
||||
}
|
||||
|
||||
$scope.doChangePlan = function () {
|
||||
$scope.planChange.busy = true;
|
||||
|
||||
var options = {
|
||||
size: $scope.planChange.requestedPlan.slug,
|
||||
name: $scope.planChange.requestedPlan.name,
|
||||
price: $scope.planChange.requestedPlan.price,
|
||||
region: $scope.currentRegionSlug
|
||||
};
|
||||
|
||||
Client.migrate(options, $scope.planChange.password, function (error) {
|
||||
$scope.planChange.busy = false;
|
||||
|
||||
if (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');
|
||||
|
||||
window.location.href = '/update.html';
|
||||
}
|
||||
|
||||
$scope.planChange.busy = false;
|
||||
});
|
||||
};
|
||||
|
||||
function getBlobFromImg(img, callback) {
|
||||
var size = 256;
|
||||
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.width = size;
|
||||
canvas.height = size;
|
||||
|
||||
var imageDimensionRatio = img.width / img.height;
|
||||
var canvasDimensionRatio = canvas.width / canvas.height;
|
||||
var renderableHeight, renderableWidth, xStart, yStart;
|
||||
|
||||
if (imageDimensionRatio > canvasDimensionRatio) {
|
||||
renderableHeight = canvas.height;
|
||||
renderableWidth = img.width * (renderableHeight / img.height);
|
||||
xStart = (canvas.width - renderableWidth) / 2;
|
||||
yStart = 0;
|
||||
} else if (imageDimensionRatio < canvasDimensionRatio) {
|
||||
renderableWidth = canvas.width;
|
||||
renderableHeight = img.height * (renderableWidth / img.width);
|
||||
xStart = 0;
|
||||
yStart = (canvas.height - renderableHeight) / 2;
|
||||
} else {
|
||||
renderableHeight = canvas.height;
|
||||
renderableWidth = canvas.width;
|
||||
xStart = 0;
|
||||
yStart = 0;
|
||||
}
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, xStart, yStart, renderableWidth, renderableHeight);
|
||||
|
||||
canvas.toBlob(callback);
|
||||
}
|
||||
|
||||
$scope.doChangeAvatar = function () {
|
||||
$scope.avatarChange.error.avatar = null;
|
||||
$scope.avatarChange.busy = true;
|
||||
|
||||
var img = document.getElementById('previewAvatar');
|
||||
$scope.avatarChange.avatar.file = getBlobFromImg(img, function (blob) {
|
||||
Client.changeCloudronAvatar(blob, function (error) {
|
||||
if (error) {
|
||||
console.error('Unable to change cloudron avatar.', error);
|
||||
} else {
|
||||
Client.resetAvatar();
|
||||
}
|
||||
|
||||
$('#avatarChangeModal').modal('hide');
|
||||
avatarChangeReset();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
$scope.doCreateBackup = function () {
|
||||
$('#createBackupModal').modal('hide');
|
||||
$scope.createBackup.busy = true;
|
||||
$scope.createBackup.percent = 100;
|
||||
|
||||
Client.backup(function (error) {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
$scope.createBackup.busy = false;
|
||||
}
|
||||
|
||||
function checkIfDone() {
|
||||
Client.progress(function (error, data) {
|
||||
if (error) return window.setTimeout(checkIfDone, 250);
|
||||
|
||||
// check if we are done
|
||||
if (!data.backup || data.backup.percent >= 100) {
|
||||
if (data.backup && data.backup.message) console.error('Backup message: ' + data.backup.message); // backup error message
|
||||
fetchBackups();
|
||||
$scope.createBackup.busy = false;
|
||||
return;
|
||||
}
|
||||
|
||||
$scope.createBackup.percent = data.backup.percent;
|
||||
window.setTimeout(checkIfDone, 250);
|
||||
});
|
||||
}
|
||||
|
||||
checkIfDone();
|
||||
});
|
||||
};
|
||||
|
||||
$scope.showCreateBackup = function () {
|
||||
$('#createBackupModal').modal('show');
|
||||
};
|
||||
|
||||
$scope.showChangeAvatar = function () {
|
||||
avatarChangeReset();
|
||||
$('#avatarChangeModal').modal('show');
|
||||
};
|
||||
|
||||
$('#avatarFileInput').get(0).onchange = function (event) {
|
||||
var fr = new FileReader();
|
||||
fr.onload = function () {
|
||||
@@ -326,7 +327,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
|
||||
};
|
||||
|
||||
$scope.avatarChange.availableAvatars.push(tmp);
|
||||
$scope.setPreviewAvatar(tmp);
|
||||
$scope.avatarChange.setPreviewAvatar(tmp);
|
||||
});
|
||||
};
|
||||
fr.readAsDataURL(event.target.files[0]);
|
||||
|
||||
Reference in New Issue
Block a user