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

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { MyhttpService } from '../myhttp.service';

@Component({
  selector: 'app-ccvpn-creation',
  templateUrl: './ccvpn-creation.component.html',
  styleUrls: ['./ccvpn-creation.component.css']
})
export class CcvpnCreationComponent implements OnInit {

  constructor(private myhttp:MyhttpService) { }

  ngOnInit() {
    this.getSiteAddressList();
    this.getTemParameters();
  }

  @Input() createParams;
  @Input() namesTranslate;  //输入项参数名字转换
  @Output() closeCreate = new EventEmitter();

  templateParameters = {};
  getTemParameters(){ //获取模板参数
    let chosedtemplates = Object.values(this.createParams.templates);
    // console.log(this.createParams);
    console.log(chosedtemplates);  //模板id数组
    let types = ["sotnvpn","site","sdwanvpn"];
    chosedtemplates.forEach((item,index)=>{
      this.myhttp.getTemplateParameters(types[index],item)
        .subscribe((data)=>{
          if(index === 0){
            this.templateParameters["sotnvpn"] = data;
            this.sotnNames = data.inputs.map((item)=>{return item.name}); //云的真实名字
          }else if(index === 1){
            this.templateParameters["site"] = data;
            let wanportnames = {};
            this.siteNames = data.inputs.map((item)=>{return item.name}); //site中所有真实名字,没有分组，放在一起了
            this.siteNames.forEach((item)=>{
              if(item.includes("_device_")){
                this.siteCpeNames.push(item);
              }else if(item.includes("_sitewanport_")){
                let firstName = item.split("_")[0];
                wanportnames[firstName]?wanportnames[firstName].push(item):wanportnames[firstName]=[item];
              }else {
                this.siteBaseNames.push(item);
              }
            })
            this.siteWanNames = Object.values(wanportnames);
            this.siteWanNames.forEach((item)=>{
              this.siteWanData.push(this.siteWanParams);  //根据wanport组添加表格中
            })
            // console.log(this.sotnNames)
            // console.log(this.siteNames)
            // console.log(this.siteBaseNames)
            // console.log(this.siteCpeNames)
            // console.log(this.siteWanNames)
            // console.log(this.siteWanData)
          }else if(index === 2){
            this.templateParameters["sdwan"] = data;
            this.siteGroupNames = data.inputs.map((item)=>{return item.name}); //sdwanvpn真实名字
            // console.log(this.siteGroupNames);
          }
         
        },(err)=>{

        })
    })

  }
  // SOTN VPN Info 输入参数
  sotnInfo = {
    name:null,description:null,
    startTime:null,endTime:null,
    COS:"premium",reroute:false,
    SLS:null,dualLink:false,
    CIR:null,EIR:null,
    CBS:null,EBS:null,
    colorAware:false,couplingFlag:false
  }
  sotnNames = [] //真实名字

  startTimeChange(event){
    console.log(event)
  }
  endTimeChange(event){
    console.log(event)
  }


  // Site List
  siteTableData = [

  ]
  siteModeAddress = [];//site地址，筛选框数据,本地配置文件
  siteNames = [];//site中所有真实名字，未分组，模拟真实请求情况；

