From 8261a4ea8091c27b61ac581a852e2e18283b3cdd Mon Sep 17 00:00:00 2001 From: YuanHu Date: Tue, 27 Mar 2018 17:33:22 +0800 Subject: Include paletx components Include paletx components to WF Designer UI. Issue-ID: SDC-1130,SDC-1131 Change-Id: Iad06b2dde8fc98d03a0e3633e829b686d75cafd0 Signed-off-by: YuanHu --- .../text-input-ip-address.component.ts | 170 +++++++++++++++++++++ 1 file changed, 170 insertions(+) create mode 100644 sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip-address.component.ts (limited to 'sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip-address.component.ts') diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip-address.component.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip-address.component.ts new file mode 100644 index 00000000..501d2326 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip-address.component.ts @@ -0,0 +1,170 @@ +import {Component, EventEmitter, forwardRef, Input, OnInit, Output} 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_ADDRESS_CONTROL_VALUE_ACCESSOR: any = { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => PlxTextInputIpAddressComponent), + multi: true +}; +@Component({ + selector: 'plx-text-input-ip-address', + template: ` +
+ +
{{errMsg}}
+
+ `, + styleUrls: ['text-input.less'], + host: {'style': 'display: inline-block;'}, + providers: [PX_TEXT_INPUT_IP_ADDRESS_CONTROL_VALUE_ACCESSOR] +}) + +export class PlxTextInputIpAddressComponent implements OnInit, ControlValueAccessor { + @Input() lang: string = 'zh'; //zh|en + @Input() size: string; //空代表普通尺寸，sm代表小尺寸 + @Input() ipAddressCheckTip: string = ''; // + + @Input() @BooleanFieldValue() required: boolean = false; + + @Input() public ipValue: string; + @Output() public ipValueChange: EventEmitter = new EventEmitter(); + + @Input() public ipValueFlg : boolean; + @Output() public ipValueFlgChange: EventEmitter = new EventEmitter(); + + private isNull : boolean = true; + + /** Callback registered via registerOnTouched (ControlValueAccessor) */ + private _onTouchedCallback: () => void = noop; + /** Callback registered via registerOnChange (ControlValueAccessor) */ + private _onChangeCallback: (_: any) => void = noop; + + public errMsgs = { + 'zh': { + 'empty': '此项不能为空', + 'invalidate': 'IP格式不对', + 'range': '请输入正确的IPV4地址或IPV6地址', + 'range-IPV4': '请输入正确的IPV4', + 'range-IPV6': '请输入正确的IPV6' + }, + 'en': { + 'empty': 'IP can not be empty', + 'invalidate': 'IP format is incorrect', + 'range': 'IP range is IPV4 or IPV6', + 'range-IPV4': 'IP range is IPV4', + 'range-IPV6': 'IP range is IPV6' + } + }; + public errMsg: string; + public sizeClass: string; + + constructor() { + } + + ngOnInit(): void { + if (this.size === 'sm') { + this.sizeClass = 'plx-input-sm'; + } + this.isNull = this.ipValueFlg; + if(this.repIPStr(this.ipValue) === ''&& !this.ipValueFlg){ + this.ipValueFlg = false; + this.emitValue(); + } + } + + public keyUp(event: any): void { + this.setValueToOutside(this.validate()); + this.emitValue(); + } + + public paste(event: any): void{ + setTimeout(() => { + this.ipValue = event.target.value; + this.setValueToOutside(this.validate()); + this.emitValue(); + }, 0); + } + + private emitValue(){ + this.ipValueChange.emit(this.ipValue); + this.ipValueFlgChange.emit(this.ipValueFlg); + } + + private setValueToOutside(validateFlg: boolean): void { + this.ipValueFlg = validateFlg; + let value; + if (validateFlg) { + if (this.ipValue) { + value = this.ipValue; + } + if(this.ipValue === "" && !this.isNull){ + this.ipValueFlg = false; + } + } else { + value = false; + } + this._onChangeCallback(value); + } + + writeValue(value: any): void { + // + this.errMsg = ''; + this.ipValue = value; + if (value) { + this.validate(); + } + } + + registerOnChange(fn: any) { + this._onChangeCallback = fn; + } + + registerOnTouched(fn: any) { + this._onTouchedCallback = fn; + } + + public validate(): boolean { + this.errMsg = ''; + if (this.required) { + if (!this.ipValue) { + this.errMsg = this.errMsgs[this.lang]['empty']; + return false; + } + } + if ((this.ipValue) && (!this.ipValue)) { + this.errMsg = this.errMsgs[this.lang]['invalidate']; + return false; + } + let blackStr = this.repIPStr(this.ipValue); + if(this.ipAddressCheckTip === ''){ + if(this.ipValue !== '' && blackStr === ''){ + this.errMsg = this.errMsgs[this.lang]['range']; + return false; + } + }else{ + if(this.ipValue !== '' && this.ipAddressCheckTip !== blackStr) { + this.errMsg = this.errMsgs[this.lang]['range-'+ this.ipAddressCheckTip]; + return false; + } + } + return true; + } + + private repIPStr(value: any): string { + let blackStr = ''; + 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 "IPV4"; + } + 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*$/; + if (regip6.test(value)) { + return "IPV6"; + } + return blackStr; + } +} -- cgit 1.2.3-korg