diff options
Diffstat (limited to 'usecaseui-portal/src/app/views/services/intent-based-services/smart-cloud-leased-modal')
4 files changed, 210 insertions, 0 deletions
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(); + } +} |