<div class="sotnvpn clearfix">
<div style="clear: both;height: 10px">
<h3 style="float: left;color: #3C4F8C">sdwanVPN List</h3>
+ <button nz-button *ngIf="upDateShow" (click)="updateSotnvpn()" class="addListBtn"
+ style="float: right;margin-right: 10px"><i class="anticon anticon-plus"
+ style="transform: scale(1.2);font-weight: 700"></i> {{"i18nTextDefine_Add" | translate}}
+ </button>
</div>
<nz-table #sotnVpnTable [nzData]="sotnVpnTableData"
[nzShowPagination]="false"
<button nz-button nzType="primary" (click)="detailsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
</div>
</div>
- <!-- site update model -->
+ <!-- sotnVpn update model -->
+ <div class="sotnnpnmodel" *ngIf="sotnVpnAddModelShow">
+ <h3> {{"i18nTextDefine_Base" | translate}} </h3>
+ <div class="inputs">
+ <ul>
+ <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list">
+ <span>{{item.lableShow}}:</span>
+ <input nz-input [(ngModel)]="sotnInfo[item.lable]"></li>
+ </ul>
+ </div>
+ <div>
+ <h3>Sdwansitelan List</h3>
+ <div>
+ <div style="width: 100%;text-align: right">
+ <button nz-button (click)="updateSotnSdwansitelan()" class="addListBtn"><i class="anticon anticon-plus"
+ style="transform: scale(1.2);font-weight: 700;"></i>{{"i18nTextDefine_Add" | translate}}
+ </button>
+ </div>
+ <table class="siteWanTab">
+ <thead>
+ <tr>
+ <th width="4%"> NO.</th>
+ <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th>
+ <th width="7%"> Action</th>
+ </tr>
+ </thead>
+ <tbody>
+ <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> -->
+ <tr *ngFor="let item of sotnSdwansitelanData; let i = index;"
+ [ngClass]="{'tr-border':item.tabInputShowSdwansitelan ==false}">
+ <td>{{i+1}}</td>
+ <td *ngFor="let key of getKeys(item);let a = index;">
+ <span *ngIf="!tabInputShowSdwansitelan[i]">{{item[key]}}</span>
+ <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowSdwansitelan[i] ">
+ </td>
+ <td>
+ <span class="action" (click)="editUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i
+ class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
+ <span class="action" (click)="deleteUpdateSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i
+ class="anticon anticon-delete"></i></span>
+ </td>
+ </tr>
+ <!-- </ng-template> -->
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <div class="action">
+ <button nz-button nzType="primary" (click)="updateSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
+ <button nz-button nzType="primary" (click)="updateSotnVpn_OK()">{{"i18nTextDefine_Add" | translate}}</button>
+ </div>
+ </div>
+ <!-- site update模态框 -->
<div class="sitemodel" *ngIf="siteAddModelShow">
<h3> {{"i18nTextDefine_Base" | translate}} </h3>
<div class="inputs">
<button nz-button nzType="primary" (click)="updatesite_OK()">{{"i18nTextDefine_Add" | translate}}</button>
</div>
</div>
- <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail || siteAddModelShow" (click)="hiddenModel()"></div>
+ <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail || sotnVpnAddModelShow || siteAddModelShow" (click)="hiddenModel()"></div>
</div>
siteWanParams = {}; //wan port Table Detailed parameters of each line of data
tabInputShowWanPort = [];//wan port table input and span
sitenum = [];
+ sotnvpnnum = [];
+
getKeys(item) {
return Object.keys(item);
}
//筛选 分离 sotnvpn数据
inputs["sdwanvpnresource_list"].map((item, index) => {
this.sotnVpnTableData.push(item);
+ this.sotnvpnnum.push(false);
});
let sdwanvpnresource_list = inputs["sdwanvpnresource_list"][0];
console.log(this.sitenum)
}
+ //sotnVpn addModel
+ sotnVpnAddModelShow = false;
+
+ updateSotnVpn_OK() {
+ let inputs = {
+ "sdwansitelan_list": []
+ };
+ inputs = Object.assign(inputs, this.sotnInfo);
+ inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => {
+ return Object.assign({}, item);
+ });
+ console.log(inputs);
+ if (this.isEditSotnVpn) {
+
+ this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs;
+ this.sotnVpnTableData = [...this.sotnVpnTableData];
+ } else {
+ // this.siteTableData.push(inputs);
+ this.sotnVpnTableData = [...this.sotnVpnTableData, inputs];
+ this.sotnvpnnum = [...this.sotnvpnnum, true];
+ }
+ console.log(this.sotnVpnTableData)
+
+ Object.keys(this.sotnInfo).forEach((item) => {
+ this.sotnInfo[item] = null;
+ });
+ this.sotnSdwansitelanData.forEach((item, index) => {
+ if (index > 0) {
+ this.sotnSdwansitelanData.splice(index, 1);
+ this.tabInputShowSdwansitelan.splice(index, 1);
+ } else {
+ Object.keys(item).forEach((item2) => {
+ item[item2] = null;
+ });
+ this.tabInputShowSdwansitelan[index] = true;
+ }
+
+ });
+ this.sotnVpnAddModelShow = false;
+ }
+
+ updateSotnVpn_cancel() {
+ Object.keys(this.sotnInfo).forEach((item) => {
+ this.sotnInfo[item] = null;
+ });
+ this.sotnSdwansitelanData.forEach((item, index) => {
+ if (index > 0) {
+ this.sotnSdwansitelanData.splice(index, 1);
+ } else {
+ Object.keys(item).forEach((item2) => {
+ item[item2] = null;
+ });
+ this.tabInputShowSdwansitelan[index] = true;
+ }
+
+ });
+ this.sotnVpnAddModelShow = false;
+ }
+
+ editUpdateSotnVpn(num) {
+ this.sotnVpnAddModelShow = true;
+ this.isEditSotnVpn = num;
+ console.log(this.templateParameters.sotnvpn.sdwanvpnresource_list)
+ Object.keys(this.sotnInfo).forEach((item) => {
+ this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item];
+ });
+ console.log()
+ this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => {
+ return Object.assign({}, {}, item)
+ });
+ this.sotnSdwansitelanData.forEach((item, index) => {
+ this.tabInputShowSdwansitelan[index] = false;
+ });
+ }
+
+ deleteUpdateSotnVpn(num) {
+ this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1);
+ console.log(this.sotnVpnTableData)
+ this.sotnvpnnum.splice(num - 1, 1);
+ }
+ updateSotnSdwansitelan() {
+ if (this.tabInputShowSdwansitelan.indexOf(true) > -1) {
+ return false;
+ }
+ let addNum = this.sotnSdwansitelanData.length;
+ let inputsData = Object.assign({}, this.sotnSdwansitelanParams);
+ Object.keys(inputsData).forEach((item) => {
+ if (item != "description") {
+ inputsData[item] = null;
+ }
+ });
+ this.sotnSdwansitelanData[addNum] = inputsData;
+ this.tabInputShowSdwansitelan[addNum] = true;
+ this.sotnSdwansitelanData = [...this.sotnSdwansitelanData];
+ console.log(this.sotnSdwansitelanData)
+ }
+ editUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) {
+ console.log(item)
+ if (this.tabInputShowSdwansitelan[num - 1] == false) {
+ this.tabInputShowSdwansitelan[num - 1] = true;
+ } else {
+ this.tabInputShowSdwansitelan[num - 1] = false;
+ }
+ console.log(sotnSdwansitelanData);
+ }
+ deleteUpdateSotnSdwansitelan(num, item, sotnSdwansitelanData) {
+ if (this.sotnSdwansitelanData.length <= 1) {
+ console.log("num>=1", "sotnSdwansitelanData");
+ return false;
+ } else {
+
+ }
+ this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1);
+ console.log(this.sotnSdwansitelanData)
+ }
// site addModel
siteAddModelShow = false;
- addSite() {
+ updateSotnvpn() {
+ this.sotnVpnAddModelShow = true;
+ this.isEditSotnVpn = 0;
+ }
+
+ updateSite() {
this.siteAddModelShow = true;
this.isEditSite = 0;
console.log(this.siteWanParams);
console.log(this.templateParameters);
}
+ editUpdateSite(num) {
+ this.siteAddModelShow = true;
+ this.isEditSite = num;
+ Object.keys(this.siteBaseData).forEach((item) => {
+ this.siteBaseData[item] = this.siteTableData[num - 1][item];
+ });
+ this.siteCpeData = Object.assign({}, this.siteTableData[num - 1].sdwandevice_list[0]);
+ this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => {
+ return Object.assign({}, item)
+ });
+ this.siteWanData.forEach((item, index) => {
+ this.tabInputShowWanPort[index] = false;
+ });
+ }
+
updatesite_cancel() {
Object.keys(this.siteBaseData).forEach((item) => {
this.siteBaseData[item] = null;
Code Review / usecase-ui.git / commitdiff