gerrit.onap Code Review - sdc/sdc-workflow-designer.git/blob

   1 import {Component, forwardRef, Input, OnInit} from '@angular/core';
   2 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
   3
   4 import {BooleanFieldValue} from '../core/boolean-field-value';
   5
   6 const noop = () => {};
   7
   8 export const PX_TEXT_INPUT_IP_CONTROL_VALUE_ACCESSOR: any = {
   9   provide: NG_VALUE_ACCESSOR,
  10   useExisting: forwardRef(() => PlxTextInputIpComponent),
  11   multi: true
  12 };
  13
  14 @Component({
  15         selector: 'plx-text-input-ip',
  16         template: `
  17                 <div>
  18                         <plx-text-input #textInputIp1 type="number" [(ngModel)]="ipValue1"
  19                          [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1"
  20                          (keyup)="keyup($event, null, textInputIp2)" (change)="change($event)"
  21                           [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input>
  22                         <span class="plx-text-input-ip-dot">.</span>
  23                         <plx-text-input #textInputIp2 type="number" [(ngModel)]="ipValue2"
  24                          [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1"
  25                          (keyup)="keyup($event, textInputIp1, textInputIp3)" (change)="change($event)"
  26                           [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input>
  27                         <span class="plx-text-input-ip-dot">.</span>
  28                         <plx-text-input #textInputIp3 type="number" [(ngModel)]="ipValue3"
  29                          [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1"
  30                          (keyup)="keyup($event, textInputIp2, textInputIp4)" (change)="change($event)"
  31                           [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input>
  32                         <span class="plx-text-input-ip-dot">.</span>
  33                         <plx-text-input #textInputIp4 type="number" [(ngModel)]="ipValue4"
  34                          [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1"
  35                          (keyup)="keyup($event, textInputIp3, null)" (change)="change($event)"
  36                           [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input>
  37                         <div class="plx-text-input-error">{{errMsg}}</div>
  38                 </div>
  39         `,
  40         styleUrls: ['text-input.less'],
  41         host: {'style': 'display: inline-block;'},
  42         providers: [PX_TEXT_INPUT_IP_CONTROL_VALUE_ACCESSOR]
  43 })
  44
  45 export class PlxTextInputIpComponent implements OnInit, ControlValueAccessor {
  46         @Input() lang: string = 'zh'; //zh|en
  47         @Input() size: string; //空代表普通尺寸，sm代表小尺寸
  48         @Input() @BooleanFieldValue() required: boolean = false;
  49         /** Callback registered via registerOnTouched (ControlValueAccessor) */
  50         private _onTouchedCallback: () => void = noop;
  51         /** Callback registered via registerOnChange (ControlValueAccessor) */
  52         private _onChangeCallback: (_: any) => void = noop;
  53         public ipValue1: number;
  54         public ipValue2: number;
  55         public ipValue3: number;
  56         public ipValue4: number;
  57         public errMsgs = {
  58                 'zh': {
  59                         'empty': 'IP不能为空',
  60                         'invalidate': '非法IP',
  61                         'range': 'IP范围[0.0.0.0]~[255.255.255.255]'
  62                 },
  63                 'en': {
  64                         'empty': 'IP can not be empty',
  65                         'invalidate': 'Invalid IP',
  66                         'range': 'IP range is [0.0.0.0]~[255.255.255.255]'
  67                 }
  68         };
  69         public errMsg: string;
  70
  71         constructor() {
  72         }
  73
  74         ngOnInit(): void {
  75         }
  76
  77   public change(event: any) :void {
  78       event.target.value = this.repNumber(event.target.value);
  79       this.setValueToOutside(this.validate());
  80   }
  81
  82         public keyup(event: any, frontElement: any, backElement: any): void {
  83                 event.target.value = this.repNumber(event.target.value);
  84                 if (((event.keyCode === 13 || event.keyCode === 110 || event.keyCode === 190)
  85                                 && event.target.value.length !== 0)
  86                         || event.target.value.length === 3) {       //enter:13,dot:110、190
  87         if (event.keyCode !== 9) {   //tab:9
  88             if (backElement) {
  89                 backElement.autoFocus = true;
  90                 backElement.inputViewChild.nativeElement.select();
  91             } else {
  92                 if (event.keyCode !== 110 && event.keyCode !== 190) {
  93                     event.target.blur();
  94                 }
  95             }
  96         }
  97                 }
  98
  99                 if (event.target.value.length === 0  // backspace:8  delete:46
 100                         && (event.keyCode === 8 || event.keyCode === 46)) {
 101                         if (frontElement) {
 102                                 frontElement.autoFocus = true;
 103                                 frontElement.inputViewChild.nativeElement.select();
 104                         }
 105                 }
 106
 107                 this.setValueToOutside(this.validate());
 108         }
 109
 110         private setValueToOutside(validateFlg: boolean): void {
 111                 let value;
 112                 if (validateFlg) {
 113                         if (this.ipValue1 && this.ipValue2 && this.ipValue3 && this.ipValue4) {
 114                                 value = this.ipValue1 + '.'
 115                                         + this.ipValue2 + '.'+ this.ipValue3 + '.'+ this.ipValue4;
 116                         }
 117                 } else {
 118                         value = false;
 119                 }
 120                 this._onChangeCallback(value);
 121         }
 122
 123         writeValue(value: any): void {
 124                 //
 125     this.errMsg = '';
 126     if (value) {
 127       if (this.isIPStr(value)) {
 128           let ipArr = value.split('.');
 129           this.ipValue1 = ipArr[0];
 130           this.ipValue2 = ipArr[1];
 131           this.ipValue3 = ipArr[2];
 132           this.ipValue4 = ipArr[3];
 133       } else {
 134           this.errMsg = this.errMsgs[this.lang]['invalidate'] + ' : ' + value;
 135       }
 136     }
 137         }
 138
 139         registerOnChange(fn: any) {
 140                 this._onChangeCallback = fn;
 141         }
 142
 143         registerOnTouched(fn: any) {
 144                 this._onTouchedCallback = fn;
 145         }
 146
 147         public validate(): boolean {
 148                 this.errMsg = '';
 149                 if (this.required) {
 150                         if (!this.ipValue1 && !this.ipValue2 && !this.ipValue3 && !this.ipValue4) {
 151                                 this.errMsg = this.errMsgs[this.lang]['empty'];
 152                                 return false;
 153                         }
 154                 }
 155                 if ((this.ipValue1 || this.ipValue2 || this.ipValue3 || this.ipValue4)
 156                         && (!this.ipValue1 || !this.ipValue2 || !this.ipValue3 || !this.ipValue4)) {
 157                         this.errMsg = this.errMsgs[this.lang]['invalidate'];
 158                         return false;
 159                 }
 160                 if ((this.ipValue1 && (this.ipValue1 < 0 || this.ipValue1 > 255))
 161                         || (this.ipValue2 && (this.ipValue2 < 0 || this.ipValue2 > 255))
 162                         || (this.ipValue3 && (this.ipValue3 < 0 || this.ipValue3 > 255))
 163                         || (this.ipValue4 && (this.ipValue4 < 0 || this.ipValue4 > 255))) {
 164                         this.errMsg = this.errMsgs[this.lang]['range'];
 165                         return false;
 166                 }
 167
 168                 return true;
 169         }
 170
 171         private repNumber(value: any): number {
 172                 var reg = /^[\d]+$/g;
 173                 if (!reg.test(value)) {
 174                         let txt = value;
 175                         txt.replace(/[^0-9]+/, function (char, index, val) {    //匹配第一次非数字字符
 176                                 value = val.replace(/\D/g, "");    //将非数字字符替换成""
 177                         })
 178                 }
 179                 return value;
 180         }
 181
 182   private isIPStr(value: any): boolean {
 183     var regip4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
 184     if (regip4.test(value)) {
 185       return true;
 186     }
 187     return false;
 188   }
 189 }