말풍선 내 줄바꿈 문자 처리.

대화리스트 finaleventDate 처리.
This commit is contained in:
leejh 2019-10-25 13:16:11 +09:00
parent 9f8a3045c9
commit 68dd36214c
12 changed files with 228 additions and 17 deletions

View File

@ -1,7 +1,5 @@
<div class="bubble-main"> <div class="bubble-main">
<span class="content"> <span class="content" [innerHTML]="content | linefeedtohtml"></span>
{{ content }}
</span>
<span> <span>
{{ message.sendDate | date: 'short' }} {{ message.sendDate | date: 'short' }}
</span> </span>

View File

@ -1,10 +1,14 @@
<div class="bubble-main"> <div class="bubble-main">
<ul> <ul>
<li *ngIf="stickerUrl"> <li *ngIf="stickerUrl">
<img [src]="stickerUrl" onerror="this.src='assets/sticker/sticker_default.png'"> <img
[src]="stickerUrl"
onerror="this.src='assets/sticker/sticker_default.png'"
/>
</li> </li>
<li *ngIf="contentJson && contentJson.chat"> <li
{{ contentJson.chat }} *ngIf="contentJson && contentJson.chat"
</li> [innerHTML]="contentJson.chat | linefeedtohtml"
</ul> ></li>
</ul>
</div> </div>

View File

@ -1,5 +1,3 @@
<div class="bubble-main"> <div class="bubble-main">
<span> <span [innerHTML]="message.sentMessage"></span>
{{ message.sentMessage }}
</span>
</div> </div>

View File

