Fix instance detail for CCVPN

Change-Id: I67dcc0adc46838c45c87470abbc35e08a0e6ab21
Issue-ID: USECASEUI-222
Signed-off-by: guochuyicmri <guochuyi@chinamobile.com>

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){