diff options
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip-address.component.ts')
| -rw-r--r-- | sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip-address.component.ts | 170 |
1 files changed, 170 insertions, 0 deletions
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: `
+ <div>
+ <plx-text-input #textInputIpAddress type="text" [(ngModel)]="ipValue"
+ [width]="'280px'" [numberShowSpinner]="false" minlength="1"
+ (keyup)="keyUp($event)" (paste)="paste($event)" class="{{sizeClass}}"></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_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<any> = new EventEmitter<any>();
+
+ @Input() public ipValueFlg : boolean;
+ @Output() public ipValueFlgChange: EventEmitter<any> = new EventEmitter<any>();
+
+ 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;
+ }
+}
|