@ -1,5 +1,6 @@
import { Component, OnInit, Input } from '@angular/core'; import { Component, OnInit, Input } from '@angular/core';
import { Info } from '@ucap-webmessenger/protocol-event'; import { Info } from '@ucap-webmessenger/protocol-event';
import { StringUtil } from '@ucap-webmessenger/ui';
@Component({ @Component({
selector: 'ucap-chat-message-box-text', selector: 'ucap-chat-message-box-text',
@ -10,6 +11,7 @@ export class TextComponent implements OnInit {
@Input() @Input()
message: Info; message: Info;
test = `가<br>나<br >다<br/>라<br />마<br class=""/>바사`;
constructor() {} constructor() {}
ngOnInit() {} ngOnInit() {}

View File

@ -23,7 +23,9 @@
<div class="room-msg">{{ finalEventMessage }}</div> <div class="room-msg">{{ finalEventMessage }}</div>
</div> </div>
<div class="date">{{ roomInfo.finalEventDate }}</div> <div class="date">
{{ roomInfo.finalEventDate | dateToStringChatList }}
</div>
</dd> </dd>
<dd *ngIf="checkable"> <dd *ngIf="checkable">
<mat-checkbox <mat-checkbox

View File

@ -0,0 +1,11 @@
/* tslint:disable:no-unused-variable */
import { TestBed, async } from '@angular/core/testing';
import { DatesPipe } from './dates.pipe';
describe('Pipe: Datese', () => {
it('create an instance', () => {
let pipe = new DatesPipe();
expect(pipe).toBeTruthy();
});
});

View File

@ -0,0 +1,38 @@
import { Pipe, PipeTransform } from '@angular/core';
import { StringUtil } from '../utils/string.util';
@Pipe({
name: 'dateToStringChatList'
})
export class DateToStringForChatRoomListPipe implements PipeTransform {
transform(value: any): string {
const curDate = new Date();
const yesterDate = new Date(curDate.getTime() - 1 * 24 * 60 * 60 * 1000);
let date: Date;
if (typeof value === 'string') {
date = new Date(value.toString());
} else if (value instanceof Date) {
date = value;
} else {
return value;
}
if (
curDate.getFullYear() === date.getFullYear() &&
curDate.getMonth() === date.getMonth() &&
curDate.getDate() === date.getDate()
) {
// 당일
return StringUtil.dateFormat(date, 'a/p HH:mm');
} else if (
yesterDate.getFullYear() === date.getFullYear() &&
yesterDate.getMonth() === date.getMonth() &&
yesterDate.getDate() === date.getDate()
) {
// 어제
return '어제';
} else {
return StringUtil.dateFormat(date, 'MM.dd');
}
}
}

View File

@ -0,0 +1,11 @@
/* tslint:disable:no-unused-variable */
import { TestBed, async } from '@angular/core/testing';
import { LinefeedPipe } from './linefeed.pipe';
describe('Pipe: Linefeede', () => {
it('create an instance', () => {
let pipe = new LinefeedPipe();
expect(pipe).toBeTruthy();
});
});

View File

@ -0,0 +1,22 @@
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'linefeedtohtml'
})
export class LinefeedToHtmlPipe implements PipeTransform {
public transform(str: string): string {
return str
.replace(/\r\n/g, '<br />')
.replace(/\r/g, '<br />')
.replace(/\n/g, '<br />');
}
}
@Pipe({
name: 'htmltolinefeed'
})
export class HtmlToLinefeedPipe implements PipeTransform {
public transform(str: string): string {
return str.replace(/(<|<\/)br([\s.'"=a-zA-Z/]*)>/gi, '\n');
}
}

View File

@ -1,3 +1,4 @@
import { DateToStringForChatRoomListPipe } from './pipes/dates.pipe';
import { NgModule, ModuleWithProviders } from '@angular/core'; import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
@ -34,7 +35,13 @@ import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';
const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent]; const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
import { BytesPipe } from './pipes/bytes.pipe'; import { BytesPipe } from './pipes/bytes.pipe';
const PIPES = [BytesPipe]; import { LinefeedToHtmlPipe, HtmlToLinefeedPipe } from './pipes/linefeed.pipe';
const PIPES = [
BytesPipe,
LinefeedToHtmlPipe,
HtmlToLinefeedPipe,
DateToStringForChatRoomListPipe
];
@NgModule({ @NgModule({
imports: [ imports: [

View File

@ -0,0 +1,116 @@
export class StringUtil {
/**
* linefeed > <br>
*/
public static linefeedtohtml(str: string): string {
return str
.replace(/\r\n/g, '<br />')
.replace(/\r/g, '<br />')
.replace(/\n/g, '<br />');
}
/**
* <br> > linefeed
*/
public static htmltolinefeed(str: string): string {
return str.replace(/<(\/br)([^>]*)/gi, '\n');
}
/**
* prefix zero fill
* @param str target string
* @param len fill in length
*/
public static zeroFill(str: any, len: number): string {
if (typeof str === 'string') {
let fillin = '';
for (let i = 0; i < len - str.length; i++) {
fillin += '0';
}
return fillin + str;
} else if (typeof str === 'number') {
return StringUtil.zeroFill(str.toString(), len);
}
}
/**
* date formater
*/
public static dateFormat(date: Date, f: string): string {
if (!date) {
return '';
} else if (!f) {
return date.toDateString();
}
const weekKorName = [
'일요일',
'월요일',
'화요일',
'수요일',
'목요일',
'금요일',
'토요일'
];
const weekKorShortName = ['일', '월', '화', '수', '목', '금', '토'];
const weekEngName = [
'Sunday',
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday'
];
const weekEngShortName = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
return f.replace(/(yyyy|yy|MM|dd|KS|KL|ES|EL|HH|hh|mm|ss|a\/p)/gi, $1 => {
switch ($1) {
case 'yyyy':
return date.getFullYear().toString(); // 년 (4자리)
case 'yy':
return StringUtil.zeroFill(date.getFullYear() % 1000, 2); // 년 (2자리)
case 'MM':
return StringUtil.zeroFill(date.getMonth() + 1, 2); // 월 (2자리)
case 'dd':
return StringUtil.zeroFill(date.getDate(), 2); // 일 (2자리)
case 'KS':
return weekKorShortName[date.getDay()]; // 요일 (짧은 한글)
case 'KL':
return weekKorName[date.getDay()]; // 요일 (긴 한글)
case 'ES':
return weekEngShortName[date.getDay()]; // 요일 (짧은 영어)
case 'EL':
return weekEngName[date.getDay()]; // 요일 (긴 영어)
case 'HH':
return StringUtil.zeroFill(date.getHours(), 2); // 시간 (24시간 기준, 2자리)
case 'hh':
return StringUtil.zeroFill(date.getHours() % 12, 2); // 시간 (12시간 기준, 2자리)
case 'mm':
return StringUtil.zeroFill(date.getMinutes(), 2); // 분 (2자리)
case 'ss':
return StringUtil.zeroFill(date.getSeconds(), 2); // 초 (2자리)
case 'a/p':
return date.getHours() < 12 ? '오전' : '오후'; // 오전/오후 구분
default:
return $1;
}
});
}
}

View File

@ -14,4 +14,6 @@ export * from './lib/services/clipboard.service';
export * from './lib/services/dialog.service'; export * from './lib/services/dialog.service';
export * from './lib/services/snack-bar.service'; export * from './lib/services/snack-bar.service';
export * from './lib/utils/string.util';
export * from './lib/ucap-ui.module'; export * from './lib/ucap-ui.module';