diff options
Diffstat (limited to 'usecaseui-portal/src/app/ccvpn-creation')
4 files changed, 0 insertions, 1340 deletions
diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css deleted file mode 100644 index 81b727c8..00000000 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.css +++ /dev/null @@ -1,321 +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. -*/ -.title { - font: 700 18px/18px "思源黑体"; - color: #4c5e70; - margin-bottom: 18px; -} -hr { - border: none; - height: 2px; - background-color: #dce1e7; - margin-bottom: 10px; -} -.model { - background-color: #F7F8FC; - overflow-y: auto; -} -.creation-model{ - position: relative; -} -.top-title{ - width: 100%; - padding: 20px; - position: relative; - display: inline-block; -} -.model .back,.model .back:hover{ - position: absolute; - top: 10px; - right: 20px; - display: inline-block; - width: 35px; - height: 35px; - background:url("../../assets/images/Return-icon.png") no-repeat!important; - background-size: 100%!important; - border-radius:4px; - color: #D7D7D7; - cursor: pointer; -} -.model .back:hover{ - background: url("../../assets/images/Return-icon-active.png")!important; - background-size: 100%!important; -} -.top-title h3.title { - height: 35px; - width: 80%; - font-size:16px; - font-family:ArialMT; - color:#3C4F8C; - line-height:35px; - display: inline-block; - -} -.model .submit{ - position: absolute; - width:90px; - height: 35px; - top: 10px; - right: 85px; - color: #fff; - font-size: 18px; - background:#0DA9E2; - border-radius:4px; - border: none!important; - border-color:rgba(0,0,0,0)!important; -} -.model .submit:hover{ - background:#09C6E2; - border: none; -} -.model .creation { - width: 100%; - overflow-y: auto; - border-radius: 5px; - padding: 15px; -} -.model .creation h3 { - height: 20px; - font: 700 16px/20px "Arial"; - margin: 5px 0px; - color: #000; -} -/* SOTN VPN */ -.model .creation .service-title{ - margin:60px 50px; -} -.model .creation .service-title .info-inputs{ - width:400px; - height: 42px; - display: inline-block; -} -.model .creation .service-title span{ - height: 42px; - line-height: 42px; - vertical-align: middle; -} -.model .creation .service-title .lable{ - display: inline-block; - width: 100px; - font: 700 14px "Arial"; - color: #3C4F8C; - height: 42px; - line-height: 42px; - vertical-align: middle; - margin-left: 5px; -} -.model .creation .service-title input { - width: 230px; - height: 42px; - border-radius:4px; - outline: none; - margin-right: 50px; -} -/* Site List */ -/* addsite model */ -.model .sitemodel,.model .sotnnpnmodel{ - position: absolute; - z-index: 1001; - left: 50px; - top: 60px; - background-color: #fff; - width:1500px; - height: 81%; - border-radius:2px; - overflow:auto; -} -.model .sotnnpnmodel{ - width: 1000px; - height: 53%; - top:200px; - left: 50%; - margin-left: -500px; -} -.model .sitemodel h3,.model .sotnnpnmodel h3{ - width: 96%; - height: 40px; - line-height: 35px; - font-size: 18px; - font-weight: 500; - margin: 10px auto; - color: #06A7E2; - border-bottom: 2px solid; - border-image: -webkit-linear-gradient(#07A9E1,#30D9C4) 100 100; - border-image: -moz-linear-gradient(#07A9E1,#30D9C4) 100 100; - border-image: linear-gradient(#07A9E1,#30D9C4) 100 100; - border-radius:2px; -} -.model .sitemodel .inputs,.model .sotnnpnmodel .inputs { - padding: 10px 20px 0; -} -.model .sitemodel .inputs ul li,.model .sotnnpnmodel .inputs ul li { - display: inline-block; - height: 35px; - line-height: 35px; - width: 24.5%; - margin-bottom: 20px; -} -.model .sotnnpnmodel .inputs ul li{ - width: 31%; -} -.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; -} -.model .sitemodel .action,.model .sotnnpnmodel .action { - text-align: center; - margin-top: 30px; - margin-bottom: 20px; - cursor: pointer -} -.model .sotnnpnmodel .action{ - margin-top: 70px; -} -.model .sitemodel .action button,.model .sotnnpnmodel .action button{ - width: 126px; - height:40px; - background:#EEEEEE; - border-radius:2px; - border: none!important; - color: #9DA7C5; - font-size: 16px; - margin: 0 15px; -} -.model .sitemodel .action button:nth-child(2),.model .sotnnpnmodel .action button:nth-child(2){ - background: #0DA9E2; - color: #fff; -} -.model .sitemodel .action button:nth-child(2):hover,.model .sotnnpnmodel .action button:nth-child(2):hover{ - background:#09C6E2; -} - -.model nz-table tbody td i.anticon:hover { - color: #3fa8eb; - cursor: pointer; -} - -/* site table */ -.sitemodel h3 button,.sotnnpnmodel h3 button{ - color: #D7D7D7; - width:32px; - height:32px; - background:#ffffff; - border-radius:4px; - border:1px solid #D7D7D7; -} -.sitemodel h3 button:hover,.sotnnpnmodel h3 button:hover{ - background:#ffffff; - color: #0DA9E2; - border:1px solid #0DA9E2; -} -.sitemodel h3>button,.sotnnpnmodel h3>button{ - float: right; - width: 30px; - height: 30px; - margin-right: 15px; -} -.model nz-table tbody th{ - color:rgba(60,79,140,0.5); - font-size: 16px; -} -.model .site nz-table tbody td i.anticon:hover { - color: #3fa8eb; - cursor: pointer; -} -/* WAN Port */ - -.mask{ - width: 100%; - height: 100%; - position: absolute; - z-index: 1000; - background: rgba(0, 0, 0, 0.65); - top:0; -} - - -/* chart */ -.model .chart { - width: 98%; - padding: 10px; - margin: 0 auto; - color: #06A7E2; - font-size: 16px; - font-weight: 500; - margin-bottom: 30px; - background: #EEF9FF; - border-radius:4px; -} -.model .chart #createChart { - width: 100%; - height: 220px; - margin-top: 20px; - position: relative; -} -.model .chart #createChart .siteNameP { - position: fixed; - border: 5px; - padding: 3px 5px; - color: #fff; - background: #999; - box-shadow: 0px 0px 20px #000; - max-width: 100px; - overflow: hidden; - text-overflow: ellipsis; -} -.model .creation .sotnvpn,.model .creation .site{ - background: #fff; - padding: 30px 30px 0 30px; -} -.siteWanTab{ - width: 96%; - margin: 0 auto; - margin-top: 10px; -} -.siteWanTab th{ - padding: 10px 8px; - color: #3C4F8C; - font-size: 16px; -} -.siteWanTab tr td{ - padding: 10px 5px; -} -.siteWanTab .tr-border{ - border-bottom: 1px solid #EDEDED; -} -.addListBtn{ - margin-right: 30px; - color: #06A7E2; - border: none; - background: rgba(229,238,252,0.8); - cursor: pointer; -}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html deleted file mode 100644 index 1645325c..00000000 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.html +++ /dev/null @@ -1,272 +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"> - - <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> - - <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> - - <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> diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts deleted file mode 100644 index 30402412..00000000 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.spec.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CcvpnCreationComponent } from './ccvpn-creation.component'; -describe('CcvpnCreationComponent', () => { - let component: CcvpnCreationComponent; - let fixture: ComponentFixture<CcvpnCreationComponent>; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ CcvpnCreationComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CcvpnCreationComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts deleted file mode 100644 index f4c1f94c..00000000 --- a/usecaseui-portal/src/app/ccvpn-creation/ccvpn-creation.component.ts +++ /dev/null @@ -1,723 +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. -*/ -import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; -import * as d3 from 'd3'; -import * as $ from 'jquery'; -import { MyhttpService } from '../myhttp.service'; -import { el } from "@angular/platform-browser/testing/src/browser_util"; - -@Component({ - selector: 'app-ccvpn-creation', - templateUrl: './ccvpn-creation.component.html', - styleUrls: ['./ccvpn-creation.component.css'] -}) -export class CcvpnCreationComponent implements OnInit { - - constructor(private myhttp: MyhttpService) { } - @Input() createParams; - @Input() ccvpn_temParametersContent; - @Output() closeCreate = new EventEmitter(); - - ngOnInit() { - this.getccvpnTemParameters(this.ccvpn_temParametersContent); - } - - //tabBarStyle - tabBarStyle = { - "height": "58px", - "width": "694px", - "box-shadow": "none", - "margin": "0", - "border-radius": "4px 4px 0px 0px" - }; - templateParameters = { - service: {}, - sotnvpn: { - info: {}, - sdwanvpnresource_list: [], - sdwansitelan_list: [] - }, - site: { - info: {}, - sdwansiteresource_list: [], - sdwandevice_list: [], - sdwansitewan_list: [] - } - }; - - bodyTemplateParameter = {}; - - // SOTN VPN List - sotnVpnTableData = []; - sotnInfo = {};//sotnmodel The first part of sotnInfo - sotnSdwansitelanData = [];//sotnmodel The second part of the data sdwansitelan Table - sotnSdwansitelanParams = {};//sdwansitelan Table Detailed parameters of each line of data - tabInputShowSdwansitelan = [];//sdwansitelan Table input&span The status identifier of the label switching display - // Site List - siteTableData = []; - siteBaseData = {}; //sitemodel one sdwansiteresource_list - // cpe - siteSdwanDevice = []; //sitemodel SdwanDevice port Table data - siteCpeData = {}; //sitemodel two sdwandevice_list - tabInputShowDevice = [];//Device port Table input和span The status identifier of the label switching display - // Wan Port - siteWanData = []; //sitemodel three wan port Table data - siteWanParams = {}; //wan port Table Detailed parameters of each line of data - tabInputShowWanPort = [];//wan port Table input和span The status identifier of the label switching display - getKeys(item) { - return Object.keys(item); - } - - getccvpnTemParameters(data) { //Get template parameters - console.log(this.createParams); - if (typeof data["model"] == 'string') { - data = JSON.parse(data["model"]); - } - console.log(data); - let inputss = data["inputs"]; - let inputs = {}; - this.templateParameters.service = { - name: data.metadata["name"], - description: data.metadata.description, - serviceInvariantUuid: data.metadata.invariantUUID, - serviceUuid: data.metadata.UUID - }; - - //Screening separation sotnvpn data - Object.keys(inputss).map((items) => { - if (items.search("vpn") != -1) { - this.bodyTemplateParameter[items] = []; - inputss[items].map((item, index) => { - if (item["required"] != undefined) { - this.templateParameters["sotnvpn"]["sdwanvpnresource_list"].push(item); - } - if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("site") != -1 && item[Object.keys(item)[0]] instanceof Array === true) { - this.templateParameters["sotnvpn"]["sdwansitelan_list"] = item[Object.keys(item)[0]] - let sitelanKey = {}; - sitelanKey[Object.keys(item)[0]] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - }); - } - if (items.search("site") != -1) { - this.bodyTemplateParameter[items] = []; - inputss[items].map((item, index) => { - if (item["required"] != undefined) { - this.templateParameters["site"]["sdwansiteresource_list"].push(item); - } - if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("device") != -1 && item[Object.keys(item)[0]] instanceof Array === true) { - this.templateParameters["site"]["sdwandevice_list"] = item[Object.keys(item)[0]]; - let sitelanKey = {}; - sitelanKey[Object.keys(item)[0]] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - if (item["required"] == undefined && Object.keys(item).length == 1 && Object.keys(item)[0].search("site") != -1 && Object.keys(item)[0].search("device") == -1 && item[Object.keys(item)[0]] instanceof Array === true) { - this.templateParameters["site"]["sdwansitewan_list"] = item[Object.keys(item)[0]]; - let sitelanKey = {}; - sitelanKey[Object.keys(item)[0]] = []; - this.bodyTemplateParameter[items].push(sitelanKey); - } - }); - } - }); - this.showTemParametersSotnVpn(); - this.showTemParametersSite(); - console.log(this.bodyTemplateParameter,this.templateParameters) - } - - //sotnVpn data, after combining the structure, rendering the template data to the page - showTemParametersSotnVpn() { - //sotn Data analysis, structure assembly - this.templateParameters.sotnvpn.sdwanvpnresource_list.map((item, index) => { - let input = {}; - for (var keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - item["lableShow"] = keys.split("_")[1]; - this.sotnInfo = Object.assign(this.sotnInfo, input); - } - } - }); - - this.templateParameters.sotnvpn.sdwansitelan_list.map((item, index) => { - let input = {}; - for (var keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - this.sotnSdwansitelanParams = Object.assign(this.sotnSdwansitelanParams, this.sotnSdwansitelanParams, input); - } - } - }); - this.sotnSdwansitelanData.push(this.sotnSdwansitelanParams); - this.sotnSdwansitelanData.map((item, index) => { - this.tabInputShowSdwansitelan[index] = true; - }); - } - - //Site data, after combining the structure, rendering the template to the page - showTemParametersSite() { - //site Data analysis, structure assembly - this.templateParameters.site.sdwansiteresource_list.map((item, index) => { - let input = {}; - for (var keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - item["lableShow"] = keys.split("_")[1]; - this.siteBaseData = Object.assign(this.siteBaseData, input); - } - } - }); - - this.templateParameters.site.sdwandevice_list.map((item, index) => { - let input = {}; - for (var keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - this.siteCpeData = Object.assign(this.siteCpeData, input); - } - } - }); - this.templateParameters.site.sdwandevice_list.map((item, index) => { - if (this.getKeys(item).indexOf("lable") == -1) { - this.templateParameters.site.sdwandevice_list.splice(index, 1) - } - }); - this.templateParameters.site.sdwansitewan_list.push( - { - ipMode: "", - description: "" - }, - { - publicIP: "", - description: "" - } - ); - - this.templateParameters.site.sdwansitewan_list.map((item, index) => { - let input = {}; - for (var keys in item) { - if (keys != "required" && keys != "type" && keys != "description") { - input[keys] = item[keys]; - item["lable"] = keys; - this.siteWanParams = Object.assign(this.siteWanParams, this.siteWanParams, input); - } - } - }); - this.siteSdwanDevice.push(this.siteCpeData); - this.siteWanData.push(this.siteWanParams); - this.siteWanData.map((item, index) => { - this.tabInputShowDevice[index] = true; - }); - this.siteWanData.map((item, index) => { - this.tabInputShowWanPort[index] = true; - }); - - } - - //add,edit,delete sotnSdwansitelan - addSotnSdwansitelan() { - if (this.tabInputShowSdwansitelan.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited - return false; - } - let addNum = this.sotnSdwansitelanData.length; - let inputsData = Object.assign({}, this.sotnSdwansitelanParams); - Object.keys(inputsData).forEach((item) => {//Add a new line of empty data - if (item != "description") { - inputsData[item] = null; - } - }); - this.sotnSdwansitelanData[addNum] = inputsData; - this.tabInputShowSdwansitelan[addNum] = true; - this.sotnSdwansitelanData = [...this.sotnSdwansitelanData]; //Table refresh - } - editSotnSdwansitelan(num, item, sotnSdwansitelanData) { - if (this.tabInputShowSdwansitelan[num - 1] == false) { - this.tabInputShowSdwansitelan[num - 1] = true; - } else { - this.tabInputShowSdwansitelan[num - 1] = false; - } - } - deleteSotnSdwansitelan(num, item, sotnSdwansitelanData) { - if (this.sotnSdwansitelanData.length <= 1) { - return false; - } else { - - } - this.sotnSdwansitelanData = this.sotnSdwansitelanData.filter((d, i) => i !== num - 1); - } - - //add,edit,delete SdwanDevice - addSdwanDevice() { - if (this.tabInputShowDevice.indexOf(true) > -1) {//当有正在编辑的一行数据时，不允许添加新的行 - return false; - } - let addNum = this.siteSdwanDevice.length; - let inputsData = Object.assign({}, this.siteCpeData); - Object.keys(inputsData).forEach((item) => {//新增一行空数据 - if (item != "description") { - inputsData[item] = null; - } - }); - this.siteSdwanDevice[addNum] = inputsData; - this.tabInputShowDevice[addNum] = true; - this.siteSdwanDevice = [...this.siteSdwanDevice]; //表格刷新 - } - - editDevicePort(num, item, siteSdwanDevice) { - if (this.tabInputShowDevice[num - 1] == false) { - this.tabInputShowDevice[num - 1] = true; - } else { - this.tabInputShowDevice[num - 1] = false; - } - } - - deleteDevicePort(num, item, siteSdwanDevice) { - if (this.siteSdwanDevice.length <= 1) { - return false; - } - this.siteSdwanDevice = this.siteSdwanDevice.filter((d, i) => i !== num - 1); - } - - //add,edit,delete siteWanPort - addSiteWan() { - if (this.tabInputShowWanPort.indexOf(true) > -1) {//Adding new rows is not allowed when there is a row of data being edited - return false; - } - let addNum = this.siteWanData.length; - let inputsData = Object.assign({}, this.siteWanParams); - Object.keys(inputsData).forEach((item) => {//Add a new line of empty data - if (item != "description") { - inputsData[item] = null; - } - }); - this.siteWanData[addNum] = inputsData; - this.tabInputShowWanPort[addNum] = true; - this.siteWanData = [...this.siteWanData]; //Table refresh - } - editWanPort(num, item, siteWanData) { - if (this.tabInputShowWanPort[num - 1] == false) { - this.tabInputShowWanPort[num - 1] = true; - } else { - this.tabInputShowWanPort[num - 1] = false; - } - } - deleteWanPort(num, item, siteWanData) { - if (this.siteWanData.length <= 1) { - return false; - } - this.siteWanData = this.siteWanData.filter((d, i) => i !== num - 1); - } - - //siteModel,sotnVpnModel Display sign - siteModelShow = false; - sotnVpnModelShow = false; - addSotnvpn() { - this.sotnVpnModelShow = true; - this.isEditSotnVpn = 0; - } - addSite() { - this.siteModelShow = true; - this.isEditSite = 0; - } - - //add sotnVpn model - isEditSotnVpn = 0;//Edit serial number, No value, 0 means increase - addSotnVpn_OK() { - let inputs = { - "sdwansitelan_list": [] - }; - inputs = Object.assign(inputs, this.sotnInfo); - inputs["sdwansitelan_list"] = this.sotnSdwansitelanData.map((item) => { - return Object.assign({}, item); - }); - if (this.isEditSotnVpn) { - // Edit status does not increase - this.sotnVpnTableData[this.isEditSotnVpn - 1] = inputs; - this.sotnVpnTableData = [...this.sotnVpnTableData]; //Table refresh - } else { - this.sotnVpnTableData = [...this.sotnVpnTableData, inputs]; - } - Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box - 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.sotnVpnModelShow = false; - } - - addSotnVpn_cancel() { - Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box - 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.sotnVpnModelShow = false; - } - - editSotnVpn(num) { - this.sotnVpnModelShow = true; - this.isEditSotnVpn = num; - Object.keys(this.sotnInfo).forEach((item) => { //Clear modal box - this.sotnInfo[item] = this.sotnVpnTableData[num - 1][item]; - }); - this.sotnSdwansitelanData = this.sotnVpnTableData[num - 1].sdwansitelan_list.map((item) => { - return Object.assign({}, {}, item) - }); - this.sotnSdwansitelanData.forEach((item, index) => { - this.tabInputShowSdwansitelan[index] = false; - }); - } - - deleteSotnVpn(num) { - this.sotnVpnTableData = this.sotnVpnTableData.filter((d, i) => i !== num - 1); - } - - // addsite model - isEditSite = 0; //Edit serial number, No value, 0 means increase - addsite_OK() { - let inputs = { - "sdwandevice_list": [], - "sdwansitewan_list": [] - }; - inputs = Object.assign(inputs, this.siteBaseData); - inputs["sdwandevice_list"] = this.siteSdwanDevice.map((item) => { - return Object.assign({}, item); - }); - inputs["sdwansitewan_list"] = this.siteWanData.map((item) => { - return Object.assign({}, item); - }); - if (this.isEditSite) { - // Edit status does not increase - this.siteTableData[this.isEditSite - 1] = inputs; - this.siteTableData = [...this.siteTableData]; //Table refresh - } else { - this.siteTableData = [...this.siteTableData, inputs]; - } - - Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box - this.siteBaseData[item] = null; - }); - this.siteSdwanDevice.forEach((item, index) => { - if (index > 0) { - this.siteSdwanDevice.splice(index, 1); - this.tabInputShowDevice.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowDevice[index] = true; - } - }); - this.siteWanData.forEach((item, index) => { - if (index > 0) { - this.siteWanData.splice(index, 1); - this.tabInputShowWanPort.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowWanPort[index] = true; - } - }); - console.log(this.siteTableData); - this.drawImage(this.siteTableData); - this.siteModelShow = false; - } - - addsite_cancel() { - Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box - this.siteBaseData[item] = null; - }) - this.siteSdwanDevice.forEach((item, index) => { - if (index > 0) { - this.siteSdwanDevice.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowDevice[index] = true; - } - - }); - this.siteWanData.forEach((item, index) => { - if (index > 0) { - this.siteWanData.splice(index, 1); - } else { - Object.keys(item).forEach((item2) => { - item[item2] = null; - }); - this.tabInputShowWanPort[index] = true; - } - - }); - this.siteModelShow = false; - } - - editSite(num) { //Edit and modify the selected site information - this.siteModelShow = true; - this.isEditSite = num; - Object.keys(this.siteBaseData).forEach((item) => { //Clear modal box - this.siteBaseData[item] = this.siteTableData[num - 1][item]; - }); - this.siteSdwanDevice = this.siteTableData[num - 1].sdwandevice_list.map((item) => { - return Object.assign({}, item) - }); - this.siteSdwanDevice.forEach((item, index) => { - this.tabInputShowDevice[index] = false; - }); - this.siteWanData = this.siteTableData[num - 1].sdwansitewan_list.map((item) => { - return Object.assign({}, item) - }); - this.siteWanData.forEach((item, index) => { - this.tabInputShowWanPort[index] = false; - }); - } - - deleteSite(num) { - this.siteTableData = this.siteTableData.filter((d, i) => i !== num - 1); - this.drawImage(this.siteTableData); - } - - // Site node graphic depiction - lines = []; - siteImage = []; - tpImage = []; - imgmap = { - '1': './assets/images/domain1.png', - '2': './assets/images/site.png' - }; - - drawImage(sitelist) { - let cx = 550; - let cy = 40; - let innerx1 = 720; //Left site pattern coordinate position - let innery1 = 40; - let ox = 950; - let oy = 50; - let innerx2 = 780;//Right site pattern coordinate position - let innery2 = 50; - let lateX1 = Math.random() * 30 + 55; - let lateX2 = 10; - let lateY1 = 15; - this.lines = sitelist.map((item, index) => { - let step = index + 1; - let x = cx; - let y = cy; - let innerX = innerx1; - let innerY = innery1; - if (step % 2 != 0) { //Left site pattern coordinate position - x = cx; - y = cy; - innerX = innerx1; - innerY = innery1; - if (step == 1) { - innerX = innerx1; - innerY = innery1; - } else { - x = cx - lateX1 * Math.ceil((step / 2)) >= 0 ? cx - lateX1 * Math.ceil((step / 2)) : -(cx - lateX1 * Math.ceil((step / 2))); - y = cy + lateY1 * Math.floor((step / 2)); - innerX = this.lines[step - 3].innerX - lateX2; - innerY = y; - } - } else { //Right site pattern coordinate position - x = ox; - y = oy; - innerX = innerx2; - innerY = innery2; - if (step / 2 == 1) { - innerX = innerx2; - innerY = innery2; - } else { - x = ox + lateX1 * (step / 2) >= 0 ? ox + lateX1 * (step / 2) : -(ox + lateX1 * (step / 2)); - y = oy + lateY1 * (step / 2 - 1); - innerX = this.lines[step - 3].innerX - lateX2; - innerY = y; - } - } - return { - img: "line", - site: item.sdwandevice_list[0].name, - x1: x, - y1: y, - x2: innerX, - y2: innerY, - innerX: innerX, - innerY: innerY - } - }); - this.render(this.imgmap, this.lines); - } - - render(imgmap, lines) { - - //enter - var svg = d3.select("svg"), - _g_lines = svg.selectAll('line.line') - .data(lines) - .enter() - .append('line') - .style('stroke', '#3fa8eb' - ) - .style('stroke-width', 2) - .attr('class', 'line') - .attr("x1", function (d) { - return d.x1; - }) - .attr("y1", function (d) { - return d.y1; - }) - .attr("x2", function (d) { - return d.x2; - }) - .attr("y2", function (d) { - return d.y2; - }), - _g_site = svg.selectAll('g.g-site') - .data(lines) - .enter() - .append('g') - .style('cursor', 'pointer') - .attr('class', 'g-site'); - _g_site.append('image') - .style("width", "50px") - .attr('xlink:href', function (d) { - return imgmap[2]; - }) - .attr("x", function (d) { - return d.x1 - 25; - }) - .attr("y", function (d) { - return d.y1 - 25; - }) - - //quit - svg.selectAll("g.g-site") - .data(lines) - .exit() //Select a picture without bound data - .remove(); - svg.selectAll("line.line") - .data(lines) - .exit() //Select the connection without binding data - .remove(); - - } - - modifyJosnKey(json, oddkey, newkey) { - - let val = json[oddkey]; - delete json[oddkey]; - json[newkey] = val; - } - - // submit createData - submit() { - let globalCustomerId = this.createParams.commonParams.customer.id; - let globalServiceType = this.createParams.commonParams.serviceType.name; - let servicebody = { - service: { - name: this.templateParameters.service["name"], - description: this.templateParameters.service["description"], - serviceInvariantUuid: this.templateParameters.service["serviceInvariantUuid"], - serviceUuid: this.templateParameters.service["serviceUuid"], - globalSubscriberId: globalCustomerId, //customer.id - serviceType: globalServiceType, //serviceType.value - parameters: { - locationConstraints: [], - resources: [], - requestInputs: {} - }, - } - }; - let siteresource = null, sitewan = null, device = null, vpnresource = null, sitelan = null; - Object.keys(this.bodyTemplateParameter).map((item, index) => { - if (item.search("site") != -1) { - siteresource = item; - this.bodyTemplateParameter[item].map((items, index) => { - if (Object.keys(items)[0].search("site") != -1 && Object.keys(items)[0].search("device") == -1) { - sitewan = Object.keys(items)[0] - } - if (Object.keys(items)[0].search("device") != -1) { - device = Object.keys(items)[0] - } - }); - } - if (item.search("vpn") != -1) { - vpnresource = item; - this.bodyTemplateParameter[item].map((items, index) => { - if (Object.keys(items)[0].search("site") != -1) { - sitelan = Object.keys(items)[0] - } - }); - } - }); - this.sotnVpnTableData.forEach((item, index) => { - Object.keys(item).map((items, index) => { - if (items.search("site") != -1 && item[items] instanceof Array === true) { - this.modifyJosnKey(item, items, sitelan) - } - }); - }); - this.siteTableData.forEach((item, index) => { - Object.keys(item).map((items, index) => { - if (items.search("site") != -1 && Object.keys(item)[0].search("device") == -1 && item[items] instanceof Array === true) { - this.modifyJosnKey(item, items, sitewan) - } - if (items.search("device") != -1) { - this.modifyJosnKey(item, items, device) - } - }); - }); - Object.keys(this.bodyTemplateParameter).map((item, index) => { - if (item.search("site") != -1) { - servicebody.service.parameters.requestInputs[item] = [].concat(this.siteTableData); - } - if (item.search("vpn") != -1) { - servicebody.service.parameters.requestInputs[item] = [].concat(this.sotnVpnTableData); - } - }); - console.log(servicebody); - - this.closeCreate.emit(servicebody); - - } - - goback() { - this.closeCreate.emit(); - } -} |