discovery setting
This commit is contained in:
insanity
parent
d06804f7fa
commit
661027198b
|
|
@ -0,0 +1,21 @@
|
|||
<div>
|
||||
<div fxLayoutAlign="end" class="input-chip">
|
||||
<button mat-button (click)="selectAll()">Select All</button>
|
||||
<button mat-button (click)="unselectAll()">Unselect All</button>
|
||||
</div>
|
||||
<mat-form-field class="input-chip">
|
||||
<mat-chip-list #chipList>
|
||||
<mat-chip *ngFor="let item of selectedItems" [selectable]="true" [removable]="true" (remove)="unselected(item)">
|
||||
{{item.name}}
|
||||
<mat-icon matChipRemove *ngIf="true">cancel</mat-icon>
|
||||
</mat-chip>
|
||||
<input [matChipInputFor]="chipList" />
|
||||
</mat-chip-list>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-chip-list #chipList class="input-chip">
|
||||
<mat-chip *ngFor="let item of unselectedItems" [selectable]="true" (click)="selected(item)">
|
||||
{{item.name}}
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.input-chip {
|
||||
width: 80%;
|
||||
}
|
||||
|
|
@ -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<InputChipComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ InputChipComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(InputChipComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
52
src/app/commons/component/input-chip/input-chip.component.ts
Normal file
52
src/app/commons/component/input-chip/input-chip.component.ts
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,90 +1,57 @@
|
|||
<div>
|
||||
|
||||
<h2 mat-dialog-title>Discovery Setting {{ step }}!</h2>
|
||||
<h2 mat-dialog-title>Discovery Setting</h2>
|
||||
|
||||
<mat-dialog-content>
|
||||
|
||||
<!-- <div *ngIf="step == 1"> -->
|
||||
|
||||
<mat-card class="example-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Zone</mat-card-title>
|
||||
<mat-card-subtitle>192.168.1.0/24</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="example-container">
|
||||
<mat-checkbox>Host</mat-checkbox>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Start Ip" type="string" class="example-right-align">
|
||||
<mat-card>
|
||||
<mat-card-header>
|
||||
<mat-card-title>Zone</mat-card-title>
|
||||
<mat-card-subtitle>{{cidr}}</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div>
|
||||
<div>
|
||||
<mat-checkbox [checked]="true" [(ngModel)]="hostChecked">Host</mat-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field *ngIf="hostChecked">
|
||||
<input matInput placeholder="Start IP" type="string">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="End Ip" type="string" class="example-right-align">
|
||||
<mat-form-field *ngIf="hostChecked">
|
||||
<input matInput placeholder="End IP" type="string">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<mat-checkbox>Port</mat-checkbox>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Start Port" type="number" class="example-right-align">
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<mat-checkbox [(ngModel)]="portChecked">Port</mat-checkbox>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field *ngIf="portChecked">
|
||||
<input matInput placeholder="Start Port" type="number">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="End Port" type="number" class="example-right-align">
|
||||
<mat-form-field *ngIf="portChecked">
|
||||
<input matInput placeholder="End Port" type="number">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<mat-checkbox>Service</mat-checkbox>
|
||||
Meterial's [Select] + Covalent's [Chilp] Collaboration !
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<mat-checkbox [(ngModel)]="serviceChecked">Service</mat-checkbox>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
|
||||
<!-- </div> -->
|
||||
|
||||
<!-- <div *ngIf="step == 2"> -->
|
||||
|
||||
|
||||
<mat-dialog-content>
|
||||
<mat-card class="example-card">
|
||||
<mat-card-header>
|
||||
<mat-card-title>222222222222222222</mat-card-title>
|
||||
<mat-card-subtitle>192.168.1.0/24</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="example-container">
|
||||
<mat-checkbox>Host</mat-checkbox>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Start Ip" type="string" class="example-right-align">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="End Ip" type="string" class="example-right-align">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<mat-checkbox>Port</mat-checkbox>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="Start Port" type="number" class="example-right-align">
|
||||
</mat-form-field>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="End Port" type="number" class="example-right-align">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="example-container">
|
||||
<mat-checkbox>Service</mat-checkbox>
|
||||
Meterial's [Select] + Covalent's [Chilp] Collaboration !
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-dialog-content>
|
||||
|
||||
<!-- </div> -->
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
<of-input-chip *ngIf="serviceChecked" [unselectedItems]="serviceItems"></of-input-chip>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</mat-dialog-content>
|
||||
|
||||
|
||||
<mat-dialog-actions>
|
||||
<button mat-raised-button (click)="onStart()">Start</button>
|
||||
<button mat-raised-button (click)="onCloseCancel()">Cancel</button>
|
||||
<mat-dialog-actions fxLayoutAlign="end">
|
||||
<button mat-button mat-dialog-close>Cancel</button>
|
||||
<button mat-raised-button (click)="handleStart()" color="primary">Start</button>
|
||||
</mat-dialog-actions>
|
||||
|
||||
</div>
|
||||
|
|
@ -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');
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user