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

   1 import {Component, EventEmitter, forwardRef, Input, OnInit, Output} from '@angular/core';
   2 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
   3 import {BooleanFieldValue} from '../core/boolean-field-value';
   4
   5 const noop = () => {};
   6
   7 export const PX_TEXT_INPUT_IP_ADDRESS_CONTROL_VALUE_ACCESSOR: any = {
   8         provide: NG_VALUE_ACCESSOR,
   9         useExisting: forwardRef(() => PlxTextInputIpAddressComponent),
  10         multi: true
  11 };
  12 @Component({
  13         selector: 'plx-text-input-ip-address',
  14         template: `
  15                 <div>
  16                         <plx-text-input #textInputIpAddress type="text" [(ngModel)]="ipValue"
  17                          [width]="'280px'" [numberShowSpinner]="false" minlength="1"
  18                          (keyup)="keyUp($event)" (paste)="paste($event)" class="{{sizeClass}}"></plx-text-input>
  19                         <div class="plx-text-input-error">{{errMsg}}</div>
  20                 </div>
  21         `,
  22         styleUrls: ['text-input.less'],
  23         host: {'style': 'display: inline-block;'},
  24         providers: [PX_TEXT_INPUT_IP_ADDRESS_CONTROL_VALUE_ACCESSOR]
  25 })
  26
  27 export class PlxTextInputIpAddressComponent implements OnInit, ControlValueAccessor {
  28         @Input() lang: string = 'zh'; //zh|en
  29         @Input() size: string; //空代表普通尺寸，sm代表小尺寸
  30         @Input() ipAddressCheckTip: string = ''; //
  31
  32         @Input() @BooleanFieldValue() required: boolean = false;
  33
  34         @Input() public ipValue: string;
  35         @Output() public ipValueChange: EventEmitter<any> = new EventEmitter<any>();
  36
  37         @Input() public ipValueFlg : boolean;
  38         @Output() public ipValueFlgChange: EventEmitter<any> = new EventEmitter<any>();
  39
  40         private isNull : boolean = true;
  41
  42         /** Callback registered via registerOnTouched (ControlValueAccessor) */
  43         private _onTouchedCallback: () => void = noop;
  44         /** Callback registered via registerOnChange (ControlValueAccessor) */
  45         private _onChangeCallback: (_: any) => void = noop;
  46
  47         public errMsgs = {
  48                 'zh': {
  49                         'empty': '此项不能为空',
  50                         'invalidate': 'IP格式不对',
  51                         'range': '请输入正确的IPV4地址或IPV6地址',
  52                         'range-IPV4': '请输入正确的IPV4',
  53                         'range-IPV6': '请输入正确的IPV6'
  54                 },
  55                 'en': {
  56                         'empty': 'IP can not be empty',
  57                         'invalidate': 'IP format is incorrect',
  58                         'range': 'IP range is  IPV4 or IPV6',
  59                         'range-IPV4': 'IP range is  IPV4',
  60                         'range-IPV6': 'IP range is IPV6'
  61                 }
  62         };
  63         public errMsg: string;
  64         public sizeClass: string;
  65
  66         constructor() {
  67         }
  68
  69         ngOnInit(): void {
  70                 if (this.size === 'sm') {
  71                         this.sizeClass = 'plx-input-sm';
  72                 }
  73                 this.isNull = this.ipValueFlg;
  74                 if(this.repIPStr(this.ipValue) === ''&& !this.ipValueFlg){
  75                         this.ipValueFlg = false;
  76                         this.emitValue();
  77                 }
  78         }
  79
  80         public keyUp(event: any): void {
  81                 this.setValueToOutside(this.validate());
  82                 this.emitValue();
  83         }
  84
  85         public paste(event: any): void{
  86                 setTimeout(() => {
  87                         this.ipValue = event.target.value;
  88                         this.setValueToOutside(this.validate());
  89                         this.emitValue();
  90                 }, 0);
  91         }
  92
  93         private emitValue(){
  94                 this.ipValueChange.emit(this.ipValue);
  95                 this.ipValueFlgChange.emit(this.ipValueFlg);
  96         }
  97
  98         private setValueToOutside(validateFlg: boolean): void {
  99                 this.ipValueFlg = validateFlg;
 100                 let value;
 101                 if (validateFlg) {
 102                         if (this.ipValue) {
 103                                 value = this.ipValue;
 104                         }
 105                         if(this.ipValue === ""  && !this.isNull){
 106                                 this.ipValueFlg = false;
 107                         }
 108                 } else {
 109                         value = false;
 110                 }
 111                 this._onChangeCallback(value);
 112         }
 113
 114         writeValue(value: any): void {
 115       //
 116       this.errMsg = '';
 117       this.ipValue = value;
 118       if (value) {
 119           this.validate();
 120       }
 121         }
 122
 123         registerOnChange(fn: any) {
 124                 this._onChangeCallback = fn;
 125         }
 126
 127         registerOnTouched(fn: any) {
 128                 this._onTouchedCallback = fn;
 129         }
 130
 131         public validate(): boolean {
 132                 this.errMsg = '';
 133                 if (this.required) {
 134                         if (!this.ipValue) {
 135                                 this.errMsg = this.errMsgs[this.lang]['empty'];
 136                                 return false;
 137                         }
 138                 }
 139                 if ((this.ipValue) && (!this.ipValue)) {
 140                         this.errMsg = this.errMsgs[this.lang]['invalidate'];
 141                         return false;
 142                 }
 143                 let blackStr = this.repIPStr(this.ipValue);
 144                 if(this.ipAddressCheckTip === ''){
 145                         if(this.ipValue !== '' && blackStr === ''){
 146                                 this.errMsg = this.errMsgs[this.lang]['range'];
 147                                 return false;
 148                         }
 149                 }else{
 150                         if(this.ipValue !== '' && this.ipAddressCheckTip !== blackStr) {
 151                                 this.errMsg = this.errMsgs[this.lang]['range-'+ this.ipAddressCheckTip];
 152                                 return false;
 153                         }
 154                 }
 155                 return true;
 156         }
 157
 158         private repIPStr(value: any): string {
 159                 let blackStr = '';
 160                 var regip4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
 161                 if (regip4.test(value)) {
 162                         return "IPV4";
 163                 }
 164                 var regip6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/;
 165                 if (regip6.test(value)) {
 166                         return "IPV6";
 167                 }
 168                 return blackStr;
 169         }
 170 }