1. 타이머대화방 정보알림 처리.

2. 정보성 데이터 분리 처리. 3. 대화 회수 처리.
2019-10-15 11:50:23 +09:00 · 2019-10-15 11:50:23 +09:00 · 6a852b4a1a
commit 6a852b4a1a
parent a986b3a370
5 changed files with 138 additions and 47 deletions
--- 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
@ -34,6 +34,10 @@
  <mat-progress-bar *ngIf="eventListProcessing$ | async" mode="indeterminate"></mat-progress-bar>
  <!-- CHAT CONTENT -->
  <div fxFlex="1 1 auto" class="chat-content" #messageBoxContainer>
+    <!-- Timer Room Info -->
+    <span *ngIf="roomInfo && roomInfo.isTimeRoom">비밀 대화방입니다.</span>
+    <!-- Timer Room Info -->
+
    <!-- CHAT MESSAGES -->
    <ucap-chat-messages [messages]="eventList$ | async" [userInfos]="userInfoList$ | async" [loginRes]="loginRes"
      (massDetail)="onMassDetail($event)" (save)="onSave($event)" (imageViewer)="onImageViewer($event)">
--- 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
@ -10,6 +10,8 @@ import { Info, EventType } from '@ucap-webmessenger/protocol-event';
 export class InformationComponent implements OnInit {
  @Input()
  message: Info;
+  @Input()
+  senderName?: string;

  contents: string;

@ -32,6 +34,59 @@ export class InformationComponent implements OnInit {
      case EventType.Exit:
        this.contents = `${this.message.sentMessage}님이 퇴장하셨습니다.`;
        break;
+      case EventType.RenameRoom:
+        this.contents = `${this.message.sentMessage.substring(
+          0,
+          this.message.sentMessage.indexOf(',')
+        )}님이 대화방명을 '${this.message.sentMessage.substring(
+          this.message.sentMessage.indexOf(',') + 1
+        )}'으로 변경하셨습니다.`;
+        break;
+      case EventType.NotificationForTimerRoom:
+        /**
+         * 타이머대화방 알림으로서 채팅 이벤트에서 처리하지 않고, 대화방 글로벌에서 처리.
+         */
+        this.contents = this.message.sentMessage;
+        break;
+      case EventType.GuideForRoomTimerChanged:
+        const values = this.message.sentMessage.split(',');
+        if (values && values.length === 2) {
+          this.contents = `${
+            this.senderName
+          }님이 타이머를 설정하였습니다.(${this.getCalcTimer(
+            Number(values[1]) * 1000
+          )})`;
+        }
+        break;
+    }
+  }
+
+  getCalcTimer(millisec: number) {
+    switch (millisec) {
+      case 5000:
+        return '5 초';
+      case 10000:
+        return '10 초';
+      case 30000:
+        return '30 초';
+      case 60000:
+        return '1 분';
+      case 300000:
+        return '5 분';
+      case 600000:
+        return '10 분';
+      case 1800000:
+        return '30 분';
+      case 3600000:
+        return '1 시간';
+      case 21600000:
+        return '6 시간';
+      case 43200000:
+        return '12 시간';
+      case 86400000:
+        return '24 시간';
+      default:
+        return '0 초';
    }
  }
 }
--- 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
@ -0,0 +1,3 @@
+<p>
+  회수된 메시지
+</p>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
@ -4,59 +4,71 @@
      me: message.senderSeq === loginRes.userSeq,
      contact: message.senderSeq !== loginRes.userSeq
    }">
+
    <ucap-chat-message-box-date-splitter *ngIf="getDateSplitter(i)" [message]="message">
    </ucap-chat-message-box-date-splitter>

