diff options
author | He Keguang <hekeguang@chinamobile.com> | 2021-09-16 07:29:40 +0000 |
---|---|---|
committer | Gerrit Code Review <gerrit@onap.org> | 2021-09-16 07:29:40 +0000 |
commit | ddf7473db8cdd6a526e23b2ec32412a2bf4275c2 (patch) | |
tree | 0427b63350a2ae203324afd972d6587ea1ca0727 /usecaseui-portal/src/app/views | |
parent | 06d98cb853ae5d47d5cbe3d0a1a585194de5aaf9 (diff) | |
parent | c437d5360c75c1af5417c3681235a0f8015a9a85 (diff) |
Merge "feat: add intent based service"
Diffstat (limited to 'usecaseui-portal/src/app/views')
26 files changed, 1394 insertions, 41 deletions
diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html new file mode 100644 index 00000000..a07f948c --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.html @@ -0,0 +1,39 @@ +<div class="main"> + <div class="divCls"> + <table> + <tr> + <td> + <nz-form-label class= "colm-s-1 lblCls" [nzSm]="6" [nzXs]="24" nzRequired nzFor="capacity">FinishedInstance</nz-form-label> + </td> + <td> + <nz-select + id="subscriptionType" + class= "colm-s-2" + [(ngModel)]="instanceId" + (ngModelChange)="queryInstancePerformance($event)" + nzAllowClear + > + <nz-option + *ngFor="let option of instanceLists" + [nzValue]="option.instanceId" + [nzLabel]="option.name" + ></nz-option> + </nz-select> + </td> + </tr> + </table> + </div> + <div class="flexDiv"> + <div class="topocontainer"> + <div + id="chartLine" + echarts + [initOpts]="initOpts" + [options]="lineOption" + [merge]="updateOption" + (chartInit)="chartInit($event)"> + Line Chart + </div> + </div> + </div> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less new file mode 100644 index 00000000..f7db5523 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.less @@ -0,0 +1,99 @@ +#mynetwork { + width: 100%; + height: calc(~"100vh - 300px"); + border: 1px solid lightgray; + margin-right: 40px; + // background-color: #333333; +} + + +:host ::ng-deep .ant-form-item-label label { + color: var(--on-primary) ; + background-color:var(--primary); +} + +:host ::ng-deep .ant-select-dropdown-menu-item{ + color: var(--on-primary) ; + background-color:var(--primary); + +} +:host ::ng-deep .ant-select-selection__rendered { + background-color:var(--primary); + +} +:host ::ng-deep .ant-select-selection--single { + background-color:var(--primary); + +} + +:host ::ng-deep .ant-select-selection-selected-value { + + color: var(--on-primary) !important ; + +} + +@media only screen and (min-width: 600px) { +.flexDiv { + display: flex!important; +} +} +@media only screen and (min-width: 768px) { +.flexDiv { + display: flex!important; +} +} + +.font-size{ + font-size: 17px; +} +.font-weight{ + font-weight:bold; +} + +.refreshBtn{ + right: 580px; + position: absolute; + top: 35px; + z-index: 1 +} + +:host ::ng-deep .ant-form-item-label label { + color: var(--on-primary) ; +} + +:host ::ng-deep .ant-select-selection__placeholder +{ + color: var(--on-primary); +} + +:host ::ng-deep .ant-select-arrow { + + + color: var(--on-primary); + font-size: 12px; +} + + +.popup-table-row +{ + color: aqua; +} + +.divCls{ + display: inline-block; + width: 100%; + padding-bottom: 10px; + color : var(--on-lables) ; + } + + .main { + // padding-left:80px + } + .ant-col-sm-6 { + width:100%; + } + + #subscriptionType, #serviceInstance { + width: 250px; + } + diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts new file mode 100644 index 00000000..8da138bf --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-facps-service/monitor-facps-service.component.ts @@ -0,0 +1,199 @@ +import { HttpClient } from "@angular/common/http"; +import { Component, OnInit } from "@angular/core"; +import { NzMessageService } from "ng-zorro-antd"; +import { intentBaseService } from "../../../../core/services/intentBase.service"; + +@Component({ + selector: "app-monitor-facps-service", + templateUrl: "./monitor-facps-service.component.html", + styleUrls: ["./monitor-facps-service.component.less"], +}) +export class MonitorFacpsServiceComponent implements OnInit { + + constructor( + private nzMessage: NzMessageService, + private myHttp: intentBaseService, + private http: HttpClient + ) {} + + selectedSubscriptionType: string = ""; + selectedServiceInstance: string = ""; + selectedTopology: string = ""; + instanceId: string = ""; + chartData: any = { + xAxis: { + data: [ + "2018-09-10 ", + "2018-09-11", + "2018-09-12", + "2018-09-13", + "2018-09-14", + "2018-09-15", + "2018-09-16", + "2018-09-17", + "2018-09-18", + "2018-09-19", + "2018-09-20", + "2018-09-21", + "2018-09-22" + ] + }, + series: [ + { + data: [ + 30, + 45, + 34, + 35, + 43, + 56, + 36, + 53, + 42, + 45, + 44, + 35, + 32 + ] + }, + { + data: [ + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60, + 60 + ] + } + ] + }; + initData: any = { + height: 320, + option: { + legend: { bottom: "0px", data: ["RATE", "MAXRATE"] }, + xAxis: { data: [] }, + series: [ + { + name: "RATE", + type: "line", + itemStyle: { color: "#70ACEC" }, + data: [], + }, + { + name: 'MAXRATE', + type: 'line', + step: 'end', + itemStyle: { + color: "#3BCD79" + }, + data: [] + } + ], + }, + }; + + initOpts: any; + lineOption: any; + chartIntance: any; + updateOption: any; + + instanceLists: any[] = []; + + ngOnInit() { + this.getFinishedInstanceInfo(); + this.initOpts = { + renderer: "canvas", + height: this.initData.height, + width: this.initData.width, + }; + this.lineOption = { + tooltip: this.initData.option.tooltip, + icon: "circle", + legend: this.initData.option.legend, + dataZoom: this.initData.option.dataZoom, + grid: { + left: "0%", + right: "3%", + top: "10%", + bottom: "18%", + containLabel: true, + }, + xAxis: { + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + color: "#3C4F8C", + }, + data: this.initData.option.xAxis.data, + }, + yAxis: { + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + color: "#3C4F8C", + }, + splitLine: { + lineStyle: { + type: "dashed", + }, + }, + }, + series: this.initData.option.series, + }; + } + + chartInit(chart) { + this.chartIntance = chart; + } + + getFinishedInstanceInfo() { + this.myHttp.getFinishedInstanceInfo().subscribe( + (response) => { + const { code, message, data } = response; + if (code !== 200) { + this.nzMessage.error(message); + return; + } + this.instanceLists = [...data]; + }, + (err) => { + console.log(err); + } + ) + } + + queryInstancePerformance(instanceId) { + this.myHttp.queryInstancePerformanceData({ instanceId}).subscribe( + (response) => { + const { code, message, data } = response; + if (code !== 200) { + this.nzMessage.error(message); + return; + } + if(this.chartIntance){ + this.updateOption = data; + } + }, + (err) => { + console.log(err); + } + ) + } + +} diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html new file mode 100644 index 00000000..554d8887 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.html @@ -0,0 +1,5 @@ +<nz-tabset class="slicing"> + <nz-tab [nzTitle]="'i18nTextDefine_monitorService' | translate"> + <app-monitor-facps-service></app-monitor-facps-service> + </nz-tab> +</nz-tabset>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.less diff --git a/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts new file mode 100644 index 00000000..39fd95e8 --- /dev/null +++ b/usecaseui-portal/src/app/views/fcaps/monitor-management-service/monitor-management-service.component.ts @@ -0,0 +1,18 @@ +import { Component, HostBinding, OnInit } from '@angular/core'; +import { slideToRight } from '../../../shared/utils/animates'; + +@Component({ + selector: 'app-monitor-management-service', + templateUrl: './monitor-management-service.component.html', + styleUrls: ['./monitor-management-service.component.less'], + animations: [slideToRight] +}) +export class MonitorManagementService implements OnInit { + + @HostBinding('@routerAnimate') routerAnimateState; + + constructor() { } + + ngOnInit() { + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html new file mode 100644 index 00000000..9e7f669b --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.html @@ -0,0 +1,30 @@ +<nz-modal + [(nzVisible)]="isShowFlag" + nzTitle="NLP Model Type" + (nzOnCancel)="handleCancel()" + (nzOnOk)="handleOk()" + nzWidth="450px" + nzHeight="600px" +> + <div class="subnet_params_container"> + <form nz-form class='text-form-class'> + <nz-form-item> + <nz-form-label + [nzSpan]="7" + [nzFor]="nlpType" + > + Type + </nz-form-label> + <nz-form-control [nzSpan]="10"> + <nz-select + [name]="nlpType" + [(ngModel)]="nlpType" + > + <nz-option nzValue="nlp" nzLabel="nlp"></nz-option> + <nz-option nzValue="intent" nzLabel="intent"></nz-option> + </nz-select> + </nz-form-control> + </nz-form-item> + </form> + </div> +</nz-modal> diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less new file mode 100644 index 00000000..0cf44fad --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.less @@ -0,0 +1,56 @@ +.subnet_params_container{ + padding-left: 3%; + .text-form-class{ + margin-bottom: 20px; + } + .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/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.spec.ts new file mode 100644 index 00000000..ffdd130f --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.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/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts new file mode 100644 index 00000000..64b1973a --- /dev/null +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/nlp-upload-dialog/nlp-upload-dialog.component.ts @@ -0,0 +1,37 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { Recorder } from '../../../shared/utils/recorder'; +import { Util } from '../../../shared/utils/utils'; + +@Component({ + selector: 'app-nlp-upload-dialog', + templateUrl: './nlp-upload-dialog.component.html', + styleUrls: ['./nlp-upload-dialog.component.less'] +}) +export class NlpUploadDialogComponent implements OnInit { + + constructor( + private Util: Util, + private Recorder: Recorder, + private msg: NzMessageService + ) { } + + @Input() isShowFlag: boolean; + @Output() returnNlpType = new EventEmitter(); + nlpType: String = "nlp"; + + ngOnInit() {} + + ngOnChange() {} + + handleCancel(): void { + this.isShowFlag = false; + this.returnNlpType.emit({ "cancel": true }); + } + + handleOk(): void { + this.isShowFlag = false; + this.returnNlpType.emit({ "cancel": false, nlpType: this.nlpType }); + } + +} diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html index 34e78e60..2c7b11a5 100644 --- a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.html @@ -89,11 +89,12 @@ </thead> <thead *ngIf="currentTab === 'NLP Model Reource'"> <tr class="theadColor"> - <th nzWidth="8%"> {{"i18nTextDefine_NO" | translate}} </th> - <th nzWidth="18%"> {{"i18nTextDefine_Name" | translate}} </th> - <th nzWidth="18%"> {{"i18nTextDefine_Size" | translate}} </th> - <th nzWidth="18%"> {{"i18nTextDefine_CreateTime" | translate}} </th> - <th nzWidth="18%"> {{"i18nTextDefine_Status" | translate}} </th> + <th nzWidth="5%"> {{"i18nTextDefine_NO" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Name" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Size" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_CreateTime" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Status" | translate}} </th> + <th nzWidth="15%"> {{"i18nTextDefine_Type" | translate}} </th> <th nzWidth="20%"> {{"i18nTextDefine_Operation" | translate}} </th> </tr> </thead> @@ -150,6 +151,7 @@ <td>{{item.size}}</td> <td>{{item.createTime}}</td> <td>{{item.active ? 'Active' : 'Inactive'}}</td> + <td>{{item.type || '--'}}</td> <td> <button nz-button nzType="primary" class="buy-button" (click)="showDeleteConfirm(item.id)"> Delete @@ -163,4 +165,8 @@ </nz-table> </nz-spin> </div> +<app-nlp-upload-dialog + [isShowFlag]="nlpDialogFlag" + (returnNlpType)="receiveNlpType($event)" +></app-nlp-upload-dialog> <app-notification #notification [isServicesList]="false"></app-notification>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts index b9d74c19..ccdebc3b 100644 --- a/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts +++ b/usecaseui-portal/src/app/views/onboard-vnf-vm/onboard-vnf-vm.component.ts @@ -14,11 +14,11 @@ limitations under the License. */ import { HttpClient, HttpRequest, HttpResponse } from '@angular/common/http'; -import { Component, OnInit, HostBinding, ViewChild } from '@angular/core'; +import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; +import { NzMessageService, NzModalService, UploadFile } from 'ng-zorro-antd'; +import { filter } from 'rxjs/operators'; import { onboardService } from '../../core/services/onboard.service'; import { slideToRight } from '../../shared/utils/animates'; -import { NzMessageService, UploadFile, NzModalService } from 'ng-zorro-antd'; -import { filter } from 'rxjs/operators'; @Component({ selector: 'app-onboard-vnf-vm', @@ -38,6 +38,10 @@ export class OnboardVnfVmComponent implements OnInit { infoId: string; display: string = 'block'; + // nlp dialog + nlpDialogFlag: boolean = false; + nlpType: string = ''; + // table isSpinning: boolean = false; nsTableData: any[]; @@ -60,6 +64,20 @@ export class OnboardVnfVmComponent implements OnInit { model: '/api/usecaseui-server/v1/intent/uploadModel' }; + tabMap = { + NS: 'ns', + VNF: 'vnf', + PNF: 'pnf', + 'NLP Model Reource': 'model', + } + + currentTabApi = { + NS: 'createNetworkServiceData', + VNF: 'createVnfData', + PNF: 'createPnfData', + 'NLP Model Reource': '', + } + file: { name: string, uid: string, @@ -113,31 +131,51 @@ export class OnboardVnfVmComponent implements OnInit { beforeUpload = (file: UploadFile): boolean => { this.fileList.splice(0, 1, file); - let API: string; - if (this.currentTab === 'NS') { - API = 'createNetworkServiceData'; - } else if (this.currentTab === 'VNF') { - API = 'createVnfData'; - } else if (this.currentTab === 'PNF') { - API = 'createPnfData'; - } else { + let API: string = this.currentTabApi[this.currentTab]; + + if (!API) { return false; } - this.myhttp.getCreatensData(API, this.requestBody)//on-line + + this.myhttp.getCreatensData(API, this.requestBody) .subscribe((data) => { this.infoId = data["id"]; }, (err) => { console.log(err); - }) + }); + return false; } + onClick() { + if (this.currentTab === 'NLP Model Reource') { + this.nlpDialogFlag = true; + return; + } + this.startUploadFile(); + } + + receiveNlpType(data) { + this.nlpDialogFlag = false; + if (data.cancel) { + return; + } + this.nlpType = data.nlpType; + this.startUploadFile(); + } + // Drag and drop and click the upload button - onClick(): void { + startUploadFile(): void { this.display = 'none'; - let tab = this.currentTab === 'NS' ? 'ns' : (this.currentTab === 'VNF' ? 'vnf' : (this.currentTab === 'PNF' ? 'pnf' : 'model')); - let url = tab === "model" ? this.url[tab] : this.url[tab].replace("*_*", this.infoId); - tab === "model" ? this.handleUploadModel(url) : this.handleUpload(url); + let tab = this.tabMap[this.currentTab]; + let url; + if (tab === "model") { + url = this.url[tab]; + this.handleUploadModel(url); + return; + } + url = this.url[tab].replace("*_*", this.infoId); + this.handleUpload(url); } handleUploadModel(url: string): void { @@ -243,24 +281,36 @@ export class OnboardVnfVmComponent implements OnInit { this.isSpinning = true; //ns vfc lists this.myhttp.getOnboardTableData() - .subscribe((data) => { - this.nsTableData = data; - //ns sdc list - this.myhttp.getSDC_NSTableData() - .subscribe((data) => { - this.isSpinning = false; //loading hide - let nsData = data; - // this.NSTableData.map((nsvfc) => { nsvfc.sameid = nsData.find((nssdc) => { return nsvfc.id == nssdc.uuid }) && nsvfc.id; return nsvfc; }); - let sameData = nsData.filter((nssdc) => { return !this.nsTableData.find((nsvfc) => { return nsvfc.id == nssdc.uuid }) }); - this.nsTableData = this.nsTableData.concat(sameData); - }, (err) => { - this.msg.error(err); - this.isSpinning = false; - }) - }, (err) => { - this.msg.error(err); - this.isSpinning = false; - }) + .subscribe( + (data) => { + this.nsTableData = data; + //ns sdc list + this.myhttp.getSDC_NSTableData() + .subscribe( + (data) => { + this.isSpinning = false; //loading hide + if (!data) { + return; + } + let nsData = data; + let sameData = nsData.filter((nssdc) => { + return !this.nsTableData.find((nsvfc) => { + return nsvfc.id == nssdc.uuid + }) + }); + this.nsTableData = this.nsTableData.concat(sameData); + }, + (err) => { + this.msg.error(err); + this.isSpinning = false; + } + ) + }, + (err) => { + this.msg.error(err); + this.isSpinning = false; + } + ) } // Get the vnf list @@ -443,7 +493,6 @@ export class OnboardVnfVmComponent implements OnInit { // Actived Model Resource activedModelFile(data) { - console.log('actived model'); let url = `/api/usecaseui-server/v1/intent/activeModel?modelId=${data.id}`; this.myhttp.getOnboardTableActiveModelData(url) .subscribe((data) => { diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html new file mode 100644 index 00000000..9bb9ffa4 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.html @@ -0,0 +1,86 @@ +<nz-modal + [(nzVisible)]="cloudLeasedLineShowFlag" + nzTitle="Create Cloud Leased Line" + (nzOnCancel)="cancel()" + nzWidth="70%" + [nzFooter]="modalFooter" +> + <div class="subnet_params_container"> + <form nz-form> + <nz-form-item *ngFor="let item of comunicationFormItems; let i = index"> + <nz-form-label + [nzSpan]="7" + [nzRequired]="item.required" + [nzFor]=" item.key" + > + {{ item.title }} + </nz-form-label> + <nz-form-control [nzSpan]="10"> + <div *ngIf="item.type === 'text'">{{cloud_leased_line_info[item.key]}}</div> + <nz-tooltip + [nzTitle]="item.scoped && item.scopedText ? item.scopedText : ''" + [nzPlacement]="'right'" + [nzTrigger]="'focus'" + > + <input + nz-input + nz-tooltip + [id]="item.key" + [name]="item.key" + *ngIf="item.type === 'input'" + [(ngModel)]="cloud_leased_line_info[item.key]" + [ngClass]="{'error-input-border' : validateRulesShow[i] === true}" + [placeholder]="item.placeholder ? item.placeholder : ''" + (blur)="item.required ? this.Util.validator(item.title,item.key,cloud_leased_line_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()" + /> + </nz-tooltip> + <nz-select + [name]="item.key" + [(ngModel)]="cloud_leased_line_info[item.key]" + *ngIf="item.type === 'select'" + > + <nz-option + [nzValue]="option.key" + [nzLabel]="option.title" + *ngFor="let option of cloudPointOptions" + > + </nz-option> + </nz-select> + <div *ngIf="item.type === 'node_select_one'"> + <div> + <span>{{item.rateName}}:</span> + <input + nz-input + nz-tooltip + [id]="item.key" + [name]="item.key" + [(ngModel)]="cloud_leased_line_info[item.key].bandwidth" + [ngClass]="{'error-input-border' : validateRulesShow[i] === true}" + [placeholder]="item.placeholder ? item.placeholder : ''" + (blur)="item.required ? this.Util.validator(item.title,item.key,cloud_leased_line_info[item.key],i,rulesText,validateRulesShow) : this.Util.validator()" + /> + </div> + <div> + <span>{{item.nodeName}}:</span> + <nz-select + [name]="item.key" + [(ngModel)]="cloud_leased_line_info[item.key].name" + > + <nz-option + [nzValue]="option.key" + [nzLabel]="option.title" + *ngFor="let option of nodeLists" + > + </nz-option> + </nz-select> + </div> + </div> + </nz-form-control> + </nz-form-item> + </form> + </div> + <ng-template #modalFooter> + <button nz-button nzType="default" (click)="cancel()">Cancel</button> + <button nz-button nzType="primary" (click)="submit()" [nzLoading]="loading">OK</button> + </ng-template> +</nz-modal>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less new file mode 100644 index 00000000..09a0a168 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.less @@ -0,0 +1,40 @@ +.radio_txt { + p { + margin-bottom: 0px; + &:last-child { + margin-top: -18px; + } + } +} +.button_submit { + text-align: right; + padding-right: 306px; + .cancelBtn { + margin-right: 15px; + } +} +::ng-deep .ant-form-item-label { + text-align: left; + padding-left: 50px; +} +::ng-deep .ant-radio-button-wrapper { + padding: 0 45px; +} +::ng-deep .ant-radio-button-wrapper:hover { + color: #54657e; + border-color: none; +} +::ng-deep .ant-radio-button-wrapper-checked { + -webkit-box-shadow: -1px 0 0 0 #40a9ff; + background: #40a9ff; + border-color: #40a9ff; + color: #fff; +} +::ng-deep .ant-radio-button-wrapper-checked:hover { + -webkit-box-shadow: -1px 0 0 0 #40a9ff; + border-color: #40a9ff; + color: #fff; +} +::ng-deep .ant-radio-button-wrapper-checked:first-child { + border-color: #40a9ff; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts new file mode 100644 index 00000000..0f0afc79 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line-modal/cloud-leased-line-modal.component.ts @@ -0,0 +1,105 @@ +import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core"; +import { NzMessageService } from "ng-zorro-antd"; +import { intentBaseService } from "../../../../core/services/intentBase.service"; +import { Util } from "../../../../shared/utils/utils"; +import { COMMUNICATION_FORM_ITEMS } from "../constants"; + +@Component({ + selector: 'app-cloud-leased-line-modal', + templateUrl: './cloud-leased-line-modal.component.html', + styleUrls: ['./cloud-leased-line-modal.component.less'] +}) +export class CloudLeasedLineModalComponent implements OnInit { + + constructor( + private myHttp: intentBaseService, + private nzMessage: NzMessageService, + private Util: Util + ) {} + + @Input() modelParams: any; + @Input() cloudLeasedLineShowFlag: boolean; + @Output() cancelEmitter = new EventEmitter<boolean>(); + comunicationFormItems = COMMUNICATION_FORM_ITEMS; + validateRulesShow: any[] = []; + isLoadingOne = false; + nodeLists: any[] = []; + cloudPointOptions: any[] = []; + cloud_leased_line_info = { + name: '', + instanceId: '', + accessPointOne: { + name: '', + bandwidth: '' + }, + cloudPointName: '', + }; + + ngOnInit(): void {} + + ngOnChanges() { + if (this.cloudLeasedLineShowFlag) { + if (this.modelParams) { + this.cloud_leased_line_info = { ...this.modelParams }; + } else { + this.getInstanceId(); + } + this.queryAccessNodeInfo(); + } + } + + queryAccessNodeInfo() { + this.myHttp.queryAccessNodeInfo().subscribe( + (response) => { + console.log(response); + }, + (err) => { + console.log(err); + } + ) + } + + getInstanceId() { + this.myHttp.getInstanceId().subscribe( + (response) => { + const { code, message, data} = response; + if (code !== 200) { + this.nzMessage.error(message); + return; + } + this.cloud_leased_line_info.instanceId = data && data.instanceId; + }, + (err) => { + console.log(err); + } + ) + } + + submit(): void { + this.myHttp.createIntentInstance({ + ...this.cloud_leased_line_info + }).subscribe( + (data) => { + console.log(data); + this.cancel(); + }, + (err) => { + console.log(err); + } + ) + } + + cancel(): void { + this.cloudLeasedLineShowFlag = false + this.cloud_leased_line_info = { + name: '', + instanceId: '', + accessPointOne: { + name: '', + bandwidth: '' + }, + cloudPointName: '', + }; + this.cancelEmitter.emit(); + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html new file mode 100644 index 00000000..331eb7b0 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.html @@ -0,0 +1,99 @@ +<div> + <div nz-row> + <button + nz-button + nzType="primary" + class="buy-button" + (click)="cloudLeasedLineShow()" + > + Create + </button> + <button + nz-button + nzType="primary" + class="buy-button" + (click)="smartCloudLeasedLineShow()" + > + Smart Create + </button> + </div> + <div class="slicing-resource-table-list"> + <nz-table + #basicTable [nzData]="listOfData" + [nzFrontPagination]="false" + nzShowSizeChanger + [nzPageSizeOptions]="[5,10,15,20]" + [nzTotal]='total' + [(nzPageSize)]="pageSize" + [(nzPageIndex)]='pageIndex' + [nzLoading]="loading" + (nzPageIndexChange)="searchData()" + (nzPageSizeChange)="searchData()" + > + <thead> + <tr> + <th nzWidth="6%">No</th> + <th nzWidth="15%">Communication Service Name</th> + <th nzWidth="10%">Intent Instance ID</th> + <th nzWidth="6%">Status</th> + <th nzWidth="20%">{{"i18nTextDefine_Operationbutton" | translate}}</th> + </tr> + </thead> + <tbody> + <ng-template ngFor let-data [ngForOf]="basicTable.data" let-i="index"> + <tr> + <td>{{i+1}}</td> + <td>{{ data.name }}</td> + <td>{{ data.instanceId }}</td> + <td>{{ statusObj[data.status] }}</td> + <td> + <button + nz-button + nzType="primary" + class="buy-button" + (click)="goMonitorService()" + > + Intent Monitor + </button> + <button + *ngIf="data.status === '3'" + nz-button + nzType="primary" + class="buy-button" + (click)="activeCloudLeasedLine(data)" + > + Active + </button> + <button + *ngIf="data.status === '1'" + nz-button + nzType="primary" + class="buy-button" + (click)="inactiveCloudLeasedLine(data)" + > + Inactive + </button> + <button + nz-button + nzType="primary" + class="buy-button" + (click)="deleteCloudLeasedLine(data)" + > + Delete + </button> + </td> + </tr> + </ng-template> + </tbody> + </nz-table> + </div> + <app-smart-cloud-leased-modal + [samrtCloudLeasedLineShowFlag]="smartCloudLeasedLineShowFlag" + (resolveEmitter)="smartCloudLeasedLineClose($event)" + ></app-smart-cloud-leased-modal> + <app-cloud-leased-line-modal + [modelParams]="resolveResult" + [cloudLeasedLineShowFlag]="cloudLeasedLineShowFlag" + (cancelEmitter)="cloudLeasedLineClose()" + ></app-cloud-leased-line-modal> +</div>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less new file mode 100644 index 00000000..df2a899e --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.less @@ -0,0 +1,41 @@ +nz-select { + width: 200px; +} + +.task_status { + margin-bottom: 20px; + + span { + margin-right: 5%; + } +} + +.action-icon { + display: inline-block; + vertical-align: top; +} + +i.anticon { + cursor: pointer; + font-size: 18px; + padding: 2px 15px; + vertical-align: inherit !important; + + &:hover { + color: #147dc2; + } +} + +.cannotclick { + pointer-events: none; + color: #aaa; + opacity: 0.6; +} + +.buy-button { + float: right; + margin-right: 2%; +} +::ng-deep .ant-table-row .buy-button { + float: left; +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts new file mode 100644 index 00000000..bf046545 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/cloud-leased-line/cloud-leased-line.component.ts @@ -0,0 +1,132 @@ +import { Component, OnInit } from "@angular/core"; +import { Router } from "@angular/router"; +import { NzMessageService } from "ng-zorro-antd"; +import { intentBaseService } from "../../../../core/services/intentBase.service"; + +@Component({ + selector: 'app-cloud-leased-line', + templateUrl: './cloud-leased-line.component.html', + styleUrls: ['./cloud-leased-line.component.less'] +}) +export class CloudLeasedLineComponent implements OnInit { + + constructor( + private router:Router, + private myHttp: intentBaseService, + private nzMessage: NzMessageService + ) {} + + ngOnChanges() {} + + ngOnInit() { + this.pageIndex = 1; + this.pageSize = 10; + this.getCloudLeasedLineList(); + } + + ngOnDestroy() {} + + statusObj: any = { + 0: 'Incomplete', + 1: 'Completed', + 2: 'Deleted', + 3: 'Inactive' + } + // 列表数据源 + listOfData: any[] = []; + // 分页信息及总数 + pageIndex: number = 1; + pageSize: number = 10; + total: number = 0; + loading = false; + // 控制弹窗展示变量 + cloudLeasedLineShowFlag: boolean = false; + smartCloudLeasedLineShowFlag: boolean = false; + // 初始化查询数据源 + getCloudLeasedLineList(): void { + this.myHttp.getInstanceList({ + currentPage: this.pageIndex, + pageSize: this.pageSize + }).subscribe((response) => { + const { code, message, data } = response; + if (code !== 200) { + this.nzMessage.error(message); + return; + } + this.total = data.totalRecords; + this.listOfData = [...data.list]; + }, (err) => { + console.log(err); + }); + } + // 分页信息变更查询数据 + searchData(): void { + this.getCloudLeasedLineList(); + } + // 解析结果传递到create弹窗 + resolveResult: any; + // 弹窗加载 + cloudLeasedLineShow(): void { + this.cloudLeasedLineShowFlag = true; + } + // 弹窗关闭 + cloudLeasedLineClose(): void { + this.cloudLeasedLineShowFlag = false; + this.pageIndex = 1; + this.pageSize = 10; + this.getCloudLeasedLineList(); + } + // smart 弹窗加载 + smartCloudLeasedLineShow(): void { + this.smartCloudLeasedLineShowFlag = true; + } + // smart 弹窗关闭 + smartCloudLeasedLineClose(data): void { + this.smartCloudLeasedLineShowFlag = false; + if (data.cancel) { + return; + } + this.cloudLeasedLineShowFlag = true; + this.resolveResult = { + name: 'test', + instanceId: '123456', + accessPointOne: { + name: 'aaa', + bandwidth: '20' + }, + cloudPointName: 'aaa', + }; + } + // 跳转监控管理页面 + goMonitorService(): void { + this.router.navigateByUrl('/fcaps/monitor_service'); + } + + activeCloudLeasedLine(row): void { + this.myHttp.activeIntentInstance({ + instanceId: row.instanceId + }).subscribe((data) => { + console.log(data); + }, (err) => { + console.log(err); + }); + } + + inactiveCloudLeasedLine(row): void { + this.myHttp.invalidIntentInstance({ + instanceId: row.instanceId + }).subscribe((data) => { + console.log(data); + }, (err) => { + console.log(err); + }); + } + + deleteCloudLeasedLine(row): void { + this.myHttp.deleteIntentInstance(row.instanceId).subscribe((data) => { + console.log(data); + }, (err) => { + console.log(err); + }); + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts b/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts new file mode 100644 index 00000000..9a54a49a --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/constants.ts @@ -0,0 +1,49 @@ +export const STATUS_LIST = { + Active: 'Active', + Inactive: 'Inactive' +}; + +export const COMMUNICATION_FORM_ITEMS = [ + /******* + title /MUST/: MARK THE ITEM NAME, + key /MUST/: MARK THE ITEM KEY, + type /MUST/: MARKE THE ITEM TYPE, CAN BE ADDED IF NECESSARY: input/select/radio/city-select + required /MUST/: IF REQUIRED, + scoped: IF SCOPED NUMBERS, CAN BE EMITTED IF NOT + scopedText: SCOPED NUMBERS' DESCRIPTION. IF SCOPED NUMBERS EXITS, IT'S A MUST + placeholder: IF PLACEHOLDER, CAN BE EMITTED IF NOT + options: IF ITEM NEEDS OPTIONS, CAN BE EMITTED IF NOT + ********/ + { + title: "Communication Service Name", + key: "name", + type: "input", + required: true, + }, + { + title: "Intent Instance ID", + key: "instanceId", + type: "text", + required: true, + }, + { + title: "Access Point 1", + nodeName: 'Name', + rateName: 'Bandwidth', + key: "accessPointOne", + type: "node_select_one", + required: true, + }, + { + title: "Cloud Point Name", + key: "cloudPointName", + type: "select", + required: true, + options: [ + { + title: "tranprotEp_ID_ROOT", + key: "tranprotEp_ID_ROOT", + } + ], + }, +];
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html new file mode 100644 index 00000000..cd7e0fa7 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.html @@ -0,0 +1,7 @@ +<nz-tabset [nzSelectedIndex]="selectedIndex" (nzSelectChange)="handleTabChange($event)" class="slicing"> + <nz-tab [nzTitle]="'i18nTextDefine_cloudLeasedLine' | translate"> + <app-cloud-leased-line + *ngIf="selectedIndex === 0" + ></app-cloud-leased-line> + </nz-tab> +</nz-tabset>
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.less new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.less diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts new file mode 100644 index 00000000..2d6f59d2 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/intent-based-services.component.ts @@ -0,0 +1,21 @@ +import { Component, HostBinding, OnInit } from '@angular/core'; +import { slideToRight } from '../../../shared/utils/animates'; + +@Component({ + selector: 'app-intent-based-services', + templateUrl: './intent-based-services.component.html', + styleUrls: ['./intent-based-services.component.less'], + animations: [slideToRight] +}) +export class IntentBasedServicesComponent implements OnInit { + + @HostBinding('@routerAnimate') routerAnimateState; + selectedIndex:number = 0; + constructor() { } + + ngOnInit() { + } + handleTabChange($event): void { + this.selectedIndex = $event.index; + } +}
\ No newline at end of file diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html new file mode 100644 index 00000000..2ad1cea2 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.html @@ -0,0 +1,42 @@ +<nz-modal + [(nzVisible)]="samrtCloudLeasedLineShowFlag" + nzTitle="Create Cloud Leased Line" + (nzOnCancel)="handleCancel(true)" + (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> diff --git a/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.less b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.less new file mode 100644 index 00000000..50d3af28 --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.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/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.spec.ts b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.spec.ts new file mode 100644 index 00000000..ffdd130f --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.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/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts new file mode 100644 index 00000000..014a1c4c --- /dev/null +++ b/usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal/smart-cloud-leased-modal.component.ts @@ -0,0 +1,90 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { NzMessageService } from 'ng-zorro-antd'; +import { intentBaseService } from '../../../../core/services/intentBase.service'; +import { Recorder } from '../../../../shared/utils/recorder'; +import { Util } from '../../../../shared/utils/utils'; + +@Component({ + selector: 'app-smart-cloud-leased-modal', + templateUrl: './smart-cloud-leased-modal.component.html', + styleUrls: ['./smart-cloud-leased-modal.component.less'] +}) +export class SmartCloudLeasedModalComponent implements OnInit { + + constructor( + private Util: Util, + private Recorder: Recorder, + private myhttp: intentBaseService, + private msg: NzMessageService + ) {} + + @Input() samrtCloudLeasedLineShowFlag: boolean; + @Output() resolveEmitter = new EventEmitter(); + + 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(flag): void { + this.samrtCloudLeasedLineShowFlag = false; + this.communicationMessage = ""; + this.resolveEmitter.emit({ "cancel": flag }); + } + + handleOk(): void { + if (this.radioValue === 'text') { + this.submitFormMessage(); + return; + } + + } + + submitFormAudio() { + this.handleCancel(false); + } + + submitFormMessage(): void { + let params = { + "title": "predict", + "text": this.communicationMessage + }; + this.myhttp.intentInstancePredict(params).subscribe( + (response) => { + console.log(response); + this.handleCancel(false); + }, + (err) => { + console.log(err); + } + ) + } + + 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(); + } +} |