1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
|
<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"
[ngStyle]="labelStyle(item.required)">
{{item.title}}
</nz-form-label>
<nz-form-control [nzSpan]="16">
<input nz-input [(ngModel)]="formData[item.key]" [name]="item.key" [id]="item.key"
[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'"
[disabled]="item.disable">
<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.type==='table-radio'">
<nz-table #basicTable [nzLoading]="loading" [nzData]="connectionLinkTable" nzShowPagination="true"
[nzPageSize]="pageSize" (nzPageIndexChange)="pageIndexChange($event)"
nzFrontPagination="false" [nzTotal]="recordNum">
<thead>
<tr>
<th *ngFor="let val of connectionTableHeader" class="subnet_td">{{val}}</th>
<th class="subnet_td">{{connectionLinkTable.length!==0?'action':''}} </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let t of basicTable.data">
<td *ngFor="let val of connectionTableHeader" class="subnet_td">
<div *ngIf="isObject(t[val])">
<div *ngFor="let key of objectKeys(t[val])">
{{key}}: {{t[val][key]}}
</div>
</div>
<div *ngIf="!isObject(t[val])">
{{t[val]}}
</div>
</td>
<td>
<input type="radio" name="linkcheck" [value]="t.linkId"
(click)="changeLinkCheck(t.linkId)" [checked]="t.checked"
[disabled]="item.disable" class="table_radio" />
</td>
</tr>
</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.type === 'city-select'?7:13" [nzRequired]="item.required"
[ngStyle]="labelStyle(item.required)">
{{ item.title }}
</nz-form-label>
<nz-form-control nzSpan="8" *ngIf="item.type !== 'city-select'">
<input nz-input [id]="item.key" [name]="item.key" [(ngModel)]="formData[item.key]"
[disabled]="item.disable" *ngIf=" item.type === 'input'"
[placeholder]="inputHolder(item.title)" />
<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.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>
</nz-form-control>
<!-- Address selection needs special treatment -->
<div *ngIf="title === 'An' && item.type === 'city-select'">
<app-city-select [areaList]="areaList" [level]="areaLevel"></app-city-select>
</div>
</nz-form-item>
</form>
</div>
</nz-modal>
|