  siteBaseData = {  //模态框数据，输入参数，绑定数据
    name:null,
    description:null,
    type:null,
    role:null,
    postcode:null,
    address:null,
    vlan:null,
    sotnVpnName:null, //SOTN VPN Info中name
    controlPoint:null, //site group里面site的Role设置为spoke时，传递site group里面Role设置为hub的site name；否则传递空白
    groupRole:null, //site group的role
    groupName:null, //site group的name
    emails:null,//  不显示传空
    latitude:null,//
    longitude:null,//
    clientSignal:null//
  };
  siteBaseNames = [] //真实名字
  // cpe 编辑
  siteCpeData = {
    device_name:null,
    device_version:null,
    device_esn:null,
    device_class:null,
    device_systemIp:null,
    device_vendor:null,
    device_type:null
  };
  siteCpeNames = [] //真实名字
  // Wan Port 编辑
  siteWanData = [];  //wan port 表格绑定数据
  siteWanParams = {  //每一行数据详细参数，模态框
    sitewanport_name:null,
    sitewanport_deviceName:null,
    sitewanport_description:null,
    sitewanport_portType:null,
    sitewanport_portNumber:null,
    sitewanport_ipAddress:null,
    sitewanport_providerIpAddress:null,
    sitewanport_transportNetworkName:null,
    sitewanport_inputBandwidth:null,
    sitewanport_outputBandwidth:null
  };
  siteWanNames = [] //真实名字
  wanPortModal = false;  //模态框显示隐藏
  wanPortEditNum = 0;//编辑哪行
  editWanPort(num){
    this.wanPortModal = true;
    this.wanPortEditNum = num;
    this.siteWanParams = Object.assign({},this.siteWanData[num-1]);
  }
  wanPortModal_Ok(){
    let inputsData = Object.assign({},this.siteWanParams); //新建对象，断开原引用，因为后面要清空模态框
    inputsData.sitewanport_deviceName = this.siteCpeData.device_name;
    this.siteWanData[this.wanPortEditNum-1] = inputsData; 
    this.siteWanData = [...this.siteWanData]; //表格刷新
    Object.keys(this.siteWanParams).forEach((item)=>{ //清空模态框
      this.siteWanParams[item] = null;
    })
    this.wanPortModal = false;
    console.log(this.siteWanData)
  }
  wanPortModal_Cancel(){
    this.wanPortModal = false;
  }


  // 获取site地址，手动文件
  getSiteAddressList(){
    this.myhttp.getSiteAddress()
      .subscribe((data)=>{
        console.log(data);
        this.siteModeAddress = data.map((item)=>{ return item.location});
      },(err)=>{
        console.log(err);
      })
  }
  siteModelShow = false;
  addSite(){
    this.siteModelShow = true;
    this.isEdit = 0;
  }
  // addsite模态框按钮
  isEdit = 0; //编辑序号，No值，0表示增加
  addsite_OK(){
    this.siteBaseData.sotnVpnName = this.sotnInfo.name;
    // let inputsData = Object.assign({},this.siteBaseData,this.siteCpeData,this.siteWanData); //新建对象，断开原引用，因为后面要清空模态框
    let inputs = {};
    inputs["baseData"] = Object.assign({},this.siteBaseData);
    inputs["cpeData"] = Object.assign({},this.siteCpeData);
    inputs["wanportData"] = this.siteWanData.map((item)=>{
      return Object.assign({},item);
    })
    console.log(inputs);
    if(this.isEdit){
      // 编辑状态不增加
      this.siteTableData[this.isEdit-1] = inputs; 
      this.siteTableData = [...this.siteTableData]; //表格刷新
      this.siteGroupTableData.forEach((item)=>{  //site修改名字后，更新组中sites值
        if(item.sites.split(";").filter((d)=>{return d!=""}).includes(this.lastSiteName)){
          item.sites = item.sites.replace(this.lastSiteName,this.siteBaseData.name);
        }
      })
    }else{
      // this.siteTableData.push(inputs);//使用 push 或者 splice 修改 nzData 失效 当加上[nzFrontPagination]="false" 时，生效
      this.siteTableData = [...this.siteTableData,inputs];
    }
    
    Object.keys(this.siteBaseData).forEach((item)=>{ //清空模态框
      this.siteBaseData[item] = null;
    })
    Object.keys(this.siteCpeData).forEach((item)=>{ //清空模态框
      this.siteCpeData[item] = null;
    })
    this.siteWanData.forEach((item)=>{
      Object.keys(item).forEach((item2)=>{
        item[item2] = null;
      })
    })
    // console.log(this.siteTableData);
    this.lastSiteName = null;
    this.drawImage(this.siteTableData);
    this.siteModelShow = false;
  }
  addsite_cancel(){
    Object.keys(this.siteBaseData).forEach((item)=>{ //清空模态框
      this.siteBaseData[item] = null;
    })
    Object.keys(this.siteCpeData).forEach((item)=>{ //清空模态框
      this.siteCpeData[item] = null;
    })
    this.siteWanData.forEach((item)=>{
      Object.keys(item).forEach((item2)=>{
        item[item2] = null;
      })
    })
    this.lastSiteName = null;
    this.siteModelShow = false;
  }
  lastSiteName = null; //当site修改之后，若修改了名字，则需要更新group中sites的名字
  editSite(num){ //编辑修改选中site信息
    this.siteModelShow = true;
    this.isEdit=num;
    this.siteBaseData = Object.assign({},this.siteTableData[num-1].baseData);
    this.siteCpeData = Object.assign({},this.siteTableData[num-1].cpeData);
    this.siteWanData = this.siteTableData[num-1].wanportData.map((item)=>{return Object.assign({},item)});
    this.lastSiteName = this.siteBaseData.name;
  }
  deleteSite(num){
    let deleteSiteName = this.siteTableData[num-1].baseData.name;   //删除的site中name
    let groupSites = [];
    this.siteGroupTableData.forEach((item)=>{ groupSites.push(...item.sites.split(";").filter((d)=>{return d!=""})) });
    if(groupSites.includes(deleteSiteName)){
      alert("this site has in grouplist；can't delete！")
      return false;
    }
    this.siteTableData = this.siteTableData.filter((d,i) => i !== num-1);
    // this.siteTableData.splice(num-1,1); //模板中加上[nzFrontPagination]="false" 时，生效
    this.drawImage(this.siteTableData);

    // let groupIndex = this.siteGroupTableData.findIndex((item)=>{return item.sites.split(";").includes(deleteSiteName)});
    // console.log(groupIndex)
    // this.deleteGroupSite(groupIndex + 1); //删除时首行编号为1
  }

