From d0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 Mon Sep 17 00:00:00 2001
From: cyuamber <xuranyjy@chinamobile.com>
Date: Thu, 22 Aug 2019 16:55:57 +0800
Subject: feat: change the project structure and add mock data function

Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
---
 .../app/ccvpn-detail/ccvpn-detail.component.html   | 468 ---------------------
 1 file changed, 468 deletions(-)
 delete mode 100644 usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html

(limited to 'usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html')

diff --git a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html b/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
deleted file mode 100644
index ce556687..00000000
--- a/usecaseui-portal/src/app/ccvpn-detail/ccvpn-detail.component.html
+++ /dev/null
@@ -1,468 +0,0 @@
-<!--
-    Copyright (C) 2019 CMCC, Inc. and others. All rights reserved.
-
-    Licensed under the Apache License, Version 2.0 (the "License");
-    you may not use this file except in compliance with the License.
-    You may obtain a copy of the License at
-
-            http://www.apache.org/licenses/LICENSE-2.0
-
-    Unless required by applicable law or agreed to in writing, software
-    distributed under the License is distributed on an "AS IS" BASIS,
-    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    See the License for the specific language governing permissions and
-    limitations under the License.
--->
-
-<div class="model creation-model" style="background: #F7F8FC;">
-  <!-- top title -->
-  <div class="top-title">
-    <h3 class="title fl">{{detailParams['service-instance-name']}} Instance Detail</h3>
-    <div class="fl" style="width: 20%">
-      <button class="submit" nz-button (click)="submitUpdate()" *ngIf="upDateShow"><span> {{"i18nTextDefine_Update" | translate}} </span>
-      </button>
-      <button class="back" nz-button (click)="goback()"></button>
-    </div>
-  </div>
-  <!-- chart -->
-  <div class="chart">
-
-    <div id="detailChart">
-      <svg width="100%" height="100%" style="position: relative">
-        <!--local domain-->
-        <g class="clouds" *ngIf="vpns[0].domain!=''">
-          <image xlink:href="./assets/images/domain1.png"
-                 id="domain1"
-                 width="14%"
-                 x="17%" y="14%"
-          ></image>
-          <text dx="24%" dy="51%" style="font-size: 14px; fill:#ffffff;width: 20px;">
-            {{vpns[0].domain}}
-          </text>
-        </g>
-        <g *ngIf="vpns[1]" class="clouds">
-          <image xlink:href="./assets/images/domain1.png"
-                 id="domain2"
-                 width="14%"
-                 x="40%" y="40%"
-          ></image>
-          <text dx="43%" dy="19%" style="font-size: 14px; fill: #ffffff;width: 20px;">
-            {{vpns[1].domain}}
-          </text>
-        </g>
-        <!--domain1 tp-->
-        <g class="clouds" *ngIf="vpns[0].sitetpname!=''">
-          <image xlink:href="./assets/images/tp.png"
-                 class="tp"
-                 id="tp1"
-                 height="16" width="20"
-                 x="21%" y="37%"
-          ></image>
-          <text dx="21%" dy="34%" style="font-size: 14px; fill: #666;width: 20px;">
-            {{vpns[0].sitetpname}}
-          </text>
-        </g>
-        <g class="clouds" *ngIf="vpns[0].othertpname!=''">
-          <image xlink:href="./assets/images/tp.png"
-                 class="tp"
-                 id="tp2"
-                 height="16" width="20"
-                 x="29%" y="52%"
-          ></image>
-          <text dx="29%" dy="49%" style="font-size: 14px; fill: #666;width: 20px;">
-            {{vpns[0].othertpname}}
-          </text>
-        </g>
-        <!--domain2 tp-->
-        <g *ngIf="vpns[1]" class="clouds">
-          <image xlink:href="./assets/images/tp.png"
-                 class="tp"
-                 id="tp3"
-                 height="16" width="20"
-                 x="44%" y="52%"
-          ></image>
-          <text dx="44%" dy="49%" style="font-size: 14px; fill: #666;width: 20px;">
-            {{vpns[1].othertpname}}
-          </text>
-        </g>
-        <g *ngIf="vpns[1]" class="clouds">
-          <image xlink:href="./assets/images/tp.png"
-                 class="tp"
-                 id="tp4"
-                 height="16" width="20"
-                 x="51%" y="78%"
-          ></image>
-          <text dx="51%" dy="75%" style="font-size: 14px; fill: #666;width: 20px;">
-            {{vpns[1].sitetpname}}
-          </text>
-        </g>
-        <!--clouds-->
-        <g class="clouds">
-          <image xlink:href="./assets/images/cloud-out.png"
-                 id="extent-cloud"
-                 width="14%"
-                 x="70%" y="11%"
-          ></image>
-          <text dx="75%" dy="39%" style="font-size: 14px; fill: #666;width: 20px;">
-            SP Partent Network
-          </text>
-        </g>
-        <!--local site-->
-        <g class="clouds" *ngIf="localSite.length>0">
-          <image xlink:href="./assets/images/site.png"
-                 id="site1"
-                 height="59" width="100"
-                 x="6%" y="29%"
-          ></image>
-          <text dx="8%" dy="26%" style="font-size: 14px; fill: #666;width: 20px;">
-            {{localSite[0] && localSite[0]["service-instance-name"]}}
-          </text>
-        </g>
-        <g *ngIf="!detailSites && localSite.length>0" class="clouds">
-          <image xlink:href="./assets/images/site.png"
-                 id="site2"
-                 height="59" width="100"
-                 x="61%" y="70%"
-                 *ngIf="this.vpns.length == 2"
-          ></image>
-          <text dx="62%" dy="66%" style="font-size: 14px; fill: #666;width: 20px;"  *ngIf="this.vpns.length == 2">
-            {{ localSite[1] && localSite[1]["service-instance-name"]}}
-          </text>
-          <image xlink:href="./assets/images/site.png"
-                 id="site2"
-                 height="59" width="100"
-                 x="40%" y="44%"
-                 *ngIf="this.vpns.length == 1"
-          ></image>
-          <text dx="41%" dy="40%" style="font-size: 14px; fill: #666;width: 20px;"  *ngIf="this.vpns.length == 1">
-            {{ localSite[1] && localSite[1]["service-instance-name"]}}
-          </text>
-        </g>
-        <!--cloud site-->
-        <g *ngIf="!detailSites && outerSite.length>0" class="clouds">
-          <image xlink:href="./assets/images/site.png"
-                 id="site3"
-                 height="59" width="100"
-                 x="89%" y="10%"
-          ></image>
-          <text dx="90%" dy="7%" style="font-size: 14px; fill: #666;width: 20px;">
-            {{outerSite[1] && outerSite[1]["service-instance-name"]}}
-          </text>
-        </g>
-        <g class="clouds" *ngIf="outerSite.length>0">
-          <image xlink:href="./assets/images/site.png"
-                 id="site4"
-                 height="59" width="100"
-                 x="89%" y="40%"
-          ></image>
-          <text dx="90%" dy="37%" style="font-size: 14px; fill: #666;width: 20px;">
-            {{outerSite[0] && outerSite[0]["service-instance-name"]}}
-          </text>
-        </g>
-        <!--tp,site,domain---line -->
-        <line *ngFor="let item of detailLines" [attr.x1]="item.x1" [attr.y1]="item.y1" [attr.x2]="item.x2" [attr.y2]="item.y2" style="stroke:#2F8BF7; stroke-width:2"></line>
-        <line *ngIf="detailSites" x1="45%" y1="30%" x2="75%" y2="20%" style="stroke:#FFC000; stroke-width:2"></line>
-      </svg>
-    </div>
-  </div>
-  <div class="detaildata">
-    <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle [nzSelectedIndex]="upDateShow == false?0:1">
-      <nz-tab nzTitle="Service Info">
-        <div class="service-title" style="clear: both">
-          <span class="lable" style="width: 60px">name:</span>
-          <div class="service-title-input">{{templateParameters.service["name"]}}</div>
-          <span class="lable">description:</span>
-          <div class="service-title-input">{{templateParameters.service["description"]}}</div>
-        </div>
-      </nz-tab>
-      <nz-tab nzTitle="Sdwanvpnresource List">
-        <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"
-                    nzSize="small">
-            <thead>
-            <tr>
-              <th width="30%"> NO.</th>
-              <th width="30%"> Name</th>
-              <th width="30%"> topology</th>
-              <th nzWidth="10%"> Action </th>
-            </tr>
-            </thead>
-            <tbody>
-            <tr *ngFor="let item of sotnVpnTable.data; let i = index; ">
-              <td>{{i+1}}</td>
-              <td>{{item.sdwanvpn_name}}</td>
-              <td>{{item.sdwanvpn_topology}}</td>
-              <td>
-                <span class="action" (click)="showstonVpnDetail(i+1)"><i class="anticon anticon-bars"></i></span>
-                <span class="action" (click)="editUpdateSotnVpn(i+1)" *ngIf="sotnvpnnum[i]"><i class="anticon anticon-edit"></i></span>
-                &nbsp;
-                <span class="action" (click)="deleteUpdateSotnVpn(i+1)" *ngIf="upDateShow"><i
-                        class="anticon anticon-delete"></i></span>
-              </td>
-            </tr>
-            </tbody>
-          </nz-table>
-        </div>
-      </nz-tab>
-      <nz-tab nzTitle="Sdwansiteresource List">
-        <div class="site">
-          <div style="height: 10px">
-            <h3 style="float: left;color: #3C4F8C">Site List</h3>
-            <button nz-button *ngIf="upDateShow" (click)="updateSite()" 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 #nzTable [nzData]="siteTableData"
-                    [nzShowPagination]="false"
-                    nzSize="small">
-            <thead>
-            <tr>
-              <th nzWidth="10%"> NO. </th>
-              <th nzWidth="15%"> Name </th>
-              <th nzWidth="20%"> Description </th>
-              <th nzWidth="15%"> Post Code </th>
-              <th nzWidth="15%"> Address </th>
-              <th nzWidth="15%"> VLAN </th>
-              <th nzWidth="10%"> Action </th>
-            </tr>
-            </thead>
-            <tbody>
-
-            <tr *ngFor="let item of nzTable.data; let i = index; ">
-              <td>{{i+1}}</td>
-              <td>{{item.sdwandevice_list[0].name}}</td>
-              <td>{{item.sdwansite_description}}</td>
-              <td>{{item.sdwansite_postcode}}</td>
-              <td>{{item.sdwansite_address}}</td>
-              <td>{{item.sdwansite_emails}}</td>
-              <td>
-                <span class="action" (click)="showSiteDetail(i+1)"><i class="anticon anticon-bars"></i></span>
-                &nbsp;
-                <span class="action" (click)="editUpdateSite(i+1)" *ngIf="sitenum[i]"><i class="anticon anticon-edit"></i></span>
-                &nbsp;
-                <span class="action" (click)="deleteUpdateSite(i+1)" *ngIf="upDateShow"><i class="anticon anticon-delete"></i></span>
-              </td>
-            </tr>
-
-            </tbody>
-          </nz-table>
-        </div>
-      </nz-tab>
-    </nz-tabset>
-  </div>
-  <!-- sotnVpn model -->
-  <div class="sotnnpnmodel" *ngIf="sotnVpnDetailShow">
-    <h3> {{"i18nTextDefine_Base" | translate}} </h3>
-    <div class="inputs">
-      <ul>
-        <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list">
-          <span>{{item.lableShow}}:</span>
-          <span class="input-info">{{sotnInfo[item.lable]}}</span>
-        </li>
-      </ul>
-    </div>
-    <div>
-      <h3>Sdwansitelan List</h3>
-      <div>
-        <div style="width: 100%;text-align: right">
-        </div>
-        <table class="siteWanTab">
-          <thead>
-          <tr>
-            <th width="4%"> NO.</th>
-            <th *ngFor="let key of getKeys(this.sotnSdwansitelanParams)">{{key}}</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr *ngFor="let item of sotnSdwansitelanData; let i = index;" class="tr-border">
-            <td>{{i+1}}</td>
-            <td *ngFor="let key of getKeys(item);let a = index;">
-                            <span *ngIf="key != 'lable' ">{{item[key]}}</span>
-            </td>
-          </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-    <div class="action">
-      <button nz-button nzType="primary" (click)="detailSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
-    </div>
-  </div>
-  <!-- site model -->
-  <div class="sitemodel" *ngIf="siteDetail">
-    <h3> {{"i18nTextDefine_Base" | translate}} </h3>
-    <div class="inputs">
-      <ul>
-        <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list">
-          <span>{{item.lableShow}}:</span>
-          <span class="input-info">{{siteBaseData[item.lable]}}</span>
-          </li>
-      </ul>
-    </div>
-    <div>
-      <h3>Sdwandevice</h3>
-      <div>
-        <table class="siteWanTab">
-          <thead>
-          <tr>
-            <th width="4%"> NO.</th>
-            <th *ngFor="let key of getKeys(this.siteCpeData)">{{key}}</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr *ngFor="let item of siteSdwanDevice; let i = index;" class="tr-border">
-            <td>{{i+1}}</td>
-            <td *ngFor="let key of getKeys(item);">
-              <span *ngIf="key != 'lable' ">{{item[key]}}</span>
-            </td>
-          </tr>   
-          </tbody>
-        </table>
-      </div>
-      <h3>Sdwansitewan List</h3>
-      <div>
-        <table class="siteWanTab">
-          <thead>
-          <tr>
-            <th width="4%"> NO.</th>
-            <th *ngFor="let key of getKeys(this.siteWanParams)">{{key}}</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr *ngFor="let item of siteWanData; let i = index;" class="tr-border">
-            <td>{{i+1}}</td>
-            <td *ngFor="let key of getKeys(item);">
-                            <span *ngIf="key != 'lable' ">{{item[key]}}</span>
-            </td>
-          </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <div class="action">
-      <button nz-button nzType="primary" (click)="detailsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
-    </div>
-  </div>
-  <!-- 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>
-          <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>
-          </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 Model -->
-  <div class="sitemodel" *ngIf="siteAddModelShow">
-    <h3> {{"i18nTextDefine_Base" | translate}} </h3>
-    <div class="inputs">
-      <ul>
-        <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list">
-          <span>{{item.lableShow}}:</span>
-          <input nz-input [(ngModel)]="siteBaseData[item.lable]"></li>
-      </ul>
-    </div>
-    <div>
-      <h3>Sdwandevice</h3>
-      <div class="inputs">
-        <ul>
-          <li *ngFor="let item of this.templateParameters.site.sdwandevice_list">
-            <span>{{item.lable}}:</span>
-            <input nz-input [(ngModel)]="siteCpeData[item.lable]">
-          </li>
-        </ul>
-      </div>
-      <h3>Sdwansitewan List</h3>
-      <div>
-        <div style="width: 100%;text-align: right">
-          <button nz-button (click)="updateSiteWan()" 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.siteWanParams)">{{key}}</th>
-            <th width="7%"> Action</th>
-          </tr>
-          </thead>
-          <tbody>
-          <tr *ngFor="let item of siteWanData; let i = index;"
-              [ngClass]="{'tr-border':item.tabInputShowWanPort ==false}">
-            <td>{{i+1}}</td>
-            <td *ngFor="let key of getKeys(item);let a = index;">
-                            <span *ngIf="!tabInputShowWanPort[i]">{{item[key]}}</span>
-              <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowWanPort[i] ">
-            </td>
-            <td>
-                            <span class="action" (click)="editUpdateWanPort(i+1,item,siteWanData)"><i
-                                    class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
-              <span class="action" (click)="deleteUpdateWanPort(i+1,item,siteWanData)"><i
-                      class="anticon anticon-delete"></i></span>
-            </td>
-          </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-
-    <div class="action">
-      <button nz-button nzType="primary" (click)="updatesite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
-      <button nz-button nzType="primary" (click)="updatesite_OK()">{{"i18nTextDefine_Add" | translate}}</button>
-    </div>
-  </div>
-  <div class="mask" *ngIf="sotnVpnDetailShow || siteDetail || sotnVpnAddModelShow || siteAddModelShow" (click)="hiddenModel()"></div>
-</div>
-- 
cgit 1.2.3-korg