i18n is working

2020-01-08 16:13:00 +09:00 · 2020-01-08 16:13:00 +09:00 · 6c0e304fca
commit 6c0e304fca
parent 65e95511ac
16 changed files with 190 additions and 94 deletions
--- a/projects/ucap-webmessenger-app/src/assets/i18n/en.json
+++ b/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",
--- a/projects/ucap-webmessenger-app/src/assets/i18n/ko.json
+++ b/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": "페이지별 갯수",
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/allim.component.html
+++ b/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">
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/information.component.ts
+++ b/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 + '님';
+  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']}`;
    }
  }
 }
--- 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
@ -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>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/read-here.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/recall.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/schedule.component.html
+++ b/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">
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/video.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/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>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/search.component.html
+++ b/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)"
--- a/projects/ucap-webmessenger-ui-chat/src/lib/ucap-ui-chat.module.ts
+++ b/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],