path: root/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html

<!--
    Copyright (C) 2018 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.
-->
<!--<h3 class="title"> Services List </h3>-->
<!--<hr>-->
<div class="model creation-model">
    <!-- 创建数据 -->
   <div class="top-title">
       <h3 class="title fl">{{createParams.commonParams.templateType}} Instance Creation</h3>
       <div class="fl" style="width: 20%">
           <button class="submit" nz-button  (click)="submit()"><span>Create</span></button>
           <button class="back" nz-button (click)="goback()">
               <span>
               <i nz-icon type="rollback" theme="outline" >
                   <svg viewBox="64 64 896 896" fill="currentColor" width="1em" height="1em" data-icon="rollback" aria-hidden="true" style="transform: scaleX(1.7) scaleY(-1.1) translate(-2px)"><path d="M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 0 0 0 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z"></path></svg>
               </i>
           </span>
           </button>
       </div>
   </div>
    <!-- 图 -->
    <div class="chart">
        Create Service
        {{createParams.commonParams.templateType}}
        <div id="createChart">
            <svg width="100%" height="100%">
                <line *ngFor="let item of lines" x1=50% y1="45%" [attr.x2]="item.x2" y2="72%"
                      style="stroke:#3fa8eb;stroke-width:2"/>
                <image xlink:href="./assets/images/cloud-site.png"
                       x="25%" y="30%" width="50%"/>
                <!-- <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666">{{createParams.commonParams.templateType}}</text> -->
                <text dx="42%" dy="45%" style="font:700 18px 'Arial';fill:#666"></text>
                <g *ngFor="let item of siteImage"
                   (mouseover)="showSite($event,item)"
                   (mousemove)="moveSite($event,item)"
                   (mouseout)="hideSite($event)">
                    <image
                            xlink:href="./assets/images/site.png"
                            [attr.x]="item.x" y="65%" width="80px"/>
                    <text [attr.dx]="item.x + 25" dy="72%" style="font:700 16px 'Arial';fill:#666">{{ item.name }}
                    </text>
                </g>

            </svg>
            <!-- <p class="siteNameP" [ngStyle]="siteNameStyle">{{ siteName }}</p> -->
        </div>
    </div>
    <div class="creation">
        <nz-tabset [nzTabPosition]="'top'"   [nzShowPagination]=false [nzTabBarGutter]="'2'" [nzTabBarStyle]=tabBarStyle>
            <nz-tab nzTitle="SOTN VPN Info">
                <div class="sotnvpn clearfix">
                    <!--<h3>SOTN VPN Info</h3>-->
                    <ul>
                        <li><span>Name:</span> <input nz-input [(ngModel)]="sotnInfo.name"></li>
                        <li><span>Description:</span> <input nz-input [(ngModel)]="sotnInfo.description"></li>
                        <li><span>Start Time:</span>
                            <nz-date-picker [(ngModel)]="sotnInfo.startTime"
                                            (ngModelChange)="startTimeChange($event)"
                                            nzPlaceHolder="start time"
                                            nzShowTime>
                            </nz-date-picker>
                        </li>
                        <li><span>End Time:</span>
                            <nz-date-picker [(ngModel)]="sotnInfo.endTime"
                                            (ngModelChange)="endTimeChange($event)"
                                            nzPlaceHolder="end time"
                                            nzShowTime>
                            </nz-date-picker>
                        </li>
                        <li><span>COS:</span>
                            <nz-select style="width: 234px;height: 40px" [(ngModel)]="sotnInfo.COS" nzAllowClear nzPlaceHolder="Choose">
                                <nz-option nzValue="premium" nzLabel="premium"></nz-option>
                                <nz-option nzValue="standard" nzLabel="standard"></nz-option>
                            </nz-select>
                        </li>
                        <li><span style="width: 130px">Reroute Enabled:</span>
                            <nz-switch [(ngModel)]="sotnInfo.reroute"></nz-switch>
                        </li>
                        <li><span>Service Level Specification:</span> <input nz-input [(ngModel)]="sotnInfo.SLS"></li>
                        <li><span>Dual Link:</span>
                            <nz-select style="width: 234px;height: 40px" [(ngModel)]="sotnInfo.dualLink" nzAllowClear
                                       nzPlaceHolder="Choose">
                                <nz-option nzValue="no_protection" nzLabel="no_protection"></nz-option>
                                <nz-option nzValue="static_1+1" nzLabel="static_1+1"></nz-option>
                                <nz-option nzValue="permanent_1+1" nzLabel="permanent_1+1"></nz-option>
                            </nz-select>
                        </li>
                        <li><span>CIR:</span> <input nz-input [(ngModel)]="sotnInfo.CIR"></li>
                        <li><span>EIR:</span> <input nz-input [(ngModel)]="sotnInfo.EIR"></li>
                        <li><span>CBS:</span> <input nz-input [(ngModel)]="sotnInfo.CBS"></li>
                        <li><span>EBS:</span> <input nz-input [(ngModel)]="sotnInfo.EBS"></li>
                        <li><span>Color Aware:</span>
                            <nz-switch [(ngModel)]="sotnInfo.colorAware"></nz-switch>
                        </li>
                        <li><span style="width: 130px">Coupling Flag:</span>
                            <nz-switch [(ngModel)]="sotnInfo.couplingFlag"></nz-switch>
                        </li>
                    </ul>
                </div>
            </nz-tab>
            <nz-tab nzTitle="Site List">
                <div class="site">
                    <!--<h3>Site List</h3>-->
                    <button nz-button (click)="addSite()"><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button>
                    <nz-table #siteTable [nzData]="siteTableData"
                              [nzShowPagination]="false"
                              nzSize="small">
                        <thead>
                        <tr>
                            <th nzWidth="10%"> NO.</th>
                            <th nzWidth="15%"> Name</th>
                            <th nzWidth="15%"> Description</th>
                            <th nzWidth="15%"> Post Code</th>
                            <th nzWidth="15%"> Address</th>
                            <th nzWidth="15%"> VLAN</th>
                            <th nzWidth="15%"> Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- <ng-template ngFor let-data [ngForOf]="siteTable.data" let-i="index"> -->
                        <tr *ngFor="let item of siteTable.data; let i = index; ">
                            <td>{{i+1}}</td>
                            <td>{{item.baseData.name}}</td>
                            <td>{{item.baseData.description}}</td>
                            <td>{{item.baseData.postcode}}</td>
                            <td>{{item.baseData.address}}</td>
                            <td>{{item.baseData.vlan}}</td>
                            <td>
                                <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>
                        <!-- </ng-template> -->
                        </tbody>
                    </nz-table>
                </div>
            </nz-tab>
            <nz-tab nzTitle="Site_Group List" *ngIf="createParams.commonParams.templateType == 'CCVPN'">
                <div class="sitegroup" >
                    <!--<h3>Site_Group List</h3>-->
                    <button nz-button (click)="addSiteGroup()"><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button>
                    <nz-table #siteGroupTable [nzData]="siteGroupTableData"
                              [nzLoading]="loading"
                              [nzShowPagination]="false"
                              nzSize="small">
                        <thead>
                        <tr>
                            <th nzWidth="10%"> NO.</th>
                            <th nzWidth="20%"> Group Name</th>
                            <th nzWidth="20%"> Topology</th>
                            <th nzWidth="20%"> Sites</th>
                            <th nzWidth="15%"> Role</th>
                            <th nzWidth="15%"> Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        <!-- <ng-template ngFor let-data [ngForOf]="siteGroupTable.data" let-i="index"> -->
                        <tr *ngFor="let item of siteGroupTable.data; let i = index; ">
                            <td>{{i+1}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.topology}}</td>
                            <td>{{item.sites}}</td>
                            <td>{{item.role}}</td>
                            <td>
                                <span class="action" (click)="editGroupSite(i+1)"><i class="anticon anticon-edit"></i></span>
                                &nbsp;
                                <span class="action" (click)="deleteGroupSite(i+1)"><i
                                        class="anticon anticon-delete"></i></span>
                            </td>
                        </tr>
                        <!-- </ng-template> -->
                        </tbody>
                    </nz-table>
                </div>
            </nz-tab>
        </nz-tabset>
    </div>
    <!-- site模态框 -->
    <div class="sitemodel" *ngIf="siteModelShow">
        <h3>Site_Enterprise Service</h3>
        <div class="inputs">
            <ul>
                <li><span>Name:</span> <input nz-input [(ngModel)]="siteBaseData.name"></li>
                <li><span>Description:</span> <input nz-input [(ngModel)]="siteBaseData.description"></li>
                <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Type:</span>
                    <nz-select  [(ngModel)]="siteBaseData.type" nzAllowClear
                               nzPlaceHolder="Choose">
                        <nz-option nzValue="single-gateway" nzLabel="single-gateway"></nz-option>
                        <nz-option nzValue="dual-gateway" nzLabel="dual-gateway"></nz-option>
                    </nz-select>
                </li>
                <li *ngIf="createParams.commonParams.templateType == 'CCVPN'"><span>Role:</span>
                    <nz-select  [(ngModel)]="siteBaseData.role" nzAllowClear
                               nzPlaceHolder="Choose">
                        <nz-option nzValue="dsvpn-hub" nzLabel="dsvpn-hub"></nz-option>
                        <nz-option nzValue="sd-wan-edge" nzLabel="sd-wan-edge"></nz-option>
                    </nz-select>
                </li>
                <li><span>PostCode:</span> <input nz-input [(ngModel)]="siteBaseData.postcode"></li>
                <li><span>VLAN:</span> <input nz-input [(ngModel)]="siteBaseData.vlan"></li>
                <li><span>Address:</span>
                    <nz-select  [(ngModel)]="siteBaseData.address" nzAllowClear
                               nzPlaceHolder="Choose">
                        <nz-option *ngFor="let item of siteModeAddress" nzValue="{{item}}"
                                   nzLabel="{{item}}"></nz-option>
                    </nz-select>
                    <!--<input nz-input [(ngModel)]="siteBaseData.address">-->
                </li>
            </ul>
        </div>
        <div *ngIf="createParams.commonParams.templateType == 'CCVPN'">
            <h3>CPE</h3>
            <div class="inputs">
                <ul>
                    <li><span>Name:</span> <input nz-input [(ngModel)]="siteCpeData.device_name"></li>
                    <li><span>Version:</span> <input nz-input [(ngModel)]="siteCpeData.device_version"></li>
                    <li><span>ESN:</span> <input nz-input [(ngModel)]="siteCpeData.device_esn"></li>
                    <li><span>Class:</span>
                        <nz-select  [(ngModel)]="siteCpeData.device_class" nzAllowClear
                                   nzPlaceHolder="Choose">
                            <nz-option nzValue="VNF" nzLabel="VNF"></nz-option>
                            <nz-option nzValue="PNF" nzLabel="PNF"></nz-option>
                        </nz-select>
                    </li>
                    <li><span>System IP:</span> <input nz-input [(ngModel)]="siteCpeData.device_systemIp"></li>
                    <li><span>Vendor:</span> <input nz-input [(ngModel)]="siteCpeData.device_vendor"></li>
                    <li><span>Type:</span> <input nz-input [(ngModel)]="siteCpeData.device_type"></li>
                </ul>
            </div>
            <h3>WAN Port
                <button nz-button ><i class="anticon anticon-plus-circle-o" style="transform: scale(1.2)"></i></button>
            </h3>
            <div>
                <nz-table #siteModalTable [nzData]="siteWanData"
                          [nzLoading]="loading"
                          [nzShowPagination]="false"
                          nzSize="small">
                    <thead>
                    <tr>
                        <th > NO.</th>
                        <th> Name</th>
                        <th > Description</th>
                        <th > PortType</th>
                        <th > PortNumber</th>
                        <th > IPAddress</th>
                        <!--<th > Provider IP Address</th>-->
                        <!--<th > Transport Nerwork</th>-->
                        <!--<th > Input Bandwidth</th>-->
                        <!--<th > Output Bandwidth</th>-->
                        <th > Action</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- <ng-template ngFor let-data [ngForOf]="siteModalTable.data" let-i="index"> -->
                    <tr *ngFor="let item of siteModalTable.data; let i = index; ">
                        <td>{{i+1}}</td>
                        <td>{{item.sitewanport_name}}</td>
                        <td>{{item.sitewanport_description}}</td>
                        <td>{{item.sitewanport_portType}}</td>
                        <td>{{item.sitewanport_portNumber}}</td>
                        <td>{{item.sitewanport_ipAddress}}</td>
                        <td>
                            <span class="action" (click)="editWanPort(i+1)"><i class="anticon anticon-edit"></i></span>
                        </td>
                    </tr>
                    <!-- </ng-template> -->
                    </tbody>
                </nz-table>
            </div>
            <nz-modal [(nzVisible)]="wanPortModal" nzWidth="400" nzTitle="WAN Port Edit"
                      (nzOnCancel)="wanPortModal_Cancel()" (nzOnOk)="wanPortModal_Ok()">
                <ul class="wanPortModalList">
                    <li><span>Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_name"></li>
                    <!-- <li><span>Device Name:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_deviceName"></li> -->
                    <li><span>Description:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_description">
                    </li>
                    <li><span>Port Type:</span>
                        <nz-select style="width: 165px;" [(ngModel)]="siteWanParams.sitewanport_portType" nzAllowClear
                                   nzPlaceHolder="Choose">
                            <nz-option nzValue="GE" nzLabel="GE"></nz-option>
                            <nz-option nzValue="FE" nzLabel="FE"></nz-option>
                            <nz-option nzValue="XGE" nzLabel="XGE"></nz-option>
                            <nz-option nzValue="LTE" nzLabel="LTE"></nz-option>
                            <nz-option nzValue="xDSL(ATM)" nzLabel="xDSL(ATM)"></nz-option>
                            <nz-option nzValue="xSDL(PTM)" nzLabel="xSDL(PTM)"></nz-option>
                        </nz-select>
                    </li>
                    <li><span>Port Number:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_portNumber">
                    </li>
                    <li><span>Ip Address:</span> <input nz-input [(ngModel)]="siteWanParams.sitewanport_ipAddress"></li>
                    <li><span>Provider IP Address:</span> <input nz-input
                                                                 [(ngModel)]="siteWanParams.sitewanport_providerIpAddress">
                    </li>
                    <li><span>Transport Nerwork:</span> <input nz-input
                                                               [(ngModel)]="siteWanParams.sitewanport_transportNetworkName">
                    </li>
                    <li><span>Input Bandwidth:</span> <input nz-input
                                                             [(ngModel)]="siteWanParams.sitewanport_inputBandwidth">
                    </li>
                    <li><span>Output Bandwidth:</span> <input nz-input
                                                              [(ngModel)]="siteWanParams.sitewanport_outputBandwidth">
                    </li>
                </ul>
            </nz-modal>
        </div>

        <div class="action">
            <button nz-button nzType="primary" (click)="addsite_cancel()">Cancel</button>
            <button nz-button nzType="primary" (click)="addsite_OK()">Add</button>
        </div>
    </div>
    <!--sitegroupmodal-->
        <div class="sitegroupmodal" *ngIf="siteGroupModelShow" >
            <h3>Site_Group</h3>
            <div class="inputs">
                <div class="list-div">
                    <span class="fl">Group Name:</span>
                    <input nz-input [(ngModel)]="siteGroupModelData.name" style="width: 170px" class="fr">
                </div>
                <div class="list-div">
                    <span class="fl">Topology:</span>
                    <nz-select style="width: 170px;" [(ngModel)]="siteGroupModelData.topology" nzAllowClear
                               nzPlaceHolder="Choose" class="fr">
                        <nz-option nzValue="full-mesh" nzLabel="full-mesh"></nz-option>
                        <nz-option nzValue="hub-spoke" nzLabel="hub-spoke"></nz-option>
                    </nz-select>
                </div>
                <nz-table #groupModalTable [nzData]="siteGroupModalTableData" [nzLoading]="loading"
                          [nzShowPagination]="false" nzSize="small">
                    <thead>
                    <tr>
                        <th nzShowCheckbox [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate"
                            (nzCheckedChange)="groupModal_checkAll($event)"></th>
                        <th> Site Name</th>
                        <th> Role</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let item of groupModalTable.data; let i = index;">
                        <td nzShowCheckbox [nzDisabled]="item.disabled" [(nzChecked)]="item.checked"
                            (nzCheckedChange)="refreshStatus($event)"></td>
                        <td>{{ item.siteName }}</td>
                        <td>
                            <nz-select style="width: 80px;" [(ngModel)]="item.role"
                                       nzAllowClear nzPlaceHolder="Choose"
                                       [nzDisabled]="siteGroupModelData.topology != 'hub-spoke'">
                                <nz-option nzValue="hub" nzLabel="hub"></nz-option>
                                <nz-option nzValue="spoke" nzLabel="spoke"></nz-option>
                            </nz-select>
                        </td>
                    </tr>
                    </tbody>
                </nz-table>
            </div>
            <div class="action">
                <button nz-button nzType="primary" (click)="addsitegroup_cancel()">Cancel</button>
                <button nz-button nzType="primary" (click)="addsitegroup_OK()">Add</button>
            </div>
        </div>
    <div class="mask" *ngIf="siteModelShow || siteGroupModelShow"></div>
</div>