Use angular in update dialog and show errors

This commit is contained in:
Johannes Zellner
2015-07-29 14:02:31 +02:00
parent 4f129102a8
commit 3027c119fe
2 changed files with 26 additions and 11 deletions

View File

@@ -4,20 +4,29 @@
var app = angular.module('Application', []);
app.controller('Controller', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {
var apiOrigin = '';
$scope.title = 'Update in progress...';
$scope.percent = 0;
$scope.message = '';
$scope.error = false;
function loadWebadmin() {
$scope.loadWebadmin = function () {
window.location.href = '/';
}
};
function fetchProgress() {
$http.get(apiOrigin + '/api/v1/cloudron/progress').success(function(data, status) {
$http.get('/api/v1/cloudron/progress').success(function(data, status) {
if (status === 404) return; // just wait until we create the progress.json on the server side
if (status !== 200 || typeof data !== 'object') return console.error(status, data);
if (data.update === null) return loadWebadmin();
if (data.update === null) return $scope.loadWebadmin();
$('#updateProgressBar').css('width', data.update.percent + '%');
$('#updateProgressMessage').html(data.update.message);
if (data.update.percent === -1) {
$scope.title = 'Update Error';
$scope.error = true;
$scope.message = data.update.message;
} else {
$scope.percent = data.update.percent;
$scope.message = data.update.message;
}
}).error(function (data, status) {
console.error(status, data);
});

View File

@@ -33,13 +33,19 @@
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="updateProgressModalLabel">Update in progress...</h4>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<div class="modal-body" ng-show="!error">
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" id="updateProgressBar" style="width: 0%"></div>
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{percent}}%"></div>
</div>
<span id="updateProgressMessage"></span>
<span>{{message}}</span>
</div>
<div class="modal-body" ng-show="error">
<span>{{message}}</span>
</div>
<div class="modal-footer" ng-show="error">
<button type="button" class="btn btn-primary" ng-click="loadWebadmin()">Ok</button>
</div>
</div>
</div>