commit 63e43eb75fac81d3fa5815433cf291f1b8def4b1
author Matteo Scandolo <matteo.scandolo@gmail.com> Wed Dec 14 14:18:53 2016 -0800
committer Matteo Scandolo <matteo.scandolo@gmail.com> Wed Dec 14 14:43:30 2016 -0800
tree bef3ef1a007e9747b01762ad7c1cd4b7d96556a5
parent 035c593b003a5015e9cfa3b9d05c951ace550d80

Showing synchronizer notification

Change-Id: Ibc0ef77471026b48fa2e0a577adde9e43dde2a10

src/app/core/header/header.html

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>

src/app/core/header/header.scss

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

src/app/core/header/header.spec.ts

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');
   });
 

src/app/core/header/header.ts

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);
+        }
+      );
   }
 }