overflow_backup_2018_0455/overflow-webapp
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

discovery setting

Browse Source
This commit is contained in:
insanity 2018-03-15 19:08:49 +09:00
parent d06804f7fa
commit 661027198b
9 changed files with 165 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/app/commons/component/input-chip/input-chip.component.html Normal file
View File

@ -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>

3
src/app/commons/component/input-chip/input-chip.component.scss Normal file
View File

@ -0,0 +1,3 @@
.input-chip {
width: 80%;
}

25
src/app/commons/component/input-chip/input-chip.component.spec.ts Normal file
View File

@ -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
View 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;
}
}

1
src/app/pages/sensor-setting/sensor-setting-page.component.ts
View File

@ -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 => {

2
src/packages/discovery/component/index.ts
View File

@ -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
];

93
src/packages/discovery/component/setting/setting.component.html
View File

@ -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>
<mat-card-header>
<mat-card-title>Zone</mat-card-title>
<mat-card-subtitle>192.168.1.0/24</mat-card-subtitle>
<mat-card-subtitle>{{cidr}}</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">
<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>
</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>
<mat-checkbox [(ngModel)]="serviceChecked">Service</mat-checkbox>
</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>
<of-input-chip *ngIf="serviceChecked" [unselectedItems]="serviceItems"></of-input-chip>
</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> -->
</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>

22
src/packages/discovery/component/setting/setting.component.ts
View File

@ -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');
}
}

4
src/packages/discovery/discovery.module.ts
View File

@ -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