From 91d892e11d6d58a3b96e190b0278173c9c1d5d13 Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Wed, 30 May 2018 17:44:36 +0200
Subject: [PATCH] introducing store
---
package-lock.json | 6 ++
package.json | 2 +
src/components/components.module.ts | 11 ++-
src/components/main/main.component.ts | 39 ++++++++
src/components/main/main.style.css | 11 +++
src/components/main/main.template.html | 92 ++++++++++++++++++-
src/components/markdown/markdown.component.ts | 8 +-
src/components/markdown/markdown.style.css | 6 --
.../readmoore/readmore.component.ts | 29 ++++++
src/components/readmoore/readmore.style.css | 21 +++++
.../readmoore/readmore.template.html | 10 ++
src/index.html | 17 +++-
src/main.module.ts | 23 +++++
src/main.ts | 5 +-
src/services/nehubaData.service.ts | 23 +++++
src/services/services.module.ts | 20 ++++
src/services/stateStore.service.ts | 17 ++++
src/test/test.component.ts | 13 +++
src/test/test.style.css | 0
src/test/test.template.html | 11 +++
src/ui/mainUI/mainUI.components.ts | 0
src/ui/mainUI/mainUI.style.css | 0
src/ui/mainUI/mainUI.template.html | 0
.../nehubaContainer.component.ts | 28 ++++++
.../nehubaContainer/nehubaContainer.style.css | 0
.../nehubaContainer.template.html | 17 ++++
.../nehubaViewer/nehubaViewer.component.ts | 15 +++
.../nehubaViewer/nehubaViewer.style.css | 0
.../nehubaViewer/nehubaViewer.template.html | 1 +
.../splashScreen/splashScreen.component.ts | 13 +++
.../splashScreen/splashScreen.style.css | 0
.../splashScreen/splashScreen.template.html | 1 +
src/ui/ui.module.ts | 32 +++++++
33 files changed, 444 insertions(+), 27 deletions(-)
create mode 100644 src/components/readmoore/readmore.component.ts
create mode 100644 src/components/readmoore/readmore.style.css
create mode 100644 src/components/readmoore/readmore.template.html
create mode 100644 src/main.module.ts
create mode 100644 src/services/nehubaData.service.ts
create mode 100644 src/services/services.module.ts
create mode 100644 src/services/stateStore.service.ts
create mode 100644 src/test/test.component.ts
create mode 100644 src/test/test.style.css
create mode 100644 src/test/test.template.html
create mode 100644 src/ui/mainUI/mainUI.components.ts
create mode 100644 src/ui/mainUI/mainUI.style.css
create mode 100644 src/ui/mainUI/mainUI.template.html
create mode 100644 src/ui/nehubaContainer/nehubaContainer.component.ts
create mode 100644 src/ui/nehubaContainer/nehubaContainer.style.css
create mode 100644 src/ui/nehubaContainer/nehubaContainer.template.html
create mode 100644 src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
create mode 100644 src/ui/nehubaContainer/nehubaViewer/nehubaViewer.style.css
create mode 100644 src/ui/nehubaContainer/nehubaViewer/nehubaViewer.template.html
create mode 100644 src/ui/nehubaContainer/splashScreen/splashScreen.component.ts
create mode 100644 src/ui/nehubaContainer/splashScreen/splashScreen.style.css
create mode 100644 src/ui/nehubaContainer/splashScreen/splashScreen.template.html
create mode 100644 src/ui/ui.module.ts
diff --git a/package-lock.json b/package-lock.json
index 380f2167b..447d947d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -263,6 +263,12 @@
"glob-to-regexp": "0.3.0"
}
},
+ "@ngrx/store": {
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/@ngrx/store/-/store-6.0.1.tgz",
+ "integrity": "sha512-cSgfT8CgpOr6BOQac9M3DH6QQC5gxCVjdEcZH//Zn/kwdse86X73iK7KWv6B6AiIEdyVbFfggXNZwd/HiyLGOA==",
+ "dev": true
+ },
"@ngtools/webpack": {
"version": "6.0.5",
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-6.0.5.tgz",
diff --git a/package.json b/package.json
index 74313d558..828fb179b 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"@angular/http": "^6.0.3",
"@angular/platform-browser": "^6.0.3",
"@angular/platform-browser-dynamic": "^6.0.3",
+ "@ngrx/store": "^6.0.1",
"@ngtools/webpack": "^6.0.5",
"@types/node": "^10.1.3",
"angular2-template-loader": "^0.6.2",
@@ -29,6 +30,7 @@
"html-webpack-plugin": "^3.2.0",
"ngx-bootstrap": "^3.0.0",
"raw-loader": "^0.5.1",
+ "reflect-metadata": "^0.1.12",
"rxjs": "^6.0.0",
"showdown": "^1.8.6",
"ts-loader": "^4.3.0",
diff --git a/src/components/components.module.ts b/src/components/components.module.ts
index 5b305b3d7..eb209d8d2 100644
--- a/src/components/components.module.ts
+++ b/src/components/components.module.ts
@@ -1,5 +1,4 @@
import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TestComponent } from './test/test.component'
@@ -7,6 +6,8 @@ import { MarkdownDom } from './markdown/markdown.component';
import { ComponentIndex } from './main/main.component';
import { SafeHtmlPipe } from '../util/pipes/safeHtml.pipe'
+import { ReadmoreComponent } from './readmoore/readmore.component';
+import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports : [
@@ -14,17 +15,17 @@ import { SafeHtmlPipe } from '../util/pipes/safeHtml.pipe'
FormsModule
],
declarations : [
- TestComponent,
-
/* components */
MarkdownDom,
ComponentIndex,
+ ReadmoreComponent,
/* pipes */
SafeHtmlPipe
],
- bootstrap : [
- ComponentIndex
+ exports : [
+ MarkdownDom,
+ ReadmoreComponent
]
})
diff --git a/src/components/main/main.component.ts b/src/components/main/main.component.ts
index 1e459c6c0..ac195346e 100644
--- a/src/components/main/main.component.ts
+++ b/src/components/main/main.component.ts
@@ -19,4 +19,43 @@ export class ComponentIndex{
normal paragraph
[google](https://www.google.com)`
+
+ markdownCode :string = `
+html
+\`\`\`html
+<markdown-dom id = "markdown-dom1">
+</markdown-dom>
+\`\`\`
+javascript
+\`\`\`javascript
+const mdDom = document.getElementById('markdown-dom1')
+mdDom.markdown = \`
+MD text here
+------
+\`
+\`\`\`
+
+`
+ markdownText : string = `
+mardown2Html
+======
+utilising [showdownjs](https://github.com/showdownjs/showdown). Note the [XSS vulnerability](https://github.com/showdownjs/showdown/wiki/Markdown's-XSS-Vulnerability-(and-how-to-mitigate-it)).
+`
+ readmoreInput : string = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+ readmoreSampleCode : string = `
+
+html
+\`\`\`html
+<readmore
+ collapsedHeight = 45
+ show = false>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</readmore>
+\`\`\`
+`
+ readmoreText : string = `
+readmore
+======
+hide/show more. Useful for the display of large block of text.
+`
}
\ No newline at end of file
diff --git a/src/components/main/main.style.css b/src/components/main/main.style.css
index e69de29bb..ab40d12a3 100644
--- a/src/components/main/main.style.css
+++ b/src/components/main/main.style.css
@@ -0,0 +1,11 @@
+.cell
+{
+ max-height:20em;
+}
+
+textarea
+{
+ resize:none;
+ width:100%;
+ height:20em;
+}
diff --git a/src/components/main/main.template.html b/src/components/main/main.template.html
index 0c230913d..74620c19a 100644
--- a/src/components/main/main.template.html
+++ b/src/components/main/main.template.html
@@ -1,7 +1,89 @@
-<markdown-dom
- [markdown]="markdownInput">
+<div class = "jumbotron">
+ <div class = "container">
+ <h1>Components Showcase</h1>
+ <p>
+ The interactive viewer was built with angular, which allow some of its components to be used in other web based applications.
+ </p>
+ <p>
+ Below is a list of samples of reusable components.
+ </p>
+ </div>
+</div>
-</markdown-dom>
+<div class = "container-fluid">
-<textarea [(ngModel)] = "markdownInput">
-</textarea>
\ No newline at end of file
+ <div class = "row">
+ <div class = "col-md-12 cell">
+ <markdown-dom [markdown] = "markdownText">
+
+ </markdown-dom>
+ </div>
+ </div>
+ <div class = "row">
+ <div class = "col-md-8 cell">
+ try a demo:
+ </div>
+ <div class = "col-md-4 cell">
+ code sample for implementation:
+ </div>
+ </div>
+ <div class = "row">
+ <div class = "col-md-4 cell">
+ <textarea [(ngModel)] = "markdownInput">
+ </textarea>
+ </div>
+
+ <div class = "col-md-4 cell">
+ <div class = "well">
+ <markdown-dom
+ [markdown]="markdownInput">
+ </markdown-dom>
+ </div>
+ </div>
+
+ <div class = "col-md-4 cell">
+ <div class = "well">
+ <markdown-dom
+ [markdown]="markdownCode">
+ </markdown-dom>
+ </div>
+ </div>
+ </div>
+
+ <div class = "row">
+ <div class = "col-md-12 cell">
+ <markdown-dom [markdown] = "readmoreText">
+
+ </markdown-dom>
+ </div>
+ </div>
+ <div class = "row">
+ <div class = "col-md-8 cell">
+ try a demo:
+ </div>
+ <div class = "col-md-4 cell">
+ code sample for implementation:
+ </div>
+ </div>
+ <div class = "row">
+ <div class = "col-md-4 cell">
+ <textarea [(ngModel)] = "readmoreInput">
+
+ </textarea>
+ </div>
+ <div class = "col-md-4 cell">
+
+ <readmore>
+ {{ readmoreInput }}
+ </readmore>
+ </div>
+ <div class = "col-md-4 cell">
+ <div class = "well">
+
+ <markdown-dom [markdown] = "readmoreSampleCode">
+
+ </markdown-dom>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/src/components/markdown/markdown.component.ts b/src/components/markdown/markdown.component.ts
index 62c0a9cf2..13059e8fa 100644
--- a/src/components/markdown/markdown.component.ts
+++ b/src/components/markdown/markdown.component.ts
@@ -1,12 +1,13 @@
-import { Component, OnChanges, Input } from '@angular/core'
+import { Component, OnChanges, Input, ChangeDetectionStrategy } from '@angular/core'
import * as showdown from 'showdown'
@Component({
selector : 'markdown-dom',
templateUrl : `./markdown.template.html`,
styleUrls : [
- `markdown.style.css`
- ]
+ `./markdown.style.css`
+ ],
+ changeDetection : ChangeDetectionStrategy.OnPush
})
export class MarkdownDom implements OnChanges{
@@ -19,6 +20,5 @@ export class MarkdownDom implements OnChanges{
}
ngOnChanges(){
this.innerHtml = this.converter.makeHtml(this.markdown)
- console.log(this.innerHtml)
}
}
diff --git a/src/components/markdown/markdown.style.css b/src/components/markdown/markdown.style.css
index e6ebf405c..e69de29bb 100644
--- a/src/components/markdown/markdown.style.css
+++ b/src/components/markdown/markdown.style.css
@@ -1,6 +0,0 @@
-:host
-{
- display:block;
- width:20em;
- height:20em;
-}
\ No newline at end of file
diff --git a/src/components/readmoore/readmore.component.ts b/src/components/readmoore/readmore.component.ts
new file mode 100644
index 000000000..751e735f6
--- /dev/null
+++ b/src/components/readmoore/readmore.component.ts
@@ -0,0 +1,29 @@
+import { Component, Input, OnChanges, ViewChild, ElementRef } from "@angular/core";
+
+@Component({
+ selector : 'readmore',
+ templateUrl : './readmore.template.html',
+ styleUrls : [
+ './readmore.style.css'
+ ]
+})
+
+export class ReadmoreComponent implements OnChanges{
+ @Input() collapsedHeight : number = 45
+ @Input() show : boolean = false
+ @ViewChild('content') contentContainer : ElementRef
+
+ ngOnChanges(){
+
+ }
+
+ private toggle(){
+ this.show = !this.show
+ }
+
+ get contentContainerMaxHeight(){
+ return this.show ?
+ `9999px` :
+ `${this.collapsedHeight}px`
+ }
+}
\ No newline at end of file
diff --git a/src/components/readmoore/readmore.style.css b/src/components/readmoore/readmore.style.css
new file mode 100644
index 000000000..cc6778ad5
--- /dev/null
+++ b/src/components/readmoore/readmore.style.css
@@ -0,0 +1,21 @@
+div[content]
+{
+ overflow:hidden;
+}
+div[sliver]
+{
+ width:100%;
+ display:flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+div[sliver]
+{
+ background-color: rgba(128,128,128,0.1);
+}
+
+div[sliver]:hover
+{
+ background-color: rgba(128,128,128,0.2);
+}
\ No newline at end of file
diff --git a/src/components/readmoore/readmore.template.html b/src/components/readmoore/readmore.template.html
new file mode 100644
index 000000000..29ea1d185
--- /dev/null
+++ b/src/components/readmoore/readmore.template.html
@@ -0,0 +1,10 @@
+<div
+ [style.maxHeight]="contentContainerMaxHeight"
+ #content
+ content>
+ <ng-content>
+ </ng-content>
+</div>
+<div (click)="toggle()" sliver>
+ <i [ngClass] = "show ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down'" class = "glyphicon"></i>
+</div>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 37287bcf5..4eca9c676 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,8 +1,15 @@
<!doctype html>
<html>
<head>
-
- <style>
+ <style>
+ markdown-dom pre code
+ {
+ white-space:pre;
+ }
+ </style>
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+ <!-- needed for nehuba container only -->
+ <!-- <style>
html
{
width:100%;
@@ -22,11 +29,11 @@
height:100%;
}
</style>
- <link rel = "stylesheet" href = "styles.css" />
+ <link rel = "stylesheet" href = "styles.css" /> -->
</head>
<body>
- <components-main>
+ <ui-test>
- </components-main>
+ </ui-test>
</body>
</html>
\ No newline at end of file
diff --git a/src/main.module.ts b/src/main.module.ts
new file mode 100644
index 000000000..7c74669a5
--- /dev/null
+++ b/src/main.module.ts
@@ -0,0 +1,23 @@
+import { NgModule } from "@angular/core";
+import { ComponentsModule } from "./components/components.module";
+import { UIModule } from "./ui/ui.module";
+import { UITestComponent } from "./test/test.component";
+import { Serv } from "./services/services.module";
+
+@NgModule({
+ imports : [
+ ComponentsModule,
+ UIModule,
+ Serv.forRoot()
+ ],
+ declarations : [
+ UITestComponent
+ ],
+ bootstrap : [
+ UITestComponent
+ ]
+})
+
+export class MainModule{
+
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 41d70208e..4197dc3aa 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
import 'zone.js'
-import { ComponentsModule } from './components/components.module'
+import 'reflect-metadata'
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
+import { MainModule } from './main.module';
-platformBrowserDynamic().bootstrapModule(ComponentsModule)
\ No newline at end of file
+platformBrowserDynamic().bootstrapModule(MainModule)
\ No newline at end of file
diff --git a/src/services/nehubaData.service.ts b/src/services/nehubaData.service.ts
new file mode 100644
index 000000000..0b8645ae0
--- /dev/null
+++ b/src/services/nehubaData.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from "@angular/core";
+
+
+@Injectable({
+ providedIn : 'root'
+})
+
+export class NehubaDataService{
+ public counter : number = 0
+
+ constructor(){
+ /* fetch init services here */
+ }
+
+ public increment(){
+ this.counter ++
+ }
+
+ public decrement(){
+ this.counter --
+ }
+
+}
\ No newline at end of file
diff --git a/src/services/services.module.ts b/src/services/services.module.ts
new file mode 100644
index 000000000..7883ae3dd
--- /dev/null
+++ b/src/services/services.module.ts
@@ -0,0 +1,20 @@
+import { NgModule, ModuleWithProviders } from "@angular/core";
+import { NehubaDataService } from "./nehubaData.service";
+
+
+@NgModule({
+
+})
+
+export class Serv{
+ static forRoot():ModuleWithProviders{
+ return {
+ ngModule : Serv,
+ providers : [
+ NehubaDataService
+ ]
+ }
+ }
+}
+
+export { NehubaDataService } from './nehubaData.service'
\ No newline at end of file
diff --git a/src/services/stateStore.service.ts b/src/services/stateStore.service.ts
new file mode 100644
index 000000000..f1db3d177
--- /dev/null
+++ b/src/services/stateStore.service.ts
@@ -0,0 +1,17 @@
+import { Action } from '@ngrx/store'
+
+export const CHANGE_STATE = 'CHANGE_STATE'
+
+export interface StateInterface{
+ templateSelected : any
+}
+
+export function changeState(state:StateInterface,action:Action){
+ switch(action.type){
+ case CHANGE_STATE : {
+ return Object.assign({},state)
+ }
+ default :
+ return state
+ }
+}
\ No newline at end of file
diff --git a/src/test/test.component.ts b/src/test/test.component.ts
new file mode 100644
index 000000000..25a9ee5cc
--- /dev/null
+++ b/src/test/test.component.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+@Component({
+ selector : `ui-test`,
+ templateUrl : './test.template.html',
+ styleUrls : [
+ `./test.style.css`
+ ]
+})
+
+export class UITestComponent{
+
+}
\ No newline at end of file
diff --git a/src/test/test.style.css b/src/test/test.style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/test/test.template.html b/src/test/test.template.html
new file mode 100644
index 000000000..ba0576326
--- /dev/null
+++ b/src/test/test.template.html
@@ -0,0 +1,11 @@
+this is ui test
+
+<readmore>
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</readmore>
+
+<div>
+ <ui-nehuba-container>
+
+ </ui-nehuba-container>
+</div>
diff --git a/src/ui/mainUI/mainUI.components.ts b/src/ui/mainUI/mainUI.components.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/ui/mainUI/mainUI.style.css b/src/ui/mainUI/mainUI.style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/ui/mainUI/mainUI.template.html b/src/ui/mainUI/mainUI.template.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/ui/nehubaContainer/nehubaContainer.component.ts b/src/ui/nehubaContainer/nehubaContainer.component.ts
new file mode 100644
index 000000000..0d2d0072a
--- /dev/null
+++ b/src/ui/nehubaContainer/nehubaContainer.component.ts
@@ -0,0 +1,28 @@
+import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentFactory } from "@angular/core";
+import { NehubaViewerUnit } from "./nehubaViewer/nehubaViewer.component";
+import { NehubaDataService } from "../../services/services.module";
+
+@Component({
+ selector : 'ui-nehuba-container',
+ templateUrl : './nehubaContainer.template.html',
+ styleUrls : [
+ `./nehubaContainer.style.css`
+ ]
+})
+
+export class NehubaContainner{
+ @ViewChild('container',{read:ViewContainerRef}) container : ViewContainerRef
+ private nehubaViewerFactory : ComponentFactory<NehubaViewerUnit>
+ public viewerLoaded : boolean = false
+ constructor(
+ private csf:ComponentFactoryResolver,
+ public nehubaDS : NehubaDataService
+ ){
+ this.nehubaViewerFactory = this.csf.resolveComponentFactory(NehubaViewerUnit)
+ }
+
+ TEST_create(){
+ this.viewerLoaded = true
+ this.container.createComponent(this.nehubaViewerFactory)
+ }
+}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaContainer.style.css b/src/ui/nehubaContainer/nehubaContainer.style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/ui/nehubaContainer/nehubaContainer.template.html b/src/ui/nehubaContainer/nehubaContainer.template.html
new file mode 100644
index 000000000..cafa7e7ac
--- /dev/null
+++ b/src/ui/nehubaContainer/nehubaContainer.template.html
@@ -0,0 +1,17 @@
+<div (click)="TEST_create()" class = "btn btn-default">
+ create new
+</div>
+<div (click)="nehubaDS.increment()" class = "btn btn-default">
+ +
+</div>
+<div (click)="nehubaDS.decrement()" class = "btn btn-default">
+ -
+</div>
+
+{{ nehubaDS.counter }}
+
+<ng-template #container>
+</ng-template>
+
+<ui-splashscreen *ngIf = "!viewerLoaded">
+</ui-splashscreen>
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
new file mode 100644
index 000000000..76c8b5718
--- /dev/null
+++ b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.component.ts
@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+@Component({
+ templateUrl : './nehubaViewer.template.html',
+ styleUrls : [
+ './nehubaViewer.style.css'
+ ]
+})
+
+export class NehubaViewerUnit{
+ constructor(
+ ){
+
+ }
+}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.style.css b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.template.html b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.template.html
new file mode 100644
index 000000000..47a74a68d
--- /dev/null
+++ b/src/ui/nehubaContainer/nehubaViewer/nehubaViewer.template.html
@@ -0,0 +1 @@
+THIS IS A NEHUBA VIEWER UNIT
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts b/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts
new file mode 100644
index 000000000..83a185bdb
--- /dev/null
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.component.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+@Component({
+ selector : 'ui-splashscreen',
+ templateUrl : './splashScreen.template.html',
+ styleUrls : [
+ `./splashScreen.style.css`
+ ]
+})
+
+export class SplashScreen{
+
+}
\ No newline at end of file
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.style.css b/src/ui/nehubaContainer/splashScreen/splashScreen.style.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/ui/nehubaContainer/splashScreen/splashScreen.template.html b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
new file mode 100644
index 000000000..0187a4588
--- /dev/null
+++ b/src/ui/nehubaContainer/splashScreen/splashScreen.template.html
@@ -0,0 +1 @@
+THIS IS A SPLASH SCREEN
\ No newline at end of file
diff --git a/src/ui/ui.module.ts b/src/ui/ui.module.ts
new file mode 100644
index 000000000..54949e017
--- /dev/null
+++ b/src/ui/ui.module.ts
@@ -0,0 +1,32 @@
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { ComponentsModule } from "../components/components.module";
+
+import { NehubaViewerUnit } from "./nehubaContainer/nehubaViewer/nehubaViewer.component";
+import { NehubaContainner } from "./nehubaContainer/nehubaContainer.component";
+import { SplashScreen } from "./nehubaContainer/splashScreen/splashScreen.component";
+
+
+@NgModule({
+ imports : [
+ BrowserModule,
+ ],
+ declarations : [
+ NehubaContainner,
+ NehubaViewerUnit,
+ SplashScreen
+ ],
+ entryComponents : [
+
+ /* dynamically created components needs to be declared here */
+ NehubaViewerUnit
+ ],
+ exports : [
+ NehubaContainner,
+ NehubaViewerUnit
+ ]
+})
+
+export class UIModule{
+
+}
\ No newline at end of file
--
GitLab