diff options
Diffstat (limited to 'deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts')
-rw-r--r-- | deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts | 189 |
1 files changed, 189 insertions, 0 deletions
diff --git a/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts new file mode 100644 index 00000000..7c9d616d --- /dev/null +++ b/deprecated-workflow-designer/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts @@ -0,0 +1,189 @@ +import {Component, forwardRef, Input, OnInit} from '@angular/core'; +import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; + +import {BooleanFieldValue} from '../core/boolean-field-value'; + +const noop = () => {}; + +export const PX_TEXT_INPUT_IP_CONTROL_VALUE_ACCESSOR: any = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => PlxTextInputIpComponent), + multi: true +}; + +@Component({ + selector: 'plx-text-input-ip', + template: ` + <div> + <plx-text-input #textInputIp1 type="number" [(ngModel)]="ipValue1" + [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1" + (keyup)="keyup($event, null, textInputIp2)" (change)="change($event)" + [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input> + <span class="plx-text-input-ip-dot">.</span> + <plx-text-input #textInputIp2 type="number" [(ngModel)]="ipValue2" + [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1" + (keyup)="keyup($event, textInputIp1, textInputIp3)" (change)="change($event)" + [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input> + <span class="plx-text-input-ip-dot">.</span> + <plx-text-input #textInputIp3 type="number" [(ngModel)]="ipValue3" + [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1" + (keyup)="keyup($event, textInputIp2, textInputIp4)" (change)="change($event)" + [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input> + <span class="plx-text-input-ip-dot">.</span> + <plx-text-input #textInputIp4 type="number" [(ngModel)]="ipValue4" + [width]="'45px'" [numberShowSpinner]="false" maxLength="3" minlength="1" + (keyup)="keyup($event, textInputIp3, null)" (change)="change($event)" + [ngClass]="{'plx-input-sm': size==='sm', 'plx-text-input-ip-invalid': errMsg}"></plx-text-input> + <div class="plx-text-input-error">{{errMsg}}</div> + </div> + `, + styleUrls: ['text-input.less'], + host: {'style': 'display: inline-block;'}, + providers: [PX_TEXT_INPUT_IP_CONTROL_VALUE_ACCESSOR] +}) + +export class PlxTextInputIpComponent implements OnInit, ControlValueAccessor { + @Input() lang: string = 'zh'; //zh|en + @Input() size: string; //空代表普通尺寸,sm代表小尺寸 + @Input() @BooleanFieldValue() required: boolean = false; + /** Callback registered via registerOnTouched (ControlValueAccessor) */ + private _onTouchedCallback: () => void = noop; + /** Callback registered via registerOnChange (ControlValueAccessor) */ + private _onChangeCallback: (_: any) => void = noop; + public ipValue1: number; + public ipValue2: number; + public ipValue3: number; + public ipValue4: number; + public errMsgs = { + 'zh': { + 'empty': 'IP不能为空', + 'invalidate': '非法IP', + 'range': 'IP范围[0.0.0.0]~[255.255.255.255]' + }, + 'en': { + 'empty': 'IP can not be empty', + 'invalidate': 'Invalid IP', + 'range': 'IP range is [0.0.0.0]~[255.255.255.255]' + } + }; + public errMsg: string; + + constructor() { + } + + ngOnInit(): void { + } + + public change(event: any) :void { + event.target.value = this.repNumber(event.target.value); + this.setValueToOutside(this.validate()); + } + + public keyup(event: any, frontElement: any, backElement: any): void { + event.target.value = this.repNumber(event.target.value); + if (((event.keyCode === 13 || event.keyCode === 110 || event.keyCode === 190) + && event.target.value.length !== 0) + || event.target.value.length === 3) { //enter:13,dot:110、190 + if (event.keyCode !== 9) { //tab:9 + if (backElement) { + backElement.autoFocus = true; + backElement.inputViewChild.nativeElement.select(); + } else { + if (event.keyCode !== 110 && event.keyCode !== 190) { + event.target.blur(); + } + } + } + } + + if (event.target.value.length === 0 // backspace:8 delete:46 + && (event.keyCode === 8 || event.keyCode === 46)) { + if (frontElement) { + frontElement.autoFocus = true; + frontElement.inputViewChild.nativeElement.select(); + } + } + + this.setValueToOutside(this.validate()); + } + + private setValueToOutside(validateFlg: boolean): void { + let value; + if (validateFlg) { + if (this.ipValue1 && this.ipValue2 && this.ipValue3 && this.ipValue4) { + value = this.ipValue1 + '.' + + this.ipValue2 + '.'+ this.ipValue3 + '.'+ this.ipValue4; + } + } else { + value = false; + } + this._onChangeCallback(value); + } + + writeValue(value: any): void { + // + this.errMsg = ''; + if (value) { + if (this.isIPStr(value)) { + let ipArr = value.split('.'); + this.ipValue1 = ipArr[0]; + this.ipValue2 = ipArr[1]; + this.ipValue3 = ipArr[2]; + this.ipValue4 = ipArr[3]; + } else { + this.errMsg = this.errMsgs[this.lang]['invalidate'] + ' : ' + value; + } + } + } + + registerOnChange(fn: any) { + this._onChangeCallback = fn; + } + + registerOnTouched(fn: any) { + this._onTouchedCallback = fn; + } + + public validate(): boolean { + this.errMsg = ''; + if (this.required) { + if (!this.ipValue1 && !this.ipValue2 && !this.ipValue3 && !this.ipValue4) { + this.errMsg = this.errMsgs[this.lang]['empty']; + return false; + } + } + if ((this.ipValue1 || this.ipValue2 || this.ipValue3 || this.ipValue4) + && (!this.ipValue1 || !this.ipValue2 || !this.ipValue3 || !this.ipValue4)) { + this.errMsg = this.errMsgs[this.lang]['invalidate']; + return false; + } + if ((this.ipValue1 && (this.ipValue1 < 0 || this.ipValue1 > 255)) + || (this.ipValue2 && (this.ipValue2 < 0 || this.ipValue2 > 255)) + || (this.ipValue3 && (this.ipValue3 < 0 || this.ipValue3 > 255)) + || (this.ipValue4 && (this.ipValue4 < 0 || this.ipValue4 > 255))) { + this.errMsg = this.errMsgs[this.lang]['range']; + return false; + } + + return true; + } + + private repNumber(value: any): number { + var reg = /^[\d]+$/g; + if (!reg.test(value)) { + let txt = value; + txt.replace(/[^0-9]+/, function (char, index, val) { //匹配第一次非数字字符 + value = val.replace(/\D/g, ""); //将非数字字符替换成"" + }) + } + return value; + } + + private isIPStr(value: any): boolean { + var regip4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/; + if (regip4.test(value)) { + return true; + } + return false; + } +} |