Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP

8 files changed, 219 insertions, 0 deletions

diff --git a/src/angular/notifications/container/notifcontainer.component.html.ts b/src/angular/notifications/container/notifcontainer.component.html.ts
new file mode 100644
index 0000000..df08bb4
--- /dev/null
+++ b/src/angular/notifications/container/notifcontainer.component.html.ts
@@ -0,0 +1,6 @@
+export default `
+<div id="containerid" class="sdc-notification-container ntns">
+        <sdc-notification  *ngFor="let notif of notifications" [notificationSetting]="notif" (destroyComponent)="onDestroyed(notif)" >
+        </sdc-notification>
+</div>
+`;
diff --git a/src/angular/notifications/container/notifcontainer.component.ts b/src/angular/notifications/container/notifcontainer.component.ts
new file mode 100644
index 0000000..a922dc1
--- /dev/null
+++ b/src/angular/notifications/container/notifcontainer.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input, Output, EventEmitter, OnInit } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { NotificationSettings } from "../utilities/notification.config";
+import { NotificationsService } from "../services/notifications.service";
+import template from "./notifcontainer.component.html";
+
+@Component({
+    selector: "sdc-notification-container",
+    template: template
+})
+export class NotificationContainerComponent implements OnInit {
+    notifications: NotificationSettings[] = [];
+
+    constructor(private notify: NotificationsService) {
+    }
+
+    public ngOnInit(){
+        this.notify.subscribe( (notif : NotificationSettings) => {
+            this.notifications.push(notif);
+        });
+    }
+
+
+    private onDestroyed = (event : any):void =>{
+        let index: number = this.notifications.indexOf(event);
+        if (index !== -1) {
+            this.notifications.splice(index, 1);
+        }
+    }
+
+}
diff --git a/src/angular/notifications/notification-inner-content-example.component.ts b/src/angular/notifications/notification-inner-content-example.component.ts
new file mode 100644
index 0000000..552f7b0
--- /dev/null
+++ b/src/angular/notifications/notification-inner-content-example.component.ts
@@ -0,0 +1,21 @@
+import { Component, Input } from "@angular/core";
+
+@Component({
+    selector: "innernotif-content",
+    template: `
+        <div>
+            <h4>Custom Notification</h4>
+            <div>
+                <span>{{notifyTitle}}</span>
+            </div>
+            <div>
+                <span>{{notifyText}}</span>
+            </div>
+        </div>
+`
+})
+export class InnerNotifContent {
+
+    @Input() notifyTitle:string;
+    @Input() notifyText:string;
+}
diff --git a/src/angular/notifications/notification.module.ts b/src/angular/notifications/notification.module.ts
new file mode 100644
index 0000000..5891391
--- /dev/null
+++ b/src/angular/notifications/notification.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { NotificationComponent } from "./notification/notification.component";
+import { NotificationContainerComponent } from "./container/notifcontainer.component";
+import { NotificationsService } from "./services/notifications.service";
+import { CreateDynamicComponentService } from "../utils/create-dynamic-component.service";
+
+
+@NgModule({
+    declarations: [
+        NotificationComponent,
+        NotificationContainerComponent,
+    ],
+    exports: [
+        NotificationComponent,
+        NotificationContainerComponent,
+    ],
+    entryComponents: [
+        NotificationComponent,
+        NotificationContainerComponent,
+    ],
+    imports: [
+        CommonModule
+    ],
+    providers: [NotificationsService, CreateDynamicComponentService]
+})
+export class NotificationModule {
+
+}
diff --git a/src/angular/notifications/notification/notification.component.html.ts b/src/angular/notifications/notification/notification.component.html.ts
new file mode 100644
index 0000000..450972e
--- /dev/null
+++ b/src/angular/notifications/notification/notification.component.html.ts
@@ -0,0 +1,19 @@
+export default `
+<div class="sdc-notification" (click)="fadeOut()">
+    <div class="sdc-notification__wrapper {{'type-' + notificationSetting.type}}" [class.fade-out__animated]="fade" (animationend)="destroyMe()">
+        <div *ngIf="!notificationSetting.hasCustomContent" class="sdc-notification__content">
+            <div class="sdc-notification__icon" >
+            </div>
+            <div class="sdc-notification__message">
+                <div class="sdc-notification__title">
+                    {{notificationSetting.notifyTitle}}
+                </div>
+                <div class="sdc-notification__text" >
+                    {{notificationSetting.notifyText}}
+                </div>
+            </div>
+        </div>
+        <div #dynamicContentContainer></div>
+    </div>
+</div>
+`;
diff --git a/src/angular/notifications/notification/notification.component.ts b/src/angular/notifications/notification/notification.component.ts
new file mode 100644
index 0000000..476853c
--- /dev/null
+++ b/src/angular/notifications/notification/notification.component.ts
@@ -0,0 +1,42 @@
+import { Component, Input, Output, EventEmitter, OnInit, ViewContainerRef, ViewChild } from "@angular/core";
+import { NotificationSettings } from "../utilities/notification.config";
+import { CreateDynamicComponentService } from "../../utils/create-dynamic-component.service";
+import template from "./notification.component.html";
+
+@Component({
+    selector: 'sdc-notification',
+    template: template
+})
+
+export class NotificationComponent implements OnInit {
+
+    @Input() notificationSetting:NotificationSettings;
+    @Output() destroyComponent = new EventEmitter<any>();
+    @ViewChild("dynamicContentContainer", {read: ViewContainerRef}) contentContainer:ViewContainerRef;
+    private fade: boolean = false;
+
+    constructor(private createDynamicComponentService: CreateDynamicComponentService) {
+    }
+
+    public ngOnInit() {
+        if(this.notificationSetting.hasCustomContent){
+            this.createDynamicComponentService.insertComponentDynamically(this.notificationSetting.innerComponentType, this.notificationSetting.innerComponentOptions, this.contentContainer);
+        }
+
+        if(!this.notificationSetting.sticky){
+            setTimeout(() => this.fadeOut(), this.notificationSetting.duration);
+        }
+    }
+
+    private fadeOut = ():void => {
+        this.fade = true;
+    }
+
+    private destroyMe() {
+        /*Only destroy on fade out, not on entry animation */
+        if(this.fade){
+            this.destroyComponent.emit(this.notificationSetting);
+        }
+    }
+
+}
diff --git a/src/angular/notifications/services/notifications.service.ts b/src/angular/notifications/services/notifications.service.ts
new file mode 100644
index 0000000..28a645c
--- /dev/null
+++ b/src/angular/notifications/services/notifications.service.ts
@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { NotificationSettings } from '../utilities/notification.config'
+import { Subject } from 'rxjs/Subject';
+import { Subscription } from 'rxjs/Subscription';
+
+
+@Injectable()
+export class NotificationsService  {
+
+    notifs : NotificationSettings[] = [];
+
+    notifQueue : Subject<any> = new Subject<any>();
+
+    constructor() {}
+
+    public push(notif : NotificationSettings):void{
+
+        if( this.notifQueue.observers.length > 0 ) {
+            this.notifQueue.next(notif);
+        } else {
+            this.notifs.push(notif);
+        }
+    }
+
+
+
+    public getNotifications() : NotificationSettings[] {
+        return this.notifs;
+    }
+
+
+
+    public subscribe(observer): Subscription {
+        let s:Subscription = this.notifQueue.subscribe(observer);
+        this.notifs.forEach(notif => this.notifQueue.next(notif));
+        this.notifs = [];
+        return s;
+    }
+
+
+}
diff --git a/src/angular/notifications/utilities/notification.config.ts b/src/angular/notifications/utilities/notification.config.ts
new file mode 100644
index 0000000..f469b7d
--- /dev/null
+++ b/src/angular/notifications/utilities/notification.config.ts
@@ -0,0 +1,30 @@
+import { Type, ComponentRef } from '@angular/core';
+
+export type NotificationType =
+    "info" | "warn" | "error" | "success";
+
+export class NotificationSettings {
+    
+    public type: NotificationType;
+    public notifyText: string;
+    public notifyTitle: string;
+    public sticky: boolean;
+    public hasCustomContent :boolean;
+    public duration:number;
+    public innerComponentType: Type<any>;
+    public innerComponentOptions : any;
+
+    constructor(type: NotificationType, notifyText: string, notifyTitle: string, duration: number = 10000, sticky: boolean = false, hasCustomContent:boolean = false, innerComponentType?:Type<any>, innerComponentOptions? :any) {
+
+        this.type = type;
+        this.notifyText = notifyText;
+        this.notifyTitle = notifyTitle;
+        this.duration = duration;
+        this.sticky = sticky;
+        this.hasCustomContent = hasCustomContent;
+        this.innerComponentType = innerComponentType;
+        this.innerComponentOptions = innerComponentOptions;
+    }
+
+
+}