화상회의 이벤트 처리.

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

@@ -213,6 +213,14 @@
       "showMassDetail": "Show detail",
       "readToHere": "Read to here",
       "recalled": "Recalled",
+      "videoConferenceTypeNow": "[Video Meeting] Processing..",
+      "videoConferenceTypeNew": "[Video Meeting] Registered",
+      "videoConferenceTypeUpdate": "[Video Meeting] Modified",
+      "videoConferenceTypeDelete": "[Video Meeting] Deleted",
+      "videoConferenceRegister": "Establisher",
+      "videoConferenceAttendee": "Participants",
+      "videoConferenceDate": "Date",
+      "videoConferenceEnjoy": "Attend",
       "scheduleTypeNew": "[Event] Registered",
       "scheduleTypeUpdate": "[Event] Modified",
       "scheduleTypeDelete": "[Event] Deleted",

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

@@ -213,6 +213,14 @@
       "showMassDetail": "전체 보기",
       "readToHere": "여기까지 읽었습니다.",
       "recalled": "회수된 메시지",
+      "videoConferenceTypeNow": "[화상회의] 진행중",
+      "videoConferenceTypeNew": "[화상회의] 등록",
+      "videoConferenceTypeUpdate": "[화상회의] 수정",
+      "videoConferenceTypeDelete": "[화상회의] 삭제",
+      "videoConferenceRegister": "개설자",
+      "videoConferenceAttendee": "참여자",
+      "videoConferenceDate": "날짜",
+      "videoConferenceEnjoy": "참석하기",
       "scheduleTypeNew": "[이벤트] 등록",
       "scheduleTypeUpdate": "[이벤트] 수정",
       "scheduleTypeDelete": "[이벤트] 삭제",

projects/ucap-webmessenger-protocol-event/src/lib/protocols/event-json/video-conference.event-json.ts

@@ -1,19 +1,20 @@
 import { EventJsonDecoder } from './event-json';
 import { JsonAnalization } from '@ucap-webmessenger/api';
+import { VideoConferenceContentsType } from '@ucap-webmessenger/protocol-event';
 
 export interface VideoConferenceEventJson {
   conferenceSeq?: number;
   title?: string;
-  contents?: string;
+  contents?: VideoConferenceContentsType;
   startDate?: string;
   endDate?: string;
   register?: string;
   attendee?: string;
 }
 
