summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts
diff options
context:
space:
mode:
authorcyuamber <xuranyjy@chinamobile.com>2019-08-22 16:55:57 +0800
committercyuamber <xuranyjy@chinamobile.com>2019-08-22 16:56:09 +0800
commitd0f5347dc16b5aa9fc95eb520fbc9a1c7b672b09 (patch)
treeb3891d8de290d755d7f0f00d35bb77d3b89ad747 /usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts
parent56923755c761897cc86ca2457667fcc3e6a0e43f (diff)
feat: change the project structure and add mock data function
Change-Id: I381845bff5eb37d1fab3eba8cf1ae7838df523b7 Issue-ID: USECASEUI-307 Signed-off-by: cyuamber <xuranyjy@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts')
-rw-r--r--usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts723
1 files changed, 723 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts
new file mode 100644
index 00000000..214afbb7
--- /dev/null
+++ b/usecaseui-portal/src/app/views/ccvpn-creation/ccvpn-creation.component.ts
@@ -0,0 +1,723 @@
+/*
+ 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 '../../core/services/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();
+ }
+}