jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

rework update ui

Browse Source 
- this is not modal anymore
- can be canceled
This commit is contained in:
Girish Ramakrishnan
2018-11-30 16:06:37 -08:00
parent cbdb90d06b
commit d8dfa89f87
6 changed files with 65 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/views/settings.html
View File

@@ -19,30 +19,17 @@
</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-notch fa-spin" ng-show="update.busy"></i> Update</button>
<button type="button" class="btn btn-success" ng-click="update.startUpdate()" ng-disabled="update.busy" ng-show="(installedApps | readyToUpdate)"><i class="fa fa-circle-notch fa-spin" ng-show="update.busy"></i> Update</button>
</div>
</div>
</div>
@@ -185,10 +172,19 @@
<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td class="text-muted" style="vertical-align: top;"></td>
<td class="text-muted" style="vertical-align: top;">
<div ng-show="update.busy" class="progress progress-striped active animateMe">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{update.percent}}%"></div>
</div>
<div>
<div ng-show="update.busy">{{ update.message }}</div>
<div class="has-error" ng-show="!update.busy && update.errorMessage">{{ update.errorMessage }}</div>
</div>
</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-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>
<button class="btn btn-primary pull-right" ng-show="!config.update.box && !update.busy" ng-disabled="autoUpdate.busy" ng-click="autoUpdate.checkNow()"><i class="fa fa-circle-notch fa-spin" ng-show="autoUpdate.busy"></i> Check for Updates</button>
<button class="btn btn-success pull-right" ng-show="config.update.box && !update.busy" ng-click="update.show()">Update Available</button>
<button class="btn btn-danger pull-right" ng-show="config.update.box && update.busy" ng-click="update.stopUpdate()">Stop Update</button>
</td>
</tr>
</table>

59
src/views/settings.js
View File

@@ -26,16 +26,16 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
};
$scope.update = {
error: {},
error: {}, // this is for the dialog
busy: false,
percent: 0,
message: '',
errorMessage: '', // this shows inline
show: function (form) {
show: function () {
$scope.update.error.generic = null;
$scope.update.busy = false;
form.$setPristine();
form.$setUntouched();
if (!$scope.config.update.box.sourceTarballUrl) {
$('#setupSubscriptionModal').modal('show');
} else {
@@ -43,9 +43,52 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
}
},
submit: function () {
stopUpdate: function () {
Client.stopTask('update', function (error) {
if (error) {
if (error.statusCode === 409) {
$scope.update.errorMessage = 'No update is currently in progress';
} else {
console.error(error);
$scope.update.errorMessage = error.message;
}
$scope.update.busy = false;
return;
}
});
},
updateStatus: function () {
Client.getTaskProgress('update', function (error, data) {
if (error) return window.setTimeout($scope.update.updateStatus, 2000);
if (!data.active) {
$scope.update.busy = false;
$scope.update.message = '';
$scope.update.percent = 100; // indicates that 'result' is valid
$scope.update.errorMessage = data.errorMessage;
if (!data.errorMessage) window.location.reload(true); // assume success
return;
}
$scope.update.busy = true;
$scope.update.percent = data.percent;
$scope.update.message = data.message;
window.setTimeout($scope.update.updateStatus, 500);
});
},
startUpdate: function () {
$scope.update.error.generic = null;
$scope.update.busy = true;
$scope.update.percent = 0;
$scope.update.message = '';
$scope.update.errorMessage = '';
Client.update(function (error) {
if (error) {
@@ -59,7 +102,9 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
return;
}
window.location.href = '/update.html';
$('#updateModal').modal('hide');
$scope.update.updateStatus();
});
}
};