diff options
6 files changed, 209 insertions, 26 deletions
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html index 6bc72029..58f08d4c 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.html @@ -74,7 +74,7 @@ <button nz-button (click)="handleCancel()">Cancel</button> <button nz-button nzType="primary" [nzLoading]='loading' (click)="handleOk()">OK</button> </ng-template> -<app-subnet-params-model [showModel]="isShowParams" [detailData]="params" [title]="paramsTitle" +<app-subnet-params-model [showModel]="isShowParams" *ngIf="isShowParams" [detailData]="params" [title]="paramsTitle" (cancel)="isShowParams=$event" (paramsDataChange)="changeParams($event)"> </app-subnet-params-model> <app-notification #notification [isServicesList]="false" [parentComponent]="'slicing'"></app-notification>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts index f65ed32c..2ebbb32a 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/slicing-task-model.component.ts @@ -157,7 +157,7 @@ export class SlicingTaskModelComponent implements OnInit { 'an_area_traffic_cap_ul', 'an_script_name', 'an_overalluser_density', - 'an_Endpoint' + 'an_Endpoint' ]), an_coverage_area_ta_list: area}; this.slicingSubnet[1].params = this.pick(nsi_nssi_info, ['tn_latency', 'tn_bandwidth', 'tn_script_name', 'tn_jitter', 'tn_service_snssai']); this.slicingSubnet[2].params = {...this.pick(nsi_nssi_info, [ diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html index 50b6e5ad..6a49cc67 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html @@ -8,7 +8,7 @@ </nz-form-label> <nz-form-control [nzSpan]="12"> <input nz-input - [(ngModel)]="detailData[item.key]" + [(ngModel)]="formData[item.key]" [name]="item.key" [id]="item.key" [readOnly]="item.title === 'S-NSSAI'" @@ -23,30 +23,37 @@ {{ item.title }} </nz-form-label> <nz-form-control [nzSpan]="item.title === 'Endpoint'?14:8" *ngIf="item.key !== 'an_coverage_area_ta_list'"> - <input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="detailData[item.key]" + <input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="formData[item.key]" [readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'" *ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Endpoint' " /> - <nz-radio-group [name]="item.key" [(ngModel)]="detailData[item.key]" + <nz-radio-group [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.title === 'Resource Sharing Level'"> <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options"> {{ option.title }} </label> </nz-radio-group> - <nz-select [name]="item.key" [(ngModel)]="detailData[item.key]" *ngIf="item.title === 'Mobility'"> + <nz-select [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.title === 'Mobility'"> <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options"> </nz-option> </nz-select> + <div class="validation_alert">{{formData[item.key] === ''? 'can not be empty!':' '}}</div> <!-- 2020.08.17 Add 3 parameters for Endpoint--> <!-- Comment: The following code--> <nz-input-group *ngIf="item.title === 'Endpoint' && EndpointEnable"> <div *ngFor="let option of item.options;let i=index"> - <input nz-input + <div class="endpoint_input"> + <input nz-input *ngIf="option.title !== 'nexthop_info'" [id]="option.key" [name]="option.key" [title]="EndpointInputs[i][option.key]" [(ngModel)]="EndpointInputs[i][option.key]" + [placeholder]="option.holder" + (input)="onInput($event, option.title)" style="width:32%;margin-right:1%" /> + <div class="end_alert_ip" *ngIf="option.title === 'ip_address'">{{validateEndPoint(option.title, EndpointInputs[i][option.key])}}</div> + <div class="end_alert_logical" *ngIf="option.title === 'logical_link'">{{validateEndPoint(option.title, EndpointInputs[i][option.key])}}</div> + </div> <nz-select *ngIf="option.title === 'nexthop_info'" [name]="option.key" @@ -84,6 +91,7 @@ </button> </nz-form-control> </div> + <div class="validation_alert_area">{{checkArea()}}</div> </div> </nz-form-item> </form> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less index 814d2f0d..25093399 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.less @@ -16,4 +16,32 @@ }
.ant-form-item-label {
text-align: left;
+}
+.validation_alert {
+ color: red;
+ position: absolute;
+ top: 0;
+ margin-top: 15px;
+}
+.validation_alert_area {
+ color: red;
+ position: absolute;
+ top: 0;
+ margin-top: 35px;
+ margin-left: 15px;
+}
+.endpoint_input {
+ position: relative;
+ .end_alert_ip {
+ position: absolute;
+ color: red;
+ top: 0;
+ margin-top: 30px;
+ }
+ .end_alert_logical {
+ position: absolute;
+ color: red;
+ top: 0;
+ margin: 30px 0 0 120px;
+ }
}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts index bceca197..5bed207a 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.ts @@ -1,5 +1,6 @@ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS , NexthopInfo_Options } from '@src/constants/constants' +import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core'; +import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS , NexthopInfo_Options } from '@src/constants/constants'; +import { NzMessageService } from "ng-zorro-antd"; @Component({ selector: 'app-subnet-params-model', @@ -15,23 +16,29 @@ export class SubnetParamsModelComponent implements OnInit { @Output() paramsDataChange = new EventEmitter<any>(); transferFormItems = TRANSFRER_FORM_ITEMS; - coreFormItems: any[] = []; + formData: any; + coreFormItems : any = []; areaList: any[] = []; // 2020.08.17 Add 3 parameters for Endpoint, Comment: The following code NexthopInfoOptions = NexthopInfo_Options; EndpointInputs: any[] = []; - EndpointEnable: boolean = false; // Whether to enable the three parameters of Endpoint + EndpointEnable: boolean = true; // Whether to enable the three parameters of Endpoint // Comment: Above code - constructor() { } + constructor( + private message: NzMessageService, + ) { + } - ngOnInit() { } + ngOnInit() { + } ngOnChanges() { if(this.title){ - this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[]; - if(this.detailData !==undefined && Object.keys(this.detailData).length!==0){ - this.EndpointEnable = (this.detailData.hasOwnProperty("an_Endpoint") && this.detailData['an_Endpoint'].length!==0) || (this.detailData.hasOwnProperty("cn_Endpoint") && this.detailData['cn_Endpoint'].length!==0) + this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[]; + this.formData = JSON.parse(JSON.stringify(this.detailData)); + if(this.formData !==undefined && Object.keys(this.formData).length!==0){ + this.EndpointEnable = (this.formData.hasOwnProperty("an_Endpoint") && this.formData['an_Endpoint'].length!==0) || (this.formData.hasOwnProperty("cn_Endpoint") && this.formData['cn_Endpoint'].length!==0) } // -------> 2020.08.17 Add 3 parameters for Endpoint, Comment: The following code if(this.EndpointEnable){ @@ -53,9 +60,62 @@ export class SubnetParamsModelComponent implements OnInit { this.AreaFormatting(); } } - + validateEndPoint (key: string, value: any): string { + if (value === '') { + return 'can not be empty'; + } + if (key === 'ip_address') { + const regxp = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; + if (!regxp.test(value)) { + return 'xxx.xxx.xxx.xxx'; + } else { + return ''; + } + } else if (key === 'logical_link') { + return ''; + } else { + return ''; + } + } + // endPointOnBlur ($event:any, title: string): void { + // const target = $event.target; + // if (title === 'ip_address') { + // const regxp = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; + // if (!regxp.test(target.value)) { + // target.value = ''; + // this.message.error('Please enter legal IP address'); + // } + // } + // } + // endPointEnter ($event:any, title: string): void { + // if ($event.keyCode === 13) { + // const target = $event.target; + // if (title === 'ip_address') { + // const regxp = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; + // if (!regxp.test(target.value)) { + // target.value = ''; + // this.message.error('Please enter legal IP address'); + // } + // } + // } + // } + onInput ($event:any, title: string) { + if (!$event) { + return; + } + const target = $event.target; + if (title === 'ip_address') { + // only number and '.' can be inputted + const regexp = /[^\d^\.]+/g; + target.value = target.value.replace(regexp, ''); + } else if (title === 'logical_link') { + // only number can be inputted + const regxp = /[^\d]/g; + target.value = target.value.replace(regxp, ''); + } + } AreaFormatting () { - let areaList = [...this.detailData.an_coverage_area_ta_list]; + let areaList = [...this.formData.an_coverage_area_ta_list]; this.areaList = areaList.map ( (item: any) => { let arr = item.split(';'); item = arr.map( (ite, index) => { @@ -138,9 +198,88 @@ export class SubnetParamsModelComponent implements OnInit { this.showModel = false this.cancel.emit(this.showModel) } + + checkArea () { + let result = true; + console.log(this.areaList); + this.areaList.forEach((item) => { + if (item.some((val) => {return val['selected'] === ''})) { + result = false; + } + }) + if (!result) { + return 'can not be empty!'; + } else { + return ''; + } + } + + judgeType (a) { + return Object.prototype.toString.call(a) + } + + // used to verify that each item is not empty in a object + deepCheck (target) { + let type = this.judgeType(target); + if (type === '[object Array]') { + for (let i = 0; i < target.length; i++) { + if (!this.deepCheck(target[i])) { + return false; + } + } + } else if (type === '[object Object]') { + for (const prop in target) { + if (target.hasOwnProperty(prop)) { // special handling for address + if (prop === 'an_coverage_area_ta_list' || prop ==='cn_coverage_area_ta_list') { + return target[prop].every((item) => {return this.deepCheck(item.split(';'))}); + } else if (!this.deepCheck(target[prop])) { + return false; + } + } + } + } else { + if (!target && target!==0) { + return false; + } else { + return true; + } + } + return true; + } + + // endCheckBeforeSubmit (params) { + // let target; + // if (this.title === 'An') { + // target = params['an_Endpoint']; + // for (let item of target) { + // if (Object.keys[0] === 'an_ip_address') { + // const regxp = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; + // if (regxp.test(item['an_ip_address'])) { + // this.message.error('illegal IpAddress'); + // return false; + // } + // } + // } + // } else if (this.title === 'Cn'){ + // target = params['cn_Endpoint']; + // for (let item of target) { + // if (Object.keys[0] === 'cn_ip_address') { + // const regxp = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; + // if (regxp.test(item['cn_ip_address'])) { + // this.message.error('illegal IpAddress'); + // return false; + // } + // } + // } + // } else { + // return true; + // } + // return true; + // } handleOk(): void { let params: object; + // Verify that each item is not empty if (this.title === 'An') { const an_coverage_area_ta_list: string[] = []; this.areaList.forEach( item => { @@ -150,12 +289,16 @@ export class SubnetParamsModelComponent implements OnInit { }) an_coverage_area_ta_list.push(str.substring(0, str.length-1)); }) - params = {...this.detailData, an_coverage_area_ta_list} + params = {...this.formData, an_coverage_area_ta_list}; + } else { + params = {...this.formData}; + } + if (this.deepCheck(params)) { + this.paramsDataChange.emit(params); + this.handleCancel(); } else { - params = {...this.detailData} + this.message.error('Please complete the form'); } - this.paramsDataChange.emit(params) - this.handleCancel() } } diff --git a/usecaseui-portal/src/constants/constants.ts b/usecaseui-portal/src/constants/constants.ts index 3469dd93..412db5c8 100644 --- a/usecaseui-portal/src/constants/constants.ts +++ b/usecaseui-portal/src/constants/constants.ts @@ -197,11 +197,13 @@ export const CORE_FORM_ITEMS = { options: [
{
title: 'ip_address',
- key: 'an_ip_address'
+ key: 'an_ip_address',
+ holder: 'IpAddress'
},
{
title: 'logical_link',
- key: 'an_logical_link'
+ key: 'an_logical_link',
+ holder: 'LogicId'
},
{
title: 'nexthop_info',
@@ -297,11 +299,13 @@ export const CORE_FORM_ITEMS = { options: [
{
title: 'ip_address',
- key: 'cn_ip_address'
+ key: 'cn_ip_address',
+ holder: 'IpAddress'
},
{
title: 'logical_link',
- key: 'cn_logical_link'
+ key: 'cn_logical_link',
+ holder: 'LogicId'
},
{
title: 'nexthop_info',
|