summaryrefslogtreecommitdiffstats
path: root/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts
diff options
context:
space:
mode:
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts')
-rw-r--r--sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts189
1 files changed, 189 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-text-input/text-input-ip.component.ts b/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/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;
+ }
+}