Added luna template and deps
Change-Id: Idd3dcdee3a377a75733c333d4a754632111e17ee
diff --git a/src/app/core/header/header.html b/src/app/core/header/header.html
index 8359ab3..db25904 100644
--- a/src/app/core/header/header.html
+++ b/src/app/core/header/header.html
@@ -1,19 +1,55 @@
-<header class="header">
- <p class="header-title">
- <a href="#/" target="_blank">
- {{vm.title}}
- </a>
- </p>
- <p class="header-date notification">
- <i ng-if="vm.newNotifications.length > 0" class="badge"></i>
- <i class="fa fa-bell" ng-click="vm.showNotification = !vm.showNotification"></i>
- <div class="notification-panel" ng-show="vm.showNotification">
- <ul>
- <li ng-repeat="n in vm.notifications track by $index" ng-click="vm.viewNotification(n)" ng-class="{viewed: n.viewed}">
- <b>{{n.model}}</b><br>
- <i>{{n.msg.object.name}} status is {{n.msg.object.backend_status}}</i>
+<!--<header class="header">-->
+ <!--<p class="header-title">-->
+ <!--<a href="#/" target="_blank">-->
+ <!--{{vm.title}}-->
+ <!--</a>-->
+ <!--</p>-->
+ <!--<p class="header-date notification">-->
+ <!--<i ng-if="vm.newNotifications.length > 0" class="badge"></i>-->
+ <!--<i class="fa fa-bell" ng-click="vm.showNotification = !vm.showNotification"></i>-->
+ <!--<div class="notification-panel" ng-show="vm.showNotification">-->
+ <!--<ul>-->
+ <!--<li ng-repeat="n in vm.notifications track by $index" ng-click="vm.viewNotification(n)" ng-class="{viewed: n.viewed}">-->
+ <!--<b>{{n.model}}</b><br>-->
+ <!--<i>{{n.msg.object.name}} status is {{n.msg.object.backend_status}}</i>-->
+ <!--</li>-->
+ <!--</ul>-->
+ <!--</div>-->
+ <!--</p>-->
+<!--</header>-->
+
+
+<!-- Header -->
+<nav class="navbar navbar-default navbar-fixed-top">
+ <div class="container-fluid">
+ <div class="navbar-header">
+ <div id="mobile-menu">
+ <minimaliza-menu></minimaliza-menu>
+ </div>
+ <a class="navbar-brand" href="#/">
+ <em class="brand-title">{{vm.title}}</em>
+ <span>v.1.2</span>
+ </a>
+ </div>
+ <div id="navbar" class="navbar-collapse collapse">
+ <minimaliza-menu></minimaliza-menu>
+ <!--<form class="navbar-form navbar-left">-->
+ <!--<input type="text" class="form-control" placeholder="Search data for analysis" style="width: 175px">-->
+ <!--</form>-->
+ <ul class="nav navbar-nav navbar-right">
+ <!--<li class="dropdown">-->
+ <!--<a ui-sref="main.versions">-->
+ <!--<i class="fa fa-bell"></i>-->
+ <!--<span ng-if="vm.newNotifications.length > 0" class="label label-warning pull-right">{{vm.newNotifications.length}}</span>-->
+ <!--</a>-->
+ <!--</li>-->
+ <li class=" profil-link">
+ <a ui-sref="commonviews.login">
+ <span class="profile-address">luna@company.io</span>
+ <img src="../../images/profile.jpg" class="img-circle" alt="">
+ </a>
</li>
</ul>
</div>
- </p>
-</header>
+ </div>
+</nav>
\ No newline at end of file
diff --git a/src/app/core/header/header.scss b/src/app/core/header/header.scss
index 2ff7ce1..8a1664f 100644
--- a/src/app/core/header/header.scss
+++ b/src/app/core/header/header.scss
@@ -1,43 +1,3 @@
-xos-header {
- .badge {
- display: block;
- width: 3px;
- height: 3px;
- border-radius: 50%;
- border: 4px solid red;
- background: transparent;
- position: absolute;
- right: 15px;
- top: 18px;
- }
-
- .fa {
- cursor: pointer;
- }
-
- .notification-panel {
- position: absolute;
- background: darken(grey, 5);
- right: 10px;
- top: 60px;
- border: 1px solid darken(grey, 35);
- max-height: 200px;
- overflow-y: scroll;
-
- ul {
- margin: 0;
- padding: 0;
- list-style: none;
-
- li {
- padding: 10px;
- border-bottom: 1px solid darken(grey, 35);
- color: #fff;
-
- &.viewed {
- background: darken(grey, 20);
- }
- }
- }
- }
+#toast-container [toast]:not(:first-child) {
+ margin-top: 10px !important;
}
\ No newline at end of file
diff --git a/src/app/core/header/header.spec.ts b/src/app/core/header/header.spec.ts
index 1f2c1aa..8662719 100644
--- a/src/app/core/header/header.spec.ts
+++ b/src/app/core/header/header.spec.ts
@@ -18,14 +18,25 @@
return events.asObservable();
};
};
-const sampleNotification = {
+
+interface ImockToastr {
+ info(msg: string, title: string): void;
+}
+
+const MockToastr: ImockToastr = {
+ info: jasmine.createSpy('info')
+};
+
+const MockToastrConfig = {};
+
+const infoNotification = {
model: 'TestModel',
msg: {
changed_fields: ['backend_status'],
pk: 1,
object: {
name: 'TestName',
- backend_status: 'Test Status'
+ backend_status: '1 - Test Status'
}
}
};
@@ -35,7 +46,9 @@
angular
.module('xosHeader', ['app/core/header/header.html'])
.component('xosHeader', xosHeader)
- .service('SynchronizerStore', MockStore);
+ .service('SynchronizerStore', MockStore)
+ .value('toastr', MockToastr)
+ .value('toastrConfig', MockToastrConfig);
angular.mock.module('xosHeader');
});
@@ -51,57 +64,26 @@
}));
it('should render the appropriate title', () => {
- const header = element.find('a');
- expect(header.html().trim()).toEqual(StyleConfig.projectName);
-
- const badge = $('i.badge', element);
- expect(badge.length).toBe(0);
+ const header = $('a.navbar-brand .brand-title', element).text();
+ expect(header.trim()).toEqual(StyleConfig.projectName);
});
- it('should display a badge if there are unread notifications', () => {
- sendEvent(sampleNotification);
- scope.$digest();
-
- const badge = $('i.badge', element);
- expect(badge.length).toBe(1);
+ it('should configure toastr', () => {
+ expect(MockToastrConfig).toEqual({
+ newestOnTop: false,
+ positionClass: 'toast-top-right',
+ preventDuplicates: false,
+ preventOpenDuplicates: false,
+ progressBar: true,
+ });
});
- it('should not display a badge if there are notifications have been read', () => {
- sendEvent(angular.extend({viewed: true}, sampleNotification));
+ it('should display a toastr for a new notification', () => {
+ sendEvent(infoNotification);
scope.$digest();
- const badge = $('i.badge', element);
- expect(badge.length).toBe(0);
+ expect(MockToastr.info).toHaveBeenCalledWith('Synchronization started for: TestName', 'TestModel');
});
- it('should display a list of notifications', () => {
- isolatedScope.showNotification = true;
- sendEvent(angular.extend({viewed: true}, sampleNotification));
- sendEvent(angular.extend({viewed: false}, sampleNotification));
- scope.$digest();
-
- const badge = $('i.badge', element);
- expect(badge.length).toBe(1);
- const notificationPanel = $('.notification-panel', element);
- expect(notificationPanel.length).toBe(1);
-
- expect($('.notification-panel li', element).length).toBe(2);
- });
-
- it('should add the viewed class to an readed notification', () => {
- isolatedScope.showNotification = true;
- sendEvent(angular.extend({viewed: true}, sampleNotification));
- scope.$digest();
- expect($('.notification-panel li:first-child', element)).toHaveClass('viewed');
- scope.$digest();
- });
-
- it('should not add the viewed class to an unread notification', () => {
- isolatedScope.showNotification = true;
- sendEvent(angular.extend({viewed: false}, sampleNotification));
- scope.$digest();
- expect($('.notification-panel li:first-child', element)).not.toHaveClass('viewed');
- scope.$digest();
- });
-
+ // TODO test error and success toaster call
});
diff --git a/src/app/core/header/header.ts b/src/app/core/header/header.ts
index 20fbc3c..6e057bc 100644
--- a/src/app/core/header/header.ts
+++ b/src/app/core/header/header.ts
@@ -8,21 +8,54 @@
}
class HeaderController {
- static $inject = ['$scope', 'SynchronizerStore'];
+ static $inject = ['$scope', 'SynchronizerStore', 'toastr', 'toastrConfig'];
public title: string;
public notifications: INotification[] = [];
public newNotifications: INotification[] = [];
constructor(
private $scope: angular.IScope,
- private syncStore: IStoreService
+ private syncStore: IStoreService,
+ private toastr: ng.toastr.IToastrService,
+ private toastrConfig: ng.toastr.IToastrConfig
) {
+
+ angular.extend(this.toastrConfig, {
+ newestOnTop: false,
+ positionClass: 'toast-top-right',
+ preventDuplicates: false,
+ preventOpenDuplicates: false,
+ progressBar: true,
+ // autoDismiss: false,
+ // closeButton: false,
+ // timeOut: 0,
+ // tapToDismiss: false
+ });
+
this.title = StyleConfig.projectName;
this.syncStore.query()
.subscribe(
(event: IWSEvent) => {
$scope.$evalAsync(() => {
+ let toastrMsg: string;
+ let toastrLevel: string;
+ if (event.msg.object.backend_status.indexOf('1') > -1) {
+ toastrMsg = 'Synchronization started for:';
+ toastrLevel = 'info';
+ }
+ else if (event.msg.object.backend_status.indexOf('0') > -1) {
+ toastrMsg = 'Synchronization succedeed for:';
+ toastrLevel = 'success';
+ }
+ else if (event.msg.object.backend_status.indexOf('2') > -1) {
+ toastrMsg = 'Synchronization failed for:';
+ toastrLevel = 'error';
+ }
+
+ if (toastrLevel && toastrMsg) {
+ this.toastr[toastrLevel](`${toastrMsg} ${event.msg.object.name}`, event.model);
+ }
this.notifications.unshift(event);
this.newNotifications = this.getNewNotifications(this.notifications);
});
@@ -30,6 +63,7 @@
);
}
+ // TODO display a list of notification in the template
public viewNotification = (notification: INotification) => {
notification.viewed = true;
this.newNotifications = this.getNewNotifications(this.notifications);