diff options
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-creation')
| -rw-r--r-- | usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html | 42 | ||||
| -rw-r--r-- | usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts | 50 |
2 files changed, 43 insertions, 49 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html index f64e1237..2f0469c2 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html @@ -284,17 +284,17 @@ <tr *ngFor="let item of siteModalTable.data; let i = index;"> <td>{{i+1}}</td> <td> - <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_name}}</span> - <input nz-input [(ngModel)]="siteWanParams.sitewanport_name" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + <span *ngIf="!item.tabInputShow">{{item.sitewanport_name}}</span> + <input nz-input [(ngModel)]="item.sitewanport_name" *ngIf="item.tabInputShow"> </td> <td> - <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_description}}</span> - <input nz-input [(ngModel)]="siteWanParams.sitewanport_description" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + <span *ngIf="!item.tabInputShow">{{item.sitewanport_description}}</span> + <input nz-input [(ngModel)]="item.sitewanport_description" *ngIf="item.tabInputShow"> </td> <td> - <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_portType}}</span> - <nz-select style="width: 100px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear - nzPlaceHolder="Choose" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + <span *ngIf="!item.tabInputShow">{{item.sitewanport_portType}}</span> + <nz-select style="width: 100px;" [(ngModel)]="item.sitewanport_portType" nzAllowClear + nzPlaceHolder="Choose" *ngIf="item.tabInputShow"> <nz-option nzValue="GE" nzLabel="GE"></nz-option> <nz-option nzValue="FE" nzLabel="FE"></nz-option> <nz-option nzValue="XGE" nzLabel="XGE"></nz-option> @@ -304,32 +304,32 @@ </nz-select> </td> <td> - <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_portNumber}}</span> - <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + <span *ngIf="!item.tabInputShow">{{item.sitewanport_portNumber}}</span> + <input nz-input [(ngModel)]="item.sitewanport_portNumber" *ngIf="item.tabInputShow"> </td> <td> - <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_ipAddress}}</span> - <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + <span *ngIf="!item.tabInputShow">{{item.sitewanport_ipAddress}}</span> + <input nz-input [(ngModel)]="item.sitewanport_ipAddress" *ngIf="item.tabInputShow"> </td> <td> - <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_providerIpAddress}}</span> - <input nz-input [(ngModel)]="siteWanParams.sitewanport_providerIpAddress" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + <span *ngIf="!item.tabInputShow">{{item.sitewanport_providerIpAddress}}</span> + <input nz-input [(ngModel)]="item.sitewanport_providerIpAddress" *ngIf="item.tabInputShow"> </td> <td> - <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_transportNetworkName}}</span> - <input nz-input [(ngModel)]="siteWanParams.sitewanport_transportNetworkName" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + <span *ngIf="!item.tabInputShow">{{item.sitewanport_transportNetworkName}}</span> + <input nz-input [(ngModel)]="item.sitewanport_transportNetworkName" *ngIf="item.tabInputShow"> </td> <td> - <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_inputBandwidth}}</span> - <input nz-input [(ngModel)]="siteWanParams.sitewanport_inputBandwidth" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + <span *ngIf="!item.tabInputShow">{{item.sitewanport_inputBandwidth}}</span> + <input nz-input [(ngModel)]="item.sitewanport_inputBandwidth" *ngIf="item.tabInputShow"> </td> <td> - <span *ngIf="wanPortEditNum==(i+1) && !wanPortModal">{{item.sitewanport_outputBandwidth}}</span> - <input nz-input [(ngModel)]="siteWanParams.sitewanport_outputBandwidth" *ngIf="wanPortEditNum==(i+1) && wanPortModal"> + <span *ngIf="!item.tabInputShow">{{item.sitewanport_outputBandwidth}}</span> + <input nz-input [(ngModel)]="item.sitewanport_outputBandwidth" *ngIf="item.tabInputShow"> </td> <td> - <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit" style="margin: 0 5px"></i></span> - <span class="action" (click)="deleteModel(i+1)"><i class="anticon anticon-delete"></i></span> + <span class="action" (click)="editWanPort(i+1,item,siteWanData)"><i class="anticon anticon-edit" style="margin: 0 5px"></i></span> + <span class="action" (click)="deleteModel(i+1,item,siteWanData)"><i class="anticon anticon-delete"></i></span> </td> </tr> <!-- </ng-template> --> diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts index 40ea977d..8ea51321 100644 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts @@ -75,8 +75,12 @@ export class CcvpnCreationComponent implements OnInit { }) this.siteWanNames = Object.values(wanportnames); this.siteWanNames.forEach((item)=>{ - this.siteWanData.push(this.siteWanParams); //Add a table according to the wanport group + this.siteWanData.push(Object.assign({},this.siteWanParams)); //Add a table according to the wanport group }) + this.siteWanData.forEach((item,index) => { + item.indexs=index; + }); + console.log(this.siteWanData) // console.log(this.sotnNames) // console.log(this.siteNames) // console.log(this.siteBaseNames) @@ -163,39 +167,29 @@ export class CcvpnCreationComponent implements OnInit { sitewanport_providerIpAddress:null, sitewanport_transportNetworkName:null, sitewanport_inputBandwidth:null, - sitewanport_outputBandwidth:null + sitewanport_outputBandwidth: null, + tabInputShow:false, + indexs:null, }; siteWanNames = [] //Real name - wanPortModal = false; //Modal box display hidden wanPortEditNum = 0;//Which line to edit - editWanPort(num) { - // if(){ + editWanPort(num,item,siteWanData) { console.log(this) - console.log(num) - if (!this.wanPortModal) { - console.log(11111) - console.log(this.wanPortModal) - this.wanPortModal = true; - this.wanPortEditNum = num; - this.siteWanParams = Object.assign({}, this.siteWanData[num - 1]); - } else { - console.log(22222) - let inputsData = Object.assign({}, this.siteWanParams); //Create a new object, disconnect the original reference, because you want to empty the modal box later - inputsData.sitewanport_deviceName = this.siteCpeData.device_name; - this.siteWanData[this.wanPortEditNum - 1] = inputsData; - this.siteWanData = [...this.siteWanData]; //Table refresh - Object.keys(this.siteWanParams).forEach((item) => { //Clear modal box - this.siteWanParams[item] = null; - }) - this.wanPortModal = false; - console.log(this.siteWanData) - } - // } + console.log(siteWanData) + console.log(item) + siteWanData.map((its) => { + if(its.indexs==item.indexs){ + if (its.tabInputShow==false) { + this.wanPortEditNum = num; + item.tabInputShow=true; + } else { + item.tabInputShow=false; + console.log(this.siteWanData) + } + } + }) } - wanPortModal_Cancel(){ - this.wanPortModal = false; - } // Get the site address, manual file |