Showing synchronizer notification
Change-Id: Ibc0ef77471026b48fa2e0a577adde9e43dde2a10
diff --git a/src/app/core/header/header.html b/src/app/core/header/header.html
index b327754..786d4e8 100644
--- a/src/app/core/header/header.html
+++ b/src/app/core/header/header.html
@@ -4,4 +4,16 @@
{{vm.title}}
</a>
</p>
+ <p class="header-date notification">
+ <i ng-show="vm.notifications.length > 0" class="badge"></i>
+ <i class="fa fa-bell" ng-click="showNotification = !showNotification"></i>
+ <div class="notification-panel" ng-show="showNotification">
+ <ul>
+ <li ng-repeat="n in vm.notifications">
+ <b>{{n.model}}</b><br>
+ <i>{{n.msg.object.name}} status is {{n.msg.object.backend_status}}</i>
+ </li>
+ </ul>
+ </div>
+ </p>
</header>
diff --git a/src/app/core/header/header.scss b/src/app/core/header/header.scss
new file mode 100644
index 0000000..0df150c
--- /dev/null
+++ b/src/app/core/header/header.scss
@@ -0,0 +1,37 @@
+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, 20);
+ right: 0;
+ top: 60px;
+ border: 1px solid darken(grey, 35);
+
+ ul {
+ margin: 0;
+ margin-right: 10px;
+ list-style: none;
+ padding: 10px 5px 0;
+
+ li {
+ border-bottom: 1px solid darken(grey, 35);
+ color: #fff;
+ }
+ }
+ }
+}
\ 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 7c00602..0191a87 100644
--- a/src/app/core/header/header.spec.ts
+++ b/src/app/core/header/header.spec.ts
@@ -4,12 +4,19 @@
import 'angular-mocks';
import {xosHeader} from './header';
import {StyleConfig} from '../../config/style.config';
+import {Subject} from 'rxjs';
describe('header component', () => {
beforeEach(() => {
angular
.module('xosHeader', ['app/core/header/header.html'])
- .component('xosHeader', xosHeader);
+ .component('xosHeader', xosHeader)
+ .service('SynchronizerStore', function(){
+ const events = new Subject();
+ this.query = () => {
+ return events.asObservable();
+ };
+ });
angular.mock.module('xosHeader');
});
diff --git a/src/app/core/header/header.ts b/src/app/core/header/header.ts
index c2e4c41..06c4984 100644
--- a/src/app/core/header/header.ts
+++ b/src/app/core/header/header.ts
@@ -1,10 +1,25 @@
+import './header.scss';
import {StyleConfig} from '../../config/style.config';
+import {IStoreService} from '../../datasources/stores/slices.store';
+import {IWSEvent} from '../../datasources/websocket/global';
class HeaderController {
+ static $inject = ['SynchronizerStore'];
public title: string;
+ public notifications: IWSEvent[] = [];
- constructor() {
+ constructor(
+ private syncStore: IStoreService
+ ) {
this.title = StyleConfig.projectName;
+
+ this.syncStore.query()
+ .subscribe(
+ (event: IWSEvent) => {
+ console.log(event);
+ this.notifications.push(event);
+ }
+ );
}
}
diff --git a/src/app/datasources/helpers/store.helpers.ts b/src/app/datasources/helpers/store.helpers.ts
index dfb1e7a..1a2b0ab 100644
--- a/src/app/datasources/helpers/store.helpers.ts
+++ b/src/app/datasources/helpers/store.helpers.ts
@@ -10,6 +10,7 @@
public updateCollection(event: IWSEvent, subject: BehaviorSubject<any>): BehaviorSubject<any> {
const collection: any[] = subject.value;
const index: number = _.findIndex(collection, (i) => {
+ // NOTE evaluate to use event.msg.pk
return i.id === event.msg.object.id;
});
const exist: boolean = index > -1;
diff --git a/src/app/datasources/index.ts b/src/app/datasources/index.ts
index 4473541..535937b 100644
--- a/src/app/datasources/index.ts
+++ b/src/app/datasources/index.ts
@@ -4,6 +4,7 @@
import {WebSocketEvent} from './websocket/global';
import {SliceStore} from './stores/slices.store';
import {StoreHelpers} from './helpers/store.helpers';
+import {SynchronizerStore} from './stores/synchronizer.store';
export const xosRest = 'xosDataSources';
@@ -17,4 +18,5 @@
angular
.module('xosDataSources')
.service('StoreHelpers', StoreHelpers)
+ .service('SynchronizerStore', SynchronizerStore)
.service('SlicesStore', SliceStore);
diff --git a/src/app/datasources/stores/synchronizer.store.ts b/src/app/datasources/stores/synchronizer.store.ts
new file mode 100644
index 0000000..598d23c
--- /dev/null
+++ b/src/app/datasources/stores/synchronizer.store.ts
@@ -0,0 +1,26 @@
+/// <reference path="../../../../typings/index.d.ts"/>
+
+import {Subject} from 'rxjs/Rx';
+import {IWSEvent, IWSEventService} from '../websocket/global';
+
+export class SynchronizerStore {
+ static $inject = ['WebSocket'];
+ private _notifications: Subject<IWSEvent> = new Subject();
+ constructor(
+ private webSocket: IWSEventService
+ ) {
+ this.webSocket.list()
+ .filter((e: IWSEvent) => {
+ return e.msg.changed_fields.indexOf('backend_status') > -1;
+ })
+ .subscribe(
+ (event: IWSEvent) => {
+ this._notifications.next(event);
+ }
+ );
+ }
+
+ query() {
+ return this._notifications.asObservable();
+ }
+}
diff --git a/src/index.html b/src/index.html
index 591a249..0034022 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body ng-app="app">
diff --git a/src/index.scss b/src/index.scss
index 3d155ca..8813c49 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,5 +1,3 @@
-
-
html, body, #root {
margin: 0;
height: 100%;
@@ -51,6 +49,13 @@
margin: 1rem;
}
+.header-date {
+ flex: 1;
+ text-align: right;
+ margin: 1rem;
+ color: white;
+}
+
.footer {
padding: 0.5rem;
font-size: 1rem;
diff --git a/src/index.spec.js b/src/index.spec.js
index 8c19f76..3aaa277 100644
--- a/src/index.spec.js
+++ b/src/index.spec.js
@@ -1,4 +1,5 @@
const context = require.context('./app', true, /\.(js|ts|tsx)$/);
context.keys().forEach(function(f) {
+ // console.log(f);
context(f);
});