From 186b679ba02d7729801b4d560697d87034b9c8f6 Mon Sep 17 00:00:00 2001
From: wangyuerg <wangyuerg@chinamobile.com>
Date: Thu, 28 Jan 2021 10:34:35 +0800
Subject: feat: TN change modification

Signed-off-by: wangyuerg <wangyuerg@chinamobile.com>
Change-Id: I7bed0f4b43e0f978b5e109bfd198c4cad2205463
Issue-ID: USECASEUI-527
---
 .../subnet-params-model.component.html             | 136 +++++++++++++++------
 1 file changed, 102 insertions(+), 34 deletions(-)

(limited to 'usecaseui-portal/src/app/views/services/slicing-management/slicing-task-management/slicing-task-model/subnet-params-model/subnet-params-model.component.html')

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 cde444bf..31c19d49 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,33 +1,101 @@
 <nz-modal [(nzVisible)]="showModel" [nzTitle]="title + 'Parameter'" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
-	nzWidth="700px">
+	nzWidth="960px">
 	<div class="subnet_params_container">
 		<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" [ngStyle]="labelStyle(item.required)">
+				<nz-form-label [nzSpan]="7" [nzRequired]="item.required" [nzFor]="item.key"
+					[ngStyle]="labelStyle(item.required)">
 					{{item.title}}
 				</nz-form-label>
-				<nz-form-control [nzSpan]="12">
-					<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)"
-					/>
-					<div class="validation_alert" *ngIf="item.required">{{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
+				<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()">
+						<label nz-radio [nzValue]="option.key" *ngFor="let option of item.options">
+							{{ option.title }}
+						</label>
+					</nz-radio-group>
+					<nz-input-group *ngIf="(item.title === 'AN Endpoint') && EndpointEnable">
+						<div *ngFor="let option of item.options;let i=index">
+							<div class="tn_endpoint_input">
+								<input nz-input [id]="option.key" [name]="option.key"
+									[title]="ANEndpointInputs[option.key]" [(ngModel)]="ANEndpointInputs[option.key]"
+									[placeholder]="option.holder" style="width:32%;margin-right:1%"
+									[disabled]="item.disable" />
+								<div class="end_alert_ip" *ngIf="option.title === 'ip_address'">
+									{{validateEndPoint(option.title, ANEndpointInputs[option.key], item.required)}}
+								</div>
+								<div class="end_alert_logical" *ngIf="option.title === 'logical_link'">
+									{{validateEndPoint(option.title, ANEndpointInputs[option.key], item.required)}}
+								</div>
+								<div class="end_alert_nexthop" *ngIf="option.title === 'nexthop_info'">
+									{{validateEndPoint(option.title, ANEndpointInputs[option.key], item.required)}}
+								</div>
+							</div>
+						</div>
+					</nz-input-group>
+					<nz-input-group *ngIf="(item.title === 'CN Endpoint') && EndpointEnable">
+						<div *ngFor="let option of item.options;let i=index">
+							<div class="tn_endpoint_input">
+								<input nz-input [id]="option.key" [name]="option.key"
+									[title]="CNEndpointInputs[option.key]" [(ngModel)]="CNEndpointInputs[option.key]"
+									[placeholder]="option.holder" style="width:32%;margin-right:1%"
+									[disabled]="item.disable" />
+								<div class="end_alert_ip" *ngIf="option.title === 'ip_address'">
+									{{validateEndPoint(option.title, CNEndpointInputs[option.key], item.required)}}
+								</div>
+								<div class="end_alert_logical" *ngIf="option.title === 'logical_link'">
+									{{validateEndPoint(option.title, CNEndpointInputs[option.key], item.required)}}
+								</div>
+								<div class="end_alert_nexthop" *ngIf="option.title === 'nexthop_info'">
+									{{validateEndPoint(option.title, CNEndpointInputs[option.key], item.required)}}
+								</div>
+							</div>
+						</div>
+					</nz-input-group>
+					<!-- connection links table -->
+					<div *ngIf="item.title === 'Connection Links'">
+						<nz-table #basicTable [nzData]="[{}]" nzShowPagination="false">
+							<thead>
+								<tr>
+									<th *ngFor="let val of item.header" class="subnet_td">{{val.title}}</th>
+									<th class="subnet_td"> action </th>
+								</tr>
+							</thead>
+							<tbody>
+								<tr *ngFor="let t of formData[item.options.key]">
+									<td *ngFor="let val of item.header" class="subnet_td">
+										{{t[val.key]}}
+									</td>
+									<td nzShowCheckbox="true" [nzChecked]="t.checked"
+										(nzCheckedChange)="changeLinkCheck(t.id, $event)" [nzDisabled]="item.disable"
+										class="subnet_td">
+										<!-- <input type="checkbox" ng-model="t.checked" ng-change="nzCheckedChange(t.id)"> -->
+									</td>
+								</tr>
+							</tbody>
+						</nz-table>
+					</div>
+					<div class="validation_alert" *ngIf="item.required">
+						{{Util.isEmpty(formData[item.key])? 'can not be empty!':' '}}</div>
 				</nz-form-control>
 			</nz-form-item>
 		</form>
 		<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' || item.title === 'Endpoint')?7:13" [nzRequired]="item.required" *ngIf=" item.title !== 'Endpoint' || EndpointEnable " [ngStyle]="labelStyle(item.required)">
+				<nz-form-label [nzSpan]="(item.key === 'an_coverage_area_ta_list' || item.title === 'Endpoint')?7:13"
+					[nzRequired]="item.required" *ngIf=" item.title !== 'Endpoint' || EndpointEnable "
+					[ngStyle]="labelStyle(item.required)">
 					{{ item.title }}
 				</nz-form-label>
-				<nz-form-control [nzSpan]="item.title === 'Endpoint'?14:8" *ngIf="item.key !== 'an_coverage_area_ta_list'">
+				<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)]="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' " [placeholder]="inputHolder(item.title)"/>
+						*ngIf=" item.title !== 'Resource Sharing Level' && item.title !== 'Mobility' && item.title !== 'Endpoint' "
+						[placeholder]="inputHolder(item.title)" />
 					<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">
