화상회의 이벤트 처리.

This commit is contained in:
leejinho 2020-01-15 15:35:25 +09:00
parent 6877134292
commit c5f90be3e7
9 changed files with 209 additions and 7 deletions

View File

@ -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",

View File

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

View File

@ -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<
VideoConferenceEventJson
> = (message: string) => {
export const decodeVideoConferenceEventJson: EventJsonDecoder<VideoConferenceEventJson> = (
message: string
) => {
try {
const json = JsonAnalization.receiveAnalization(message);

View File

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

View File

@ -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';

View File

@ -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 }}

View File

@ -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>

View File

@ -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;
}

View File

@ -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() {}
}