feat:commit UUI front end code

Change-Id: I4cf28e3b9e6f3ea44b52f028f5dfd70fbf650853
Signed-off-by: liuwh7 <liuwh7@asiainfo.com>
Issue-ID: USECASEUI-525

4 files changed, 214 insertions, 0 deletions

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..a448f3e0
--- /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 (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..025518f4
--- /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,50 @@
+.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: 26px;
+      }
+      .audioBtn{
+        font-size: 27px;
+        position: absolute;
+        top: 10px;
+        left: 217px;
+      }
+      .anticon-pause-circle-o{
+        color: red;
+      }
+    }
+    .play_class{
+      font-size: 26px;
+      margin-top: 20px;
+    }
+  }
+}
+.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..3196bbba
--- /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,101 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+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) { }
+
+  @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;
+
+  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;
+        console.log(err);
+      })
+  }
+  startAudio(): void {
+    this.isPlay = true;
+    this.Recorder.beforeStartRecord();
+  }
+  stopAudio(): void {
+    this.isPlay = false;
+    this.Recorder.stopRecord();
+  }
+  playAudio(): void {
+    let audio = document.querySelector('audio');
+    audio["src"] = this.Recorder.playRecord();
+  }
+}