From 2e24d80483813b88cb4423e1bedaeddc7db48b29 Mon Sep 17 00:00:00 2001 From: leejinho Date: Tue, 31 Dec 2019 14:36:32 +0900 Subject: [PATCH] =?UTF-8?q?=EC=A7=A7=EC=9D=80=20=EB=B2=88=EC=97=AD=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/lib/apis/trans-mass-talk-download.ts | 48 +++-- .../src/lib/apis/trans-mass-talk-save.ts | 17 +- .../src/lib/apis/translation-req.ts | 37 +++- .../src/lib/apis/translation-save.ts | 21 +- .../components/messages.component.html | 21 ++ .../components/messages.component.scss | 16 ++ .../components/messages.component.ts | 135 ++++++++++++- .../event-json/translation.event-json.ts | 14 +- .../src/lib/components/form.component.html | 8 +- .../src/lib/components/form.component.ts | 6 + .../mass-translation.component.html | 24 +++ .../message-box/mass-translation.component.ts | 6 +- .../message-box/translation.component.html | 37 ++-- .../message-box/translation.component.ts | 18 +- .../lib/components/messages.component.html | 10 +- .../src/lib/components/messages.component.ts | 2 + .../translation-section.component.html | 108 +++++++++++ .../translation-section.component.scss | 34 ++++ .../translation-section.component.spec.ts | 24 +++ .../translation-section.component.ts | 181 ++++++++++++++++++ .../src/lib/ucap-ui.module.ts | 10 +- 21 files changed, 705 insertions(+), 72 deletions(-) create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.html create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.spec.ts create mode 100644 projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.ts diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts index 51d5a288..04ad23a5 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts +++ b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-download.ts @@ -4,7 +4,9 @@ import { APIResponse, APIEncoder, APIDecoder, - ParameterUtil + ParameterUtil, + StatusCode, + JsonAnalization } from '@ucap-webmessenger/api'; export interface TransMassTalkDownloadRequest extends APIRequest { @@ -15,23 +17,41 @@ export interface TransMassTalkDownloadRequest extends APIRequest { } export interface TransMassTalkDownloadResponse extends APIResponse { - Original?: string; - Translation?: string; - Locale?: string; - UserName?: string; - RegDate?: string; + content?: string; + userName?: string; + regDate?: string; + returnJson?: any; } -const transMassTalkDownloadEncodeMap = {}; +const transMassTalkDownloadEncodeMap = { + userSeq: 'p_user_seq', + deviceType: 'p_device_type', + token: 'p_token', + eventTransSeq: 'p_event_mass_seq' +}; -export const encodeTransMassTalkDownload: APIEncoder< - TransMassTalkDownloadRequest -> = (req: TransMassTalkDownloadRequest) => { +export const encodeTransMassTalkDownload: APIEncoder = ( + req: TransMassTalkDownloadRequest +) => { return ParameterUtil.encode(transMassTalkDownloadEncodeMap, req); }; -export const decodeTransMassTalkDownload: APIDecoder< - TransMassTalkDownloadResponse -> = (res: any) => { - return {} as TransMassTalkDownloadResponse; +export const decodeTransMassTalkDownload: APIDecoder = ( + res: any +) => { + try { + const json = JsonAnalization.receiveAnalization(res); + return { + statusCode: json.StatusCode, + content: json.Content, + userName: json.UserName, + regDate: json.RegDate, + returnJson: res + } as TransMassTalkDownloadResponse; + } catch (e) { + return { + statusCode: StatusCode.Fail, + errorMessage: e + } as TransMassTalkDownloadResponse; + } }; diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts index 7c33d94a..91b6b64f 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts +++ b/projects/ucap-webmessenger-api-common/src/lib/apis/trans-mass-talk-save.ts @@ -49,16 +49,15 @@ export const decodeTransMassTalkSave: APIDecoder = ( res: any ) => { try { - const json = JsonAnalization.receiveAnalization(res); return { - statusCode: json.StatusCode, - translationSeq: json.EventTransSEQ, - roomSeq: json.RoomID, - registrationDate: json.RegDate, - locale: json.Locale, - original: json.Original, - translation: json.Translation, - returnJson: res + statusCode: res.StatusCode, + translationSeq: res.EventTransSEQ, + roomSeq: res.RoomID, + registrationDate: res.RegDate, + locale: res.Locale, + original: res.Original, + translation: res.Translation, + returnJson: JSON.stringify(res) } as TransMassTalkSaveResponse; } catch (e) { return { diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts index 8ad80f3a..ee9835e7 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts +++ b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-req.ts @@ -4,7 +4,9 @@ import { APIResponse, APIEncoder, APIDecoder, - ParameterUtil + ParameterUtil, + StatusCode, + JsonAnalization } from '@ucap-webmessenger/api'; export interface TranslationReqRequest extends APIRequest { @@ -17,13 +19,21 @@ export interface TranslationReqRequest extends APIRequest { } export interface TranslationReqResponse extends APIResponse { - SrcLocale?: string; - DestLocale?: string; - Original?: string; - Translation?: string; + srcLocale?: string; + destLocale?: string; + original?: string; + translation?: string; + returnJson?: any; } -const translationReqEncodeMap = {}; +const translationReqEncodeMap = { + userSeq: 'p_user_seq', + deviceType: 'p_device_type', + token: 'p_token', + original: 'p_original', + srcLocale: 'p_src_locale', + destLocale: 'p_dest_locale' +}; export const encodeTranslationReq: APIEncoder = ( req: TranslationReqRequest @@ -34,5 +44,20 @@ export const encodeTranslationReq: APIEncoder = ( export const decodeTranslationReq: APIDecoder = ( res: any ) => { + try { + return { + statusCode: res.StatusCode, + srcLocale: res.SrcLocale, + destLocale: res.DestLocale, + original: res.Original, + translation: res.Translation, + returnJson: JSON.stringify(res) + } as TranslationReqResponse; + } catch (e) { + return { + statusCode: StatusCode.Fail, + errorMessage: e + } as TranslationReqResponse; + } return {} as TranslationReqResponse; }; diff --git a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts index 36596042..b08ccff9 100644 --- a/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts +++ b/projects/ucap-webmessenger-api-common/src/lib/apis/translation-save.ts @@ -20,7 +20,7 @@ export interface TranslationSaveRequest extends APIRequest { } export interface TranslationSaveResponse extends APIResponse { - translationSeq?: string; + translationSeq?: number; roomSeq?: string; registrationDate?: string; srcLocale?: string; @@ -50,17 +50,16 @@ export const decodeTranslationSave: APIDecoder = ( res: any ) => { try { - const json = JsonAnalization.receiveAnalization(res); return { - statusCode: json.StatusCode, - translationSeq: json.EventTransSEQ, - roomSeq: json.RoomID, - registrationDate: json.RegDate, - srcLocale: json.SrcLocale, - destLocale: json.DestLocale, - original: json.Original, - translation: json.Translation, - returnJson: res + statusCode: res.StatusCode, + translationSeq: !!res.EventTransSeq ? Number(res.EventTransSeq) : 0, + roomSeq: res.RoomID, + registrationDate: res.RegDate, + srcLocale: res.SrcLocale, + destLocale: res.DestLocale, + original: res.Original, + translation: res.Translation, + returnJson: JSON.stringify(res) } as TranslationSaveResponse; } catch (e) { return { diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html index 76d1be0c..2d0c8206 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html @@ -233,6 +233,7 @@ [minShowReadHere]=" environment.productConfig.CommonSetting.readHereShowMinimumEventCount " + [translationSimpleview]="translationSimpleview" (moreEvent)="onMoreEvent($event)" (massDetail)="onMassDetail($event)" (save)="onSave($event)" @@ -266,6 +267,25 @@
+ + +
+ + +
+ +
@@ -276,6 +296,7 @@ (sendFiles)="onFileSelected($event)" (clearView)="clearView()" (toggleStickerSelector)="onShowToggleStickerSelector($event)" + (toggleTranslation)="onShowToggleTranslation($event)" >
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss index 37343312..076be47c 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss @@ -117,6 +117,22 @@ width: 100%; } } + + .translation-container { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background-color: transparent; + + .translation-zone { + position: absolute; + padding: 10px 10px 0 10px; + background-color: rgba(250, 255, 255, 0.8); + bottom: 0; + width: 100%; + } + } } ::ng-deep .chat-snackbar-class { diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts index 42cb7378..2c3ac0b3 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts @@ -23,7 +23,7 @@ import { } from '@ucap-webmessenger/ui'; import { Store, select } from '@ngrx/store'; import { NGXLogger } from 'ngx-logger'; -import { Observable, Subscription, forkJoin, of, combineLatest } from 'rxjs'; +import { Observable, Subscription, forkJoin, combineLatest, of } from 'rxjs'; import { Info, EventType, @@ -35,7 +35,8 @@ import { EventJson, FileEventJson, StickerEventJson, - MassTextEventJson + MassTextEventJson, + TranslationEventJson } from '@ucap-webmessenger/protocol-event'; import * as AppStore from '@app/store'; @@ -72,7 +73,9 @@ import { FileUploadItem } from '@ucap-webmessenger/api'; import { CommonApiService, FileTalkSaveRequest, - FileTalkSaveResponse + FileTalkSaveResponse, + TranslationReqRequest, + TranslationSaveRequest } from '@ucap-webmessenger/api-common'; import { CreateChatDialogComponent, @@ -166,6 +169,13 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { isShowStickerSelector = false; selectedSticker: StickerFilesInfo; + /** About Translation */ + isShowTranslation = false; + translationSimpleview = false; + translationPreview = false; + destLocale = 'en'; // default English :: en + translationPreviewInfo: TranslationEventJson | null; + /** About ReadHere */ firstcheckReadHere = true; clearReadHere = false; @@ -360,8 +370,17 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { // Chat Search Clear.. this.onCloseSearchArea(); + // Translate Clear.. + this.isShowTranslation = false; + this.translationSimpleview = false; + this.translationPreview = false; + // this.destLocale = 'en'; // default English :: en + this.translationPreviewInfo = null; + + // Read here Clear.. this.firstcheckReadHere = true; + // Chat Formfield Clear.. if (!!this.chatForm) { this.chatForm.replyForm.reset(); } @@ -578,6 +597,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { } } + /** Send Event */ async onSendMessage(message: string) { this.setEventMoreInit(); @@ -598,8 +618,77 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { } } - if (!!this.selectedSticker) { - // Send Sticker + if (!!this.isShowTranslation && this.destLocale.trim().length > 0) { + /** CASE : Translation */ + console.log('번역들어간다.'); + + const destLocale = this.destLocale; + const original = message; + const roomSeq = this.roomInfo.roomSeq; + this.commonApiService + .translationSave({ + userSeq: this.loginRes.userSeq, + deviceType: this.environmentsInfo.deviceType, + token: this.loginRes.tokenString, + roomSeq, + original, + srcLocale: '', + destLocale + } as TranslationSaveRequest) + .pipe( + take(1), + map(res => { + console.log(res); + if (res.statusCode === StatusCode.Success) { + if (res.translationSeq > 0) { + // Mass Text Translation + } else { + // Normal Text Translation + const json: TranslationEventJson = { + locale: destLocale, + original, + translation: res.translation, + stickername: '', + stickerfile: !!this.selectedSticker + ? this.selectedSticker.index + : '' + }; + + if (!!this.translationPreview) { + // preview + this.translationPreviewInfo = json; + } else { + // direct send + this.store.dispatch( + EventStore.send({ + senderSeq: this.loginRes.userSeq, + req: { + roomSeq, + eventType: EventType.Translation, + sentMessage: JSON.stringify(json) + } + }) + ); + + if (!!this.translationPreviewInfo) { + this.translationPreviewInfo = null; + } + } + + if (!!this.selectedSticker) { + this.isShowStickerSelector = false; + this.setStickerHistory(this.selectedSticker); + } + } + } else { + this.logger.error(res); + } + }), + catchError(error => of(this.logger.error(error))) + ) + .subscribe(); + } else if (!!this.selectedSticker) { + /** CASE : Sticker */ if ( !!message && message.trim().length > @@ -640,7 +729,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { message.trim().length > environment.productConfig.CommonSetting.masstextLength ) { - // MASS TEXT + /** CASE : MASS TEXT */ this.store.dispatch( EventStore.sendMass({ senderSeq: this.loginRes.userSeq, @@ -653,6 +742,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { }) ); } else { + /** CASE : Normal Text */ this.store.dispatch( EventStore.send({ senderSeq: this.loginRes.userSeq, @@ -1361,4 +1451,37 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit { } } } + + /** About Translation */ + onShowToggleTranslation() { + this.isShowTranslation = !this.isShowTranslation; + if (!this.isShowTranslation) { + } + } + onChangeTranslationSimpleView(value: boolean) { + this.translationSimpleview = value; + } + onChangeTranslationPreView(value: boolean) { + this.translationPreview = value; + } + onChangeDestLocale(destLocale: string) { + this.destLocale = destLocale; + } + onCancelTranslation() { + this.translationPreviewInfo = null; + } + onSendTranslationMessage(translationInfo: TranslationEventJson) { + this.store.dispatch( + EventStore.send({ + senderSeq: this.loginRes.userSeq, + req: { + roomSeq: this.roomInfo.roomSeq, + eventType: EventType.Translation, + sentMessage: JSON.stringify(translationInfo) + } + }) + ); + + this.translationPreviewInfo = null; + } } diff --git a/projects/ucap-webmessenger-protocol-event/src/lib/protocols/event-json/translation.event-json.ts b/projects/ucap-webmessenger-protocol-event/src/lib/protocols/event-json/translation.event-json.ts index 3aea53ac..e1cc90a7 100644 --- a/projects/ucap-webmessenger-protocol-event/src/lib/protocols/event-json/translation.event-json.ts +++ b/projects/ucap-webmessenger-protocol-event/src/lib/protocols/event-json/translation.event-json.ts @@ -5,21 +5,21 @@ export interface TranslationEventJson { locale?: string; original?: string; translation?: string; - stickerName?: string; - stickerFile?: string; + stickername?: string; + stickerfile?: string; } -export const decodeTranslationEventJson: EventJsonDecoder< - TranslationEventJson -> = (message: string) => { +export const decodeTranslationEventJson: EventJsonDecoder = ( + message: string +) => { try { const json = JsonAnalization.receiveAnalization(message); return { locale: json.locale, original: json.original, translation: json.translation, - stickerName: json.stickername, - stickerFile: json.stickerfile + stickername: json.stickername, + stickerfile: json.stickerfile } as TranslationEventJson; } catch (e) { return {} as TranslationEventJson; diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html index e8e450b9..139b3bcf 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html @@ -24,9 +24,13 @@ sentiment_satisfied_alt - +
(); + @Output() + toggleTranslation = new EventEmitter(); @Output() clearView = new EventEmitter(); @@ -78,4 +80,8 @@ export class FormComponent implements OnInit { onClickStickerSelector() { this.toggleStickerSelector.emit(); } + + onClickTranslation() { + this.toggleTranslation.emit(); + } } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.html index e69de29b..780bf3cc 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.html @@ -0,0 +1,24 @@ +
+
+ {{ message.sentMessageJson.translation }} +
+
+ Kor + 녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 + 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 + 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 + 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 + 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 + 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트 +
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.ts index 91e1c663..a8fc4f72 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.ts @@ -1,4 +1,5 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input } from '@angular/core'; +import { TranslationEventJson, Info } from '@ucap-webmessenger/protocol-event'; @Component({ selector: 'ucap-chat-message-box-mass-translation', @@ -6,6 +7,9 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./mass-translation.component.scss'] }) export class MassTranslationComponent implements OnInit { + @Input() + message: Info; + constructor() {} ngOnInit() {} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html index 780bf3cc..9f284ee0 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.html @@ -1,17 +1,30 @@
-
- {{ message.sentMessageJson.translation }} +
+
-
- Kor - 녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 - 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 - 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 - 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 - 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 - 롱텍스트안녕하세요 장문장문 롱텍스트안녕하세요 장문장문 롱텍스트 +
+
+ {{ message.sentMessageJson.locale }} +
-
+
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.ts index 0d670492..d2b4266d 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/translation.component.ts @@ -10,7 +10,23 @@ export class TranslationComponent implements OnInit { @Input() message: Info; + @Input() + translationSimpleview: boolean; + + @Input() + isMe: boolean; + + stickerUrl?: string; + constructor() {} - ngOnInit() {} + ngOnInit() { + if ( + !!this.message.sentMessageJson && + !!this.message.sentMessageJson.stickerfile && + this.message.sentMessageJson.stickerfile.trim().length > 0 + ) { + this.stickerUrl = `assets/sticker/sticker_s_${this.message.sentMessageJson.stickerfile}.png`; + } + } } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html index a586c4cf..78e7b181 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html @@ -210,6 +210,13 @@ (contextmenu)="onContextMenuMessage($event, message)" > + +
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss new file mode 100644 index 00000000..8e20ad03 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.scss @@ -0,0 +1,34 @@ +.sticker-selector { + border-top: 1px solid #cccccc; + // .sticker-item-box { + // flex-wrap: wrap; + // padding: 20px 20px 0; + // overflow: auto; + // } +} + +// .sticker-item { +// width: 60px; +// margin-bottom: 20px; +// display: inline-flex; +// cursor: pointer; +// } + +.selected-sticker { + position: relative; + height: 100px; + padding: 20px; + text-align: right; + background-color: rgba(0, 0, 0, 0.4); + // img { + // margin-right: 40px; + // } + // .btn-close { + // position: absolute; + // top: 2px; + // right: 20px; + // width: 40px; + // height: 40px; + // color: #ffffff; + // } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.spec.ts b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.spec.ts new file mode 100644 index 00000000..d544dffd --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TranslationSectionComponent } from './translation-section.component'; + +describe('TranslationSectionComponent', () => { + let component: TranslationSectionComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [TranslationSectionComponent] + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(TranslationSectionComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.ts new file mode 100644 index 00000000..2b3bc514 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/components/translation-section.component.ts @@ -0,0 +1,181 @@ +import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core'; +import { + StickerInfo, + StickerFilesInfo, + StickerUtil, + StickerMap +} from '@ucap-webmessenger/core'; +import { FormGroup, FormBuilder } from '@angular/forms'; +import { MatSlideToggleChange, MatSelectChange } from '@angular/material'; +import { TranslationEventJson } from '@ucap-webmessenger/protocol-event'; + +@Component({ + selector: 'ucap-translation-section', + templateUrl: './translation-section.component.html', + styleUrls: ['./translation-section.component.scss'] +}) +export class TranslationSectionComponent implements OnInit { + @Input() + destLocale: string; + @Input() + simpleView: boolean; + @Input() + preView: boolean; + @Input() + translationPreviewInfo: TranslationEventJson | null; + + @Output() + changeTranslationSimpleview = new EventEmitter(); + @Output() + changeTranslationPreview = new EventEmitter(); + @Output() + changeDestLocale = new EventEmitter(); + @Output() + cancelTranslation = new EventEmitter(); + @Output() + sendTranslationMessage = new EventEmitter(); + + isShowTranslationSimpleview = false; + isShowTranslationPreview = false; + + translationDestList: { + key: string; + text: string; + }[] = [ + { key: 'af', text: 'Afrikaans' }, + { key: 'sq', text: 'Albanian' }, + { key: 'am', text: 'Amharic' }, + { key: 'ar', text: 'Arabic' }, + { key: 'hy', text: 'Armenian' }, + { key: 'az', text: 'Azeerbaijani' }, + { key: 'eu', text: 'Basque' }, + { key: 'be', text: 'Belarusian' }, + { key: 'bn', text: 'Bengali' }, + { key: 'bs', text: 'Bosnian' }, + { key: 'bg', text: 'Bulgarian' }, + { key: 'ca', text: 'Catalan' }, + { key: 'ceb', text: 'Cebuano' }, + { key: 'zh-CN', text: 'Chinese(Simplified)' }, + { key: 'zh-TW', text: 'Chinese(Traditional)' }, + { key: 'co', text: 'Corsican' }, + { key: 'hr', text: 'Croatian' }, + { key: 'cs', text: 'Czech' }, + { key: 'da', text: 'Danish' }, + { key: 'nl', text: 'Dutch' }, + { key: 'en', text: 'English' }, + { key: 'eo', text: 'Esperanto' }, + { key: 'fi', text: 'Finnish' }, + { key: 'fr', text: 'French' }, + { key: 'fy', text: 'Frisian' }, + { key: 'gl', text: 'Galician' }, + { key: 'ka', text: 'Georgian' }, + { key: 'de', text: 'German' }, + { key: 'el', text: 'Greek' }, + { key: 'gu', text: 'Gujarati' }, + { key: 'ht', text: 'Haitian Creole' }, + { key: 'ha', text: 'Hausa' }, + { key: 'haw', text: 'Hawaiian' }, + { key: 'iw', text: 'Hebrew' }, + { key: 'hi', text: 'Hindi' }, + { key: 'hmn', text: 'Hmong' }, + { key: 'hu', text: 'Hungarian' }, + { key: 'is', text: 'Icelandic' }, + { key: 'ig', text: 'Igbo' }, + { key: 'id', text: 'Indonesian' }, + { key: 'ga', text: 'Irish' }, + { key: 'it', text: 'Italian' }, + { key: 'ja', text: 'Japanese' }, + { key: 'jw', text: 'Javanese' }, + { key: 'kn', text: 'Kannada' }, + { key: 'kk', text: 'Kazakh' }, + { key: 'km', text: 'Khmer' }, + { key: 'ko', text: 'Korean' }, + { key: 'ku', text: 'Kurdish' }, + { key: 'ky', text: 'Kyrgyz' }, + { key: 'lo', text: 'Lao' }, + { key: 'la', text: 'Latin' }, + { key: 'lv', text: 'Latvian' }, + { key: 'lt', text: 'Lithuanian' }, + { key: 'lb', text: 'Luxembourgish' }, + { key: 'mk', text: 'Macedonian' }, + { key: 'mg', text: 'Malagasy' }, + { key: 'ms', text: 'Malay' }, + { key: 'ml', text: 'Malayalam' }, + { key: 'mi', text: 'Maori' }, + { key: 'mr', text: 'Marathi' }, + { key: 'mn', text: 'Mongolian' }, + { key: 'my', text: 'Myanmar(Burmese)' }, + { key: 'ne', text: 'Nepali' }, + { key: 'no', text: 'Norwegian' }, + { key: 'ny', text: 'Nyanja(Chichewa)' }, + { key: 'ps', text: 'Pashto' }, + { key: 'fa', text: 'Persian' }, + { key: 'pl', text: 'Polish' }, + { key: 'pt', text: 'Portuguese' }, + { key: 'pa', text: 'Punjabi' }, + { key: 'ro', text: 'Romanian' }, + { key: 'ru', text: 'Russian' }, + { key: 'sm', text: 'Samoan' }, + { key: 'gd', text: 'Scots Gaelic' }, + { key: 'sr', text: 'Serbian' }, + { key: 'st', text: 'Sesotho' }, + { key: 'sn', text: 'Shona' }, + { key: 'sd', text: 'Sindhi' }, + { key: 'si', text: 'Sinhala(Sinhalese)' }, + { key: 'sk', text: 'Slovak' }, + { key: 'sl', text: 'Slovenian' }, + { key: 'so', text: 'Somali' }, + { key: 'es', text: 'Spanish' }, + { key: 'su', text: 'Sundanese' }, + { key: 'sw', text: 'Swahili' }, + { key: 'sv', text: 'Swedish' }, + { key: 'tl', text: 'Tagalog(Filipino)' }, + { key: 'tg', text: 'Tajik' }, + { key: 'ta', text: 'Tamil' }, + { key: 'te', text: 'Telugu' }, + { key: 'th', text: 'Thai' }, + { key: 'tr', text: 'Turkish' }, + { key: 'uk', text: 'Ukrainian' }, + { key: 'ur', text: 'Urdu' }, + { key: 'uz', text: 'Uzbek' }, + { key: 'vi', text: 'Vietnamese' }, + { key: 'cy', text: 'Welsh' }, + { key: 'xh', text: 'Xhosa' }, + { key: 'yi', text: 'Yiddish' }, + { key: 'yo', text: 'Yoruba' }, + { key: 'zu', text: 'Zulu' } + ]; + + translationForm: FormGroup; + + constructor(private formBuilder: FormBuilder) {} + + ngOnInit() { + this.translationForm = this.formBuilder.group({ + destType: [this.destLocale] + }); + } + + onChangeSelection(event: MatSelectChange) { + this.destLocale = event.value; + this.changeDestLocale.emit(this.destLocale); + } + + onChangToggleSimpleview(event: MatSlideToggleChange) { + this.isShowTranslationSimpleview = event.checked; + this.changeTranslationSimpleview.emit(event.checked); + } + + onChangTogglePreview(event: MatSlideToggleChange) { + this.isShowTranslationPreview = event.checked; + this.changeTranslationPreview.emit(event.checked); + } + + onClickSendTranslationMessage(translationInfo: TranslationEventJson) { + this.sendTranslationMessage.emit(translationInfo); + } + + onClickTranslationCancel() { + this.cancelTranslation.emit(); + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts index 3f5fec6a..bec44b55 100644 --- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts +++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts @@ -19,6 +19,11 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; import { MatMenuModule } from '@angular/material/menu'; import { MatDatepickerModule } from '@angular/material/datepicker'; +import { + MatTabsModule, + MatSelectModule, + MatSlideToggleModule, +} from '@angular/material'; import { DragDropModule } from '@angular/cdk/drag-drop'; @@ -66,12 +71,12 @@ import { LinkyPipe } from './pipes/linky.pipe'; import { TranslatePipe } from './pipes/translate.pipe'; import { DatePipe } from './pipes/date.pipe'; -import { MatTabsModule } from '@angular/material'; import { StringEmptyCheckPipe, StringFormatterPhonePipe } from './pipes/string.pipe'; import { ClickDebounceDirective } from './directives/click-debounce.directive'; +import { TranslationSectionComponent } from './components/translation-section.component'; const COMPONENTS = [ FileUploadQueueComponent, @@ -83,6 +88,7 @@ const COMPONENTS = [ PickDateComponent, PickTimeComponent, StepInputComponent, + TranslationSectionComponent, BinaryViewerComponent, DocumentViewerComponent, @@ -142,6 +148,8 @@ const SERVICES = [ MatButtonToggleModule, MatMenuModule, MatDatepickerModule, + MatSelectModule, + MatSlideToggleModule, DragDropModule ], exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES],