diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model')
3 files changed, 817 insertions, 283 deletions
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts new file mode 100644 index 00000000..e83f50e3 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/constants.ts @@ -0,0 +1,413 @@ +/******* + title /MUST/: MARK THE ITEM NAME, + key /MUST/: MARK THE ITEM KEY, + type /MUST/: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select/select/table-radio/endpoint + required /MUST/: IF REQUIRED, + disable /MUST/: IF DISABLED, + scoped: IF SCOPED NUMBERS, CAN BE EMITTED IF NOT + scopedText: SCOPED NUMBERS' DESCRIPTION. IF SCOPED NUMBERS EXITS, IT'S A MUST + placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT + options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT +********/ + +export const TRANSFRER_FORM_ITEMS = [ + { + title: "S-NSSAI", + key: "sliceProfile_TN_BH_sNSSAI", + required: true, + type: "input", + disable: true, + }, + { + title: "Latency (ms)", + key: "tn_bh_latency", + required: true, + type: "input", + disable: false, + }, + { + title: "Jitter", + key: "sliceProfile_TN_BH_jitte", + required: false, + type: "input", + disable: false, + }, + { + title: "MaxBandwidth", + key: "tn_bh_bandwidth", + required: true, + type: "input", + disable: false, + }, + { + title: "Resource Sharing Level", // select + key: "sliceProfile_TN_resourceSharingLevel", // :new + required: true, + disable: false, + type: "radio", + options: [ + { + title: "Shared", + key: "shared", + }, + { + title: "Non-shared", + key: "non-shared", + }, + ], + }, + { + title: "Connection Links", // table + key: "tn_connection_links", // :new + required: false, // combined + type: "table-radio", + disable: false, + }, + { + title: "AN Endpoint", // input group + key: "an_Endpoint", + type: "endpoint", + required: false, + disable: false, + options: [ + { + title: "ip_address", + key: "sliceProfile_AN_ipAddress", + holder: "IpAddress", + }, + { + title: "logical_link", + key: "sliceProfile_AN_logicInterfaceId", + holder: "LogicId", + }, + { + title: "nexthop_info", + key: "sliceProfile_AN_nextHopInfo", + holder: "NextHop", + }, + ], + }, + { + title: "CN Endpoint", + key: "cn_Endpoint", + type: "endpoint", + required: false, + disable: false, + options: [ + { + title: "ip_address", + key: "sliceProfile_CN_ipAddress", + holder: "IpAddress", + }, + { + title: "logical_link", + key: "sliceProfile_CN_logicInterfaceId", + holder: "LogicId", + }, + { + title: "nexthop_info", + key: "sliceProfile_CN_nextHopInfo", + holder: "NextHop", + }, + ], + }, +]; + +export const CORE_FORM_ITEMS = { + An: [ + { + title: "S-NSSAI", + key: "sliceProfile_AN_sNSSAI", + required: true, + type: "input", + disable: "true", + }, + { + title: "Resource Sharing Level", + key: "sliceProfile_AN_resourceSharingLevel", + required: true, + type: "radio", + disable: false, + options: [ + { + title: "Shared", + key: "shared", + }, + { + title: "Non-shared", + key: "non-shared", + }, + ], + }, + { + title: "Mobility", + key: "sliceProfile_AN_uEMobilityLevel", + required: true, + type: "select", + disable: false, + options: [ + { + title: "Stationary", + key: "stationary", + }, + { + title: "Nomadic", + key: "nomadic", + }, + { + title: "Spatially Restricted Mobility", + key: "spatially restricted mobility", + }, + { + title: "Fully Mobility", + key: "fully mobility", + }, + ], + }, + { + title: "Latency (ms)", + key: "an_latency", + required: true, + type: "input", + disable: false, + }, + { + title: "Max Number of PUD Session", + key: "sliceProfile_AN_maxNumberofPDUSession", + required: true, + type: "input", + disable: false, + }, + { + title: "Max Number of UEs", + key: "sliceProfile_AN_maxNumberofUEs", + required: true, + type: "input", + disable: false, + }, + { + title: "Activity Factor (%)", + key: "sliceProfile_AN_activityFactor", + required: true, + type: "input", + disable: false, + }, + { + title: "User Downlink Experience Rate（Mbps）", + key: "sliceProfile_AN_expDataRateDL", + required: true, + type: "input", + disable: false, + }, + { + title: "User Uplink Experience Rate（Mbps）", + key: "sliceProfile_AN_expDataRateUL", + required: true, + type: "input", + disable: false, + }, + { + title: "Downlink Regional Traffic Density（Mbps/km ）", + key: "sliceProfile_AN_areaTrafficCapDL", + required: false, + type: "input", + disable: false, + }, + { + title: "Uplink Regional Traffic Density（Mbps/km ）", + key: "sliceProfile_AN_areaTrafficCapUL", + required: false, + type: "input", + disable: false, + }, + { + title: "Script Name", + key: "an_script_name", + required: false, + type: "input", + disable: false, + }, + { + title: "Overall User Density", + key: "sliceProfile_AN_overallUserDensity", + required: false, + type: "input", + disable: false, + }, + { + title: "Coverage Area Ta List", + key: "an_coverage_area_ta_list", + required: true, + type: "city-select", + disable: false, + }, + ], + Cn: [ + { + title: "S-NSSAI", + key: "cn_service_snssai", + required: true, + type: "input", + disable: true, + }, + { + title: "Resource Sharing Level", + key: "cn_resource_sharing_level", + required: true, + type: "radio", + disable: false, + options: [ + { + title: "Shared", + key: "shared", + }, + { + title: "Non-shared", + key: "non-shared", + }, + ], + }, + { + title: "Mobility", + key: "cn_ue_mobility_level", + required: true, + type: "select", + disable: false, + options: [ + { + title: "Stationary", + key: "stationary", + }, + { + title: "Nomadic", + key: "nomadic", + }, + { + title: "Spatially Restricted Mobility", + key: "spatially restricted mobility", + }, + { + title: "Fully Mobility", + key: "fully mobility", + }, + ], + }, + { + title: "Latency (ms)", + key: "cn_latency", + required: true, + type: "input", + disable: false, + }, + { + title: "Max Number of UEs", + key: "cn_max_number_of_ues", + required: true, + type: "input", + disable: false, + }, + { + title: "Activity Factor (%)", + key: "cn_activity_factor", + required: true, + type: "input", + disable: false, + }, + { + title: "User Downlink Experience Rate（Mbps）", + key: "cn_exp_data_rate_dl", + required: true, + type: "input", + disable: false, + }, + { + title: "User Uplink Experience Rate（Mbps）", + key: "cn_exp_data_rate_ul", + required: true, + type: "input", + disable: false, + }, + { + title: "Downlink Regional Traffic Density（Mbps/km ）", + key: "cn_area_traffic_cap_dl", + required: false, + type: "input", + disable: false, + }, + { + title: "Uplink Regional Traffic Density（Mbps/km ）", + key: "cn_area_traffic_cap_ul", + required: false, + type: "input", + disable: false, + }, + { + title: "Script Name", + key: "cn_script_name", + required: false, + type: "input", + disable: false, + }, + { + title: "Max Number of PUD Session", + key: "sliceProfile_CN_maxNumberofPDUSession", + required: true, + type: "input", + disable: false, + }, + { + title: "OverAll User Density", + key: "sliceProfile_CN_overallUserDensity", + required: false, + type: "input", + disable: false, + }, + ], +}; + +export const ADDRESS = [ + { + id: "1", + name: "Beijing", + city: [ + { + id: "101", + name: "Beijing", + county: [ + { + id: "1001", + name: "Haiding District", + }, + { + id: "1002", + name: "Xicheng District", + }, + { + id: "1003", + name: "Changping District", + }, + ], + }, + ], + }, + { + id: "2", + name: "Shanghai", + city: [ + { + id: "201", + name: "Shanghai City", + county: [ + { + id: "2001", + name: "Pudongxin District", + }, + { + id: "2002", + name: "Jingan District", + }, + ], + }, + ], + }, +]; 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 6a9ebf6c..b0e3696c 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 @@ -1,6 +1,7 @@ <nz-modal [(nzVisible)]="showModel" [nzTitle]="title + 'Parameter'" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" nzWidth="960px"> <div class="subnet_params_container"> + <!-- TN interface --> <form nz-form *ngIf="title === 'Tn'"> <nz-form-item *ngFor="let item of transferFormItems"> <nz-form-label [nzSpan]="7" [nzRequired]="item.required" [nzFor]="item.key" @@ -9,10 +10,9 @@ </nz-form-label> <nz-form-control [nzSpan]="16"> <input nz-input [(ngModel)]="formData[item.key]" [name]="item.key" [id]="item.key" - [readOnly]="item.title === 'S-NSSAI'" [disabled]="item.title === 'S-NSSAI'" - [placeholder]="inputHolder(item.title)" *ngIf="specialParaTN.indexOf(item.title)===-1" /> - <nz-radio-group [name]=" item.key" [(ngModel)]="formData[item.key]" - *ngIf="item.title==='Resource Sharing Level'" (ngModelChange)="changeResourceShare()"> + [disabled]="item.disable" [placeholder]="inputHolder(item.title)" *ngIf="item.type==='input'" /> + <nz-radio-group [name]=" item.key" [(ngModel)]="formData[item.key]" *ngIf="item.type==='radio'" + (ngModelChange)="changeResourceShare()"> <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options"> {{ option.title }} </label> @@ -56,7 +56,7 @@ </div> </nz-input-group> <!-- connection links table --> - <div *ngIf="item.title === 'Connection Links'"> + <div *ngIf="item.type==='table-radio'"> <nz-table #basicTable [nzData]="connectionLinkTable" nzShowPagination="true" nzPageSize="2"> <thead> <tr> @@ -85,38 +85,37 @@ </tbody> </nz-table> </div> + <!-- Prompt whether the detection value is empty --> <div class="validation_alert" *ngIf="item.required"> {{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div> </nz-form-control> </nz-form-item> </form> + <!-- AN interface or CN interface --> <form nz-form *ngIf="title === 'An' || title === 'Cn'"> <nz-form-item *ngFor="let item of coreFormItems"> - <nz-form-label [nzSpan]="item.key === 'an_coverage_area_ta_list'?7:13" [nzRequired]="item.required" - *ngIf=" item.title !== 'Endpoint' || EndpointEnable " [ngStyle]="labelStyle(item.required)"> + <nz-form-label [nzSpan]="item.type === 'city-select'?7:13" [nzRequired]="item.required" + [ngStyle]="labelStyle(item.required)"> {{ item.title }} </nz-form-label> - <nz-form-control nzSpan="8" *ngIf="item.key !== 'an_coverage_area_ta_list'"> + <nz-form-control nzSpan="8" *ngIf="item.type !== 'city-select'"> <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' " + [disabled]="item.disable" *ngIf=" item.type === 'input'" [placeholder]="inputHolder(item.title)" /> - <nz-radio-group [name]="item.key" [(ngModel)]="formData[item.key]" - *ngIf="item.title === 'Resource Sharing Level'"> + <nz-radio-group [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.type === 'radio'"> <label nz-radio [nzValue]="option.key" *ngFor="let option of item.options"> {{ option.title }} </label> </nz-radio-group> - <nz-select [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.title === 'Mobility'"> + <nz-select [name]="item.key" [(ngModel)]="formData[item.key]" *ngIf="item.type === 'select'"> <nz-option [nzValue]="option.key" [nzLabel]="option.title" *ngFor="let option of item.options"> </nz-option> </nz-select> <div class="validation_alert" *ngIf="item.required"> {{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div> - <!-- Comment: The following code--> - <!-- Comment: Above code--> </nz-form-control> - <div *ngIf="title === 'An' && item.key === 'an_coverage_area_ta_list'"> + <!-- Address selection needs special treatment --> + <div *ngIf="title === 'An' && item.type === 'city-select'"> <div *ngFor="let area of areaList; let i = index"> <nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0" class="subnet_params_area" *ngFor="let item of area; let ind = index"> 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 d6798064..bc352ad4 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,18 +1,23 @@ -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 { + Component, + OnInit, + Input, + Output, + EventEmitter, + ElementRef, +} from "@angular/core"; +import { TRANSFRER_FORM_ITEMS, CORE_FORM_ITEMS, ADDRESS } from "./constants"; import { NzMessageService } from "ng-zorro-antd"; -import { stringify } from '@angular/core/src/util'; -import { Util } from '../../../../../../shared/utils/utils'; -import { SlicingTaskServices } from '@src/app/core/services/slicingTaskServices'; - +import { stringify } from "@angular/core/src/util"; +import { Util } from "../../../../../../shared/utils/utils"; +import { SlicingTaskServices } from "@src/app/core/services/slicingTaskServices"; @Component({ - selector: 'app-subnet-params-model', - templateUrl: './subnet-params-model.component.html', - styleUrls: ['./subnet-params-model.component.less'] + selector: "app-subnet-params-model", + templateUrl: "./subnet-params-model.component.html", + styleUrls: ["./subnet-params-model.component.less"], }) export class SubnetParamsModelComponent implements OnInit { - @Input() showModel: boolean; @Input() detailData: any; @Input() title: string; @@ -21,378 +26,475 @@ export class SubnetParamsModelComponent implements OnInit { @Output() noPassParaChange = new EventEmitter<any>(); transferFormItems: any[] = TRANSFRER_FORM_ITEMS; - regxpIP = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; // check for correct ip address + regxpIP = /^((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)$/; // check for correct ip address formData: any; - coreFormItems : any = []; + coreFormItems: any = []; areaList: any[] = []; - // 2020.08.17 Add 3 parameters for Endpoint, Comment: The following code - NexthopInfoOptions = NexthopInfo_Options; ANEndpointInputs: object = {}; CNEndpointInputs: object = {}; ANkeyList: string[] = []; CNkeyList: string[] = []; - EndpointEnable: boolean = false; // Whether to enable the three parameters of Endpoint + EndpointEnable: boolean = false; // Whether to enable the three parameters of Endpoint keyList: string[] = []; // keys of endPoint - specialParaTN: string[] = ['Resource Sharing Level', 'Connection Links', 'AN Endpoint', 'CN Endpoint']; + specialParaTN: string[] = [ + "Resource Sharing Level", + "Connection Links", + "AN Endpoint", + "CN Endpoint", + ]; // Parameters not passed to the back end - notPassPara: string[] = ['tn_connection_links']; + notPassPara: string[] = ["tn_connection_links"]; connectionLinkTable: any[] = []; connectionTableHeader: string[] = []; objectKeys = Object.keys; - // Comment: Above code + // Comment: Above code constructor( private message: NzMessageService, private Util: Util, private http: SlicingTaskServices - ) { - } + ) {} - ngOnInit() { - } + ngOnInit() {} ngOnChanges() { if (this.title) { this.formData = JSON.parse(JSON.stringify(this.detailData)); - if (this.title === 'An' || this.title === 'Cn') { - this.coreFormItems = this.title === 'An'?CORE_FORM_ITEMS.An:this.title === 'Cn'?CORE_FORM_ITEMS.Cn:[]; - } - else if (this.title === 'Tn') { + if (this.title === "An" || this.title === "Cn") { + this.coreFormItems = + this.title === "An" + ? CORE_FORM_ITEMS.An + : this.title === "Cn" + ? CORE_FORM_ITEMS.Cn + : []; + } else if (this.title === "Tn") { this.getConnectionLinkTable(); - this.ANkeyList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options.map((val) => {return val.key}) - this.CNkeyList = this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).options.map((val) => {return val.key}) - this.keyList = this.ANkeyList.concat(this.CNkeyList) - if (typeof this.formData !== 'undefined' && Object.keys(this.formData).length !== 0) { - this.EndpointEnable = this.keyList.every((item) => {return this.formData.hasOwnProperty(item)}) + this.ANkeyList = this.transferFormItems + .find((item) => { + return item.title === "AN Endpoint"; + }) + .options.map((val) => { + return val.key; + }); + this.CNkeyList = this.transferFormItems + .find((item) => { + return item.title === "CN Endpoint"; + }) + .options.map((val) => { + return val.key; + }); + this.keyList = this.ANkeyList.concat(this.CNkeyList); + if ( + typeof this.formData !== "undefined" && + Object.keys(this.formData).length !== 0 + ) { + this.EndpointEnable = this.keyList.every((item) => { + return this.formData.hasOwnProperty(item); + }); } - if(this.EndpointEnable){ - this.ANEndpointInputs = this.Util.pick(this.formData, this.ANkeyList) - this.CNEndpointInputs = this.Util.pick(this.formData, this.CNkeyList) + if (this.EndpointEnable) { + this.ANEndpointInputs = this.Util.pick( + this.formData, + this.ANkeyList + ); + this.CNEndpointInputs = this.Util.pick( + this.formData, + this.CNkeyList + ); } else { - this.transferFormItems.map((item,index)=>{ - if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') { - this.transferFormItems.splice(index,1) + this.transferFormItems.map((item, index) => { + if ( + item.title === "AN Endpoint" || + item.title === "CN Endpoint" + ) { + this.transferFormItems.splice(index, 1); } - }) + }); } } // If the endpoint related parameters from the back end are incomplete, delete the endpoint item //-------> Comment: Above code - if (this.title === 'An') { - this.AreaFormatting(); + if (this.title === "An") { + this.AreaFormatting(); } } } - addCheckStatus () { + addCheckStatus() { this.connectionLinkTable.forEach((item) => { - if (item.hasOwnProperty('linkId') && typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links'] !== '' && this.formData['tn_connection_links'] !== null && item['linkId'] === this.formData['tn_connection_links']) { - item.checked = true + if ( + item.hasOwnProperty("linkId") && + typeof this.formData["tn_connection_links"] !== "undefined" && + this.formData["tn_connection_links"] !== "" && + this.formData["tn_connection_links"] !== null && + item["linkId"] === this.formData["tn_connection_links"] + ) { + item.checked = true; } else { - item.checked = false + item.checked = false; } - }) + }); } - changeResourceShare () { - this.judgeTn() + changeResourceShare() { + this.judgeTn(); } - isObject (val) { - if (Object.prototype.toString.call(val) === '[object Object]') { - return true + isObject(val) { + if (Object.prototype.toString.call(val) === "[object Object]") { + return true; } else { - return false + return false; } } - getConnectionLinkTable (): void{ - this.http.getConnectionLinkTable(this.getConnetionFailed).then ((res) => { - this.connectionLinkTable = res.result_body.connection_links_list - this.addCheckStatus() // add init check status for connection link table - this.judgeTn() // init judge - this.getTableHeader() - }) + getConnectionLinkTable(): void { + this.http + .getConnectionLinkTable(this.getConnetionFailed) + .then((res) => { + this.connectionLinkTable = + res.result_body.connection_links_list; + this.addCheckStatus(); // add init check status for connection link table + this.judgeTn(); // init judge + this.getTableHeader(); + }); } - getTableHeader (): void { // Find the common key of all data - let keyList :any[] = this.connectionLinkTable.map((item) => { - return Object.keys(item) - }) - this.connectionTableHeader = this.Util.intersection(keyList).filter((item) => { - return item !== 'checked' - }) + getTableHeader(): void { + // Find the common key of all data + let keyList: any[] = this.connectionLinkTable.map((item) => { + return Object.keys(item); + }); + this.connectionTableHeader = this.Util.intersection(keyList).filter( + (item) => { + return item !== "checked"; + } + ); // Filter redundant items in table data this.connectionLinkTable.forEach((item) => { for (let key in item) { - if (key !== 'linkId' && key !== 'checked' && this.connectionTableHeader.indexOf(key) === -1) { - delete item[key] + if ( + key !== "linkId" && + key !== "checked" && + this.connectionTableHeader.indexOf(key) === -1 + ) { + delete item[key]; } else { // Filter out the null values in each item for (let i in item[key]) { - if (i === 'jitter' && (item[key][i] === '' || item[key][i] === 'null' || item[key][i] === null)) { - delete item[key][i] + if ( + i === "jitter" && + (item[key][i] === "" || + item[key][i] === "null" || + item[key][i] === null) + ) { + delete item[key][i]; } } } } - }) + }); } - getConnetionFailed () { - console.log('failed') + getConnetionFailed() { + console.log("failed"); } - judgeTn (): void { - if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'non-shared') { - this.connectionLinkTable.forEach ((item) => { - item.checked = false - }) - this.formData['tn_connection_links'] = null - this.notPassPara = ['tn_connection_links'] + judgeTn(): void { + if ( + this.formData["sliceProfile_TN_resourceSharingLevel"] === + "non-shared" + ) { + this.connectionLinkTable.forEach((item) => { + item.checked = false; + }); + this.formData["tn_connection_links"] = null; + this.notPassPara = ["tn_connection_links"]; this.transferFormItems.forEach((item) => { - if (item.title === 'Connection Links') { - item.disable = true - } else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') { - item.required = true - item.disable = false + if (item.title === "Connection Links") { + item.disable = true; + } else if ( + item.title === "AN Endpoint" || + item.title === "CN Endpoint" + ) { + item.required = true; + item.disable = false; } - }) - } else if (this.formData['sliceProfile_TN_resourceSharingLevel'] === 'shared') { + }); + } else if ( + this.formData["sliceProfile_TN_resourceSharingLevel"] === "shared" + ) { this.transferFormItems.forEach((item) => { - if (item.title === 'Connection Links') { - item.disable = false - } else if (item.title === 'AN Endpoint' || item.title === 'CN Endpoint') { - if (typeof this.formData['tn_connection_links'] !== 'undefined' && this.formData['tn_connection_links'] !== null && this.formData['tn_connection_links'] !== '') { - item.disable = true - item.required = false - this.notPassPara = [] - this.notPassPara = this.notPassPara.concat(this.ANkeyList, this.CNkeyList) - } else { //:todo - this.formData['tn_connection_links'] = '' - item.disable = false - item.required = true - this.notPassPara = [] + if (item.title === "Connection Links") { + item.disable = false; + } else if ( + item.title === "AN Endpoint" || + item.title === "CN Endpoint" + ) { + if ( + typeof this.formData["tn_connection_links"] !== + "undefined" && + this.formData["tn_connection_links"] !== null && + this.formData["tn_connection_links"] !== "" + ) { + item.disable = true; + item.required = false; + this.notPassPara = []; + this.notPassPara = this.notPassPara.concat( + this.ANkeyList, + this.CNkeyList + ); + } else { + //:todo + this.formData["tn_connection_links"] = ""; + item.disable = false; + item.required = true; + this.notPassPara = []; } } - }) + }); } } - validateEndPoint (key: string, value: any, required: boolean): string { + validateEndPoint(key: string, value: any, required: boolean): string { if (required) { if (this.Util.isEmpty(value)) { - return 'can not be empty'; + return "can not be empty"; } } - if (key === 'ip_address') { + if (key === "ip_address") { if (!this.regxpIP.test(value)) { - if (value !== '') { - return 'xxx.xxx.xxx.xxx'; + if (value !== "") { + return "xxx.xxx.xxx.xxx"; } else { - return '' + return ""; } } else { - return ''; + return ""; } - } else if (key === 'logical_link') { - if (!this.Util.isInteger(value)){ - if (value !== ''){ - return 'integer only' + } else if (key === "logical_link") { + if (!this.Util.isInteger(value)) { + if (value !== "") { + return "integer only"; } else { - return '' + return ""; } } else { - return '' + return ""; } } else { - return ''; + return ""; } } - changeLinkCheck (id: string) : void{ // update the selection state + changeLinkCheck(id: string): void { + // update the selection state this.connectionLinkTable.forEach((item) => { - if (item['linkId'] === id) { - item.checked = true + if (item["linkId"] === id) { + item.checked = true; } else { - item.checked = false + item.checked = false; } - }) - this.formData['tn_connection_links'] = id // get the selected id - this.judgeTn() + }); + this.formData["tn_connection_links"] = id; // get the selected id + this.judgeTn(); } - AreaFormatting () { + AreaFormatting() { let areaList = [...this.formData.an_coverage_area_ta_list]; - this.areaList = areaList.map ( (item: any) => { - let arr = item.split(';'); - item = arr.map( (ite, index) => { + this.areaList = areaList.map((item: any) => { + let arr = item.split(";"); + item = arr.map((ite, index) => { let key: string; if (!index) { - key = 'province'; - } else if (index === 1){ - key = 'city' + key = "province"; + } else if (index === 1) { + key = "city"; } else { - key = 'district' + key = "district"; } const obj: any = {}; obj.key = key; - obj.selected = ite - obj.options = [{name: ite, id: ite}] - return obj - }) + obj.selected = ite; + obj.options = [{ name: ite, id: ite }]; + return obj; + }); return item; - }) + }); } - creatAreaList (): void { + creatAreaList(): void { let arr = [ { - key: 'province', - selected: '', - options: [] + key: "province", + selected: "", + options: [], }, { - key: 'city', - selected: '', - options: [] + key: "city", + selected: "", + options: [], }, { - key: 'district', - selected: '', - options: [] - } - ] - this.areaList.push(arr) + key: "district", + selected: "", + options: [], + }, + ]; + this.areaList.push(arr); } - deleteAreaList (index: number): void { - this.areaList.splice(index,1); + deleteAreaList(index: number): void { + this.areaList.splice(index, 1); } - handleChange(area: any[], areaItem: any): void{ - if (areaItem.key === 'province' && areaItem.options.length <= 1) { + handleChange(area: any[], areaItem: any): void { + if (areaItem.key === "province" && areaItem.options.length <= 1) { areaItem.options = ADDRESS; - } else if (areaItem.key === 'city' && areaItem.options.length <= 1) { - ADDRESS.forEach( item => { - if(item.name === area[0].selected) { + } else if (areaItem.key === "city" && areaItem.options.length <= 1) { + ADDRESS.forEach((item) => { + if (item.name === area[0].selected) { areaItem.options = item.city; } - }) - }else if (areaItem.key === 'district' && areaItem.options.length <= 1) { - ADDRESS.forEach( (item: any) => { - item.city.forEach(city => { + }); + } else if ( + areaItem.key === "district" && + areaItem.options.length <= 1 + ) { + ADDRESS.forEach((item: any) => { + item.city.forEach((city) => { if (city.name === area[1].selected) { areaItem.options = city.county; } - }) - }) + }); + }); } } handleChangeSelected(area: any[], areaItem: any) { - if (areaItem.key === 'province') { - area[1].selected = '' + if (areaItem.key === "province") { + area[1].selected = ""; area[1].options = []; - area[2].selected = ''; + area[2].selected = ""; area[2].options = []; - } else if (areaItem.key === 'city') { - area[2].selected = ''; + } else if (areaItem.key === "city") { + area[2].selected = ""; area[2].options = []; } } - handleCancel() : void{ - this.showModel = false - this.cancel.emit(this.showModel) + handleCancel(): void { + this.showModel = false; + this.cancel.emit(this.showModel); } - + // prompt text for each item of area_list - checkArea (area: any) : string{ - if (area.every((item) => {return item.selected === ''})) { - return 'empty'; + checkArea(area: any): string { + if ( + area.every((item) => { + return item.selected === ""; + }) + ) { + return "empty"; } - if (area.some((item) => {return item.selected === ''})) { - return 'incomplete'; + if ( + area.some((item) => { + return item.selected === ""; + }) + ) { + return "incomplete"; } - return ''; + return ""; } // special handling for address - areaCheckBeforeSubmit (target: object) : Boolean{ + areaCheckBeforeSubmit(target: object): Boolean { for (const prop in target) { - if (target.hasOwnProperty(prop)) { - if (prop === 'an_coverage_area_ta_list' || prop ==='cn_coverage_area_ta_list') { + if (target.hasOwnProperty(prop)) { + if ( + prop === "an_coverage_area_ta_list" || + prop === "cn_coverage_area_ta_list" + ) { // if the vlaue is "shanghai;shanghai;", the input is incomplete - return target[prop].every((item) => {return this.Util.deepCheck(item.split(';'))}); + return target[prop].every((item) => { + return this.Util.deepCheck(item.split(";")); + }); } } } return true; } - endCheckBeforeSubmit (endpoint, required) : Array<any>{ + endCheckBeforeSubmit(endpoint, required): Array<any> { // check params of Endpoint - let result: Array<any> = [true, '']; - let endPointList; - endPointList = this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).options - let ipKey = ''; - let logicalKey = ''; - let nextKey = '' - for (let item of endPointList) { - if (item.title === 'ip_address') { - ipKey = item.key - } else if (item.title === 'logical_link') { - logicalKey = item.key - } else if (item.title === 'nexthop_info') { - nextKey = item.key - } + let result: Array<any> = [true, ""]; + let endPointList; + endPointList = this.transferFormItems.find((item) => { + return item.title === "AN Endpoint"; + }).options; + let ipKey = ""; + let logicalKey = ""; + let nextKey = ""; + for (let item of endPointList) { + if (item.title === "ip_address") { + ipKey = item.key; + } else if (item.title === "logical_link") { + logicalKey = item.key; + } else if (item.title === "nexthop_info") { + nextKey = item.key; } - for (let prop in endpoint) { - if (prop === ipKey) { - if (required) { - if (endpoint[prop] === '') { - result = [false, 'Endpoint can not be empty'] - } else if (!this.regxpIP.test(endpoint[prop])) { - result = [false, 'Illegal IpAddress'] - } - } else if (!this.regxpIP.test(endpoint[prop]) && endpoint[prop] !== '') { - result = [false, 'Illegal IpAddress'] + } + for (let prop in endpoint) { + if (prop === ipKey) { + if (required) { + if (endpoint[prop] === "") { + result = [false, "Endpoint can not be empty"]; + } else if (!this.regxpIP.test(endpoint[prop])) { + result = [false, "Illegal IpAddress"]; } - } else if (prop === logicalKey) { - if (required) { - if (endpoint[prop] === '') { - result = [false, 'logical can not be empty'] - } else if (!this.Util.isInteger(endpoint[prop])) { - result = [false, 'LogicalID can only be an integer'] - } - } else if (!this.Util.isInteger(endpoint[prop]) && endpoint[prop] !== '') { - result = [false, 'LogicalID can only be an integer'] + } else if ( + !this.regxpIP.test(endpoint[prop]) && + endpoint[prop] !== "" + ) { + result = [false, "Illegal IpAddress"]; + } + } else if (prop === logicalKey) { + if (required) { + if (endpoint[prop] === "") { + result = [false, "logical can not be empty"]; + } else if (!this.Util.isInteger(endpoint[prop])) { + result = [false, "LogicalID can only be an integer"]; } - } else if (prop === nextKey) { - if (required && endpoint[prop] === '') { - result = [false, 'Endpoint can not be empty'] - } + } else if ( + !this.Util.isInteger(endpoint[prop]) && + endpoint[prop] !== "" + ) { + result = [false, "LogicalID can only be an integer"]; + } + } else if (prop === nextKey) { + if (required && endpoint[prop] === "") { + result = [false, "Endpoint can not be empty"]; } - } - return result; + } + } + return result; } - inputHolder (title: string): string { - const titleArr = title.split(' ') + inputHolder(title: string): string { + const titleArr = title.split(" "); if (titleArr.length > 1) { - return titleArr.slice(0, 2).join(''); + return titleArr.slice(0, 2).join(""); } else { return title; } } - - labelStyle (required: boolean) : object{ + + labelStyle(required: boolean): object { let style; if (!required) { - style = {'margin-left': '18px', 'margin-right': '-18px'}; + style = { "margin-left": "18px", "margin-right": "-18px" }; } else { - style = {} + style = {}; } return style; } @@ -400,17 +502,27 @@ export class SubnetParamsModelComponent implements OnInit { handleOk(): void { // Verify that items of EndPoint is correct if (this.EndpointEnable) { - let endCheckResult = [] - if (this.title === 'Tn') { - const ANendCheckResult = this.endCheckBeforeSubmit(this.ANEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'AN Endpoint'}).required) - const CNendCheckResult = this.endCheckBeforeSubmit(this.CNEndpointInputs, this.transferFormItems.find((item) => {return item.title === 'CN Endpoint'}).required) + let endCheckResult = []; + if (this.title === "Tn") { + const ANendCheckResult = this.endCheckBeforeSubmit( + this.ANEndpointInputs, + this.transferFormItems.find((item) => { + return item.title === "AN Endpoint"; + }).required + ); + const CNendCheckResult = this.endCheckBeforeSubmit( + this.CNEndpointInputs, + this.transferFormItems.find((item) => { + return item.title === "CN Endpoint"; + }).required + ); if (ANendCheckResult[0] && CNendCheckResult[0]) { - endCheckResult[0] = true + endCheckResult[0] = true; } else { if (ANendCheckResult[0] === false) { - endCheckResult = ANendCheckResult + endCheckResult = ANendCheckResult; } else { - endCheckResult = CNendCheckResult + endCheckResult = CNendCheckResult; } } } @@ -420,52 +532,62 @@ export class SubnetParamsModelComponent implements OnInit { } // replace the params about endPoint for (let prop in this.formData) { - if (this.title === 'Tn' && typeof this.ANEndpointInputs[prop] !== 'undefined') { + if ( + this.title === "Tn" && + typeof this.ANEndpointInputs[prop] !== "undefined" + ) { this.formData[prop] = this.ANEndpointInputs[prop]; - } else if (this.title === 'Tn' && typeof this.CNEndpointInputs[prop] !== 'undefined') { + } else if ( + this.title === "Tn" && + typeof this.CNEndpointInputs[prop] !== "undefined" + ) { this.formData[prop] = this.CNEndpointInputs[prop]; } } } let params: object; - if (this.title === 'An') { + if (this.title === "An") { const an_coverage_area_ta_list: string[] = []; - this.areaList.forEach( item => { - let str: string = ''; - item.forEach( area => { - str += area.selected + ';'; - }) - an_coverage_area_ta_list.push(str.substring(0, str.length-1)); - }) - params = {...this.formData, an_coverage_area_ta_list}; + this.areaList.forEach((item) => { + let str: string = ""; + item.forEach((area) => { + str += area.selected + ";"; + }); + an_coverage_area_ta_list.push(str.substring(0, str.length - 1)); + }); + params = { ...this.formData, an_coverage_area_ta_list }; } else { - params = {...this.formData}; + params = { ...this.formData }; + } + // Verify that each item exclude endpoint is not empty, include special handeling of area_list + let checkParams: object = params; + let requireKeyList: string[] = []; + let targetFormItems: any[] = []; + if (this.title === "An" || this.title === "Cn") { + targetFormItems = this.coreFormItems; + } else if ((this.title = "Tn")) { + targetFormItems = this.transferFormItems; } - // Verify that each item exclude endpoint is not empty, include special handeling of area_list - let checkParams : object= params - let requireKeyList :string[] = [] - let targetFormItems : any[] = [] - if (this.title === 'An' || this.title === 'Cn') { - targetFormItems = this.coreFormItems - } else if (this.title = 'Tn') { - targetFormItems = this.transferFormItems - } - for (let item of targetFormItems) { - if (typeof item.required !== 'undefined' && item.required) { - if (typeof item.type !== 'undefined' && item.type !== 'endpoint') - { - requireKeyList.push(item.key) - } - } - } - checkParams = this.Util.pick(params, requireKeyList) - if (this.Util.deepCheck(checkParams) && this.areaCheckBeforeSubmit(params)) { + for (let item of targetFormItems) { + if (typeof item.required !== "undefined" && item.required) { + if ( + typeof item.type !== "undefined" && + item.type !== "endpoint" + ) { + requireKeyList.push(item.key); + } + } + } + checkParams = this.Util.pick(params, requireKeyList); + if ( + this.Util.deepCheck(checkParams) && + this.areaCheckBeforeSubmit(params) + ) { this.paramsDataChange.emit(params); - this.noPassParaChange.emit(this.notPassPara) + this.noPassParaChange.emit(this.notPassPara); this.handleCancel(); } else { - this.message.error('Please complete the form'); + this.message.error("Please complete the form"); } } - } |