Improve backup creation UI

- Do not prompt the user if he really wants to create a backup
- Show error message if a backup can't be created at the moment
This commit is contained in:
Johannes Zellner
2017-01-19 17:04:20 +01:00
parent d845f1ae5b
commit f5c6862627
2 changed files with 19 additions and 14 deletions

View File

@@ -79,19 +79,18 @@
</div>
</div>
<!-- Modal backup -->
<div class="modal fade" id="createBackupModal" tabindex="-1" role="dialog">
<!-- Modal backup failed -->
<div class="modal fade" id="createBackupFailedModal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Create a new Backup</h4>
<h4 class="modal-title">Unable to create backup</h4>
</div>
<div class="modal-body">
Do you really want to create a new backup?
{{ createBackup.errorMessage }}
</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="createBackup.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" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
@@ -374,7 +373,7 @@
<div class="col-xs-6 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="configureBackup.show()" ng-disabled="createBackup.busy">Configure</button>
<button class="btn btn-outline btn-primary" ng-click="createBackup.showCreateBackup()" ng-disabled="createBackup.busy" style="margin-right: 10px">Backup now</button>
<button class="btn btn-outline btn-primary" ng-click="createBackup.doCreateBackup()" ng-disabled="createBackup.busy" style="margin-right: 10px">Backup now</button>
</div>
</div>
</div>

View File

@@ -100,16 +100,26 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
$scope.createBackup = {
busy: false,
percent: 100,
errorMessage: '',
doCreateBackup: function () {
$('#createBackupModal').modal('hide');
$scope.createBackup.busy = true;
$scope.createBackup.percent = 100;
$scope.createBackup.percent = 0;
$scope.createBackup.errorMessage = '';
Client.backup(function (error) {
if (error) {
console.error(error);
if (error.statusCode === 409) {
$scope.createBackup.errorMessage = 'App task is currently in progress. Please retry later.';
} else {
$scope.createBackup.errorMessage = error.message;
console.error(error);
}
$scope.createBackup.busy = false;
$('#createBackupFailedModal').modal('show');
return;
}
function checkIfDone() {
@@ -131,10 +141,6 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
checkIfDone();
});
},
showCreateBackup: function () {
$('#createBackupModal').modal('show');
}
};