diff --git a/src/app/commons/component/input-chip/input-chip.component.html b/src/app/commons/component/input-chip/input-chip.component.html new file mode 100644 index 0000000..1ab9065 --- /dev/null +++ b/src/app/commons/component/input-chip/input-chip.component.html @@ -0,0 +1,21 @@ +
+
+ + +
+ + + + {{item.name}} + cancel + + + + + + + + {{item.name}} + + +
\ No newline at end of file diff --git a/src/app/commons/component/input-chip/input-chip.component.scss b/src/app/commons/component/input-chip/input-chip.component.scss new file mode 100644 index 0000000..3310266 --- /dev/null +++ b/src/app/commons/component/input-chip/input-chip.component.scss @@ -0,0 +1,3 @@ +.input-chip { + width: 80%; +} \ No newline at end of file diff --git a/src/app/commons/component/input-chip/input-chip.component.spec.ts b/src/app/commons/component/input-chip/input-chip.component.spec.ts new file mode 100644 index 0000000..4260282 --- /dev/null +++ b/src/app/commons/component/input-chip/input-chip.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputChipComponent } from './input-chip.component'; + +describe('InputChipComponent', () => { + let component: InputChipComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputChipComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputChipComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/commons/component/input-chip/input-chip.component.ts b/src/app/commons/component/input-chip/input-chip.component.ts new file mode 100644 index 0000000..82cdd2a --- /dev/null +++ b/src/app/commons/component/input-chip/input-chip.component.ts @@ -0,0 +1,52 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { MatChipInputEvent } from '@angular/material'; + +@Component({ + selector: 'of-input-chip', + templateUrl: './input-chip.component.html', + styleUrls: ['./input-chip.component.scss'] +}) +export class InputChipComponent implements OnInit { + + selectedItems = new Array(); + @Input() unselectedItems; + + constructor() { + } + + ngOnInit() { + } + + selected(app: any) { + this.selectedItems.push(app); + this.remove(this.unselectedItems, app); + } + + unselected(app: any): void { + this.remove(this.selectedItems, app); + this.unselectedItems.push(app); + } + + remove(list: any, target: any) { + const index = list.indexOf(target); + if (index >= 0) { + list.splice(index, 1); + } + } + + selectAll() { + const t = this; + this.unselectedItems.map(function (v, i) { + t.selectedItems.push(v); + }); + this.unselectedItems.length = 0; + } + + unselectAll() { + const t = this; + this.selectedItems.map(function (v, i) { + t.unselectedItems.push(v); + }); + this.selectedItems.length = 0; + } +} diff --git a/src/app/pages/sensor-setting/sensor-setting-page.component.ts b/src/app/pages/sensor-setting/sensor-setting-page.component.ts index 994fced..a7c5f53 100644 --- a/src/app/pages/sensor-setting/sensor-setting-page.component.ts +++ b/src/app/pages/sensor-setting/sensor-setting-page.component.ts @@ -22,7 +22,6 @@ export class SensorSettingPageComponent implements OnInit { openDialog(): void { const dialogRef = this.dialog.open(DiscoverySettingComponent, { width: '850px', - data: 'this text is dialog!!' }); dialogRef.afterClosed().subscribe(result => { diff --git a/src/packages/discovery/component/index.ts b/src/packages/discovery/component/index.ts index 81ac9cc..276e457 100644 --- a/src/packages/discovery/component/index.ts +++ b/src/packages/discovery/component/index.ts @@ -1,5 +1,7 @@ import { SettingComponent } from './setting/setting.component'; +import { InputChipComponent } from 'app/commons/component/input-chip/input-chip.component'; export const COMPONENTS = [ SettingComponent, + InputChipComponent ]; diff --git a/src/packages/discovery/component/setting/setting.component.html b/src/packages/discovery/component/setting/setting.component.html index 92645d8..424435a 100644 --- a/src/packages/discovery/component/setting/setting.component.html +++ b/src/packages/discovery/component/setting/setting.component.html @@ -1,90 +1,57 @@
-

Discovery Setting {{ step }}!

+

Discovery Setting

- - - - - Zone - 192.168.1.0/24 - - -
- Host - - + + + Zone + {{cidr}} + + +
+
+ Host +
+
+ + - - + +
-
- Port - - +
+
+
+ Port +
+
+ + - - + +
-
- Service - Meterial's [Select] + Covalent's [Chilp] Collaboration ! +
+
+
+ Service
- - - - - - - - - - - - 222222222222222222 - 192.168.1.0/24 - - -
- Host - - - - - - -
-
- Port - - - - - - -
-
- Service - Meterial's [Select] + Covalent's [Chilp] Collaboration ! -
- - - - - - - - +
+ +
+
+ + - - - + + +
\ No newline at end of file diff --git a/src/packages/discovery/component/setting/setting.component.ts b/src/packages/discovery/component/setting/setting.component.ts index 5e0ec99..093aa94 100644 --- a/src/packages/discovery/component/setting/setting.component.ts +++ b/src/packages/discovery/component/setting/setting.component.ts @@ -1,15 +1,33 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, AfterContentInit } from '@angular/core'; +import { MatCheckboxChange } from '@angular/material'; + @Component({ selector: 'of-setting', templateUrl: './setting.component.html', styleUrls: ['./setting.component.scss'] }) -export class SettingComponent implements OnInit { +export class SettingComponent implements OnInit, AfterContentInit { + private cidr; + + serviceItems = [ + { name: 'MySQL' }, + { name: 'Redis' }, + { name: 'Tomcat' }, + { name: 'Nginx' }, + ]; constructor() { } ngOnInit() { } + ngAfterContentInit() { + this.cidr = '192.168.1.0/24'; + } + + handleStart() { + console.log('Start discovery'); + + } } diff --git a/src/packages/discovery/discovery.module.ts b/src/packages/discovery/discovery.module.ts index 5f743ef..6d22a94 100644 --- a/src/packages/discovery/discovery.module.ts +++ b/src/packages/discovery/discovery.module.ts @@ -7,12 +7,14 @@ import { MaterialModule } from 'app/commons/ui/material/material.module'; import { MemberStoreModule } from './discovery-store.module'; import { SERVICES } from './service'; +import { FormsModule } from '@angular/forms'; @NgModule({ imports: [ CommonModule, MaterialModule, - MemberStoreModule + MemberStoreModule, + FormsModule ], declarations: [ COMPONENTS