This commit is contained in:
2025-07-02 21:55:07 +09:00
commit fa63330e69
855 changed files with 432271 additions and 0 deletions

View File

@@ -0,0 +1,951 @@
import m from 'http://devtalk.kospo.co.kr:3000/static/bundle/mithril-2.2.2/mithril.js'
import {global} from "http://devtalk.kospo.co.kr:3000/static/js/module/variable.js";
import {talkEvent} from "http://devtalk.kospo.co.kr:3000/static/js/module/talkEvent.js"
import Common from "http://devtalk.kospo.co.kr:3000/static/js/utils.js";
// 화면 랜더링 관련 기능
const talkMapping = (chats) => {
talkEvent.talkSort()
const vnode = [];
const chatList = global.shadowRoot.querySelector('#chat-list');
if(chats.length === 0) {
vnode.push(
m('img', {class: 'chat-empty', src: `http://devtalk.kospo.co.kr:3000/static/image/empty.svg?color=${global.option.button.color.replace("#", '')}`})
)
} else {
for (const ch of chats) {
let smName = []
let smSabun = []
let unRead = '';
let avatar = null;
let onlineYn = false;
/*문의자가 방은 만들었지만 메시지 작성이 없을시 제외*/
if((ch.lastMessage !== null && ch.lastMessage !== '') || !ch.work.smUsers.map((sm) => sm.sabun).join(',').includes(global.user.sabun)) {
ch.work.smUsers.forEach((sm) => {
ch.talkMembers.forEach((cm) => {
if(sm.sabun === cm.sabun) {
smName.push(sm.name);
smSabun.push(sm.sabun);
if(cm.onlineYn && global.user.sabun !== sm.sabun) {
onlineYn = true;
}
} else {
if(global.user.sabun === sm.sabun) {
if(cm.onlineYn && cm.sabun !== global.user.sabun) {
if(!onlineYn) {
onlineYn = cm.onlineYn
}
}
}
}
})
})
if (smName.length === 0 && smSabun.length === 0) {
ch.talkMembers.forEach((cm) => {
if (cm.sabun !== global.user.sabun) {
smName.push(cm.name);
smSabun.push(cm.sabun);
}
})
}
if(ch.unReadCnt !== 0) {
unRead = m('div', {class:'chat-list-badge bg-danger'}, ch.unReadCnt);
}
if(ch.work.workLogo === null) {
avatar = m('div', {class:`avatar avatar-xl ${ch.closeYn ? 'status-do-not-disturb' : (onlineYn ? 'status-online' : 'status-offline')}`}, [
m('div', {class:'rounded-square chat-room-avatar'}, ch.insSabun === global.user.sabun ? `${ch.work.workNm.substring(0, 1)}` : ch.insName.substring(0, 1))
])
} else {
avatar = m('div', {class:`avatar avatar-xl ${ch.closeYn ? 'status-do-not-disturb' : (onlineYn ? 'status-online' : 'status-offline')}`}, [
m('img', {src: `${global.apiUrl}/logo/${ch.work.workLogo.vnm}`, class:`avatar avatar-xl ${ch.closeYn ? 'status-do-not-disturb' : (onlineYn ? 'status-online' : 'status-offline')}`})
])
}
vnode.push(m('div', {class:`cus-show hover-actions-trigger chat-wrap nav-item ${ch.unReadCnt === 0 ? '' : 'unread-message'} ${ch.closeYn ? 'chat-close' : ''}`, role:"tab", 'data-bs-toggle':"tab", 'data-bs-target':"#chat-0", 'aria-controls':"chat-0",
'aria-selected':"true", 'data-work-id':`${ch.work.workId}`, 'data-work-nm':`${ch.work.workNm}`, 'data-target-sabun': `${ch.insSabun}`, 'data-work-sm-nm':`${smName.join(',')}`, 'data-work-sm-sabun' : `${smSabun.join(',')}`, 'data-talk-id':`${ch.talkId}`, 'data-comp-yn':`${ch.compYn}`, 'data-close-yn':`${ch.closeYn}`, 'data-rating-Yn':`${ch.ratingYn}`}, [
m('div', {class:"d-lg-block"}, [
m('div', {class:"dropdown dropdown-active-trigger dropdown-chat"}, [
m('button', {class:"bg-transparent chat-options hover-actions btn btn-link btn-sm text-400 dropdown-caret-none dropdown-toggle end-0 fs-9 mt-3 me-1 z-1 pb-2 mb-n2", type:"button", 'data-boundary':"viewport",'data-bs-auto-close': 'true', 'data-bs-toggle':"dropdown", 'aria-haspopup':'true', 'aria-expanded':'false'}, [
m('i', {class: 'bi bi-gear-fill bi-color-grey'})
]),
m('div', {class:'dropdown-menu dropdown-menu-end border py-2 rounded-3'}, [
m('button', {class:'dropdown-item chat-mark bg-transparent'}, '보관'),
m('div', {class:'dropdown-divider'}),
m('button', {class:'dropdown-item chat-delete text-danger bg-transparent'}, '삭제')
])
])
]),
m('div', {class:'d-flex p-3', role:'button'}, [
avatar,
m('div', {class:'flex-1 chat-wrap-body ms-3 d-lg-block'}, [
m('div', {class: 'd-flex justify-content-between', style:'padding-bottom:3px;'}, [
m('h6', {class:`mb-0 chat-wrap-title ${smName.length === 1 ? '': 'cus-tooltip'} ${ch.markYn ? 'pin': ''}`, 'data-tooltip':`${smName.join(',')}`}, global.user.sabun === ch.insSabun ? `${ch.work.workNm} (${smName.length === 1 ? smName[0] : smName[0]+'외 '+ (smName.length -1)+'명'})` : `${ch.insName}(${ch.insSabun})`),
m('span', {class:'message-time'}, Common.talkListDateFormat(ch.lastMessageDate))
]),
m('div', {class:'min-w-0 max-h-15'}, [
m('div', {class:'chat-wrap-content pe-3'}, Common.nullCheck(ch.lastMessage)),
m('div', {class:'position-absolute bottom-0 end-0 hover-hide'}),
unRead
])
])
]),
]));
}
}
}
m.render(chatList, []);
m.render(chatList, vnode);
}
/*정보메시지 전송*/
const infoMessage = (msg) => {
return m('div', {class: 'd-flex p-2 pb-3 chat-info'}, [
m('div', {class:'flex-1 px-3'}, [
m('div', {class:'v-100'}, [
m('div', {class: 'hover-actions-trigger'}, [
m('div', {class:'bg-info text-white p-2 rounded-3 w-100 text-center text-pre-wrap', 'data-bs-theme': 'light'}, msg)
])
])
])
])
}
const systemMessage = (msg) => {
const html = [];
html.push(`<div class="d-flex p-2 pb-3 system-message">`);
html.push(`<div class="flex-1 px-3">`)
html.push(`<div class="v-100">`)
html.push(`<div class="hover-actions-trigger">`)
html.push(`<div class="bg-info text-white p-2 rounded-2 w-100 text-center text-pre-wrap" data-bs-theme="light">`)
html.push(msg);
html.push(`</div>`);
html.push(`</div>`);
html.push(`</div>`);
html.push(`</div>`);
html.push(`</div>`);
const chatContent = global.shadowRoot.querySelector('#chat-content');
const content = chatContent.querySelector('.simplebar-content');
content.insertAdjacentHTML('beforeend', html.join(''))
}
/*채팅 날짜 엘리먼트 생성*/
const dateMessage = (date) => {
return m('div', {class: 'text-center fs-10 text-500 chat-content-date p-2'}, [
m('span', date)
])
}
/*이미지 미리보기 */
const setImageModal = (param) => {
console.log(1)
const cca = JSON.parse(param);
// global.shadowRoot.querySelector('.modal-title').innerText = decodeURI(cca.onm)
const modalBody = global.shadowRoot.querySelector('.modal-body');
const img = m('img', {'src': `${global.apiUrl}/api/message/image?${new URLSearchParams(cca)}`, class: 'w-100'})
m.render(modalBody, img)
}
const messageMapping = (talkId, dto, position, reset) => {
let prevTalkId = '';
let vNode = []
global.currDay = '';
const chatContent = global.shadowRoot.querySelector('#chat-content');
const content = chatContent.querySelector('.simplebar-content');
const cacheTalk = global.talkData.filter((talk) => talk.talkId === talkId)[0];
// 톡방 메시지가 존재 하지 않을시 강제 주입
if(cacheTalk.talkMessages.talks === undefined || cacheTalk.talkMessages.talks === null) {
cacheTalk.talkMessages = dto;
} else {
if(reset) {
cacheTalk.talkMessages = dto;
} else {
if(position === 'after') cacheTalk.talkMessages.talks = [...cacheTalk.talkMessages.talks, ...dto.talks];
else if(position === 'before') cacheTalk.talkMessages.talks = [...dto.talks, ...cacheTalk.talkMessages.talks];
cacheTalk.talkMessages.total = cacheTalk.talkMessages.total + dto.talks.length;
}
}
if(localStorage.getItem(global.tabId) === talkId) {
for (const idx in cacheTalk.talkMessages.talks) {
try {
const msg = cacheTalk.talkMessages.talks[idx];
const nextMsg = cacheTalk.talkMessages.talks[parseInt(idx) +1];
const newDate = Common.dayOfWeek(msg.insDate.substring(0, 10));
if (global.currDay !== newDate) {
vNode.push(...[dateMessage(newDate)])
global.currDay = newDate
}
const chatDate = Common.talkDateFormat(msg.insDate);
let nextDate = nextMsg === undefined ? '' : (nextMsg.insSabun === 'info' ? "" : Common.talkDateFormat(nextMsg.insDate));
if(msg.insSabun === 'info') {
vNode.push(...[infoMessage(msg.message)])
} else if (global.user.sabun === msg.insSabun) {
/*이전 대화내용이 본인이 아니고 채팅 날짜 일때는 강제 입력 날짜 주입*/
let force = false;
try {
force = (vNode[vNode.length - 1].attrs.className.includes('your') ||
vNode[vNode.length - 1].attrs.className.includes('chat-content-date') ||
vNode[vNode.length - 1].attrs.className.includes('chat-info')) && !nextMsg;
if(!force) {
force = global.user.sabun !== (nextMsg === undefined ? '' : nextMsg.insSabun);
}
} catch(e) {
force = true;
}
vNode.push(...mineMessage(msg, chatDate, nextDate, force))
} else {
/*이전 대화내용이 본인이 아니고 채팅 날짜 일때는 강제 입력 날짜 주입*/
let force = false;
try {
/*다음 메시지가 존재 하지 않으면 이전 글이 상대발 글일시 날짜 주입*/
force = (vNode[vNode.length - 1].attrs.className.includes('mine') ||
vNode[vNode.length - 1].attrs.className.includes('chat-content-date') ||
vNode[vNode.length - 1].attrs.className.includes('chat-info')) && !nextMsg;
if(!force) {
force = global.user.sabun === (nextMsg === undefined ? '' : nextMsg.insSabun);
}
} catch(e) {
force = true;
}
vNode.push(...yourMessage(msg, vNode[vNode.length - 1], chatDate, nextDate, force))
}
prevTalkId = msg.talkId;
} catch(e) {
}
}
m.render(content, vNode)
}
}
const mineFileMessage = (msg, date, nextDate, force) => {
const talkAttachDtos = msg.talkAttachDtos;
const key = msg.attach == null ? '' : msg.attach.key;
let downloadFlag = true;
const downloadParam = {
talkId : msg.talkId,
sabun : msg.insSabun,
insDate : msg.insDate,
}
let delYn = false;
let onm = '';
let size = 0;
let fileIcon = '';
talkAttachDtos.forEach((cc) => {
size = size + cc.size
if(cc.delYn) delYn = true;
if(cc.uploading) downloadFlag = false;
});
if(talkAttachDtos.length === 1) {
fileIcon = 'bi-file-earmark-text'
onm = talkAttachDtos[0].onm;
} else {
fileIcon = 'bi-file-earmark-zip'
onm = `${talkAttachDtos[0].onm}${talkAttachDtos.length - 1}.zip`;
}
size = Math.round(size / 1024);
let tailFlag = false;
let insDate;
if(force) {
insDate = m('div', {class: 'text-400 fs-11 chat-date text-end mr-10'}, [
m('span', `${date}`)
])
} else {
if(date !== nextDate) {
insDate = m('div', {class: 'text-400 fs-11 chat-date text-end mr-10'}, [
m('span', `${date}`)
])
}
}
if(global.mineOldDate !== date) {
tailFlag = true;
global.mineOldDate = date
}
return m('div', {class: 'd-flex p-1 chat-text-wrapper mine cus-show', 'data-key': key, 'data-ins-date' : msg.insDate}, [
m('div', {class: 'flex-1 d-flex justify-content-end'}, [
m('div', {class: 'w-max-85'}, [
m('div', {class: 'hover-actions-trigger d-flex flex-end-center'}, [
m('ul', {class: 'position-relative list-inline mb-0 text-400 me-2 chat-gallery-option mr-10'}, [
delYn ? '' :
m('li', {class: 'list-inline-item'}, [
downloadFlag ?
m('a', {
class: 'chat-option',
href: `${global.apiUrl}/api/message/download?${new URLSearchParams(downloadParam).toString()}`,
target: '_download_',
rel: 'noopener',
'ata-bs-toggle': "tooltip",
'data-bs-placement': "top",
'aria-label': "Forward",
'data-bs-original-title': "Forward"
}, [
m('i', {class: 'bi bi-download text-black', style: 'font-size: 12px;'})
]) : ''
])
]),
m('div', {'search-yn': `${msg.searchYn}`, class: `chat-content-custom-font-size chat-message bg-light p-2 rounded-3 mr-10 chat-file ${tailFlag ? 'tail': ''}`, style: 'max-width:250px;'}, [
delYn ? m('div', {class: 'attach-del'}) : '',
m('div', {class: 'file-fade cus-hide'}),
m('div', {class: 'd-flex justify-content-between'}, [
m('div', {}, [
m('i', {class: `bi ${fileIcon}`, style: 'color:#505050;font-size:30px;padding-right:10px;'}),
]),
m('div', {class: 'attach-file'}, [
m('div', {class: 'fs-xxl-10 pb-1 attach-file'}, onm),
m('div', {class: 'fs-xxl-11'},`용량 : ${size}kb`),
])
]),
downloadFlag ? '': m('div', {class: 'progress', style: 'margin-top:5px; margin-bottom:5px;'}, [
m('div', {class:'progress-bar bg-low-purple', role: 'progressbar', style: 'width:0%;', 'aria-valuenow': "100",'aria-valuemin':"0", 'aria-valuemax':"100" }, '0%')
])
]),
]),
insDate
])
])
])
}
const mineManualMessage = (msg, date, manualParam, nextDate, force) => {
const downloadParam = {
vnm : manualParam.vnm,
workId : manualParam.workId,
}
const fileIcon = 'bi-file-earmark-text'
const size = Math.round(parseInt(manualParam.size) / 1024);
let tailFlag = false;
let insDate;
if(force) {
insDate = m('div', {class: 'text-400 fs-11 chat-date text-end mr-10'}, [
m('span', `${date}`)
])
} else {
if(date !== nextDate) {
insDate = m('div', {class: 'text-400 fs-11 chat-date text-end mr-10'}, [
m('span', `${date}`)
])
}
}
if(global.mineOldDate !== date) {
tailFlag = true;
global.mineOldDate = date
}
return m('div', {class: 'd-flex p-1 chat-text-wrapper mine cus-show'}, [
m('div', {class: 'flex-1 d-flex justify-content-end'}, [
m('div', {class: 'w-max-85'}, [
m('div', {class: 'hover-actions-trigger d-flex flex-end-center'}, [
m('ul', {class: 'position-relative list-inline mb-0 text-400 me-2 chat-gallery-option mr-10'}, [
m('li', {class: 'list-inline-item'}, [
m('a', {
class: 'chat-option',
href: `${global.apiUrl}/api/manual/download/doc?${new URLSearchParams(downloadParam).toString()}`,
target: '_download_',
rel: 'noopener',
'ata-bs-toggle': "tooltip",
'data-bs-placement': "top",
'aria-label': "Forward",
'data-bs-original-title': "Forward"
}, [
m('i', {class: 'bi bi-download text-black', style: 'font-size: 12px;'})
])
])
]),
m('div', {'search-yn': `${msg.searchYn}`, class: `chat-content-custom-font-size chat-message bg-light p-2 rounded-3 mr-10 chat-file ${tailFlag ? 'tail': ''}`, style: 'max-width:250px;'}, [
m('div', {class: 'file-fade cus-hide'}),
m('div', {class: 'd-flex justify-content-between'}, [
m('div', {}, [
m('i', {class: `bi ${fileIcon}`, style: 'color:#505050;font-size:30px;padding-right:10px;'}),
]),
m('div', {class: 'attach-file'}, [
m('div', {class: 'fs-xxl-10 pb-1 attach-file'}, manualParam.onm),
m('div', {class: 'fs-xxl-11'},`용량 : ${size}kb`),
])
])
]),
]),
insDate
])
])
])
}
/*자신에게 보이는 첨부파일 메시지 정의*/
const mineImageMessage = (msg, date, nextDate, force) => {
const talkAttachDtos = msg.talkAttachDtos;
console.log(talkAttachDtos)
const key = msg.attach == null ? '' : msg.attach.key;
let downloadFlag = true;
let attachList = []
let delYn = false
talkAttachDtos.forEach((cca, idx) => {
if(cca.uploading) downloadFlag = false;
if(cca.delYn) delYn = true;
const imageParam = {
talkId : msg.talkId,
sabun : msg.insSabun,
insDate : msg.insDate,
onm : encodeURI(cca.onm),
sort : cca.sort,
size : 100
}
const jsonStr = JSON.stringify(imageParam)
const remain = talkAttachDtos.length % 3
attachList.push(m('div', {onclick:function() {setImageModal(jsonStr)}, class:`col-${talkAttachDtos.length - remain > idx ? '4' : remain === 1 ? '12' : '6'} p-1`}, [
m('div', {'data-bs-toggle':"modal", 'data-bs-target':"#imageModal", 'data-url' :new URLSearchParams(imageParam).toString(), class:'attach-a'}, [
delYn ?
m('img', {src: `http://devtalk.kospo.co.kr:3000/static/image/empty_img.png`, alt: '', class: 'img-fluid rounded attach-img mb-2'}) :
m('img', {src: cca.data === null ? `${global.apiUrl}/api/message/thumb?${new URLSearchParams(imageParam).toString()}` : cca.data, alt: '', class: 'img-fluid rounded attach-img mb-2'})
])
]
))
})
const downloadParam = {
talkId : msg.talkId,
sabun : msg.insSabun,
insDate : msg.insDate,
}
/*
tail bg-primary text-white p-2 rounded-3 chat-message mr-10 mine
* */
let tailFlag = false;
let insDate;
if(force) {
insDate = m('div', {class: 'text-400 fs-11 chat-date text-end mr-10'}, [
m('span', `${date}`)
])
} else {
if(date !== nextDate) {
insDate = m('div', {class: 'text-400 fs-11 chat-date text-end mr-10'}, [
m('span', `${date}`)
])
}
}
if(global.mineOldDate !== date) {
tailFlag = true;
global.mineOldDate = date
}
return m('div', {class: 'd-flex p-1 chat-text-wrapper mine cus-show', 'data-key': key, 'data-ins-date' : msg.insDate}, [
m('div', {class: 'flex-1 d-flex justify-content-end'}, [
m('div', {class: 'w-xxl-85'}, [
m('div', {class: 'hover-actions-trigger d-flex flex-end-center'}, [
delYn ? '' :
m('ul', {class: 'position-relative list-inline mb-0 text-400 me-2 chat-gallery-option mr-10'}, [
m('li', {class: 'list-inline-item'}, [
downloadFlag ?
m('a', {
class: 'chat-option',
href: `${global.apiUrl}/api/message/download?${new URLSearchParams(downloadParam).toString()}`,
target: '_download_',
rel: 'noopener',
'ata-bs-toggle': "tooltip",
'data-bs-placement': "top",
'aria-label': "Forward",
'data-bs-original-title': "Forward"
}, [
m('i', {class: 'bi bi-download text-black', style: 'font-size: 14px;'})
]) : ''
])
]),
m('div', {'search-yn': `${msg.searchYn}`, class: `chat-content-custom-font-size bg-primary text-white p-2 rounded-3 chat-message mr-10 mine chat-gallery ${tailFlag ? 'tail': ''}`}, [
delYn ? m('div', {class: 'attach-del'}) : '',
m('div', {class: 'file-fade cus-hide'}),
m('div', {class: 'row mx-n1'}, attachList),
downloadFlag ? '': m('div', {class: 'progress', style: 'margin-top:5px; margin-bottom:5px;'}, [
m('div', {class:'progress-bar bg-low-purple', role: 'progressbar', style: 'width:0%;', 'aria-valuenow': "100",'aria-valuemin':"0", 'aria-valuemax':"100" }, '0%')
])
])
])
,insDate
])
])
]);
}
/*자신에게 보이는 메시지 정의*/
const mineMessage = (msg, date, nextDate, force) => {
const wrapper = global.shadowRoot.querySelectorAll('.chat-text-wrapper');
let merge = [];
let attaches;
let insDate;
let tailFlag = false;
/*첨부파일 리스트가 없을시 강제 리스트 주입*/
if(msg.talkAttachDtos === null || msg.talkAttachDtos === undefined) msg.talkAttachDtos = [];
/**/
if(msg.message.includes('[매뉴얼]')) {
const manualParam = JSON.parse(msg.message);
return mineManualMessage(msg, date, manualParam, nextDate, force)
} else if(msg.talkAttachDtos.length > 0) {
let isImage = true;
msg.talkAttachDtos.forEach((cca) => {
if(!(cca.type.includes('image'))) {
isImage = false;
}
})
if(isImage) {
attaches = mineImageMessage(msg, date, nextDate, force)
} else {
attaches = mineFileMessage(msg, date, nextDate, force)
}
merge = [
attaches,
];
} else {
if(force) {
insDate = m('div', {class: 'text-400 fs-11 chat-date text-end mr-10'}, [
m('span', `${date}`)
])
} else {
if(date !== nextDate) {
insDate = m('div', {class: 'text-400 fs-11 chat-date text-end mr-10'}, [
m('span', `${date}`)
])
}
}
if(global.mineOldDate !== date) {
tailFlag = true;
global.mineOldDate = date;
}
let message = msg.message
let linkYn = false;
const urlRegex = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/g
const matches = message.match(urlRegex)
if(matches !== null) linkYn = true;
if(linkYn) {
if(message.includes('[ITSM]') || message.includes('[SCM]')) {
message = m.trust(message.replace(matches[matches.length -1], `<div class="detail-wrapper"><div class="detail-btn btn-sm btn-info btn-color" data-href="${matches[matches.length -1]}">자세히보기</div></div>`));
} else {
message = m.trust(message.replace(matches[matches.length -1], `<a title="${matches[matches.length -1]}" class="text-ellipsis" target="_blank" href="${matches[matches.length -1]}">${matches[matches.length -1]}</a>`));
}
}
merge = [
m('div', {class:'d-flex p-1 chat-text-wrapper mine cus-show'}, [
m('div', {class: 'flex-1 d-flex justify-content-end'}, [
m('div', {class: 'w-100'}, [
m('div', {class: 'hover-actions-trigger d-flex flex-end-center'}, [
m('div', {"data-line": `${msg.line}`, 'search-yn': `${msg.searchYn}`,class:`${tailFlag ? 'tail': '' } chat-content-custom-font-size bg-primary text-white p-2 rounded-3 chat-message mr-10 mine`, 'data-bs-theme':"light"}, message)
])
,insDate
])
])
])
];
}
return merge
}
const yourFileMessage = (msg, prevMsg, avatar, date, nextDate, force) => {
const talkAttachDtos = msg.talkAttachDtos;
const key = msg.attach == null ? '' : msg.attach.key;
let downloadFlag = true;
const downloadParam = {
talkId : msg.talkId,
sabun : msg.insSabun,
insDate : msg.insDate
}
let onm = '';
let size = 0;
let fileIcon = '';
let delYn = false;
talkAttachDtos.forEach((cc) => {
size = size + cc.size
if(cc.delYn) delYn = true;
if(cc.uploading) downloadFlag = false;
});
if(talkAttachDtos.length === 1) {
fileIcon = 'bi-file-earmark-text'
onm = talkAttachDtos[0].onm;
} else {
fileIcon = 'bi-file-earmark-zip'
onm = `${talkAttachDtos[0].onm}${talkAttachDtos.length - 1}.zip`;
talkAttachDtos.forEach((cc) => size = size + cc.size);
}
size = Math.round(size / 1024);
let insAvatar;
let insDate;
let tailFlag = false;
if(force) {
insDate = m('div', {class:'text-400 fs-11 chat-date ml-10'}, date);
insAvatar = m('div', {class:"rounded-circle chat-avatar"}, avatar)
} else {
if(date !== nextDate) {
insDate = m('div', {class:'text-400 fs-11 chat-date ml-10'}, date);
}
}
if(global.yourOldDate !== date || prevMsg.attrs.className.includes('mine')) {
insAvatar = m('div', {class:"rounded-circle chat-avatar"}, avatar)
tailFlag = true;
global.yourOldDate = date
}
return m('div', {class: 'd-flex p-1 chat-text-wrapper your cus-show', 'data-key': key, 'data-ins-date' : msg.insDate}, [
m('div', {class: 'avatar avatar-l me-2'}, [
insAvatar
]),
m('div', {class: 'flex-1 d-flex justify-content-start'}, [
m('div', {class: 'w-max-85'}, [
m('div', {class: 'hover-actions-trigger d-flex flex-between-normal'}, [
m('div', {'search-yn': `${msg.searchYn}`, class: `chat-content-custom-font-size chat-message bg-light p-2 rounded-3 ml-10 your chat-file ${tailFlag ? 'tail': ''}`, style: 'max-width:220px;'}, [
delYn ? m('div', {class: 'attach-del'}) : '',
m('div', {class: 'file-fade cus-hide'}),
m('div', {class: 'd-flex justify-content-start'}, [
m('i', {class: `bi ${fileIcon}`, style: 'color:#505050;font-size:30px;padding-right:10px;'}),
m('div', {class: ' attach-file'}, [
m('div', {class: 'fs-xxl-10 pb-1 attach-file'}, onm),
m('div', {class: 'fs-xxl-11'},`용량 : ${size}kb`),
])
]),
downloadFlag ? '': m('div', {class: 'progress', style: 'margin-top:5px; margin-bottom:5px;'}, [
m('div', {class:'progress-bar bg-low-purple', role: 'progressbar', style: 'width:0%;', 'aria-valuenow': "100",'aria-valuemin':"0", 'aria-valuemax':"100" }, '0%')
])
]),
delYn ? '' :
m('ul', {class: 'position-relative list-inline mb-0 text-400 me-2 chat-gallery-option ml-10'}, [
m('li', {class: 'list-inline-item'}, [
downloadFlag ?
m('a', {
class: 'chat-option',
href: `${global.apiUrl}/api/message/download?${new URLSearchParams(downloadParam).toString()}`,
target: '_download_',
rel: 'noopener',
'ata-bs-toggle': "tooltip",
'data-bs-placement': "top",
'aria-label': "Forward",
'data-bs-original-title': "Forward"
}, [
m('i', {class: 'bi bi-download text-black', style: 'font-size: 14px;'})
]): ''
]),
]),
]),
insDate
])
])
])
}
const yourManualMessage = (msg, prevMsg, manualParam, avatar, date, nextDate, force) => {
const downloadParam = {
vnm : manualParam.vnm,
workId : manualParam.workId,
}
const fileIcon = 'bi-file-earmark-text'
const size = Math.round(parseInt(manualParam.size) / 1024);
let insAvatar;
let insDate;
let tailFlag = false;
if(force) {
insDate = m('div', {class:'text-400 fs-11 chat-date ml-10'}, date);
insAvatar = m('div', {class:"rounded-circle chat-avatar"}, avatar)
} else {
if(date !== nextDate) {
insDate = m('div', {class:'text-400 fs-11 chat-date ml-10'}, date);
}
}
if(global.yourOldDate !== date || prevMsg.attrs.className.includes('mine')) {
insAvatar = m('div', {class:"rounded-circle chat-avatar"}, avatar)
tailFlag = true;
global.yourOldDate = date
}
return m('div', {class: 'd-flex p-1 chat-text-wrapper your cus-show'}, [
m('div', {class: 'avatar avatar-l me-2'}, [
insAvatar
]),
m('div', {class: 'flex-1 d-flex justify-content-start'}, [
m('div', {class: 'w-max-85'}, [
m('div', {class: 'hover-actions-trigger d-flex flex-between-normal'}, [
m('div', {'search-yn': `${msg.searchYn}`, class: `chat-content-custom-font-size chat-message bg-light p-2 rounded-3 ml-10 your chat-file ${tailFlag ? 'tail': ''}`, style: 'max-width:220px;'}, [
m('div', {class: 'file-fade cus-hide'}),
m('div', {class: 'd-flex justify-content-start'}, [
m('i', {class: `bi ${fileIcon}`, style: 'color:#505050;font-size:30px;padding-right:10px;'}),
m('div', {class: ' attach-file'}, [
m('div', {class: 'fs-xxl-10 pb-1 attach-file'}, manualParam.onm),
m('div', {class: 'fs-xxl-11'},`용량 : ${size}kb`),
])
])
]),
m('ul', {class: 'position-relative list-inline mb-0 text-400 me-2 chat-gallery-option ml-10'}, [
m('li', {class: 'list-inline-item'}, [
m('a', {
class: 'chat-option',
href: `${global.apiUrl}/api/manual/download/doc?${new URLSearchParams(downloadParam).toString()}`,
target: '_download_',
rel: 'noopener',
'ata-bs-toggle': "tooltip",
'data-bs-placement': "top",
'aria-label': "Forward",
'data-bs-original-title': "Forward"
}, [
m('i', {class: 'bi bi-download text-black', style: 'font-size: 14px;'})
])
])
]),
]),
insDate
])
])
])
}
/*상대방에게 보이는 첨부파일 메시지 정의*/
const yourImageMessage = (msg, prevMsg, avatar, date, nextDate, force) => {
let attachList = []
const talkAttachDtos = msg.talkAttachDtos;
let downloadFlag = true;
let delYn = false;
const key = msg.attach == null ? '' : msg.attach.key;
talkAttachDtos.forEach((cca, idx) => {
if(cca.uploading) downloadFlag = false;
if(cca.delYn) delYn = true;
const imageParam = {
talkId : msg.talkId,
sabun : msg.insSabun,
insDate : msg.insDate,
onm : encodeURI(cca.onm),
sort : cca.sort,
size : 100
}
const jsonStr = JSON.stringify(imageParam)
const remain = talkAttachDtos.length % 3
attachList.push(m('div', {onclick:function() {setImageModal(jsonStr)}, class:`col-${talkAttachDtos.length - remain > idx ? '4' : remain === 1 ? '12' : '6'} p-1`}, [
m('div', {'data-bs-toggle':"modal", 'data-bs-target':"#imageModal", 'data-url' :new URLSearchParams(imageParam).toString(), class:'attach-a'}, [
delYn ?
m('img', {src: `http://devtalk.kospo.co.kr:3000/static/image/empty_img.png`, alt: '', class: 'img-fluid rounded attach-img mb-2'}) :
m('img', {src: cca.data === null ? `${global.apiUrl}/api/message/thumb?${new URLSearchParams(imageParam).toString()}` : cca.data, alt: '', class: 'img-fluid attach-img rounded mb-2'})
])
]
))
return attachList;
})
const downloadParam = {
talkId : talkAttachDtos[0].talkId,
sabun : talkAttachDtos[0].sabun,
insDate : talkAttachDtos[0].insDate,
}
let insAvatar;
let insDate;
let tailFlag = false;
if(force) {
insDate = m('div', {class:'text-400 fs-11 chat-date ml-10'}, date);
insAvatar = m('div', {class:"rounded-circle chat-avatar"}, avatar)
} else {
if(date !== nextDate) {
insDate = m('div', {class:'text-400 fs-11 chat-date ml-10'}, date);
}
}
if(global.yourOldDate !== date || prevMsg.attrs.className.includes('mine')) {
insAvatar = m('div', {class:"rounded-circle chat-avatar"}, avatar)
tailFlag = true;
global.yourOldDate = date
}
return m('div', {class: 'd-flex p-1 chat-text-wrapper your cus-show', 'data-key': key, 'data-ins-date' : msg.insDate}, [
m('div', {class: 'avatar avatar-l me-2'}, [
insAvatar
]),
m('div', {class: 'flex-1 d-flex justify-content-start'}, [
m('div', {class: 'w-xxl-85'}, [
m('div', {class: 'hover-actions-trigger d-flex flex-between-normal'}, [
m('div', { 'search-yn': `${msg.searchYn}`,class: `chat-content-custom-font-size chat-message bg-200 p-2 rounded-3 ml-10 your chat-gallery ${tailFlag ? 'tail' : ''}`}, [
delYn ? m('div', {class: 'attach-del'}) : '',
m('div', {class: 'file-fade cus-hide'}),
m('div', {class: 'row mx-n1'}, attachList),
downloadFlag ? '': m('div', {class: 'progress', style: 'margin-top:5px; margin-bottom:5px;'}, [
m('div', {class:'progress-bar bg-low-purple', role: 'progressbar', style: 'width:0%;', 'aria-valuenow': "100",'aria-valuemin':"0", 'aria-valuemax':"100" }, '0%')
])
]),
delYn ? '' :
m('ul', {class: 'position-relative list-inline mb-0 text-400 me-2 chat-gallery-option ml-10'}, [
m('li', {class: 'list-inline-item'}, [
downloadFlag ?
m('a', {
class: 'chat-option',
href: `${global.apiUrl}/api/message/download?${new URLSearchParams(downloadParam).toString()}`,
'ata-bs-toggle': "tooltip",
'data-bs-placement': "top",
'aria-label': "Forward",
'data-bs-original-title': "Forward"
}, [
m('i', {class: 'bi bi-download text-black', style: 'font-size: 14px;'})
]) : ''
])
]),
]),
insDate
])
])
])
}
/*상대방에게 보이는 메시지 정의*/
const yourMessage = (msg, pervMsg, date, nextDate, force) => {
const avatar = msg.insName
let attaches = [];
let insAvatar;
let insDate;
let tailFlag = false;
/*첨부파일 리스트가 없을시 강제 리스트 주입*/
if(msg.talkAttachDtos === null || msg.talkAttachDtos === undefined) msg.talkAttachDtos = [];
if(msg.message.includes('[매뉴얼]')) {
const manualParam = JSON.parse(msg.message)
return [yourManualMessage(msg, pervMsg, manualParam, avatar, date, nextDate, force)]
} else if(msg.talkAttachDtos.length > 0) {
let isImage = true;
msg.talkAttachDtos.forEach((cca) => {
if(!(cca.type.includes('image'))) {
isImage = false;
}
})
if(isImage) {
attaches = yourImageMessage(msg, pervMsg, avatar, date, nextDate, force)
} else {
attaches = yourFileMessage(msg, pervMsg, avatar, date, nextDate, force);
}
return [
attaches
]
} else {
if(force) {
insDate = m('div', {class:'text-400 fs-11 chat-date ml-10'}, date);
insAvatar = m('div', {class:"rounded-circle chat-avatar"}, avatar)
} else {
if(date !== nextDate) {
insDate = m('div', {class:'text-400 fs-11 chat-date ml-10'}, date);
}
}
try {
if(global.yourOldDate !== date || pervMsg.attrs.className.includes('mine')) {
insAvatar = m('div', {class:"rounded-circle chat-avatar"}, avatar)
tailFlag = true;
global.yourOldDate = date
}
} catch(e) {}
let message = msg.message
let linkYn = false;
const urlRegex = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
const matches = message.match(urlRegex)
if(matches !== null) linkYn = true;
if(linkYn) {
if(message.includes('[ITSM]') || message.includes('[SCM]')) {
message = m.trust(message.replace(matches[0], `<div class="detail-wrapper"><div class="detail-btn btn-sm btn-info btn-color" data-href="${matches[0]}">자세히보기</div></div>`));
} else {
message = m.trust(message.replace(matches[0], `<a title="${matches[0]}" class="text-ellipsis" target="_blank" href="${matches[0]}">${matches[0]}</a>`));
}
}
return [
m('div', {class:'d-flex p-1 chat-text-wrapper your cus-show'}, [
m('div', {class: 'avatar avatar-l me-2'}, [
insAvatar
]),
m('div', {class:'flex-1'}, [
m('div', {class:'w-100'}, [
m('div', {class:'hover-actions-trigger d-flex align-items-center'}, [
m('div', {"data-line": `${msg.line}`, 'search-yn': `${msg.searchYn}`, class:`${tailFlag ? 'tail' : ''} chat-content-custom-font-size chat-message bg-200 p-2 rounded-3 ml-10 your`}, message)
]),
insDate
])
])
])
]
}
return [
attaches,
m('div', {class:'d-flex p-1 chat-text-wrapper your'}, [
m('div', {class: 'avatar avatar-l me-2'}, [
insAvatar
]),
m('div', {class:'flex-1'}, [
m('div', {class:'w-100'}, [
m('div', {class:'hover-actions-trigger d-flex align-items-center'}, [
m('div', {"data-line": `${msg.line}`, 'search-yn': `${msg.searchYn}`, class:`${tailFlag ? 'tail' : ''} chat-content-custom-font-size chat-message bg-200 p-2 rounded-3 ml-10 your`}, msg.message)
]),
insDate
])
])
])
]
}
const findParentElement = function(node, parentClass) {
let pa = node.parentElement;
if(pa.classList.contains(parentClass)) {
return pa;
} else {
return findParentElement(pa, parentClass)
}
}
export {infoMessage, systemMessage, dateMessage, talkMapping, messageMapping}