-    <div *ngIf="message.type !== EventType.Join && message.type !== EventType.Exit">
-      <ul>
-        <li *ngIf="getUserProfile(message.senderSeq) != ''">
-          <img [src]="getUserProfile(message.senderSeq)" onerror="this.src='assets/images/img_nophoto_50.png'"
-            class="avatar" style="width: 50px; height: 50px;" />
-        </li>
-        <li>
-          {{ getUserName(message.senderSeq) }}
-        </li>
-      </ul>
-    </div>
-
-    <ng-container class="bubble" [ngSwitch]="message.type">
-      <ucap-chat-message-box-information *ngSwitchCase="EventType.Join" [message]="message">
-      </ucap-chat-message-box-information>
-      <ucap-chat-message-box-information *ngSwitchCase="EventType.Exit" [message]="message">
-      </ucap-chat-message-box-information>
-      <ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"
-        (massDetail)="onMassDetail($event)">
-      </ucap-chat-message-box-mass>
-      <ucap-chat-message-box-file *ngSwitchCase="EventType.File" [message]="message" (save)="onSave($event)"
-        (imageViewer)="onImageViewer($event)">
-      </ucap-chat-message-box-file>
-      <ucap-chat-message-box-sticker *ngSwitchCase="EventType.Sticker" [message]="message">
-      </ucap-chat-message-box-sticker>
-      <ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message"></ucap-chat-message-box-text>
-      <div *ngSwitchDefault>
-        mass-translation
-        <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
-        notice
-        <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
-        recall
-        <ucap-chat-message-box-recall></ucap-chat-message-box-recall>
-        <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
-        translation
-        <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
-        video-conference
-        <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
-
-        <div class="message">
-          {{ message.sentMessage }}
-        </div>
+    <div *ngIf="getIsInformation(message); then information else contents"></div>
+    <ng-template #information>
+      <ng-container class="bubble" *ngIf="message.type !== EventType.NotificationForTimerRoom"
+        [ngSwitch]="message.type">
+        <ucap-chat-message-box-information *ngSwitchCase="EventType.Join" [message]="message">
+        </ucap-chat-message-box-information>
+        <ucap-chat-message-box-information *ngSwitchCase="EventType.Exit" [message]="message">
+        </ucap-chat-message-box-information>
+        <ucap-chat-message-box-information *ngSwitchCase="EventType.RenameRoom" [message]="message">
+        </ucap-chat-message-box-information>
+        <ucap-chat-message-box-information *ngSwitchCase="EventType.GuideForRoomTimerChanged" [message]="message"
+          [senderName]="getUserName(message.senderSeq)">
+        </ucap-chat-message-box-information>
+      </ng-container>
+    </ng-template>
+    <ng-template #contents>
+      <div>
+        <ul>
+          <li *ngIf="getUserProfile(message.senderSeq) != ''">
+            <img [src]="getUserProfile(message.senderSeq)" onerror="this.src='assets/images/img_nophoto_50.png'"
+              class="avatar" style="width: 50px; height: 50px;" />
+          </li>
+          <li>
+            {{ getUserName(message.senderSeq) }}
+          </li>
+        </ul>
      </div>
-    </ng-container>
-    <div *ngIf="message.type !== EventType.Join && message.type !== EventType.Exit">
+
+      <ng-container class="bubble" *ngIf="message.type !== EventType.NotificationForTimerRoom"
+        [ngSwitch]="message.type">
+        <ucap-chat-message-box-mass *ngSwitchCase="EventType.MassText" [message]="message"
+          (massDetail)="onMassDetail($event)">
+        </ucap-chat-message-box-mass>
+        <ucap-chat-message-box-file *ngSwitchCase="EventType.File" [message]="message" (save)="onSave($event)"
+          (imageViewer)="onImageViewer($event)">
+        </ucap-chat-message-box-file>
+        <ucap-chat-message-box-sticker *ngSwitchCase="EventType.Sticker" [message]="message">
+        </ucap-chat-message-box-sticker>
+        <ucap-chat-message-box-recall *ngSwitchCase="EventType.RecalledMessage"></ucap-chat-message-box-recall>
+        <ucap-chat-message-box-text *ngSwitchCase="EventType.Character" [message]="message">
+        </ucap-chat-message-box-text>
+        <div *ngSwitchDefault>
+          mass-translation
+          <ucap-chat-message-box-mass-translation></ucap-chat-message-box-mass-translation>
+          notice
+          <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
+          <ucap-chat-message-box-schedule></ucap-chat-message-box-schedule>
+          translation
+          <ucap-chat-message-box-translation></ucap-chat-message-box-translation>
+          video-conference
+          <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
+
+          <div class="message">
+            {{ message.sentMessage }}
+          </div>
+        </div>
+      </ng-container>
+
      <div class="time secondary-text">
        {{ message.sendDate | date: 'a hh:mm' }}
      </div>
-    </div>
-
-
+    </ng-template>
  </div>
 </div>
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
@ -72,6 +72,23 @@ export class MessagesComponent implements OnInit {
    return '';
  }

+  /**
+   * 정보성 Event 인지 판단.
+   * @description 정보성 event 일 경우 프로필, 일시 를 표현하지 않는다.
+   */
+  getIsInformation(info: Info) {
+    if (
+      info.type === EventType.Join ||
+      info.type === EventType.Exit ||
+      info.type === EventType.RenameRoom ||
+      info.type === EventType.NotificationForTimerRoom ||
+      info.type === EventType.GuideForRoomTimerChanged
+    ) {
+      return true;
+    }
+    return false;
+  }
+
  /** Date Splitter check */
  getDateSplitter(curIndex: number): boolean {
    if (curIndex === 0) {