diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services/services-list/mdons-creation')
4 files changed, 464 insertions, 0 deletions
diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.css b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.css new file mode 100644 index 00000000..934d38d4 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.css @@ -0,0 +1,80 @@ +/* + 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: #fff; + height: 90%; + overflow-y: auto; + } + .model .back { + position: absolute; + top: 10px; + right: 20px; + } + .model .creation { + position: relative; + width: 60%; + height: 100%; + overflow-y: auto; + border-radius: 5px; + padding: 20px; + } + .model .creation .baseparms h3 { + color: #3fa8eb; + font: 700 16px "Arial"; + } + .model .creation .baseparms h4 { + font: 700 16px "Arial"; + } + .model .creation .baseparms ul li { + margin: 3px 0; + } + .model .creation .baseparms ul li span { + display: inline-block; + width: 40%; + font: 700 14px "Arial"; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + text-align: right; + } + .model .creation .baseparms ul li input { + width: 165px; + } + .model .creation .submit { + position: absolute; + top: 10px; + right: 20px; + } + .model .chart { + width: 40%; + padding: 10px; + height: 100%; + border-left: 10px solid #f3f3f3; + } + + +
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html new file mode 100644 index 00000000..47e22fe9 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.html @@ -0,0 +1,49 @@ +<div class="model creation-model"> + <!-- Create data --> + <div class="top-title"> + <h3 class="title fl">{{templateParameters.type}} {{"i18nTextDefine_InstanceCreation" | translate}} </h3> + <div class="fl" style="width: 20%"> + <button class="submit" [disabled]="!mdons_creation_form.valid" nz-button (click)="createService()"> + <span> {{"i18nTextDefine_Create" | translate}} </span> + </button> + <button class="back" nz-button (click)="goback()"></button> + </div> + </div> +<div [formGroup]="mdons_creation_form"> +<div class="e2ecreate-content"> + <div class="creation fl" style="width:95%"> + <div *ngIf="mdonsModelShow" class="baseparms clearfix"> + <div class="vnf-box form-group" *ngIf="templateParameters.inputs.length>0"> + <h3>{{"i18nTextDefine_templateInputs" | translate}}</h3> + <ul > + <li *ngFor="let parameter of templateParameters.inputs; let i = index;"> + <span *ngIf="parameter.isRequired.includes('true')" style="color: red;width:10px;min-width:1px;">*</span> + <span title="{{parameter.name}}">{{parameter.name}}:</span> + <input *ngIf="!(parameter.name.includes('uni_id') || parameter.name.includes('enni_id') || parameter.name.includes('date'))" formControlName="{{parameter.name}}" nz-input [(ngModel)]="parameter.value" style="margin-left: auto;"> + <!--<pre>{{mdons_creation_form.get(parameter.name).valid}}</pre>--> + <input style="margin-left: 2px;" *ngIf="parameter.name.includes('date')" type="date" formControlName="{{parameter.name}}" nz-input [(ngModel)]="parameter.value" placeholder="yyyy-MM-dd"/> + <span style="color: red;width:10px;" *ngIf="mdons_creation_form.controls[parameter.name].errors?.required && (mdons_creation_form.controls[parameter.name].dirty || mdons_creation_form.controls[parameter.name].touched)">Required</span> + <nz-dropdown class = "customclass" [nzTrigger]="'click'" [nzPlacement]="'bottomLeft'" *ngIf="(parameter.name.includes('uni_id') || parameter.name.includes('enni_id'))"> + <button style="width: 300px;" nz-button nz-dropdown><span *ngIf="parameter.name.includes('uni_id')">{{uniIdSelected.id}}</span><span *ngIf="parameter.name.includes('enni_id')">{{enniIdSelected.id}}</span> <i class="anticon anticon-down"></i> + </button> + <ul nz-menu *ngIf="parameter.name.includes('uni_id')" class="dropDownScroller"> + <li nz-menu-item (click)="chooseUni(item)" *ngFor="let item of uniList" > + <a title="{{item.id}}">{{item.id}}</a> + </li> + </ul> + <ul nz-menu *ngIf="parameter.name.includes('enni_id')" class="dropDownScroller" > + <li nz-menu-item (click)="chooseEnni(item)" *ngFor="let item of enniList" > + <a title="{{item.id}}">{{item.id}}</a> + </li> + </ul> + </nz-dropdown> + </li> + </ul> + </div> + </div> + </div> + + </div> + </div> +</div> + diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.less b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.less new file mode 100644 index 00000000..5084bb99 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.less @@ -0,0 +1,175 @@ +/* + 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; +} +.dropDownScroller{ + max-height: 250px; + overflow: auto; + } +.astrixRequired{ + color: red; + width:1%; + min-width:1px; +} + +.customclass .anticon-down { + float: right +} + +.model { + background-color: #F7F8FC; + height: 100%; + overflow-y: auto; + position: relative; + .top-title{ + width: 100%; + padding: 20px; + position: relative; + display: inline-block; + } + .submit{ + position: absolute; + width:84px; + height: 35px; + top: 10px; + right: 85px; + color: #fff; + font-size: 18px; + background:linear-gradient(90deg,rgba(99,194,246,1) 0%,rgba(62,155,255,1) 100%) !important; + border-radius:4px; + border: none!important; + border-color:rgba(0,0,0,0)!important; + } + .submit:hover{ + background:linear-gradient(90deg, rgb(103, 207, 246) 0%, rgb(69, 175, 255) 100%) !important; + border: none; + } + .back,.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; + } + .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; + } + .e2ecreate-content{ + position: relative; + width: 98%; + height: 100%; + margin-left: 30px; + box-shadow:0px 10px 15px 2px rgba(222,222,222,0.5); + background: #fff; + border-radius:2px; + } + .creation{ + position: relative; + width: 58%; + height: 100%; + overflow-y: auto; + padding: 20px; + background: #fff; + .baseparms { + h3,h4{ + color: #06A7E2; + width: 96%; + height: 40px; + line-height: 35px; + font-size: 18px; + font-weight: 500; + margin: 10px auto; + 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; + } + h4 { + font: 700 16px "Arial"; + margin-left: 25px; + } + .vnf-box{ + clear: both; + } + ul{ + margin-left: 30px; + } + ul li { + margin: 10px 0; + width: 42%; + margin-right: 5%; + float: left; + text-align: left; + span { + display: inline-block; + width: 30%; + min-width: 80px; + font: 700 14px "Arial"; + overflow: hidden; + text-align: left; + word-break: break-all; + vertical-align: top; + } + input,nz-select{ + width: 49%; + margin-left:3% + } + } + } + } + .dividing-line{ + width: 0; + height: 85%; + margin: 4% 0; + border-left: 1px #cccccc dashed; + } + .chart { + width: 38%; + padding: 10px; + height: 95%; + margin: 0 auto; + #createChart{ + height: 100%; + width: 100%; + } + } +} diff --git a/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts new file mode 100644 index 00000000..3123bfc8 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/services-list/mdons-creation/mdons-creation.component.ts @@ -0,0 +1,160 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { ServiceListService } from '../../../../core/services/serviceList.service'; +import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms'; + +import * as d3 from 'd3'; + +@Component({ + selector: 'app-mdons-creation', + templateUrl: './mdons-creation.component.html', + styleUrls: ['./mdons-creation.component.less'] +}) +export class MdonsCreationComponent implements OnInit { + mdons_creation_form: FormGroup; + + uniList= []; + uniIdSelected = { id: null }; + enniList= []; + enniIdSelected = { id: null }; + templateParameters = { + invariantUUID: "", + uuid: "", + name: "", + type: "", + version: "", + description: "", + category: "", + subcategory: "", + customizationUuid: "", + inputs: [], + nestedTemplates: [] + }; + + // mdons requstbody + service = { + name: "", // <== service instance name + description: "", + serviceInvariantUuid: "", + serviceUuid: "", // uuid ?? + globalSubscriberId: "", // "customer.id", + serviceType: "", // "serviceType.value", + parameters: { + locationConstraints: [ + + ], + resources: [], + requestInputs: { + name:"", + customer:"", + service_provider:"", + due_date:"", + end_date:"", + uni_id:"", + enni_id:"" + } + } + } + + mdonsModelShow : boolean = false; + constructor(private myhttp: ServiceListService,private fb: FormBuilder) { + + + } + @Input() createParams; + @Input() mdons_temParametersContent; + @Output() mdonsCloseCreate = new EventEmitter(); + + ngOnInit() { + this.getalluni(); + this.getallenni(); + this.templateParameters=this.mdons_temParametersContent; + this.mdonsModelShow = true; + this.mdons_creation_form = this.fb.group({}); + this.buildFormArrayOfGroupsFromArr(); + console.log("Controls "+this.mdons_creation_form.controls['terms']) + } + + buildFormArrayOfGroupsFromArr() { + for(let i of this.templateParameters.inputs){ + if(i.isRequired === "true" && !(i.name.includes('uni_id') || i.name.includes('enni_id'))){ + this.mdons_creation_form.addControl(i.name, this.fb.control('', [Validators.required])) + } else { + this.mdons_creation_form.addControl(i.name, this.fb.control('')) + } + } + } + + getalluni() { + this.myhttp.getAllNI("UNI") + .subscribe((data) => { + this.uniList = data.map(item => ({id: item }) ); + if(data.length !== 0){ + this.uniIdSelected = this.uniList[0]; + } + }) +} + +getallenni() { + this.myhttp.getAllNI("NNI") + .subscribe((data) => { + this.enniList = data.map(item => ({id: item }) ); + if(data.length !== 0){ + this.enniIdSelected = this.enniList[0]; + } + }) +} + +chooseUni(item = this.uniIdSelected){ + if(this.uniIdSelected !== item) this.uniIdSelected = item; +} + +chooseEnni(item = this.enniIdSelected){ + if(this.enniIdSelected !== item) this.enniIdSelected = item; +} + + goback() { + this.mdonsCloseCreate.emit(); + } + + + + createService() { + if (this.mdons_creation_form.invalid) { + return; + } else { + this.service.serviceInvariantUuid = this.templateParameters.invariantUUID; + this.service.name = this.templateParameters.name; + this.service.description = this.templateParameters.description; + this.service.serviceUuid = this.templateParameters.uuid; + this.service.globalSubscriberId = this.createParams.commonParams.customer.id; + this.service.serviceType = this.createParams.commonParams.serviceType.name; + + this.templateParameters.inputs.forEach((ipnut) => { + this.service.parameters.requestInputs[ipnut.name] = ipnut.value == undefined ? ipnut.defaultValue : ipnut.value; + if(ipnut.name.includes('uni_id')) { + this.service.parameters.requestInputs[ipnut.name] = this.uniIdSelected.id == undefined ? ipnut.defaultValue : this.uniIdSelected.id; + } + if(ipnut.name.includes('enni_id')) { + this.service.parameters.requestInputs[ipnut.name] = this.enniIdSelected.id == undefined ? ipnut.defaultValue : this.enniIdSelected.id; + } + if(ipnut.name==='name') { + this.service.name = ipnut.value == undefined ? ipnut.defaultValue : ipnut.value; + } + }) + + console.log(this.service) + this.mdonsCloseCreate.emit({ service: this.service }); + } + } + + markFormTouched(group: FormGroup | FormArray) { + Object.keys(group.controls).forEach((key: string) => { + const control = group.controls[key]; + if (control instanceof FormGroup || control instanceof FormArray) { control.markAsTouched(); this.markFormTouched(control); } + else { control.markAsTouched(); }; + }); + }; + + + +}
\ No newline at end of file |