-export const decodeVideoConferenceEventJson: EventJsonDecoder<
+export const decodeVideoConferenceEventJson: EventJsonDecoder<VideoConferenceEventJson> = (
-  VideoConferenceEventJson
+  message: string
-> = (message: string) => {
+) => {
   try {
     const json = JsonAnalization.receiveAnalization(message);
 

projects/ucap-webmessenger-protocol-event/src/lib/types/video-conference.type.ts

@@ -0,0 +1,6 @@
+export enum VideoConferenceContentsType {
+  Now = 'CONF_CONTENTS_NOW',
+  New = 'CONF_CONTENTS_NEW',
+  Update = 'CONF_CONTENTS_UPDATE',
+  Delete = 'CONF_CONTENTS_DELETE'
+}

projects/ucap-webmessenger-protocol-event/src/public-api.ts

@@ -39,5 +39,6 @@ export * from './lib/types/event.type';
 export * from './lib/types/push-cl.type';
 export * from './lib/types/push-status.type';
 export * from './lib/types/service';
+export * from './lib/types/video-conference.type';
 
 export * from './lib/ucap-event-protocol.module';

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

@@ -148,6 +148,11 @@
               (massTranslationDetail)="onMassTranslationDetail($event)"
             >
             </ucap-chat-message-box-mass-translation>
+            <ucap-chat-message-box-video-conference
+              *ngSwitchCase="EventType.VideoConference"
+              [message]="message"
+            >
+            </ucap-chat-message-box-video-conference>
 
             <ucap-chat-message-box-allim
               *ngSwitchCase="EventType.AllimTms"
@@ -166,8 +171,6 @@
               <!--
                 notice
                 <ucap-chat-message-box-notice></ucap-chat-message-box-notice>
-                video-conference
-                <ucap-chat-message-box-video-conference></ucap-chat-message-box-video-conference>
 
                 <div class="message">
                   {{ message.sentMessage }}

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

@@ -0,0 +1,62 @@
+<div class="event-main bg-accent-dark">
+  <div class="event-header">
+    <ng-container
+      *ngIf="!!message.sentMessageJson && !!message.sentMessageJson.contents"
+    >
+      <ng-container [ngSwitch]="message.sentMessageJson.contents">
+        <ng-container *ngSwitchCase="VideoConferenceContentsType.Now">
+          {{ 'chat.event.videoConferenceTypeNow' | translate }}
+        </ng-container>
+        <ng-container *ngSwitchCase="VideoConferenceContentsType.New">
+          {{ 'chat.event.videoConferenceTypeNew' | translate }}
+        </ng-container>
+        <ng-container *ngSwitchCase="VideoConferenceContentsType.Update">
+          {{ 'chat.event.videoConferenceTypeUpdate' | translate }}
+        </ng-container>
+        <ng-container *ngSwitchCase="VideoConferenceContentsType.Delete">
+          {{ 'chat.event.videoConferenceTypeDelete' | translate }}
+        </ng-container>
+      </ng-container>
+    </ng-container>
+  </div>
+  <ul class="event-info">
+    <li class="event-date bg-accent-brightest">
+      <span class="text-accent-darkest">{{
+        'chat.event.videoConferenceRegister' | translate
+      }}</span
+      >{{ message.sentMessageJson.register }}
+    </li>
+    <li class="event-time bg-accent-brightest">
+      <span class="text-accent-darkest">{{
+        'chat.event.videoConferenceAttendee' | translate
+      }}</span
+      >{{ message.sentMessageJson.attendee }}
+    </li>
+    <li class="event-time bg-accent-brightest">
+      <span class="text-accent-darkest">{{
+        'chat.event.videoConferenceDate' | translate
+      }}</span
+      >{{
+        message.sentMessageJson.startDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
+      }}
+    </li>
+    <li class="event-content">
+      {{ message.sentMessageJson.title }}
+    </li>
+  </ul>
+
+  <div class="btn-box">
+    <ul>
+      <li>
+        <button mat-button (click)="onClickDetailView()">
+          {{ 'chat.detailView' | translate }}
+        </button>
+      </li>
+      <li>
+        <button mat-button (click)="onClickEnjoyConference()">
+          {{ 'chat.event.videoConferenceEnjoy' | translate }}
+        </button>
+      </li>
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,99 @@
+.event-main {
+  flex-direction: column;
+  text-align: left;
+  padding: 4px;
+  .event-header {
+    padding: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    text-align: center;
+    //background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: 10px center;
+    border-radius: 3px 3px 0 0;
+    min-width: 200px;
+    vertical-align: middle;
+    stroke: #ffffff;
+  }
+  .event-info {
+    border-radius: 0 0 6px 6px;
+    background-color: #ffffff;
+    li {
+      color: #333333;
+      &.event-title {
+        margin-bottom: 10px;
+        padding-bottom: 10px;
+        font-size: 14px;
+      }
+      &.event-date,
+      &.event-time {
+        padding: 4px 10px;
+        border-bottom: 1px dotted #dddddd;
+        span {
+          width: 60px;
+          padding: 1px 6px;
+          margin-right: 6px;
+          border-radius: 100px;
+          line-height: 20px;
+          display: inline-flex;
+          justify-content: center;
+          font-size: 0.96em;
+          margin-bottom: 2px;
+          color: #777777;
+        }
+      }
+      &.event-content {
+        padding: 10px;
+        color: #444444;
+        font-weight: normal;
+        font-size: 1em;
+      }
+    }
+  }
+
+  .btn-box {
+    width: 100%;
+    height: 40px;
+    border-top: 1px solid #dddddd;
+    display: flex;
+    width: 100%;
+    text-align: center;
+    ul {
+      width: 100%;
+      li {
+        width: 50%;
+        height: 100%;
+        display: inline-block;
+        text-align: center;
+        align-items: center;
+        font-size: 13px;
+        border-right: 1px solid #dddddd;
+        &:last-child {
+          border-right: none;
+        }
+        .mat-button {
+          width: 100%;
+          display: block;
+          height: 100%;
+        }
+      }
+      &.expired {
+        li {
+          width: 100%;
+          white-space: nowrap;
+          color: #999999;
+          align-items: center;
+          line-height: 40px;
+        }
+      }
+    }
+  }
+}
+
+::ng-deep .message-row.me > .event-info {
+  border-radius: 0 0 0 6px;
+}
+
+.feather-calendar {
+  stroke: #ffffff;
+}

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

@@ -1,4 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { VideoConferenceContentsType } from '@ucap-webmessenger/protocol-event';
+import {
+  VideoConferenceEventJson,
+  Info
+} from '@ucap-webmessenger/protocol-event';
 
 @Component({
   selector: 'ucap-chat-message-box-video-conference',
@@ -6,7 +11,16 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./video-conference.component.scss']
 })
 export class VideoConferenceComponent implements OnInit {
+  @Input()
+  message: Info<VideoConferenceEventJson>;
+
+  VideoConferenceContentsType = VideoConferenceContentsType;
+
   constructor() {}
 
   ngOnInit() {}
+
+  onClickDetailView() {}
+
+  onClickEnjoyConference() {}
 }