diff options
Diffstat (limited to 'usecaseui-portal/src/app/management')
4 files changed, 135 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/management/management.component.html b/usecaseui-portal/src/app/management/management.component.html new file mode 100644 index 00000000..a695b003 --- /dev/null +++ b/usecaseui-portal/src/app/management/management.component.html @@ -0,0 +1,19 @@ +<div class="content" style="padding: 20px 20px;"> + <div class="management" [@showHideAnimate]="show" > + <div class="title"> + <p>Create initial customer</p> + <span>Customer has not been created in ONAP </span> + <span>please create customer and its service type</span> + <img src="../../assets/images/customer01.png" alt=""> + <input nz-input placeholder="input customer name" nzSize="large"> + <button nz-button nzType="primary" class="cancel">Cancel</button> + <button nz-button nzType="primary" class="add" (click) = "customerhide()">Add</button> + </div> + <div class="image"> + <img src="../../assets/images/customer02.png" alt=""> + </div> + </div> + <div [@showHideAnimate]="hide"> + <app-customer></app-customer> + </div> +</div> diff --git a/usecaseui-portal/src/app/management/management.component.less b/usecaseui-portal/src/app/management/management.component.less new file mode 100644 index 00000000..cc50e3c2 --- /dev/null +++ b/usecaseui-portal/src/app/management/management.component.less @@ -0,0 +1,57 @@ +.content { + .management { + width: 100%; + .title { + width: 50%; + vertical-align:top; + display: inline-block; + font-family: "Arial"; + p { + font-size: 33px; + color: #3C4F8C; + margin-bottom: 0.5em; + } + span { + font-size: 18px; + color: rgba(60,79,140,0.5); + display: block; + } + img { + padding-top: 8%; + width: 55%; + margin-left: 18%; + margin-bottom: 5%; + } + input { + width: 50%; + margin-left: 20%; + margin-bottom: 5%; + display: block; + } + .cancel{ + background-color: #eee; + border-color: #eee; + color: #9DA7C5; + width: 80px; + margin-left: 25%; + margin-right: 2%; + } + .add { + color: #fff; + width: 80px; + background:linear-gradient(310deg,rgba(30,158,255,1) 0%,rgba(99,200,255,1) 100%); + border-color: #1890ff; + } + } + .image { + width: 49%; + vertical-align:top; + display: inline-block; + img { + width: 85%; + margin-top: 41%; + } + } + } + +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/management/management.component.spec.ts b/usecaseui-portal/src/app/management/management.component.spec.ts new file mode 100644 index 00000000..f6152432 --- /dev/null +++ b/usecaseui-portal/src/app/management/management.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ManagementComponent } from './management.component'; + +describe('ManagementComponent', () => { + let component: ManagementComponent; + let fixture: ComponentFixture<ManagementComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ManagementComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ManagementComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/management/management.component.ts b/usecaseui-portal/src/app/management/management.component.ts new file mode 100644 index 00000000..7345e7a3 --- /dev/null +++ b/usecaseui-portal/src/app/management/management.component.ts @@ -0,0 +1,34 @@ +import { Component, OnInit , HostBinding} from '@angular/core'; +import { showHideAnimate, slideToRight } from '../animates'; + +@Component({ + selector: 'app-management', + templateUrl: './management.component.html', + styleUrls: ['./management.component.less'], + animations: [ + showHideAnimate, slideToRight + ] +}) +export class ManagementComponent implements OnInit { + @HostBinding('@routerAnimate') routerAnimateState; //Routing animation + + constructor() { } + + ngOnInit() { + } + + show = "show"; + hide = "hide"; + custerhide = false; + customershow(){ + this.show = "show"; + this.hide = "hide"; + this.custerhide = true; + } + customerhide(){ + this.show = "hide"; + this.hide = "show"; + this.custerhide = false; + } + +} |