Show update button and dialog in settings view
This commit is contained in:
Johannes Zellner
@@ -1,3 +1,53 @@
|
||||
<!-- Modal update -->
|
||||
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||||
<h4 class="modal-title">Cloudron Update to <b>{{config.update.box.version}}</b> </h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div ng-hide="installedApps | readyToUpdate">
|
||||
<p>The apps below are blocking the update because they have pending actions:</p>
|
||||
<ul>
|
||||
<li ng-repeat="app in installedApps | inProgressApps">{{app.location}}</li>
|
||||
</ul>
|
||||
<br/>
|
||||
<b class="text-danger">Please wait for the app actions to finish.</b>
|
||||
<br/>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<div ng-show="installedApps | readyToUpdate">
|
||||
<b ng-show="config.update.box.upgrade" class="text-danger">
|
||||
This update upgrades the base system and will cause some application downtime.<br/>
|
||||
</b>
|
||||
<p>Changes:</p>
|
||||
<ul>
|
||||
<li ng-repeat="change in config.update.box.changelog" ng-bind-html="change | markdown2html"></li>
|
||||
</ul>
|
||||
<br/>
|
||||
<p ng-show="update.error.generic" class="text-danger">{{ update.error.generic }}</p>
|
||||
<div ng-hide="config.provider !== 'caas' && config.update.box.upgrade">
|
||||
<fieldset>
|
||||
<form name="update_form" role="form" ng-submit="update.submit()" autocomplete="off">
|
||||
<input class="ng-hide" type="submit" ng-disabled="update_form.$invalid || update.busy"/>
|
||||
</form>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div ng-show="config.provider !== 'caas' && config.update.box.upgrade">
|
||||
<b>Please use the CLI tool to upgrade by following the instructions <a ng-href="{{ config.webServerOrigin + '/documentation/updates/' }}" target="_blank" >here</a>.</b>
|
||||
</div>
|
||||
</div>
|
||||
</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="update.submit()" ng-disabled="update_form.$invalid || update.busy" ng-show="(installedApps | readyToUpdate) && !(config.provider !== 'caas' && config.update.box.upgrade)"><i class="fa fa-circle-o-notch fa-spin" ng-show="update.busy"></i> Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal change avatar -->
|
||||
<div class="modal fade" id="avatarChangeModal" tabindex="-1" role="dialog">
|
||||
<div class="modal-dialog">
|
||||
@@ -250,33 +300,46 @@
|
||||
</div>
|
||||
|
||||
<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="avatarChange.showChangeAvatar()" style="background-image: url('{{ client.avatar }}');">
|
||||
<div class="overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-8">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td class="text-muted" style="vertical-align: top;">Name</td>
|
||||
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.cloudronName }} <a href="" ng-click="cloudronNameChange.show()"><i class="fa fa-pencil text-small"></i></a></td>
|
||||
</tr>
|
||||
<tr ng-show="config.provider === 'caas'">
|
||||
<td class="text-muted" style="vertical-align: top;">Model</td>
|
||||
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.size }} - {{ config.region }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted" style="vertical-align: top;">Version</td>
|
||||
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.version }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted" style="vertical-align: top;">Provider</td>
|
||||
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ prettyProviderName(config.provider) }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4" style="min-width: 150px;">
|
||||
<div class="settings-avatar" ng-click="avatarChange.showChangeAvatar()" style="background-image: url('{{ client.avatar }}');">
|
||||
<div class="overlay"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-8">
|
||||
<table width="100%">
|
||||
<tr>
|
||||
<td class="text-muted" style="vertical-align: top;">Name</td>
|
||||
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.cloudronName }} <a href="" ng-click="cloudronNameChange.show()"><i class="fa fa-pencil text-small"></i></a></td>
|
||||
</tr>
|
||||
<tr ng-show="config.provider === 'caas'">
|
||||
<td class="text-muted" style="vertical-align: top;">Model</td>
|
||||
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.size }} - {{ config.region }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted" style="vertical-align: top;">Version</td>
|
||||
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ config.version }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted" style="vertical-align: top;">Provider</td>
|
||||
<td class="text-right" style="vertical-align: top; white-space: nowrap;">{{ prettyProviderName(config.provider) }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"> </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted" style="vertical-align: top;"></td>
|
||||
<td class="text-right" style="vertical-align: bottom;">
|
||||
<button class="btn btn-primary pull-right" ng-hide="config.update.box" ng-disabled="autoUpdate.busy" ng-click="autoUpdate.checkNow()"><i class="fa fa-circle-o-notch fa-spin" ng-show="autoUpdate.busy"></i> Check for Updates</button>
|
||||
<button class="btn btn-success pull-right" ng-show="config.update.box" ng-click="update.show(update_form)">Update Available</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-left" ng-show="config.provider === 'caas'">
|
||||
|
||||
@@ -8,6 +8,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
|
||||
$scope.config = Client.getConfig();
|
||||
$scope.backupConfig = {};
|
||||
$scope.appstoreConfig = {};
|
||||
$scope.installedApps = Client.getInstalledApps();
|
||||
|
||||
$scope.lastBackup = null;
|
||||
$scope.backups = [];
|
||||
@@ -76,6 +77,45 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
|
||||
}
|
||||
};
|
||||
|
||||
$scope.update = {
|
||||
error: {},
|
||||
busy: false,
|
||||
|
||||
show: function (form) {
|
||||
$scope.update.error.generic = null;
|
||||
$scope.update.busy = false;
|
||||
|
||||
form.$setPristine();
|
||||
form.$setUntouched();
|
||||
|
||||
if (!$scope.config.update.box.sourceTarballUrl) {
|
||||
$('#setupSubscriptionModal').modal('show');
|
||||
} else {
|
||||
$('#updateModal').modal('show');
|
||||
}
|
||||
},
|
||||
|
||||
submit: function () {
|
||||
$scope.update.error.generic = null;
|
||||
$scope.update.busy = true;
|
||||
|
||||
Client.update(function (error) {
|
||||
if (error) {
|
||||
if (error.statusCode === 409) {
|
||||
$scope.update.error.generic = 'Please try again later. The Cloudron is creating a backup at the moment.';
|
||||
} else {
|
||||
$scope.update.error.generic = error.message;
|
||||
console.error('Unable to update.', error);
|
||||
}
|
||||
$scope.update.busy = false;
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = '/update.html';
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$scope.planChange = {
|
||||
busy: false,
|
||||
error: {},
|
||||
|
||||
Reference in New Issue
Block a user