  // site节点图形描绘
  lines=[];
  siteImage=[];
  drawImage(sitelist){
    let cx = 200;
    let cy = 200;
    let r = 180;
    let startAngle = -210 * (Math.PI/180);
    let step = sitelist.length > 1 ? 120/(sitelist.length-1) * (Math.PI/180) : 1;

    this.lines = sitelist.map((item,index)=>{
      let x = cx + Math.cos(startAngle - step*index)*r;
      let y = cy + Math.sin(startAngle - step*index)*r;
      return {img:"line",site:item.baseData.name,x1:cx,y1:cy,x2:x,y2:y}
    })
    this.siteImage = this.lines.map((item)=>{
      return {img:"site",name:item.site,x:item.x2 - 40,y:item.y2 - 40}
    })
  }

  siteName=null;
  siteNameStyle = {
    'display':'none',
    'left':'0',
    'top':'0'
  }
  showSite($event,item){
    this.siteName = item.name;
    this.siteNameStyle.display = 'block';
  }
  moveSite($event,item){
    this.siteNameStyle.left = $event.clientX  + "px";
    this.siteNameStyle.top = $event.clientY - 35 + "px";
  }
  hideSite($event){
    this.siteNameStyle.display = 'none'; 
  }
  // siteGroup List
  siteGroupTableData = [

  ]
  siteGroupModelData = {
    name:null,
    topology:null,
    sites:null,
    role:null
  }
  siteGroupModelShow = false;
  siteGroupModalTableData = [];// ==> siteTableData?
  siteGroupNames=[];  //sdwanvpn真实名字

  // 勾选框
  allChecked = false;
  indeterminate = false;
  groupModal_checkAll(value){
    this.siteGroupModalTableData.forEach(data => {
      if (!data.disabled) {
        data.checked = value;
      }
    });
    this.refreshStatus();
  }
  refreshStatus(){
    const allChecked = this.siteGroupModalTableData.filter(item => !item.disabled).every(item => item.checked === true);
    const allUnChecked = this.siteGroupModalTableData.filter(item => !item.disabled).every(item => !item.checked);
    this.allChecked = allChecked;
    this.indeterminate = (!allChecked) && (!allUnChecked);
  }

