summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-22 16:55:57 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-22 16:56:09 +0800
commitd0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch)
treeb3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html
parent56923755c761897cc86ca2457667fcc3e6a0e43f (diff)
feat: change the project structure and add mock data function
Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html')
-rw-r--r--usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.html275
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