scan setting popup
This commit is contained in:
parent
f01ecf72fe
commit
bb1355c908
|
@ -66,6 +66,8 @@ import {
|
|||
TooltipModule,
|
||||
TreeModule,
|
||||
TreeTableModule,
|
||||
KeyFilterModule,
|
||||
MessageModule,
|
||||
} from 'primeng/primeng';
|
||||
|
||||
import { CardModule } from 'primeng/card';
|
||||
|
@ -74,6 +76,7 @@ import { ProgressSpinnerModule } from 'primeng/progressspinner';
|
|||
import { ScrollPanelModule } from 'primeng/scrollpanel';
|
||||
import { SidebarModule } from 'primeng/sidebar';
|
||||
import { TableModule } from 'primeng/table';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
|
||||
export const PRIME_NG_MODULES: any[] = [
|
||||
AccordionModule,
|
||||
|
@ -149,4 +152,7 @@ export const PRIME_NG_MODULES: any[] = [
|
|||
TooltipModule,
|
||||
TreeModule,
|
||||
TreeTableModule,
|
||||
KeyFilterModule,
|
||||
MessageModule,
|
||||
FormsModule
|
||||
];
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import { Component, Input, ContentChild } from '@angular/core';
|
||||
import { Component, Input, ContentChild, ViewChild } from '@angular/core';
|
||||
import { Header, Footer } from 'primeng/primeng';
|
||||
import { PopupPanelComponent } from './popup-panel.component';
|
||||
|
||||
@Component({
|
||||
selector: 'of-p-dropdownPanel',
|
||||
|
@ -25,6 +26,12 @@ export class DropdownPanelComponent {
|
|||
|
||||
@ContentChild(Footer) footerFacet;
|
||||
|
||||
@ViewChild('popupPanel') popupPanel: PopupPanelComponent;
|
||||
|
||||
constructor() { }
|
||||
|
||||
hide(): void {
|
||||
this.popupPanel.hide();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
12849
package-lock.json
generated
Normal file
12849
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
|
@ -82,4 +82,4 @@
|
|||
"webpack-node-externals": "^1.7.2",
|
||||
"zone.js": "^0.8.26"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,7 +19,7 @@ export class AppComponent implements OnInit {
|
|||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.probeService.connect();
|
||||
// this.probeService.connect();
|
||||
this.electronProxyService.sendReady(performance.now());
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<of-p-dropdownPanel [style]="{'width':'400px'}" [headerStyle]="{'width':'300px'}" [blockTarget]="blockTarget">
|
||||
<of-p-dropdownPanel #panel [style]="{'width':'400px'}" [headerStyle]="{'width':'300px'}" [blockTarget]="blockTarget">
|
||||
<p-header class="toolbar-button">
|
||||
<button _ngcontent-c1="" class="button-component" type="button">
|
||||
<!-- <svg _ngcontent-c1="" aria-hidden="true" class="octicon icon" version="1.1" viewBox="0 0 10 16" width="16px" height="16px">
|
||||
|
@ -7,11 +7,11 @@
|
|||
<div _ngcontent-c1="" class="text">
|
||||
<div class="text-row">
|
||||
<div _ngcontent-c1="" class="description">IP </div>
|
||||
<div _ngcontent-c1="" class="title">V4 (192.168.1.1 ~ 192.168.1.254)</div>
|
||||
<div _ngcontent-c1="" class="title">{{ipSummary}}</div>
|
||||
</div>
|
||||
<div class="text-row">
|
||||
<div _ngcontent-c1="" class="description">Port </div>
|
||||
<div _ngcontent-c1="" class="title">TCP, UDP (1 ~ 1024)</div>
|
||||
<div _ngcontent-c1="" class="title">{{portSummary}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg _ngcontent-c1="" aria-hidden="true" class="octicon dropdownArrow" version="1.1" viewBox="0 0 12 16" width="16px" height="16px">
|
||||
|
@ -27,16 +27,21 @@
|
|||
<h3>IP</h3>
|
||||
</div>
|
||||
<div class="ui-g-5">
|
||||
<p-radioButton name="groupname" value="V4" label="V4" [(ngModel)]="selectedValue"></p-radioButton>
|
||||
<p-radioButton name="ipType" value="V4" label="V4" [(ngModel)]="ipType"></p-radioButton>
|
||||
</div>
|
||||
<div class="ui-g-5">
|
||||
<p-radioButton name="groupname" value="V6" label="V6" [(ngModel)]="selectedValue"></p-radioButton>
|
||||
<p-radioButton name="ipType" value="V6" label="V6" [(ngModel)]="ipType" [disabled]="true"></p-radioButton>
|
||||
</div>
|
||||
<div class="ui-g-10 ui-g-offset-2">Rage :
|
||||
<input type="text" pInputText placeholder="168.123.1.1" style="width:100px;"> -
|
||||
<input type="text" pInputText placeholder="168.123.1.1" style="width:100px;">
|
||||
<div class="ui-g-10 ui-g-offset-2">Range :
|
||||
<input type="text" pInputText placeholder="192.168.1.1" style="width:100px;" [(ngModel)]="firstIP" (ngModelChange)="validateIP($event, 0)"
|
||||
(keypress)="ipPressed($event)"> -
|
||||
<input type="text" pInputText placeholder="192.168.1.254" style="width:100px;" [(ngModel)]="lastIP" (ngModelChange)="validateIP($event, 1)"
|
||||
(keypress)="ipPressed($event)">
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="ipErrMsg">
|
||||
{{ipErrMsg}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui-g">
|
||||
<div class="ui-g-12">
|
||||
|
@ -44,16 +49,19 @@
|
|||
<h3>Port</h3>
|
||||
</div>
|
||||
<div class="ui-g-5">
|
||||
<p-checkbox name="groupname" value="TCP" label="TCP" [(ngModel)]="selectedValue"></p-checkbox>
|
||||
<p-checkbox name="includePortType" value="TCP" label="TCP" [(ngModel)]="includePortType" (onChange)="validateTCP($event)"></p-checkbox>
|
||||
</div>
|
||||
<div class="ui-g-5">
|
||||
<p-checkbox name="groupname" value="UDP" label="UDP" [(ngModel)]="selectedValue"></p-checkbox>
|
||||
<p-checkbox name="includePortType" value="UDP" label="UDP" [(ngModel)]="includePortType" (onChange)="validateUDP($event)"></p-checkbox>
|
||||
</div>
|
||||
<div class="ui-g-10 ui-g-offset-2">Rage :
|
||||
<input type="text" pInputText placeholder="1" style="width:100px;"> -
|
||||
<input type="text" pInputText placeholder="1024" style="width:100px;">
|
||||
<div class="ui-g-10 ui-g-offset-2">Range :
|
||||
<input type="number" pInputText placeholder="1" style="width:100px;" [(ngModel)]="firstPort" min="1" max="65535" (ngModelChange)="validatePort($event, 0)"> -
|
||||
<input type="number" pInputText placeholder="65535" style="width:100px;" [(ngModel)]="lastPort" min="1" max="65535" (ngModelChange)="validatePort($event, 1)">
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="portErrMsg">
|
||||
{{portErrMsg}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
@ -79,7 +87,7 @@
|
|||
</p-panel>
|
||||
-->
|
||||
<div class="ui-g-12">
|
||||
<button type="button" pButton label="확인" (click)="blockDocument()" style="float: right;"></button>
|
||||
<button type="button" pButton label="확인" style="float: right;" (click)="done()" [disabled]="portErrMsg || ipErrMsg"></button>
|
||||
</div>
|
||||
<!-- <p-footer>
|
||||
Footer content here
|
||||
|
|
|
@ -1,15 +1,129 @@
|
|||
import { Component, Input } from '@angular/core';
|
||||
import { Component, Input, OnInit, ViewChild } from '@angular/core';
|
||||
import { DropdownPanelComponent } from '@overflow/commons/ui/component/primeng';
|
||||
|
||||
@Component({
|
||||
selector: 'app-scanner-setting-dropdown',
|
||||
templateUrl: './scanner-setting-dropdown.component.html',
|
||||
styleUrls: ['./scanner-setting-dropdown.component.scss'],
|
||||
})
|
||||
export class ScannerSettingDropdownComponent {
|
||||
|
||||
export class ScannerSettingDropdownComponent implements OnInit {
|
||||
|
||||
@Input() blockTarget: any;
|
||||
@ViewChild('panel') panel: DropdownPanelComponent;
|
||||
|
||||
valid: boolean;
|
||||
ipSummary: string;
|
||||
portSummary: string;
|
||||
|
||||
ipType: string;
|
||||
firstIP: string;
|
||||
lastIP: string;
|
||||
includePortType: string[];
|
||||
firstPort: string;
|
||||
lastPort: string;
|
||||
|
||||
ipErrMsg: string;
|
||||
portErrMsg: string;
|
||||
|
||||
constructor(
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.setDefault();
|
||||
}
|
||||
|
||||
setDefault(): void {
|
||||
this.ipType = "V4";
|
||||
|
||||
this.firstIP = '192.168.1.1'
|
||||
this.lastIP = '192.168.1.254'
|
||||
this.includePortType = ['TCP', 'UDP']
|
||||
this.firstPort = '1'
|
||||
this.lastPort = '65535'
|
||||
this.ipErrMsg = '';
|
||||
this.portErrMsg = '';
|
||||
|
||||
this.setSummary();
|
||||
}
|
||||
|
||||
validateIP(value: string, idx: number) {
|
||||
this.ipErrMsg = '';
|
||||
switch (this.ipType) {
|
||||
case 'V4':
|
||||
if (!(/^(?=\d+\.\d+\.\d+\.\d+$)(?:(?:25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]|[0-9])\.?){4}$/.test(value))) {
|
||||
this.ipErrMsg = 'INVALID_IP_FORMAT';
|
||||
return;
|
||||
}
|
||||
let from = idx === 0 ? value : this.firstIP;
|
||||
let to = idx === 1 ? value : this.lastIP;
|
||||
if (this.ipToNum(from) > this.ipToNum(to)) {
|
||||
this.ipErrMsg = 'INVALID_IP_RANGE';
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case 'V6':
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
ipPressed(evt: any) {
|
||||
if (!Number.isInteger(Number(evt.key)) && evt.key !== '.') {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
ipToNum(ip: string): number {
|
||||
return ip.split('.').reduce(function (ipInt, octet) { return (ipInt << 8) + parseInt(octet, 10) }, 0) >>> 0;
|
||||
}
|
||||
|
||||
validatePort(value: string, idx: number) {
|
||||
this.portErrMsg = '';
|
||||
let fromStr = idx === 0 ? value : this.firstPort;
|
||||
let toStr = idx === 1 ? value : this.lastPort;
|
||||
let from = Number(fromStr);
|
||||
let to = Number(toStr)
|
||||
if (from === NaN || to === NaN) {
|
||||
this.portErrMsg = 'INVALID_PORT_TYPE';
|
||||
return;
|
||||
}
|
||||
if (from <= 0) {
|
||||
this.firstPort = '1';
|
||||
return;
|
||||
}
|
||||
if (to > 65535) {
|
||||
this.lastPort = '65535';
|
||||
return;
|
||||
}
|
||||
if (from > to) {
|
||||
this.portErrMsg = 'INVALID_PORT_RANGE';
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
validateTCP(checked: boolean) {
|
||||
if (!checked && this.includePortType.indexOf('UDP') === -1) {
|
||||
this.includePortType = ['TCP'];
|
||||
}
|
||||
}
|
||||
validateUDP(checked: boolean) {
|
||||
if (!checked && this.includePortType.indexOf('TCP') === -1) {
|
||||
this.includePortType = ['UDP'];
|
||||
}
|
||||
}
|
||||
|
||||
done() {
|
||||
// TODO: re-validation
|
||||
this.setSummary();
|
||||
}
|
||||
|
||||
setSummary(): void {
|
||||
this.ipSummary = this.ipType + ' (' + this.firstIP + ' - ' + this.lastIP + ')';
|
||||
this.portSummary = this.includePortType.join(',');
|
||||
this.portSummary += ' (' + this.firstPort + ' - ' + this.lastPort + ')';
|
||||
this.panel.hide();
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue
Block a user