i18n is working

projects/ucap-webmessenger-app/src/assets/i18n/en.json

@@ -111,6 +111,7 @@
     "confirmRecallEvent": "Do you want to recall the chat?<br/>It is also retrieved from the other party's chat window.",
     "typeReceived": "Received",
     "typeSent": "Sent",
+    "sender": "Sender",
     "sentDate": "Sent date",
     "validityPeriod": "Validity period",
     "forwardEventToMe": "Forward chat to me",
@@ -126,6 +127,24 @@
     "ejectFromRoom": "Eject from room",
     "confirmEjectFromRoom": "Do you want to eject member[{{targetMember}}] from room?",
     "badgeDescriptionForUnread": "There is an unconfirmed message.",
+    "event": {
+      "inviteToRoomWith": "{{owner}} invited {{inviter}}.",
+      "exitFromRoomWith": "{{exitor}} has left.",
+      "ejectedFromRoomWith": "{{requester}} has eject {{ejected}}.",
+      "renamedRoomWith": "{{requester}} has changed their chat room name to '{{roomName}}'.",
+      "setTimerWith": "{{requester}} set a timer ({{timer}})",
+      "showMassTranslationOfOriginal": "Show original",
+      "showMassTranslationOfTranslated": "Show translated",
+      "showMassDetail": "Show detail",
+      "readToHere": "Read to here",
+      "recalled": "Recalled",
+      "scheduleTypeNew": "[Event] Registered",
+      "scheduleTypeUpdate": "[Event] Modified",
+      "scheduleTypeDelete": "[Event] Deleted",
+      "scheduleTypeDefault": "[Event] Processing..",
+      "showPreviousEvents": "Show previous",
+      "moreUnreadEventsWith": "There is unread messages<span class=\"text-warn-color\">({{countOfUnread}})</span>"
+    },
     "albumBox": {
       "label": "Album box"
     },
