Merge branch 'master' of https://git.loafle.net/overflow_scanner/app

@overflow/commons/ui/commons-ui-prime-ng.module.ts

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

@overflow/commons/ui/component/primeng/dropdown-panel.component.ts

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

src/app/app.component.ts

@@ -19,7 +19,7 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.probeService.connect();
+    // this.probeService.connect();
     this.electronProxyService.sendReady(performance.now());
   }
 }

src/commons/component/scanner-setting-dropdown.component.html

@@ -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 &nbsp;</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 &nbsp;</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

src/commons/component/scanner-setting-dropdown.component.ts

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