Use angular events to broadcast status updates

This commit is contained in:
Tankred Hase 2014-11-26 21:12:40 +01:00
parent 32d3ea1801
commit 2f25557747
6 changed files with 41 additions and 87 deletions

View File

@ -11,7 +11,7 @@ var INIT_DISPLAY_LEN = 20,
FOLDER_TYPE_INBOX = 'Inbox',
NOTIFICATION_INBOX_TIMEOUT = 5000;
var MailListCtrl = function($scope, $routeParams, statusDisplay, notification, email, keychain, dialog, search, dummy) {
var MailListCtrl = function($scope, $timeout, $routeParams, statusDisplay, notification, email, keychain, dialog, search, dummy) {
//
// Init
@ -197,12 +197,15 @@ var MailListCtrl = function($scope, $routeParams, statusDisplay, notification, e
* Sync current folder when client comes back online
*/
$scope.watchOnline = $scope.$watch('account.online', function(isOnline) {
if (isOnline) {
statusDisplay.update('Online');
openCurrentFolder();
} else {
statusDisplay.update('Offline mode');
}
// wait one cycle for the status display controllers to init
$timeout(function() {
if (isOnline) {
statusDisplay.update('Online');
openCurrentFolder();
} else {
statusDisplay.update('Offline mode');
}
});
}, true);
//

View File

@ -1,26 +1,15 @@
'use strict';
var StatusDisplayCtrl = function($scope, $timeout, statusDisplay) {
var StatusDisplayCtrl = function($scope) {
$scope.state.statusDisplay = {
text: '',
time: undefined,
searching: false
};
$scope.$on('status', function(e, text, time) {
$scope.text = text;
$scope.time = (time) ? time : '';
});
// set the show functions
statusDisplay.showStatus = function(lbl, time) {
return $timeout(function() {
$scope.state.statusDisplay.text = lbl;
$scope.state.statusDisplay.time = (time) ? time : '';
});
};
statusDisplay.showSearching = function(state) {
return $timeout(function() {
$scope.state.statusDisplay.searching = state;
});
};
$scope.$on('searching', function(e, state) {
$scope.searching = state;
});
};

View File

@ -7,26 +7,19 @@ module.exports = StatusDisplay;
/**
* A central service to display status updates to the user
*/
function StatusDisplay($q, axe) {
this._q = $q;
function StatusDisplay($rootScope, axe) {
this._rootScope = $rootScope;
this._axe = axe;
}
/**
* Update the status disply in the lower left of the screen
* @param {String} msg The status message that is to be displayed to the user
* @param {String} text The status message that is to be displayed to the user
* @param {Date} time The time of the last update
*/
StatusDisplay.prototype.update = function(msg, time) {
var self = this;
self._axe.info('status display', msg);
return self._q(function(resolve, reject) {
if (self.showStatus) {
return resolve(self.showStatus(msg, time));
} else {
reject(new Error('Status display service showStatus not set!'));
}
});
StatusDisplay.prototype.update = function(text, time) {
this._axe.info('status display', text);
this._rootScope.$broadcast('status', text, time);
};
/**
@ -34,12 +27,5 @@ StatusDisplay.prototype.update = function(msg, time) {
* @param {Boolean} state If the spinner should be displayed or not
*/
StatusDisplay.prototype.setSearching = function(state) {
var self = this;
return self._q(function(resolve, reject) {
if (self.showSearching) {
return resolve(self.showSearching(state));
} else {
reject(new Error('Status display service showSearching not set!'));
}
});
this._rootScope.$broadcast('searching', state);
};

View File

@ -69,5 +69,5 @@
</li>
</ul><!--/nav__secondary-->
<footer ng-include="'tpl/status-display.html'" ng-controller="StatusDisplayCtrl"></footer>
<footer ng-include="'tpl/status-display.html'"></footer>
</nav>

View File

@ -1,9 +1,9 @@
<div>
<span class="spinner" ng-show="account.loggingIn || account.busy || state.statusDisplay.searching"></span>
<div ng-controller="StatusDisplayCtrl">
<span class="spinner" ng-show="account.loggingIn || account.busy || searching"></span>
<span class="text" ng-switch="account.online">
<span ng-switch-when="false">
<svg><use xlink:href="#icon-offline" /></svg>
</span>
{{state.statusDisplay.text}} {{state.statusDisplay.time | date:'shortTime'}}
{{text}} {{time | date:'shortTime'}}
</span>
</div>

View File

@ -1,7 +1,7 @@
'use strict';
describe('Status Display Service unit test', function() {
var statusDisplay, logInfoStub;
var statusDisplay, logInfoStub, rootScope, broadcastSpy;
beforeEach(function() {
angular.module('statusDisplay-test', ['woUtil']);
@ -9,6 +9,8 @@ describe('Status Display Service unit test', function() {
angular.mock.inject(function($injector, axe) {
logInfoStub = sinon.stub(axe, 'info');
statusDisplay = $injector.get('statusDisplay');
rootScope = $injector.get('$rootScope');
broadcastSpy = sinon.spy(rootScope, '$broadcast');
});
});
@ -17,49 +19,23 @@ describe('Status Display Service unit test', function() {
});
describe('update', function() {
it('should work', inject(function($rootScope) {
it('should work', function() {
var message = 'Tada!',
time = new Date();
statusDisplay.showStatus = function() {};
var showStatusStub = sinon.stub(statusDisplay, 'showStatus');
statusDisplay.update(message, time).then(function(result) {
expect(result).to.not.exist;
});
statusDisplay.update(message, time);
expect(logInfoStub.calledOnce).to.be.true;
$rootScope.$apply();
expect(showStatusStub.withArgs(message, time).calledOnce).to.be.true;
}));
it('should fail for no display function', inject(function($rootScope) {
statusDisplay.update().catch(function(err) {
expect(err.message).to.match(/showStatus/);
});
expect(logInfoStub.calledOnce).to.be.true;
$rootScope.$apply();
}));
expect(broadcastSpy.withArgs('status', message, time).calledOnce).to.be.true;
expect(logInfoStub.withArgs('status display', message).calledOnce).to.be.true;
});
});
describe('setSearching', function() {
it('should work', inject(function($rootScope) {
statusDisplay.showSearching = function() {};
var showSearchingStub = sinon.stub(statusDisplay, 'showSearching');
it('should work', function() {
statusDisplay.setSearching(true);
statusDisplay.setSearching(true).then(function(result) {
expect(result).to.not.exist;
});
$rootScope.$apply();
expect(showSearchingStub.withArgs(true).calledOnce).to.be.true;
}));
it('should fail for no display function', inject(function($rootScope) {
statusDisplay.setSearching().catch(function(err) {
expect(err.message).to.match(/showSearching/);
});
$rootScope.$apply();
}));
expect(broadcastSpy.withArgs('searching', true).calledOnce).to.be.true;
});
});
});