  addSiteGroup(){
    this.isGroupEdit = 0;
    this.siteGroupModelShow = true;
    let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//循环组中是否已经选用了某个site，若存在 则新组不可选
    // console.log(checkedSite);
    this.siteTableData.forEach((item,index)=>{ 
      if(checkedSite.includes(item.baseData.name)){ 
        this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:true})
      }else {
        this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:false})
      }    
    })
  }
  // addsiteGroup模态框按钮
  addsitegroup_OK(){  //将模态框中的值赋给表中对应项--->将选中的site中的groupRole、groupName、controlPoint更新--->
                      //拷贝数据判断是增加或编辑，更新表中数据---> 清除模态框中数据,便于下次添加，关闭模态框
    console.log(this.siteGroupModalTableData);
    this.siteGroupModelData.sites="";  //置空组成员名字，写成""方便+=  ,若为null +=时会转成 "null"
    this.siteGroupModelData.role="";  //
    let site_controlPoint = this.siteGroupModalTableData.map((item)=>{ if(item.checked&&item.role=="hub"){ return item.siteName}}).filter((item)=>{return item!=undefined});  
    // console.log(site_controlPoint);
    this.siteGroupModalTableData.forEach((item,index)=>{  //模态框中site顺序和 表中site顺序一致
      if(item.checked){
        this.siteGroupModelData.sites += item.siteName+";";
        this.siteGroupModelData.role += item.role+";";
        this.siteTableData[index].baseData.groupRole = item.role; //site group的role
        this.siteTableData[index].baseData.groupName = this.siteGroupModelData.name; //site group的name
        if(item.role == "spoke"){
          this.siteTableData[index].baseData.controlPoint = site_controlPoint.join(); //site group里面site的Role设置为spoke时，传递site group里面Role设置为hub的site name；否则传递空白
        }
      }
    })

    let inputsData = {};
    Object.assign(inputsData,this.siteGroupModelData);
    if(this.isGroupEdit){
      // 编辑状态不增加
      this.siteGroupTableData[this.isGroupEdit-1] = inputsData; 
      this.siteGroupTableData = [...this.siteGroupTableData]; //表格刷新
    }else{
      // this.siteTableData.push(inputsData);//使用 push 或者 splice 修改 nzData 失效
      this.siteGroupTableData = [...this.siteGroupTableData,inputsData];
    }

    Object.keys(this.siteGroupModelData).forEach((item)=>{   
      this.siteGroupModelData[item] = null;
    })
    this.siteGroupModalTableData = [];
    this.siteGroupModelShow = false;
  }
  addsitegroup_cancel(){
    this.siteGroupModalTableData = [];
    this.siteGroupModelShow = false;
  }
  isGroupEdit = 0; //编辑序号，No值，0表示增加
  editGroupSite(num){ //将当前编辑的行数据填入模态框--->获取当前编辑项sites名--->判断更新模态框中site项状态
    this.siteGroupModelShow = true;
    this.isGroupEdit=num;
    this.siteGroupModelData = Object.assign({},this.siteGroupTableData[num-1]);
    console.log(this.siteGroupModelData)
    let editSites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //获取组中的site名
    // console.log(editSites);
    let checkedSite = this.siteGroupTableData.map((item)=>{return item.sites}).join(";").split(";").filter((d)=>{return d!=""});//循环组中是否已经选用了某个site，若存在 则新组不可选
    // console.log(checkedSite);
    this.siteTableData.forEach((item,index)=>{ 
      if(editSites.includes(item.baseData.name)){//先将编辑组中的site 中这三个值还原，否则减少某个site时 不会更新不选中的
        item.baseData.groupRole = null; //site group的role
        item.baseData.groupName = null; //site group的name
        item.baseData.controlPoint = null;
        this.siteGroupModalTableData.push({siteName:item.baseData.name,role:item.baseData.groupRole,checked:true,disabled:false})
      }else
      if(checkedSite.includes(item.baseData.name)){ 
        this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:true})
      }else {
        this.siteGroupModalTableData.push({siteName:item.baseData.name,role:null,checked:false,disabled:false})
      }    
    })
      
  }
  deleteGroupSite(num){
    let deleteSiteGroupsites = this.siteGroupTableData[num-1].sites.split(";").filter((item)=>{return item!=""}); //删除的site中name
    this.siteGroupTableData = this.siteGroupTableData.filter((d,i) => i !== num-1);
    this.siteTableData.forEach((item,index)=>{
      if(deleteSiteGroupsites.includes(item.baseData.name)){ 
        item.baseData.groupRole = null; //site group的role
        item.baseData.groupName = null; //site group的name
        item.baseData.controlPoint = null; 
      }
    })
  }



  // 提交创建数据
  submit(){   
    let globalCustomerId = this.createParams.commonParams.customer.id;
    let globalServiceType = this.createParams.commonParams.serviceType;
    let sotnInputs = {}; 
    // 由于请求模板不一样，所以外层需要循环请求回来的真实名字，内层循环本地参数，将当前值赋给真实名字
    this.sotnNames.forEach((name)=>{
      for(let key in this.sotnInfo){
        let nameParts = this.namesTranslate.sotnNameTranslate[key].split("_");
        if(name.startsWith(nameParts[0])&&name.endsWith(nameParts[1])){
          sotnInputs[name] = this.sotnInfo[key];
          break;
        }
      }
    })
    console.log(sotnInputs);
    let vpnbody = {
        service:{
          name:this.sotnInfo.name,
          description:this.sotnInfo.description,
          serviceInvariantUuid:this.templateParameters["sotnvpn"].invariantUUID,  //template.invariantUUID, //serviceDefId
          serviceUuid:this.templateParameters["sotnvpn"].uuid,  //template.uuid, // uuid ?? templateId
          globalSubscriberId:globalCustomerId,  //customer.id
          serviceType:globalServiceType,  //serviceType.value
          parameters:{
            locationConstraints:[],
            resources:[],
            requestInputs:sotnInputs
          }
        }
    }
    
    let sitebody = this.siteTableData.map((site)=>{
      let siteInputs = {};
      this.siteBaseNames.forEach((basename)=>{
        for(let key in site.baseData){
          let namePart = this.namesTranslate.siteNameTranslate.baseNames[key];
          if(basename.endsWith(namePart)){
            siteInputs[basename] = site.baseData[key];
            break;
          }
        }
      })
      this.siteCpeNames.forEach((cpename)=>{
        for(let key in site.cpeData){
          let namePart = this.namesTranslate.siteNameTranslate.cpeNames[key];
          if(cpename.endsWith(namePart)){
            siteInputs[cpename] = site.cpeData[key];
            break;
          }
        }
      })
      this.siteWanNames.forEach((item,index)=>{
        item.forEach((wanportname)=>{
          for(let key in site.wanportData[index]){
            let namePart = this.namesTranslate.siteNameTranslate.wanportNames[key];
            if(wanportname.endsWith(namePart)){
              siteInputs[wanportname] = site.wanportData[index][key];
              break;
            }
          }
        })
      })

      return {
        service:{
          name:site.baseData.name,
          description:site.baseData.description,
          serviceInvariantUuid:this.templateParameters["site"].invariantUUID,
          serviceUuid:this.templateParameters["site"].uuid,
          globalSubscriberId:globalCustomerId,
          serviceType:globalServiceType,
          parameters:{
            locationConstraints:[],
            resources:[],
            requestInputs:siteInputs
          }
        }
      }
    });
    console.log(sitebody);

    let groupbody = this.siteGroupTableData.map((item)=>{
      let siteGroupInputs = {};
      this.siteGroupNames.forEach((name)=>{
        for(let key in item){
          if(this.namesTranslate.siteGroupNameTranslate[key] == undefined){
              continue;
          }
          let nameParts = this.namesTranslate.siteGroupNameTranslate[key].split("_");
          if(name.startsWith(nameParts[0])&&name.endsWith(nameParts[1])){
            siteGroupInputs[name] = item[key];
            break;
          }
        }
      })
      return {
        service:{
          name:item.name,
          description:item.topology,
          serviceInvariantUuid:this.templateParameters["sdwan"].invariantUUID,
          serviceUuid:this.templateParameters["sdwan"].uuid,
          globalSubscriberId:globalCustomerId,
          serviceType:globalServiceType,
          parameters:{
            locationConstraints:[],
            resources:[],
            requestInputs:siteGroupInputs
          }
        }
      }
    })
    console.log(groupbody);

    let createObj = {
      vpnbody:vpnbody,
      sitebody:sitebody,
      groupbody:groupbody
    }
    
    this.closeCreate.emit(createObj);

  }

  goback(){
    this.closeCreate.emit(); 
  }
}