말풍선 내 줄바꿈 문자 처리.
대화리스트 finaleventDate 처리.
This commit is contained in:
parent
9f8a3045c9
commit
68dd36214c
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
</li>
|
[src]="stickerUrl"
|
||||||
<li *ngIf="contentJson && contentJson.chat">
|
onerror="this.src='assets/sticker/sticker_default.png'"
|
||||||
{{ contentJson.chat }}
|
/>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
<li
|
||||||
|
*ngIf="contentJson && contentJson.chat"
|
||||||
|
[innerHTML]="contentJson.chat | linefeedtohtml"
|
||||||
|
></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,3 @@
|
||||||
<div class="bubble-main">
|
<div class="bubble-main">
|
||||||
<span>
|
<span [innerHTML]="message.sentMessage"></span>
|
||||||
{{ message.sentMessage }}
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
|
@ -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() {}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
38
projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
Normal file
38
projects/ucap-webmessenger-ui/src/lib/pipes/dates.pipe.ts
Normal 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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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();
|
||||||
|
});
|
||||||
|
});
|
22
projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.ts
Normal file
22
projects/ucap-webmessenger-ui/src/lib/pipes/linefeed.pipe.ts
Normal 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');
|
||||||
|
}
|
||||||
|
}
|
|
@ -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: [
|
||||||
|
|
116
projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts
Normal file
116
projects/ucap-webmessenger-ui/src/lib/utils/string.util.ts
Normal 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;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -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';
|
||||||
|
|
Loading…
Reference in New Issue
Block a user