@@ -38,22 +106,22 @@
 						<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>
+					<div class="validation_alert" *ngIf="item.required">
+						{{Util.isEmpty(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">
 							<div class="endpoint_input">
-								<input nz-input
-								   [id]="option.key"
-								   [name]="option.key"
-								   [title]="EndpointInputs[option.key]"
-								   [(ngModel)]="EndpointInputs[option.key]"
-								   [placeholder]="option.holder"
-								   style="width:32%;margin-right:1%" />
-								<div class="end_alert_ip" *ngIf="option.title === 'ip_address'">{{validateEndPoint(option.title, EndpointInputs[option.key])}}</div>
-								<div class="end_alert_logical"  *ngIf="option.title === 'logical_link'">{{validateEndPoint(option.title, EndpointInputs[option.key])}}</div>
-								<div class="end_alert_nexthop"  *ngIf="option.title === 'nexthop_info'">{{validateEndPoint(option.title, EndpointInputs[option.key])}}</div>
+								<input nz-input [id]="option.key" [name]="option.key"
+									[title]="EndpointInputs[option.key]" [(ngModel)]="EndpointInputs[option.key]"
+									[placeholder]="option.holder" style="width:32%;margin-right:1%" />
+								<div class="end_alert_ip" *ngIf="option.title === 'ip_address'">
+									{{validateEndPoint(option.title, EndpointInputs[option.key], item.required)}}</div>
+								<div class="end_alert_logical" *ngIf="option.title === 'logical_link'">
+									{{validateEndPoint(option.title, EndpointInputs[option.key], item.required)}}</div>
+								<div class="end_alert_nexthop" *ngIf="option.title === 'nexthop_info'">
+									{{validateEndPoint(option.title, EndpointInputs[option.key], item.required)}}</div>
 							</div>
 						</div>
 					</nz-input-group>
@@ -61,11 +129,11 @@
 				</nz-form-control>
 				<div *ngIf="title === 'An' && item.key === 'an_coverage_area_ta_list'">
 					<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">
+						<nz-form-control [nzSpan]="!ind ? 4 : 4" [nzOffset]="i && !ind ? 7 : 0"
+							class="subnet_params_area" *ngFor="let item of area; let ind = index">
 							<nz-select [(ngModel)]="item.selected" [name]="'area' + i + ind"
-									   (nzOpenChange)="handleChange(area, item)"
-									   (ngModelChange)=" handleChangeSelected(area, item) ">
+								(nzOpenChange)="handleChange(area, item)"
+								(ngModelChange)=" handleChangeSelected(area, item) ">
 								<nz-option [nzValue]="op.name" [nzLabel]="op.name" *ngFor="let op of item.options">
 								</nz-option>
 							</nz-select>
@@ -74,12 +142,12 @@
 							<div class="validation_alert_area">{{checkArea(area)}}</div>
 						</nz-form-control>
 						<nz-form-control [nzSpan]="1" [nzOffset]="2">
-							<button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button" *ngIf="!i"
-									(click)="creatAreaList()">
+							<button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button"
+								*ngIf="!i" (click)="creatAreaList()">
 								<i nz-icon class="anticon anticon-plus subnet_params_icon"></i>
 							</button>
-							<button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button" *ngIf="i"
-									(click)="deleteAreaList(i)">
+							<button nz-button nzType="primary" type="button" nzSize="small" class="subnet_params_button"
+								*ngIf="i" (click)="deleteAreaList(i)">
 								<i nz-icon class="anticon anticon-minus subnet_params_icon"></i>
 							</button>
 						</nz-form-control>
-- 
cgit 1.2.3-korg