diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services')
9 files changed, 416 insertions, 152 deletions
diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts index 78d7195e..6409f008 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/business-order/business-order.component.ts @@ -19,17 +19,26 @@ export class BusinessOrderComponent implements OnInit { ngOnInit() {} ngOnChanges() { - this.AreaFormatting(); + let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"]; + if (this.modelParams && this.showModel) { + this.slicing_order_info = {...this.modelParams}; + if (this.slicing_order_info.coverageArea) { + areaList = []; + areaList.push(this.slicing_order_info.coverageArea.split(" ").join(";")); + } + } + this.AreaFormatting(areaList); } - detailFn(flag){ + detailFn(flag){ COMMUNICATION_FORM_ITEMS.forEach((item, index) => { - if(item.key=='coverageAreaNumber'){ - item["coverflag"] = flag == true ? false:true - } + if(item.key=='coverageAreaNumber'){ + item["coverflag"] = flag == true ? false:true + } }) } - @Input() showModel: boolean; + @Input() showModel: boolean; + @Input() modelParams: any; @Output() cancel = new EventEmitter<boolean>(); comunicationFormItems = COMMUNICATION_FORM_ITEMS; slicing_order_info = { @@ -47,9 +56,8 @@ export class BusinessOrderComponent implements OnInit { validateRulesShow: any[] = []; rulesText: any[] = []; areaLevel: number = 4; - masktext: string = MASKTEXT ; - AreaFormatting(): void { - let areaList = ["Beijing;Beijing;Haidian District;Wanshoulu Street"]; + masktext: string = MASKTEXT ; + AreaFormatting(areaList): void { this.areaList = areaList.map((item: any) => { let arr = item.split(";"); item = arr.map((it, index) => { diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html index 6b43a8af..f229d7cf 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.html @@ -8,6 +8,7 @@ </nz-select> </div> <button nz-button nzType="primary" class="buy-button" (click)="OrderModelShow()">Create</button> + <button nz-button nzType="primary" class="buy-button" (click)="inputOrderModelShow()">Smart Create</button> </div> <div class="slicing-resource-table-list"> <nz-table #basicTable [nzData]="listOfData" [nzFrontPagination]="false" nzShowSizeChanger @@ -68,5 +69,6 @@ </tbody> </nz-table> </div> - <app-business-order [showModel]="businessOrderShow" (cancel)="orderModelClose($event)"></app-business-order> + <app-input-business-order [showModel]="inputBusinessOrderShow" (modalOpreation)="inputOrderModelClose($event)"></app-input-business-order> + <app-business-order [modelParams]="orderForm" [showModel]="businessOrderShow" (cancel)="orderModelClose($event)"></app-business-order> </div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts index a0a96b3f..6eb5e936 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/csmf-slicing-business-management.component.ts @@ -47,7 +47,9 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit { statusOptions: any[] = BUSINESS_STATUS; progressingTimer: any[] = []; terminateStart: any[] = []; - businessOrderShow: boolean = false; + businessOrderShow: boolean = false; + inputBusinessOrderShow: boolean = false; + orderForm: any; getCSMFBusinessList(): void { this.loading = true; // this.listOfData = []; //solve the problem of blank screen after each operation @@ -232,10 +234,22 @@ export class CsmfSlicingBusinessManagementComponent implements OnInit { } OrderModelShow(): void { - this.businessOrderShow = true; + this.orderForm = null; + this.businessOrderShow = true; } orderModelClose($event: any): void { - this.businessOrderShow = $event; - this.getCSMFBusinessList(); - } + this.businessOrderShow = $event; + this.getCSMFBusinessList(); + } + inputOrderModelShow(): void { + this.inputBusinessOrderShow = true; + } + inputOrderModelClose($event: any): void { + this.inputBusinessOrderShow = false; + if ($event.cancel) { + return; + } + this.orderForm = $event.param; + this.businessOrderShow = true; + } } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.html b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.html new file mode 100644 index 00000000..586aa6fb --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.html @@ -0,0 +1,38 @@ +<nz-spin nzTip='Loading...' [nzSpinning]="isSpinning"> + <nz-modal [(nzVisible)]="showModel" nzTitle="Communication Service Message" (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" nzWidth="450px" nzHeight="600px"> + <div class="subnet_params_container"> + <nz-radio-group [(ngModel)]="radioValue"> + <label nz-radio nzValue="text">Text Input</label> + <label nz-radio nzValue="audio">Audio Input</label> + </nz-radio-group> + <form nz-form *ngIf='radioValue === "text"' class='text-form-class'> + <nz-form-item> + <nz-form-control [nzSpan]="24"> + <textarea [id]="communicationMessage" nz-tooltip + [ngClass]="{'error-input-border':validateRulesShow[0] === true}" nz-input + placeholder="Please input communicationMessage" [nzAutosize]="{ minRows: 6, maxRows: 6 }" + [(ngModel)]="communicationMessage" name="communicationMessage" + (blur)="this.Util.validator('communicationMessage','communicationMessage',communicationMessage,0,rulesText,validateRulesShow)"> + </textarea> + <nz-form-explain *ngIf="validateRulesShow[0]" class="validateRules">{{rulesText[0]}} + </nz-form-explain> + </nz-form-control> + </nz-form-item> + </form> + <div *ngIf='radioValue === "audio"' class="audio_class"> + <div class="recode_class"> + <span>Sound Recording : </span> + <i *ngIf='!isPlay' class="anticon anticon-play-circle-o audioBtn" (click)="startAudio()"></i> + <i *ngIf='isPlay' class="anticon anticon-pause-circle-o audioBtn" (click)="stopAudio()"></i> + + </div> + <div class="play_class"> + <span>Audition : </span> + <button nz-button nzType="default" [disabled]='isDisable' (click)="playAudio()">Click To Play</button> + <audio class="audio-node" id="audio_id" autoplay></audio> + </div> + </div> + </div> + </nz-modal> +</nz-spin> diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.less b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.less new file mode 100644 index 00000000..50d3af28 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.less @@ -0,0 +1,53 @@ +.subnet_params_container{ + padding-left: 3%; + .subnet_params_area{ + margin-right: 5px; + } + .ant-btn-icon-only{ + padding: 0 5px !important; + } + .subnet_params_button{ + margin-top: 7px; + margin-left: 10px; + } + .subnet_params_icon{ + font-size: 14px; + } + .audio_class{ + height: 130px; + .recode_class{ + margin-top: 30px; + position: relative; + span{ + font-size: 17px; + } + .audioBtn{ + font-size: 20px; + position: absolute; + top: 5px; + left: 142px; + } + .anticon-pause-circle-o{ + color: red; + } + } + .play_class{ + font-size: 17px; + margin-top: 20px; + button { + margin-left: 2px; + } + } + } +} +.ant-form-item { + margin-top: 20px; + margin-bottom: -5px; +} + +.validateRules{ + color: red; +} +.error-input-border{ + border-color: red!important; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.spec.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.spec.ts new file mode 100644 index 00000000..ffdd130f --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InputBusinessOrderComponent } from './input-business-order.component'; + +describe('InputBusinessOrderComponent', () => { + let component: InputBusinessOrderComponent; + let fixture: ComponentFixture<InputBusinessOrderComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InputBusinessOrderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InputBusinessOrderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.ts new file mode 100644 index 00000000..94bccfe5 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/slicing-management/csmf-slicing-business-management/input-business-order/input-business-order.component.ts @@ -0,0 +1,109 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { Util } from '../../../../../shared/utils/utils'; +import { onboardService } from '../../../../../core/services/onboard.service'; +import { Recorder } from '../../../../../shared/utils/recorder'; + +@Component({ + selector: 'app-input-business-order', + templateUrl: './input-business-order.component.html', + styleUrls: ['./input-business-order.component.less'] +}) +export class InputBusinessOrderComponent implements OnInit { + + constructor( + private Util: Util, + private Recorder: Recorder, + private myhttp: onboardService, + private msg: NzMessageService + ) { } + + @Input() showModel: boolean; + @Output() modalOpreation = new EventEmitter(); + isSpinning: boolean = false; + communicationMessage: String = ""; + validateRulesShow: any[] = []; + rulesText: any[] = []; + radioValue: String = 'text'; + isPlay: boolean = false; + clickRepeat: boolean = false; + isDisable: boolean = true; + ngOnInit() { + this.validateRulesShow = []; + this.rulesText = []; + this.communicationMessage = ''; + } + + ngOnChange() { + } + + handleCancel(): void { + this.showModel = false; + this.communicationMessage = ""; + this.modalOpreation.emit({ "cancel": true }); + } + + handleOk(): void { + if (this.clickRepeat) { + return; + } + this.clickRepeat = true; + if (this.radioValue === "text") { + this.submitFormMessage(); + return; + } + this.clickRepeat = false; + this.communicationMessage = ""; + this.showModel = false; + let defaultParams = { + coverageArea: "Beijing Beijing Haiding Wanshoulu", + expDataRateDL: "1000", + expDataRateUL: "1000", + latency: "10", + maxNumberofUEs: "10", + name: "exclusive slicing service", + resourceSharingLevel: "shared", + uEMobilityLevel: "stationary" + } + this.modalOpreation.emit({ "cancel": false, "param": defaultParams }); + } + submitFormMessage(): void { + this.Util.validator("communicationMessage", "communicationMessage", this.communicationMessage, 0, this.rulesText, this.validateRulesShow); + if (this.validateRulesShow.indexOf(true) > -1) { + this.clickRepeat = false; + return + } + let params = { + "title": "predict", + "text": this.communicationMessage + }; + this.myhttp["analysisInputText"](params) + .subscribe((data) => { + this.clickRepeat = false; + if (data === 0) { + return; + } + let orderForm = { ...data }; + this.communicationMessage = ""; + this.showModel = false; + this.modalOpreation.emit({ "cancel": false, "param": orderForm }); + }, (err) => { + this.clickRepeat = false; + this.msg.error(`Error: Request failed with status code ${err.status}`); + }) + } + startAudio(): void { + this.isPlay = true; + this.isDisable = true; + this.Recorder.beforeStartRecord(); + } + stopAudio(): void { + this.isPlay = false; + this.isDisable = false; + this.Recorder.stopRecord(); + } + playAudio(): void { + let audio = document.querySelector('audio'); + audio["src"] = this.Recorder.playRecord(); + } +} diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts index 5deb91b7..dd4c8126 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nsi-management/nsi-model/nsi-model.component.ts @@ -1,66 +1,67 @@ -import {Component, Input, OnInit} from '@angular/core'; -import {NzModalService, NzMessageService} from "ng-zorro-antd"; -import {SlicingTaskServices} from '.././../../../../../core/services/slicingTaskServices'; -import { SlicingBusinessModelComponent } from '../../slicing-business-management/slicing-business-model/slicing-business-model.component'; -import { NssiModelComponent } from '../../nssi-management/nssi-model/nssi-model.component'; +import { Component, Input, OnInit } from "@angular/core"; +import { NzModalService, NzMessageService } from "ng-zorro-antd"; +import { SlicingTaskServices } from ".././../../../../../core/services/slicingTaskServices"; +import { SlicingBusinessModelComponent } from "../../slicing-business-management/slicing-business-model/slicing-business-model.component"; +import { NssiModelComponent } from "../../nssi-management/nssi-model/nssi-model.component"; @Component({ - selector: 'app-nsi-model', - templateUrl: './nsi-model.component.html', - styleUrls: ['./nsi-model.component.less'] + selector: "app-nsi-model", + templateUrl: "./nsi-model.component.html", + styleUrls: ["./nsi-model.component.less"], }) export class NsiModelComponent implements OnInit { - - constructor( - private myhttp: SlicingTaskServices, - private modalService: NzModalService, - private message: NzMessageService - ) { - } - @Input() nsiId; - businessList: any[]; - nssiList: any[]; - isSpinning: boolean = true; - ngOnInit() { - this.getNsiDetail() - } - getNsiDetail() { - this.myhttp.getSlicingNsiDetail(this.nsiId).then(res => { - this.isSpinning = false; - const { result_body: {hosted_business_list,included_nssi_list} } = res; - this.businessList = hosted_business_list.map((item)=>{ - if(item.service_instance_id !==null){ - return item - } - }); - this.nssiList = included_nssi_list.map((item)=>{ - if(item.service_instance_id !==null){ - return item - } - }); - }) - } - showBusinessDetail(data){ - this.modalService.create({ - nzContent:SlicingBusinessModelComponent, - nzTitle:"Detail", - nzWidth:"70%", - nzOkText: null, - nzCancelText: null, - nzComponentParams:{ - businessId:data.service_instance_id - } - }); - } - showNssiDetail(data){ - this.modalService.create({ - nzContent:NssiModelComponent, - nzTitle:"Detail", - nzWidth:"70%", - nzOkText: null, - nzCancelText: null, - nzComponentParams:{ - nssiId:data.service_instance_id - } - }); - } + constructor( + private myhttp: SlicingTaskServices, + private modalService: NzModalService, + private message: NzMessageService + ) {} + @Input() nsiId; + businessList: any[]; + nssiList: any[]; + isSpinning: boolean = true; + ngOnInit() { + this.getNsiDetail(); + } + getNsiDetail() { + this.myhttp.getSlicingNsiDetail(this.nsiId).then((res) => { + this.isSpinning = false; + const { + result_body: { hosted_business_list, included_nssi_list }, + } = res; + this.businessList = hosted_business_list.map((item) => { + if (item.service_instance_id !== null) { + return item; + } + }); + this.nssiList = included_nssi_list.map((item) => { + if (item.service_instance_id !== null) { + return item; + } + }); + }); + } + showBusinessDetail(data) { + this.modalService.create({ + nzContent: SlicingBusinessModelComponent, + nzTitle: "Detail", + nzWidth: "70%", + nzOkText: null, + nzCancelText: null, + nzComponentParams: { + businessId: data.service_instance_id, + outerData: data, + }, + }); + } + showNssiDetail(data) { + this.modalService.create({ + nzContent: NssiModelComponent, + nzTitle: "Detail", + nzWidth: "70%", + nzOkText: null, + nzCancelText: null, + nzComponentParams: { + nssiId: data.service_instance_id, + }, + }); + } } diff --git a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts index 5fe303b0..6e08f955 100644 --- a/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts +++ b/usecaseui-portal/src/app/views/services/slicing-management/slicing-resource-management/nssi-management/nssi-table/nssi-table.component.ts @@ -1,87 +1,101 @@ -import {Component, Input, OnInit,SimpleChanges} from '@angular/core'; -import {BUSINESS_STATUS} from '../../../../../../../constants/constants'; -import {SlicingTaskServices} from "../../../../../../core/services/slicingTaskServices"; -import {NzModalService, NzMessageService} from 'ng-zorro-antd'; -import {NssiModelComponent} from "../nssi-model/nssi-model.component"; +import { Component, Input, OnInit, SimpleChanges } from "@angular/core"; +import { BUSINESS_STATUS } from "../../../../../../../constants/constants"; +import { SlicingTaskServices } from "../../../../../../core/services/slicingTaskServices"; +import { NzModalService, NzMessageService } from "ng-zorro-antd"; +import { NssiModelComponent } from "../nssi-model/nssi-model.component"; @Component({ - selector: 'app-nssi-table', - templateUrl: './nssi-table.component.html', - styleUrls: ['./nssi-table.component.less'] + selector: "app-nssi-table", + templateUrl: "./nssi-table.component.html", + styleUrls: ["./nssi-table.component.less"], }) export class NssiTableComponent implements OnInit { + constructor( + private myhttp: SlicingTaskServices, + private modalService: NzModalService, + private message: NzMessageService + ) {} - constructor( - private myhttp: SlicingTaskServices, - private modalService: NzModalService, - private message: NzMessageService - ) { - } + @Input() currentTabName; - @Input() currentTabName; + ngOnChanges(changes: SimpleChanges) { + if ( + changes.currentTabName.currentValue === + "Slicing Subnet Instance Management" + ) { + this.getNssiList(); + } + } + ngOnInit() {} - ngOnChanges(changes: SimpleChanges) { - if (changes.currentTabName.currentValue === 'Slicing Subnet Instance Management') { - this.getNssiList() - } - } - ngOnInit() {} + selectedValue: string = BUSINESS_STATUS[0]; + listOfData: any[] = []; + pageIndex: number = 1; + pageSize: number = 10; + total: number = 0; + loading = false; + isSelect: boolean = false; + statusOptions: any[] = BUSINESS_STATUS; - selectedValue: string = BUSINESS_STATUS[0]; - listOfData: any[] = []; - pageIndex: number = 1; - pageSize: number = 10; - total: number = 0; - loading = false; - isSelect: boolean = false; - statusOptions: any[] = BUSINESS_STATUS; + getNssiList(): void { + this.loading = true; + this.isSelect = false; + this.listOfData = []; + let paramsObj = { + pageNo: this.pageIndex, + pageSize: this.pageSize, + }; + if (this.selectedValue !== BUSINESS_STATUS[0]) { + paramsObj[ + "instanceStatus" + ] = this.selectedValue.toLocaleLowerCase(); + this.isSelect = true; + } + let getSlicingNssiListFailedCallback = () => { + this.loading = false; + }; + this.myhttp + .getSlicingNssiList( + paramsObj, + this.isSelect, + getSlicingNssiListFailedCallback + ) + .then((res) => { + const { + result_body: { nssi_service_instances, record_number }, + } = res; + this.loading = false; + this.total = record_number; + this.loading = false; + if ( + nssi_service_instances !== null && + nssi_service_instances.length > 0 + ) { + this.listOfData = nssi_service_instances; + } + }); + } - getNssiList(): void { - this.loading = true; - this.isSelect = false; - this.listOfData = []; - let paramsObj = { - pageNo: this.pageIndex, - pageSize: this.pageSize - }; - if (this.selectedValue !== BUSINESS_STATUS[0]) { - paramsObj["instanceStatus"] = this.selectedValue.toLocaleLowerCase(); - this.isSelect = true; - } - let getSlicingNssiListFailedCallback = () => { - this.loading = false; - } - this.myhttp.getSlicingNssiList(paramsObj, this.isSelect, getSlicingNssiListFailedCallback).then(res => { - const { result_body: {nssi_service_instances, record_number} } = res; - this.loading = false; - this.total = record_number; - this.loading = false; - if (nssi_service_instances !== null && nssi_service_instances.length > 0) { - this.listOfData = nssi_service_instances; - } - }) - } + getListOfProcessingStatus() { + this.pageIndex = 1; + this.pageSize = 10; + this.getNssiList(); + } - getListOfProcessingStatus() { - this.pageIndex = 1; - this.pageSize = 10; - this.getNssiList(); - } + searchData(reset: boolean = false) { + this.getNssiList(); + } - searchData(reset: boolean = false) { - this.getNssiList(); - } - - showdetail(data) { - const nssiModal = this.modalService.create({ - nzTitle: "Detail", - nzContent: NssiModelComponent, - nzWidth: "70%", - nzOkText: null, - nzCancelText: null, - nzComponentParams: { - nssiId: data.service_instance_id - } - }) - } + showdetail(data) { + const nssiModal = this.modalService.create({ + nzTitle: "Detail", + nzContent: NssiModelComponent, + nzWidth: "70%", + nzOkText: null, + nzCancelText: null, + nzComponentParams: { + nssiId: data.service_instance_id, + }, + }); + } } |