diff options
author | 2019-09-26 16:53:28 +0800 | |
---|---|---|
committer | 2019-09-27 00:45:40 +0000 | |
commit | 2fd289f8e4e211eb26752d04d8d9b394ab78470f (patch) | |
tree | 8d987aace682431d2818aaa301cc338a9f6b015a /usecaseui-portal/src/app/views/services/services-list/ccvpn-creation | |
parent | 2b307fe51a873c200c22469327e6947095516288 (diff) |
feat:adjust the file schema of components related to service instances
Change-Id: I18f1674601536a59313528bb1e01fd6b4fffd4fd
Issue-ID: USECASEUI-307
Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/services/services-list/ccvpn-creation')
4 files changed, 1330 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.css b/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.css new file mode 100644 index 00000000..8ea1b621 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.css @@ -0,0 +1,315 @@ +/* + 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; + font: 700 14px "Arial"; + color: #3C4F8C; + height: 42px; + line-height: 42px; + vertical-align: middle; + margin-left: 5px; + margin-right: 10px; +} +.model .creation .service-title input { + width: 20%; + height: 42px; + border-radius:4px; + outline: none; + margin-right: 50px; +} +/* Site List */ +/* addsite model */ +.model .sitemodel,.model .sotnnpnmodel{ + position: absolute; + z-index: 1001; + left: 50%; + top: 50%; + background-color: #fff; + width:90%; + min-width: 725px; + border-radius:2px; + overflow:auto; + transform: translate(-50%, -50%); +} +.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: 42%; + float: right; + margin-right: 2%; +} +.model .sotnnpnmodel .inputs input{ + width: 42%; + float: right; + margin-right: 2%; +} +.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/views/services/services-list/ccvpn-creation/ccvpn-creation.component.html b/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.html new file mode 100644 index 00000000..1fc9a500 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/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> + + <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>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.spec.ts b/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.spec.ts new file mode 100644 index 00000000..30402412 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.spec.ts @@ -0,0 +1,24 @@ +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/views/services/services-list/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.ts new file mode 100644 index 00000000..5a94e484 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/ccvpn-creation/ccvpn-creation.component.ts @@ -0,0 +1,716 @@ +/* + 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 { ServiceListService } from '../../../../core/services/serviceList.service'; + +@Component({ + selector: 'app-ccvpn-creation', + templateUrl: './ccvpn-creation.component.html', + styleUrls: ['./ccvpn-creation.component.css'] +}) +export class CcvpnCreationComponent implements OnInit { + + constructor(private myhttp: ServiceListService) { } + @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 + if (data.hasOwnProperty("model") && typeof data["model"] == 'string') { + data = JSON.parse(data["model"]); + } + 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(); + } + + //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; + } + }); + 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); + } + }); + + this.closeCreate.emit(servicebody); + + } + + goback() { + this.closeCreate.emit(); + } +} |