From daefc8d99b9c86acff909b8fa0b3bf9753d107a2 Mon Sep 17 00:00:00 2001 From: guochuyicmri Date: Wed, 22 May 2019 18:18:38 +0800 Subject: Fix instance detail for CCVPN Change-Id: I67dcc0adc46838c45c87470abbc35e08a0e6ab21 Issue-ID: USECASEUI-222 Signed-off-by: guochuyicmri --- .../app/ccvpn-detail/ccvpn-detail.component.css | 21 ++++ .../app/ccvpn-detail/ccvpn-detail.component.html | 61 ++++++++- .../src/app/ccvpn-detail/ccvpn-detail.component.ts | 140 ++++++++++++++++++++- .../services-list/services-list.component.less | 7 +- 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 @@

sdwanVPN List

+
{{"i18nTextDefine_Cancel" | translate}}
- + +
+

{{"i18nTextDefine_Base" | translate}}

+
+
    +
  • + {{item.lableShow}}: +
    • +
+
+
+

Sdwansitelan List

+
+
+ +
+ + + + + + + + + + + + + + + + + +
NO.{{key}} Action
{{i+1}} + {{item[key]}} + + + + +
+
+
+ +
+ + +
+
+

{{"i18nTextDefine_Base" | translate}}

@@ -396,5 +453,5 @@
-
+
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){ -- cgit 1.2.3-korg