summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal
diff options
context:
space:
mode:
authorguochuyicmri <guochuyi@chinamobile.com>2019-05-22 18:18:38 +0800
committerguochuyicmri <guochuyi@chinamobile.com>2019-05-22 18:18:52 +0800
commitdaefc8d99b9c86acff909b8fa0b3bf9753d107a2 (patch)
tree4fb6292c1c5c4533513dc8e86c99ef2d6a76413b /usecaseui-portal
parent8c1ae160f8f495c4ce0679203972112735faeccf (diff)
Fix instance detail for CCVPN
Change-Id: I67dcc0adc46838c45c87470abbc35e08a0e6ab21 Issue-ID: USECASEUI-222 Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>
Diffstat (limited to 'usecaseui-portal')
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css21
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html61
-rw-r--r--usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts140
-rw-r--r--usecaseui-portal/src/app/services/services-list/services-list.component.less7
4 files changed, 223 insertions, 6 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
index d0479145..704b2eb2 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.css
@@ -147,6 +147,27 @@ hr {
width: 110px;
}
+.model .sitemodel .inputs ul li span,.model .sotnnpnmodel .inputs ul li span {
+ display: inline-block;
+ line-height: 35px;
+ font-size: 14px;
+ font-weight: 500;
+ color: #3C4F8C;
+ margin-left: 10px;
+ vertical-align: middle;
+ float: left;
+}
+.model .sitemodel .inputs input,.model .sitemodel .inputs nz-select{
+ width: 186px;
+ float: right;
+ margin-right: 60px;
+}
+.model .sotnnpnmodel .inputs input{
+ width: 186px;
+ float: left;
+ margin-left: 20px;
+}
+
/* addsite model */
.model .sitemodel,.model .sotnnpnmodel{
position: absolute;
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
index cf87ff16..44646234 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
@@ -179,6 +179,10 @@
<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"
@@ -334,7 +338,60 @@
<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">
@@ -396,5 +453,5 @@
<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>
diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
index 484a6d93..0b138575 100644
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
+++ b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.ts
@@ -75,6 +75,8 @@ export class CcvpnDetailComponent implements OnInit {
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);
}
@@ -95,6 +97,7 @@ export class CcvpnDetailComponent implements OnInit {
//筛选 分离 sotnvpn数据
inputs["sdwanvpnresource_list"].map((item, index) => {
this.sotnVpnTableData.push(item);
+ this.sotnvpnnum.push(false);
});
let sdwanvpnresource_list = inputs["sdwanvpnresource_list"][0];
@@ -260,17 +263,152 @@ export class CcvpnDetailComponent implements OnInit {
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;
diff --git a/usecaseui-portal/src/app/services/services-list/services-list.component.less b/usecaseui-portal/src/app/services/services-list/services-list.component.less
index bbc8109e..e4a2c6b3 100644
--- a/usecaseui-portal/src/app/services/services-list/services-list.component.less
+++ b/usecaseui-portal/src/app/services/services-list/services-list.component.less
@@ -150,12 +150,13 @@ hr {
border-radius:2px;
}
.top-num .top-list:nth-child(2){
- background:url("../../../assets/images/servicelist-ns.png") no-repeat;
+ background:url("../../../assets/images/servicelist-e2e.png") no-repeat;
+ //background:url("../../../assets/images/servicelist-ns.png") no-repeat;
background-size: 100% 100%;
}
.top-num .top-list:nth-child(3){
- //background:url("../../../assets/images/servicelist-cccvpn.png") no-repeat;
- background:url("../../../assets/images/servicelist-sotn.png") no-repeat;
+ background:url("../../../assets/images/servicelist-e2e.png") no-repeat;
+ //background:url("../../../assets/images/servicelist-sotn.png") no-repeat;
background-size: 100% 100%;
}
.top-num .top-list:nth-child(4){