Minor adjustments, including the connection lost dialgo
This commit is contained in:
Kenneth Skovhede
@@ -16,7 +16,7 @@
|
||||
|
||||
<!-- <script type="text/javascript" src="scripts/libs/jquery.min.js"></script> -->
|
||||
|
||||
<script type="text/javascript" src="scripts/angular/angular.js"></script>
|
||||
<script type="text/javascript" src="scripts/angular/angular.min.js"></script>
|
||||
<script type="text/javascript" src="scripts/angular/angular-route.min.js"></script>
|
||||
|
||||
<script type="text/javascript" src="scripts/angular/angular-loader.min.js"></script>
|
||||
@@ -76,9 +76,9 @@
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<body ng-controller="AppController">
|
||||
|
||||
<div class="container" ng-controller="AppController">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="logo">
|
||||
<a href="#" data-page="home" class="home">{{appName}}</a>
|
||||
@@ -152,6 +152,23 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="state.connectionState != 'connected'" class="blocker"></div>
|
||||
|
||||
<div ng-show="state.connectionState != 'connected'" class="connection-lost">
|
||||
<div class="info">
|
||||
<div class="title">Connection lost</div>
|
||||
<div class="content" ng-show="state.connectionState !='connecting'">
|
||||
The connection to the server is lost, attempting again in {{ state.connectionAttemptTimer + 1000 | timeremaining }} ...
|
||||
</div>
|
||||
<div class="content" ng-hide="state.connectionState !='connecting'">
|
||||
Connnecting to server ...
|
||||
</div>
|
||||
<div class="content buttons">
|
||||
<a href ng-show="state.connectionState != 'connecting'" ng-click="doReconnect()" class="button">Connect now</a>
|
||||
<a href ng-hide="state.connectionState != 'connecting'" class="button" style="cursor: default;">Connecting...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
@@ -2,4 +2,8 @@ backupApp.controller('AppController', function($scope, BrandingService, ServerSt
|
||||
$scope.appName = BrandingService.appName;
|
||||
$scope.state = ServerStatus.watch($scope);
|
||||
$scope.localized = {};
|
||||
|
||||
$scope.doReconnect = function() {
|
||||
ServerStatus.reconnect();
|
||||
};
|
||||
});
|
||||
@@ -48,6 +48,9 @@ backupApp.filter('timeremaining', function() {
|
||||
r[i] = v;
|
||||
};
|
||||
|
||||
if (r.length == 1)
|
||||
r.unshift('0');
|
||||
|
||||
return r.join(':');
|
||||
}
|
||||
});
|
||||
@@ -15,6 +15,7 @@ backupApp.service('ServerStatus', function($http, $rootScope, $timeout, AppServi
|
||||
connectionState: 'connected',
|
||||
xsfrerror: false,
|
||||
connectionAttemptTimer: 0,
|
||||
failedConnectionAttempts: 0,
|
||||
lastPgEvent: null
|
||||
};
|
||||
|
||||
@@ -143,7 +144,7 @@ backupApp.service('ServerStatus', function($http, $rootScope, $timeout, AppServi
|
||||
$rootScope.$broadcast('serverstatechanged');
|
||||
}
|
||||
|
||||
}, 500);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
var updatepausetimer = null;
|
||||
@@ -188,6 +189,7 @@ backupApp.service('ServerStatus', function($http, $rootScope, $timeout, AppServi
|
||||
var url = '/serverstate/?lasteventid=' + parseInt(state.lastEventId) + '&longpoll=' + (state.lastEventId > 0 ? 'true' : 'false') + '&duration=' + parseInt((longpolltime-1000) / 1000) + 's';
|
||||
AppService.get(url, {timeout: state.lastEventId > 0 ? longpolltime : 5000}).then(
|
||||
function (response) {
|
||||
var oldEventId = state.lastEventId;
|
||||
var anychanged =
|
||||
notifyIfChanged(response.data, 'LastEventID', 'lastEventId') |
|
||||
notifyIfChanged(response.data, 'LastDataUpdateID', 'lastDataUpdateId') |
|
||||
@@ -196,11 +198,18 @@ backupApp.service('ServerStatus', function($http, $rootScope, $timeout, AppServi
|
||||
notifyIfChanged(response.data, 'ProgramState', 'programState') |
|
||||
notifyIfChanged(response.data, 'EstimatedPauseEnd', 'estimatedPauseEnd');
|
||||
|
||||
// Clear error indicators
|
||||
state.failedConnectionAttempts = 0;
|
||||
state.xsfrerror = false;
|
||||
|
||||
if (state.connectionState != 'connected') {
|
||||
state.connectionState = 'connected';
|
||||
$rootScope.$broadcast('serverstatechanged.connectionState', state.connectionState);
|
||||
anychanged = true;
|
||||
|
||||
// Reload page, server restarted
|
||||
if (oldEventId > state.lastEventId)
|
||||
location.reload(true);
|
||||
}
|
||||
|
||||
anychanged |= pauseTimerUpdater(true);
|
||||
@@ -215,20 +224,28 @@ backupApp.service('ServerStatus', function($http, $rootScope, $timeout, AppServi
|
||||
longpoll();
|
||||
},
|
||||
|
||||
function(respone) {
|
||||
if (state.connectionState == 'connected') {
|
||||
// First failure, we ignore
|
||||
state.connectionState = 'connecting';
|
||||
function(response) {
|
||||
|
||||
var oldxsfrstate = state.xsfrerror;
|
||||
state.failedConnectionAttempts++;
|
||||
state.xsfrerror = response.statusText.toLowerCase().indexOf('xsrf') >= 0;
|
||||
|
||||
// First failure, we ignore
|
||||
if (state.connectionState == 'connected' && state.failedConnectionAttempts == 1) {
|
||||
|
||||
// Try again
|
||||
longpoll();
|
||||
} else {
|
||||
|
||||
// Real failure, start countdown
|
||||
state.lastEventId = -1;
|
||||
state.connectionState = 'disconnected';
|
||||
|
||||
countdownForForReLongPoll(longpoll);
|
||||
//If we got a new XSRF token this time, quickly retry
|
||||
if (state.xsfrerror && !oldxsfrstate) {
|
||||
longpoll();
|
||||
} else {
|
||||
// Otherwise, start countdown to next try
|
||||
countdownForForReLongPoll(longpoll);
|
||||
}
|
||||
}
|
||||
|
||||
// Notify
|
||||
@@ -238,5 +255,7 @@ backupApp.service('ServerStatus', function($http, $rootScope, $timeout, AppServi
|
||||
);
|
||||
};
|
||||
|
||||
this.reconnect = longpoll;
|
||||
|
||||
longpoll();
|
||||
});
|
||||
@@ -444,3 +444,59 @@ ul.tabs > li.active, ul.tabs > li.active > a {
|
||||
background-color: lightgray;
|
||||
color: black;
|
||||
}
|
||||
|
||||
div.connection-lost, div.blocker {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
div.connection-lost {
|
||||
width: 250px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
div.blocker {
|
||||
background-color: #000000;
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.connection-lost div.info {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.connection-lost div.title {
|
||||
border: 1px solid #65b1dd;
|
||||
background-color: #65b1dd;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
padding: 10px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
font-weight: bold;
|
||||
color: lightgray;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.connection-lost div.content {
|
||||
background-color: white;
|
||||
border: 1px solid white;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.connection-lost div.content.buttons {
|
||||
padding-bottom: 45px;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
|
||||
<div class="tasks" ng-controller="HomeController">
|
||||
<div class="tasklist">
|
||||
<h3><p ng-if="backups.length > 0">Scheduled backups:</p></h3>
|
||||
<h3><p ng-if="backups.length > 0">Stored backup jobs:</p></h3>
|
||||
<div ng-repeat="item in backups" class="task">
|
||||
<a href ng-click="$parent.ContextMenuID == item.Backup.ID ? $parent.ContextMenuID = null : $parent.ContextMenuID = item.Backup.ID">{{item.Backup.Name}}</a>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user