feat: change the project structure and add mock data function

Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>

1 files changed, 275 insertions, 0 deletions

diff --git a/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html
new file mode 100644
index 00000000..1fc9a500
--- /dev/null
+++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html
@@ -0,0 +1,275 @@
+<!--
+    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">
+
+    <div class="top-title">
+        <h3 class="title fl">{{createParams.commonParams.templateType}}
+            {{"i18nTextDefine_InstanceCreation" | translate}} </h3>
+        <div class="fl" style="width: 20%">
+            <button class="submit" nz-button (click)="submit()"><span> {{"i18nTextDefine_Create" | translate}} </span>
+            </button>
+            <button class="back" nz-button (click)="goback()"></button>
+        </div>
+    </div>
+    <!-- chart -->
+    <div class="chart">
+        <span style="padding: 25px;display: inline-block;">
+            {{"i18nTextDefine_InstanceTopology" | translate}}
+        </span>
+        <div id="createChart">
+            <svg width="100%" height="100%">
+                <image id="domain" xlink:href="assets/images/domain1.png" style="width: 15%" x="40%" y="0" />
+            </svg>
+        </div>
+    </div>
+    <!--Template resolution : Three major items-->
+    <div class="creation">
+        <nz-tabset [nzTabPosition]="'top'" [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle>
+            <nz-tab nzTitle="Service Info">
+                <div class="service-title" style="clear: both">
+                    <span style="color: red;">*</span><span class="lable" style="width: 60px">name:</span>
+                    <input nz-input [(ngModel)]="this.templateParameters.service['name']" required="required">
+                    <span style="color: red;">*</span><span class="lable">description:</span>
+                    <input nz-input [(ngModel)]="this.templateParameters.service['description']">
+                </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 (click)="addSotnvpn()" 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 *ngFor="let key of getKeys(this.sotnInfo)">{{key.split("_")[1] || key}}</th>
+                                <th width="10%"> Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let item of sotnVpnTable.data; let i = index; ">
+                                <td>{{i+1}}</td>
+                                <td *ngFor="let keys of getKeys(this.sotnInfo);let a = index;">
+                                    {{item[keys]}}
+                                </td>
+                                <td>
+                                    <span class="action" (click)="editSotnVpn(i+1)"><i
+                                            class="anticon anticon-edit"></i></span>
+                                    &nbsp;
+                                    <span class="action" (click)="deleteSotnVpn(i+1)"><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 (click)="addSite()" 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 #siteTable [nzData]="siteTableData" [nzShowPagination]="false" nzSize="small">
+                        <thead>
+                            <tr>
+                                <th nzWidth="10%"> NO.</th>
+                                <th *ngFor="let key of getKeys(this.siteBaseData)">{{key.split("_")[1] || key}}</th>
+                                <th nzWidth="20%" style="text-align: center"> Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let item of siteTable.data; let i = index; ">
+                                <td>{{i+1}}</td>
+                                <td *ngFor="let keys of getKeys(this.siteBaseData);let a = index;">
+                                    {{item[keys]}}
+                                </td>
+                                <td style="text-align: center">
+                                    <span class="action" (click)="editSite(i+1)"><i
+                                            class="anticon anticon-edit"></i></span>
+                                    &nbsp;
+                                    <span class="action" (click)="deleteSite(i+1)"><i
+                                            class="anticon anticon-delete"></i></span>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </nz-table>
+                </div>
+            </nz-tab>
+        </nz-tabset>
+    </div>
+    <!-- sotnVpnmodel -->
+    <div class="sotnnpnmodel" *ngIf="sotnVpnModelShow">
+        <h3> {{"i18nTextDefine_Base" | translate}} </h3>
+        <div class="inputs">
+            <ul>
+                <li *ngFor="let item of this.templateParameters.sotnvpn.sdwanvpnresource_list">
+                    <span *ngIf="item.required"
+                        style="color: red;margin: 0;margin-right: -5px;">*</span><span>{{item.lableShow}}:</span>
+                    <input nz-input [(ngModel)]="sotnInfo[item.lable]"
+                        title="{{item.description ? item.description:null }}"
+                        required="{{item.required==true ? 'required':null}}"></li>
+            </ul>
+        </div>
+        <div>
+            <h3>Sdwansitelan List</h3>
+            <div>
+                <div style="width: 100%;text-align: right">
+                    <button nz-button (click)="addSotnSdwansitelan()" 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]"
+                                    title="{{this.templateParameters.sotnvpn.sdwansitelan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}">{{item[key]}}</span>
+                                <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowSdwansitelan[i] "
+                                    title="{{this.templateParameters.sotnvpn.sdwansitelan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}"
+                                    required="{{item.required==true ? 'required':null}}">
+                            </td>
+                            <td>
+                                <span class="action" (click)="editSotnSdwansitelan(i+1,item,sotnSdwansitelanData)"><i
+                                        class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
+                                <span class="action" (click)="deleteSotnSdwansitelan(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)="addSotnVpn_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
+            <button nz-button nzType="primary" (click)="addSotnVpn_OK()">{{"i18nTextDefine_Add" | translate}}</button>
+        </div>
+    </div>
+    <!-- sitemodel -->
+    <div class="sitemodel" *ngIf="siteModelShow">
+        <h3> {{"i18nTextDefine_Base" | translate}} </h3>
+        <div class="inputs">
+            <ul>
+                <li *ngFor="let item of this.templateParameters.site.sdwansiteresource_list">
+                    <span *ngIf="item.required"
+                        style="color: red;margin: 0;margin-right: -5px;">*</span><span>{{item.lableShow}}:</span>
+                    <input nz-input [(ngModel)]="siteBaseData[item.lable]" title="{{item.description}}"
+                        required="{{item.required==true ? 'required':null}}"></li>
+            </ul>
+        </div>
+        <div>
+            <h3>Sdwandevice</h3>
+            <div>
+                <div style="width: 100%;text-align: right">
+                    <button nz-button (click)="addSdwanDevice()" 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.siteCpeData)">{{key}}</th>
+                            <th width="7%"> Action</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr *ngFor="let item of siteSdwanDevice; let i = index;"
+                            [ngClass]="{'tr-border':item.tabInputShowDevice ==false}">
+                            <td>{{i+1}}</td>
+                            <td *ngFor="let key of getKeys(item);let a = index;">
+                                <span *ngIf="!tabInputShowDevice[i]"
+                                    title="{{this.templateParameters.site.sdwandevice_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwandevice_list[a].description:null}}">{{item[key]}}</span>
+                                <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowDevice[i] "
+                                    title="{{this.templateParameters.site.sdwandevice_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwandevice_list[a].description:null}}"
+                                    required="{{item.required==true ? 'required':null}}">
+                            </td>
+                            <td>
+                                <span class="action" (click)="editDevicePort(i+1,item,siteSdwanDevice)"><i
+                                        class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
+                                <span class="action" (click)="deleteDevicePort(i+1,item,siteSdwanDevice)"><i
+                                        class="anticon anticon-delete"></i></span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+
+            <h3>Sdwansitewan List</h3>
+            <div>
+                <div style="width: 100%;text-align: right">
+                    <button nz-button (click)="addSiteWan()" 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]"
+                                    title="{{this.templateParameters.site.sdwansitewan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}">{{item[key]}}</span>
+                                <input nz-input [(ngModel)]="item[key]" *ngIf="tabInputShowWanPort[i] "
+                                    title="{{this.templateParameters.site.sdwansitewan_list[a]['lable']==getKeys(item)[a] ? this.templateParameters.site.sdwansitewan_list[a].description:null}}"
+                                    required="{{item.required==true ? 'required':null}}">
+                            </td>
+                            <td>
+                                <span class="action" (click)="editWanPort(i+1,item,siteWanData)"><i
+                                        class="anticon anticon-edit" style="margin: 0 5px;"></i></span>
+                                <span class="action" (click)="deleteWanPort(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)="addsite_cancel()">{{"i18nTextDefine_Cancel" | translate}}</button>
+            <button nz-button nzType="primary" (click)="addsite_OK()">{{"i18nTextDefine_Add" | translate}}</button>
+        </div>
+    </div>
+    <div class="mask" *ngIf="siteModelShow || sotnVpnModelShow"></div>
+</div>
\ No newline at end of file