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

Show task progress as progress bar instead of indicator

Browse Source
This commit is contained in:
Johannes Zellner
2019-09-24 21:08:42 +02:00
parent 1b03e750a2
commit fe04ad9940
3 changed files with 26 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/app.html
+9 -16
View File
@@ -237,11 +237,6 @@
<a href="/#/apps" class="back-to-apps-link"><i class="fas fa-arrow-left"></i> Back to My Apps</a>
<div class="task-indicator animateMe" ng-show="app.taskId">
<i class="fa fa-circle-notch fa-spin"></i>
<span>{{ app | installationStateLabel:user }}</span>
</div>
<br/>
<div class="row">
@@ -253,9 +248,7 @@
<h1>
{{ app.label || app.fqdn }}
<br/>
<span class="text-small">
{{ app | installationStateLabel:user }}
</span>
<span class="text-small">{{ app | installationStateLabel:user }}</span>
</h1>
<div>
<a class="btn btn-sm btn-outline btn-primary" ng-href="{{ app.manifest.documentationUrl }}" target="_blank">Documentation</a>
@@ -265,6 +258,14 @@
</div>
</div>
<div class="row animateMe" ng-show="app.taskId">
<div class="col-md-8 col-md-offset-2">
<div class="progress progress-striped active" style="height: 10px;">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ app.taskProgress }}%"></div>
</div>
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col-md-2">
<div class="app-configure-links">
@@ -620,14 +621,6 @@
<div class="col-md-12">
<label class="control-label">Create Backup</label>
<p>This creates a snapshot of the app at this instant.</p>
<div ng-show="app.installationState === 'pending_backup'">
<div class="progress progress-striped active animateMe" style="margin-bottom: 10px;">
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ backups.taskProgress }}%"></div>
</div>
<div>{{ backups.taskMessage }}</div>
</div>
<button type="button" class="btn btn-primary pull-right" ng-click="backups.createBackup()" ng-disabled="app.taskId || backups.busyCreate"><i class="fa fa-circle-notch fa-spin" ng-show="app.installationState === 'pending_backup' || backups.busyCreate"></i> Create Backup</button>
</div>
</div>
src/views/app.js
+17 -21
View File
@@ -551,9 +551,6 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
enableBackup: false,
backups: [],
taskProgress: 0,
taskMessage: '',
copyBackupId: function (backup) {
var copyText = document.getElementById('backupIdHelper');
copyText.value = backup.id;
@@ -574,12 +571,8 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
$scope.backups.busyCreate = false;
trackAppTask(function (data) {
$scope.backups.taskProgress = data.percent;
$scope.backups.taskMessage = data.message;
}, function (error) {
waitForAppTask(function (error) {
if (error) return Client.error(error);
$scope.backups.show();
});
});
@@ -587,8 +580,6 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
createBackup: function () {
$scope.backups.busyCreate = true;
$scope.backups.taskProgress = 0;
$scope.backups.taskMessage = '';
Client.backupApp($scope.app.id, function (error) {
if (error) Client.error(error);
@@ -927,6 +918,18 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
Client.getApp($scope.app.id, function (error, app) {
if (error) return callback(error);
if (app.taskId) {
Client.getTask(app.taskId, function (error, task) {
if (error) return callback(error);
app.taskProgress = task ? task.percent : 10; // start with 10 to avoid empty progress bar
app.taskProgressMessage = task ? task.message : '';
});
} else {
app.taskProgress = 0;
app.taskProgressMessage = '';
}
$scope.app = app;
// Immediately move to debug view on error
@@ -936,20 +939,13 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
});
}
function trackAppTask(progressCallback, callback) {
progressCallback = progressCallback || function () {};
function waitForAppTask(callback) {
callback = callback || function () {};
if (!$scope.app.taskId) return callback();
Client.getTask($scope.app.taskId, function (error, result) {
if (error) console.error(error);
progressCallback(result);
// app will be refreshed on interval
$timeout(trackAppTask.bind(null, progressCallback, callback), 2000); // not yet done
});
// app will be refreshed on interval
$timeout(waitForAppTask.bind(null, callback), 2000); // not yet done
}
Client.onReady(function () {
@@ -981,7 +977,7 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
$scope.backups.show();
$scope.updates.show();
var refreshTimer = $interval(function () { refreshApp(); }, 3000); // call with inline function to avoid iteration argument passed see $interval docs
var refreshTimer = $interval(function () { refreshApp(); }, 2000); // call with inline function to avoid iteration argument passed see $interval docs
$scope.$on('$destroy', function () {
$interval.cancel(refreshTimer);
});