@@ -223,6 +242,8 @@
     "searchResult": "Search result",
     "useOnlyForSpecialCharacter": "Can only use Special characters: {{v}}",
     "units": {
+      "date": "Date",
+      "time": "Time",
       "hour": "hour",
       "hourFrom": "hour",
       "minute": "minute",
@@ -235,6 +256,7 @@
       "download": "Download",
       "delete": "Delete",
       "save": "Save",
+      "saveAs": "Save as",
       "saveAll": "Save all",
       "downloadSelected": "Download selected",
       "openDownloadFolder": "Open download folder",
@@ -286,7 +308,8 @@
       "Close window": "Close window",
       "zoomOut": "Zoom out",
       "zoomIn": "Zoom in",
-      "zoomReset": "Zoom reset"
+      "zoomReset": "Zoom reset",
+      "sirWith": "{{sir}}"
     },
     "paginator": {
       "itemsPerPage": "Items per page",

projects/ucap-webmessenger-app/src/assets/i18n/ko.json

@@ -111,6 +111,7 @@
     "confirmRecallEvent": "해당 대화를 회수하시겠습니까?<br/>상대방 대화창에서도 회수됩니다.",
     "typeReceived": "수신",
     "typeSent": "발신",
+    "sender": "보낸 사람",
     "sentDate": "보낸 날짜",
     "validityPeriod": "유효 기간",
     "forwardEventToMe": "대화 나에게 전달",
@@ -126,6 +127,24 @@
     "ejectFromRoom": "강퇴",
     "confirmEjectFromRoom": "{{targetMember}} 님을 대화방에서 퇴장 시키겠습니까?",
     "badgeDescriptionForUnread": "확인하지 않은 메시지가 있습니다.",
+    "event": {
+      "inviteToRoomWith": "{{owner}}이 {{inviter}}을 초대했습니다.",
+      "exitFromRoomWith": "{{exitor}}님이 퇴장하셨습니다.",
+      "ejectedFromRoomWith": "{{requester}}님이 {{ejected}}님을 퇴장 시키셨습니다.",
+      "renamedRoomWith": "{{requester}}님이 대화방명을 '{{roomName}}'으로 변경하셨습니다.",
+      "setTimerWith": "{{requester}}님이 타이머를 설정하였습니다. ({{timer}})",
+      "showMassTranslationOfOriginal": "원본 보기",
+      "showMassTranslationOfTranslated": "번역 보기",
+      "showMassDetail": "전체 보기",
+      "readToHere": "여기까지 읽었습니다.",
+      "recalled": "회수된 메시지",
+      "scheduleTypeNew": "[이벤트] 등록",
+      "scheduleTypeUpdate": "[이벤트] 수정",
+      "scheduleTypeDelete": "[이벤트] 삭제",
+      "scheduleTypeDefault": "[이벤트] 조회중..",
+      "showPreviousEvents": "이전 대화 보기",
+      "moreUnreadEventsWith": "안읽은 메시지가 <span class=\"text-warn-color\">({{countOfUnread}})</span>개 더 있습니다."
+    },
     "albumBox": {
       "label": "앨범함"
     },
@@ -223,6 +242,8 @@
     "searchResult": "검색 결과",
     "useOnlyForSpecialCharacter": "특수문자는 {{specialCharacter}}만 사용할 수 있습니다.",
     "units": {
+      "date": "날짜",
+      "time": "시간",
       "hour": "시",
       "hourFrom": "시간",
       "minute": "분",
@@ -235,6 +256,7 @@
       "download": "파일 다운로드",
       "delete": "파일 삭제",
       "save": "파일 저장",
+      "saveAs": "파일을 다른 이름으로 저장",
       "saveAll": "파일 모두 저장",
       "downloadSelected": "선택된 파일 다운로드",
       "openDownloadFolder": "다운로드 폴더 열기",
@@ -286,7 +308,8 @@
       "closeWindow": "창 닫기",
       "zoomOut": "축소",
       "zoomIn": "확대",
-      "zoomReset": "원본 비율"
+      "zoomReset": "원본 비율",
+      "sirWith": "{{sir}}님"
     },
     "paginator": {
       "itemsPerPage": "페이지별 갯수",

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/allim.component.html

@@ -4,11 +4,11 @@
   </div>
   <ul class="event-info">
     <li class="event-sender bg-accent-brightest text-accent-darkest">
-      <span class="bg-accent-dark"> 발송인</span>
+      <span class="bg-accent-dark"> {{ 'chat.sender' | translate }} </span>
       {{ message.sentMessageJson.sendName }}
     </li>
     <li class="event-time bg-accent-brightest text-accent-darkest">
-      <span class="bg-accent-dark">발송시간</span>
+      <span class="bg-accent-dark">{{ 'chat.sentDate' | translate }}</span>
       {{ message.sentMessageJson.postDate | ucapDate: 'YYYY.MM.DD a hh:mm' }}
     </li>
     <li class="event-content">

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html

@@ -18,14 +18,18 @@
 </div>
 <div class="btn-box">
   <ul *ngIf="expired" class="expired">
-    <li>기간이 만료된 파일입니다.</li>
+    <li>{{ 'common.file.errors.expired' | translate }}</li>
   </ul>
   <ul *ngIf="!expired && fileInfo && fileInfo.attachmentSeq">
     <li>
-      <button mat-button (click)="onClickSave()">저장</button>
+      <button mat-button (click)="onClickSave()">
+        {{ 'common.file.save' | translate }}
+      </button>
     </li>
     <li>
-      <button mat-button (click)="onClickSaveAs()">다른이름으로 저장</button>
+      <button mat-button (click)="onClickSaveAs()">
+        {{ 'common.file.saveAs' | translate }}
+      </button>
     </li>
   </ul>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html

@@ -4,7 +4,7 @@
   (mouseleave)="mouseLeave($event)"
 >
   <div *ngIf="showExpired" class="expired-text">
-    <span>기간이 만료된 파일입니다</span>
+    <span>{{ 'common.file.errors.expired' | translate }}</span>
   </div>
   <img [src]="fileInfo.thumbUrl" />
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html

@@ -1 +1,53 @@
-<div class="guest">{{ contents }}</div>
+<div class="guest">
+  <ng-container [ngSwitch]="message.type">
+    <ng-container *ngSwitchCase="EventType.Join">
+      {{
+        'chat.event.inviteToRoomWith'
+          | translate
+            : {
+                owner: message.sentMessageJson.owner,
+                inviter: getI18nForSir(message.sentMessageJson.inviter)
+              }
+      }}
+    </ng-container>
+    <ng-container *ngSwitchCase="EventType.Exit">
+      {{
+        'chat.event.exitFromRoomWith'
+          | translate: { exitor: message.sentMessage }
+      }}
+    </ng-container>
+    <ng-container *ngSwitchCase="EventType.ForcedExit">
+      {{
+        'chat.event.ejectedFromRoomWith'
+          | translate
+            : {
+                requester: message.exitForcingRequestUserName,
+                ejected: message.sentMessage
+              }
+      }}
+    </ng-container>
+    <ng-container *ngSwitchCase="EventType.RenameRoom">
+      {{
+        'chat.event.renamedRoomWith'
+          | translate
+            : {
+                requester: message.sentMessageJson.requester,
+                roomName: message.sentMessageJson.roomName
+              }
+      }}
+    </ng-container>
+    <ng-container *ngSwitchCase="EventType.NotificationForTimerRoom">
+      {{ message.sentMessage }}
+    </ng-container>
+    <ng-container *ngSwitchCase="EventType.GuideForRoomTimerChanged">
+      {{
+        'chat.event.setTimerWith'
+          | translate
+            : {
+                requester: senderName,
+                timer: getCalcTimer(message.sentMessageJson.time * 1000)
+              }
+      }}
+    </ng-container>
+  </ng-container>
+</div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.ts

@@ -9,6 +9,7 @@ import {
   NotificationForTimerRoomEventJson,
   GuideForRoomTimerChangedEventJson
 } from '@ucap-webmessenger/protocol-event';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'ucap-chat-message-box-information',
@@ -21,92 +22,67 @@ export class InformationComponent implements OnInit {
   @Input()
   senderName?: string;
 
-  contents: string;
+  EventType = EventType;
 
-  constructor(private logger: NGXLogger) {}
+  constructor(
+    private translateService: TranslateService,
+    private logger: NGXLogger
+  ) {}
 
-  ngOnInit() {
-    switch (this.message.type) {
-      case EventType.Join:
-        {
-          const m = this.message as Info<JoinEventJson>;
+  ngOnInit() {}
 
-          const owner = m.sentMessageJson.owner + '님';
-          const inviter: string[] = [];
+  getI18nForSir(names: string | string[]) {
+    if (Array.isArray(names)) {
+      const inviter: string[] = [];
 
-          m.sentMessageJson.inviter.forEach((userName, idx) => {
-            inviter.push(userName + '님');
-          });
+      names.forEach((userName, idx) => {
+        inviter.push(
+          this.translateService.instant('common.messages.sirWith', {
+            sir: userName
+          })
+        );
+      });
 
-          this.contents = `${owner}이 ${inviter.join(',')}을 초대했습니다.`;
-        }
-        break;
-      case EventType.Exit:
-        {
-          const m = this.message as Info<JoinEventJson>;
-          this.contents = `${m.sentMessage}님이 퇴장하셨습니다.`;
-        }
-        break;
-      case EventType.ForcedExit:
-        {
-          const m = this.message as Info<JoinEventJson>;
-          this.contents = `${m.exitForcingRequestUserName} 님이 ${m.sentMessage} 님을 퇴장 시키셨습니다.`;
-        }
-        break;
-      case EventType.RenameRoom:
-        {
-          const m = this.message as Info<RenameRoomEventJson>;
-          this.contents = `${m.sentMessageJson.requester}님이 대화방명을 '${m.sentMessageJson.roomName}'으로 변경하셨습니다.`;
-        }
-        break;
-      case EventType.NotificationForTimerRoom:
-        {
-          const m = this.message as Info<NotificationForTimerRoomEventJson>;
-          /**
-           * 타이머대화방 알림으로서 채팅 이벤트에서 처리하지 않고, 대화방 글로벌에서 처리.
-           */
-          this.contents = m.sentMessage;
-        }
-        break;
-      case EventType.GuideForRoomTimerChanged:
-        {
-          const m = this.message as Info<GuideForRoomTimerChangedEventJson>;
-          this.contents = `${
-            this.senderName
-          }님이 타이머를 설정하였습니다.(${this.getCalcTimer(
-            m.sentMessageJson.time * 1000
-          )})`;
-        }
-        break;
+      return inviter.join(',');
+    } else {
+      return this.translateService.instant('common.messages.sirWith', {
+        sir: names
+      });
     }
   }
 
   getCalcTimer(millisec: number) {
+    const langs = this.translateService.instant([
+      'common.units.hourFrom',
+      'common.units.minute',
+      'common.units.second'
+    ]);
+
     switch (millisec) {
       case 5000:
-        return '5 초';
+        return `5 ${langs['common.units.second']}`;
       case 10000:
-        return '10 초';
+        return `10 ${langs['common.units.second']}`;
       case 30000:
-        return '30 초';
+        return `30 ${langs['common.units.second']}`;
       case 60000:
-        return '1 분';
+        return `1 ${langs['common.units.minute']}`;
       case 300000:
-        return '5 분';
+        return `5 ${langs['common.units.minute']}`;
       case 600000:
-        return '10 분';
+        return `10 ${langs['common.units.minute']}`;
       case 1800000:
-        return '30 분';
+        return `30 ${langs['common.units.minute']}`;
       case 3600000:
-        return '1 시간';
+        return `1 ${langs['common.units.hourFrom']}`;
       case 21600000:
-        return '6 시간';
+        return `6 ${langs['common.units.hourFrom']}`;
       case 43200000:
-        return '12 시간';
+        return `12 ${langs['common.units.hourFrom']}`;
       case 86400000:
-        return '24 시간';
+        return `24 ${langs['common.units.hourFrom']}`;
       default:
-        return '0 초';
+        return `0 ${langs['common.units.second']}`;
     }
   }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass-translation.component.html

@@ -14,12 +14,14 @@
   <div class="btn-box">
     <ul>
       <li>
-        <button mat-button (click)="onClickMassDetail('O')">전체보기</button>
+        <button mat-button (click)="onClickMassDetail('O')">
+          {{ 'chat.event.showMassTranslationOfOriginal' | translate }}
+        </button>
       </li>
       <li>
         <button mat-button (click)="onClickMassDetail('T')">
-          <span class="language">{{ message.sentMessageJson.destLocale }}</span
-          >번역보기
+          <span class="language">{{ message.sentMessageJson.destLocale }}</span>
+          {{ 'chat.event.showMassTranslationOfTranslated' | translate }}
         </button>
       </li>
     </ul>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html

@@ -5,5 +5,7 @@
   </span>
 </div>
 <div *ngIf="detailButteonShow" class="btn-box">
-  <button mat-button (click)="onClickDetailView()">Detail View</button>
+  <button mat-button (click)="onClickDetailView()">
+    {{ 'chat.event.showMassDetail' | translate }}
+  </button>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.html

@@ -1,5 +1,5 @@
 <div class="read-here bg-warn-color ">
   <!--<span class="line"></span>-->
-  <span>여기까지 읽었습니다.</span>
+  <span>{{ 'chat.event.readToHere' | translate }}</span>
   <!--<span class="line"></span>-->
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.html

@@ -1,4 +1,4 @@
 <div class="bubble-main">
   <span class="icon-recall"><i class="material-icons">redo</i></span>
-  <span class="recall-msg">회수된 메시지</span>
+  <span class="recall-msg">{{ 'chat.event.recalled' | translate }}</span>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html

@@ -5,27 +5,31 @@
     >
       <ng-container [ngSwitch]="message.sentMessageJson.contents">
         <ng-container *ngSwitchCase="PlanContentType.New">
-          [이벤트] 등록
+          {{ 'chat.event.scheduleTypeNew' | translate }}
         </ng-container>
         <ng-container *ngSwitchCase="PlanContentType.Update">
-          [이벤트] 수정
+          {{ 'chat.event.scheduleTypeUpdate' | translate }}
         </ng-container>
         <ng-container *ngSwitchCase="PlanContentType.Delete">
-          [이벤트] 삭제
+          {{ 'chat.event.scheduleTypeDelete' | translate }}
         </ng-container>
         <ng-container *ngSwitchDefault>
-          [이벤트] 조회중..
+          {{ 'chat.event.scheduleTypeDefault' | translate }}
         </ng-container>
       </ng-container>
     </ng-container>
   </div>
   <ul class="event-info">
     <li class="event-date bg-accent-brightest">
-      <span class="text-accent-darkest">날짜</span
+      <span class="text-accent-darkest">{{
+        'common.units.date' | translate
+      }}</span
       >{{ date | ucapDate: 'YYYY.MM.DD' }}
     </li>
     <li class="event-time bg-accent-brightest">
-      <span class="text-accent-darkest">시간</span
+      <span class="text-accent-darkest">{{
+        'common.units.time' | translate
+      }}</span
       >{{ date | ucapDate: 'a hh:mm' }}
     </li>
     <li class="event-content">

projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html

@@ -20,14 +20,18 @@
 </div>
 <div class="btn-box">
   <ul *ngIf="expired" class="expired">
-    <li>기간이 만료된 파일입니다.</li>
+    <li>{{ 'common.file.errors.expired' | translate }}</li>
   </ul>
   <ul *ngIf="!expired && fileInfo && fileInfo.attachmentSeq">
     <li>
-      <button mat-button (click)="onClickSave()">저장</button>
+      <button mat-button (click)="onClickSave()">
+        {{ 'common.file.save' | translate }}
+      </button>
     </li>
     <li>
-      <button mat-button (click)="onClickSaveAs()">다른이름으로 저장</button>
+      <button mat-button (click)="onClickSaveAs()">
+        {{ 'common.file.saveAs' | translate }}
+      </button>
     </li>
   </ul>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -19,7 +19,7 @@
         <polyline class="st0" points="12.9,10 10,7.1 7.1,10 " />
         <line class="st0" x1="10" y1="12.9" x2="10" y2="7.1" />
       </svg>
-      <span>이전 대화 보기</span>
+      <span>{{ 'chat.event.showPreviousEvents' | translate }}</span>
     </button>
     <div
       class="unRead-count"
@@ -31,10 +31,13 @@
     >
       <span class="line"></span>
       <span class="count">
-        안읽은 메시지가
-        <span class="text-warn-color"
-          >({{ firstEventSeq - (roomInfo.lastReadEventSeq + 1) }})</span
-        >개 더 있습니다.
+        {{
+          'chat.event.moreUnreadEventsWith'
+            | translate
+              : {
+                  countOfUnread: firstEventSeq - (roomInfo.lastReadEventSeq + 1)
+                }
+        }}
       </span>
       <span class="line"></span>
     </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html

@@ -7,7 +7,7 @@
           matInput
           #inputSearch
           type="text"
-          placeholder="대화방 내용 검색"
+          placeholder="{{ 'chat.searchEventByText' | translate }}"
           value=""
           formControlName="searchInput"
           (keydown.enter)="onKeyDownEnter($event, inputSearch.value)"

projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts

@@ -33,6 +33,7 @@ import { VideoComponent as MBVideoComponent } from './components/message-box/vid
 import { VideoConferenceComponent as MBVideoConferenceComponent } from './components/message-box/video-conference.component';
 import { AllimComponent as MBAllimComponent } from './components/message-box/allim.component';
 import { SearchComponent } from './components/search.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 const COMPONENTS = [
   FormComponent,
@@ -72,6 +73,8 @@ const PROVIDERS = [DatePipe];
     MatButtonModule,
     MatMenuModule,
 
+    TranslateModule,
+
     UCapUiModule
   ],
   exports: [...COMPONENTS],