forked from SimplesIP/pabx-app
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
444 lines
16 KiB
444 lines
16 KiB
/** |
|
* EVENTOS GERADOS PELO USUÁRIO DA APLICAÇÃO |
|
*/ |
|
$(function(){ |
|
connect(ws) |
|
notifications() |
|
/** |
|
* VOICE RECORDER |
|
*/ |
|
$('.modal-content-body').on('click', '#stoprecorder', () => { |
|
$('#msgRecorder').text('Paramos de gravar sua voz!') |
|
mediaRecorder.stop() |
|
}) |
|
|
|
$('#voicerecorder').on('click', () => { |
|
recorderVoice() |
|
}) |
|
/** FIM VOICE RECORDER */ |
|
|
|
/** EVENTOS DE CLICK NO BODY */ |
|
$("body").mouseup(function(){ |
|
$('#uploadfiles').fadeOut('slow') |
|
}); |
|
|
|
/** INICIO DAS FUNCIONALIDADES */ |
|
startSendImage() |
|
startSendFile() |
|
startPause() |
|
startTransfer() |
|
startFinalizar() |
|
exitSystem() |
|
|
|
/** INICIA COM O HEADER DO CONTATO VAZIO */ |
|
startChannelMessage() |
|
|
|
/** INICIA O CHAT NO FINAL DA CONVERSA */ |
|
$('.chats').on('click', function(){ |
|
scrollDown() |
|
}) |
|
|
|
/** ENVIA AS MSG PELO ENTER */ |
|
$('#fieldsendmessage').bind('keyup', function(ev){ |
|
if(ev.keyCode == 13){ |
|
sendMessage() |
|
} |
|
}) |
|
|
|
$('.type-message-bar-right').on('click',() => { |
|
sendMessage() |
|
}) |
|
|
|
$('#imgclip').on('click', function(){ |
|
modalStart() |
|
$("#uploadimage").val('') |
|
$('#uploadfile').val('') |
|
if($('#uploadfiles').is(':hidden')){ |
|
$('#uploadfiles').fadeIn('slow') |
|
} else { |
|
$('#uploadfiles').fadeOut('slow') |
|
} |
|
}) |
|
|
|
$('#footer-content-right').on('click', '#footersend', () => { |
|
sendMedia(mediaRecorder) |
|
$('#modalselect').css({display: 'none'}) |
|
}) |
|
supervisorAgente() |
|
|
|
}) |
|
|
|
/** |
|
* EVENTOS DE CLICK PARA SELECIONAR A SESSÃO DE MENSAGEM/CONVERSA E RECUPERAR AS MENSAGENS JÁ TROCADAS NO ATENDIMENTO |
|
* @param {*} id |
|
*/ |
|
const selectNotification = (id) => { |
|
marcarMensagemVista(id) |
|
|
|
listaMensagem(id).then(() => { |
|
let uniqueid |
|
let number |
|
let name |
|
let dataContact |
|
let protocolo |
|
|
|
const dataRequest = JSON.parse(localStorage.getItem('obj_contact')) |
|
listarAtendimentoAgente(localStorage.getItem('my_uniqueid')) |
|
const allNotifications = JSON.parse(localStorage.getItem('obj_notification')) |
|
|
|
hideButtons(false) |
|
allNotifications.data.forEach(e => { |
|
$('#' + e.uniqueid.replace('.', `\\.`)).removeClass('select-notification') |
|
if(e.uniqueid == id && e.status == 0){ |
|
hideButtons(true) |
|
} |
|
}) |
|
$('#' + id.replace('.', `\\.`)).addClass('select-notification') |
|
|
|
allNotifications.data.forEach(e => { |
|
if(e.uniqueid == id && e.status == 0){ |
|
hideButtons(true) |
|
} |
|
}) |
|
|
|
if(dataRequest.data.length > 0){ |
|
dataContact = dataRequest.data.filter(e => { |
|
if(id.trim() == e.event?.mensagem.uniqueid){ |
|
return true |
|
} |
|
}) |
|
} |
|
|
|
allNotifications.data.forEach(e => { |
|
if(id === e.uniqueid){ |
|
uniqueid = e.uniqueid |
|
name = e.nome |
|
number = e.cliente_id |
|
protocolo = e.protocolo |
|
} |
|
}) |
|
|
|
localStorage.removeItem('session_window') |
|
localStorage.removeItem('session_uniqueid') |
|
localStorage.setItem('session_uniqueid', uniqueid) |
|
localStorage.setItem('session_window', number) |
|
|
|
$('.chat-window-contact-name').text(name) |
|
$('.chat-window-contact-status').text('Protocolo: ' + protocolo) |
|
|
|
/** REMOVE AS MSG NA E CONSTRIO A TELA NOVAMENTE (EVITAR DUPLICAR) */ |
|
$('.chat-window .sender').remove() |
|
$('.chat-window .receiver').remove() |
|
$('.chat-window .events').remove() |
|
alertNotification(localStorage.getItem('session_uniqueid'),'remove') |
|
|
|
dataContact.forEach(e => { |
|
const datesend = e.event?.mensagem.datetime ? converdata(new Date(e.event?.mensagem.datetime).getTime()) : 'algumas horas'; |
|
let typesend = localStorage.getItem('my_uniqueid') == e.event.contact.number ? 'sender': 'receiver' |
|
|
|
if(e.event?.mensagem.type == 'text'){ |
|
$('.chat-window').append(` |
|
<div class="${typesend}"> |
|
<span class="${typesend}-message">${e.event.mensagem.content}</span> |
|
<br/> |
|
<span class="message-time">${datesend}</span> |
|
</div>` |
|
) |
|
} |
|
|
|
if(e.event?.mensagem.type == 'finish' || e.event?.mensagem.type == 're_start'){ |
|
$('.chat-window').append(` |
|
<div class="events"> |
|
<span class="events-message">${e.event.mensagem.content}</span> |
|
</div>` |
|
) |
|
} |
|
|
|
if(e.event?.mensagem.type != 'text'){ |
|
const sendobj = { |
|
filename: e.event?.mensagem.file_name, |
|
id_provedor: e.event?.mensagem.id_provedor, |
|
type: e.event?.mensagem.type, |
|
mimetype: e.event?.mensagem.mimetype, |
|
from: typesend |
|
} |
|
messageTypeMedia(sendobj) |
|
} |
|
|
|
if(e.de == localStorage.getItem('my_uniqueid')){ |
|
const datereceived = e.datetime ? converdata(e.datetime) : 'algumas horas'; |
|
if(e.type == 'text'){ |
|
$('.chat-window').append(` |
|
<div class="${typesend}"> |
|
<span class="${typesend}-message">${e.msg}</span> |
|
<br/> |
|
<span class="message-time">${datereceived}</span> |
|
</div>`) |
|
} else if (e.type == 'audio' || e.type == 'voice'){ |
|
const audio = `<audio controls> |
|
<source src="data:audio/mpeg;base64,${e.msg}"></source> |
|
</audio>` |
|
$('.chat-window').append(` |
|
<div class="${typesend}"> |
|
<span class="${typesend}-message">${audio}</span> |
|
<br/> |
|
<span class="message-time">${datereceived}</span> |
|
</div>`) |
|
} else if (e.type == 'document'){ |
|
icontypes.forEach(l => { |
|
if(e.filename.indexOf(l) >= 0){ |
|
$('.chat-window').append(` |
|
<div class="${typesend}"> |
|
<span class="${typesend}-message message-column"> |
|
<a href="http://${server_api}/integracao/media/link/${e.uniqueid}/${window.btoa('application/' + l)}" target="_blank"> |
|
<img src="integracao/simpleschat/images/icons/${l}-file.png" style="max-width: 60px"> |
|
</a> |
|
</span> |
|
${e.filename} |
|
<br/> |
|
<span class="message-time">${datereceived}</span> |
|
</div>`) |
|
} |
|
}) |
|
} else if (e.type == 'image'){ |
|
const fileimg = `data:${e.mimetype};base64,` + e.msg |
|
$('.chat-window').append(` |
|
<div class="${typesend}"> |
|
<span class="${typesend}-message"><img src="${fileimg}" style="max-width: 200px; max-height: 150px"></span> |
|
<br/> |
|
<span class="message-time">${datereceived}</span> |
|
</div>`) |
|
} |
|
} |
|
}) |
|
scrollDown() |
|
}) |
|
startNotification() |
|
} |
|
|
|
/** |
|
* REALIZA O ENVIO DE MENSAGEM ATRAVEZ DA API |
|
* @param {*} obj |
|
* @returns |
|
*/ |
|
const sendMessage = (obj = {}) => { |
|
const sendNumber = localStorage.getItem('session_window') |
|
const myUniqueid = localStorage.getItem('my_uniqueid') |
|
const agent = JSON.parse(localStorage.getItem('obj_status')) |
|
|
|
let sendContent = (typeof obj.fileContent === "undefined") ? $('#fieldsendmessage').val() : obj.content |
|
let name = agent.data.nome ? agent.data.nome : 'Atendente' |
|
let uniqueid = localStorage.getItem('session_uniqueid') |
|
let media = obj.media ? obj.media : 'whatsapp' |
|
let type = obj.type ? obj.type : 'text' |
|
let mimetype = obj.mimetype ? obj.mimetype : 'text' |
|
let filename = obj.filename ? obj.filename : Date.now() |
|
|
|
if(!sendContent){ |
|
return |
|
} |
|
|
|
let dataSend = { |
|
"event": { |
|
"type": "mensagem", |
|
"contact": { |
|
"name": name, |
|
"number": myUniqueid, |
|
"matricula": myUniqueid |
|
}, |
|
"mensagem": { |
|
"uniqueid": uniqueid, |
|
"dst": sendNumber, |
|
"id_provedor": `${uniqueid}_${Date.now()}`, |
|
"type": type, |
|
"mimetype": mimetype, |
|
"media": media, |
|
"content": sendContent, |
|
"status": "sended" |
|
} |
|
} |
|
} |
|
|
|
if(type != 'audio'){ |
|
dataSend.event.mensagem.file_name = filename |
|
} |
|
|
|
enviarMensagem(dataSend) |
|
|
|
let msgContent = type == 'text' ? sendContent : obj.fileContent |
|
$('.chat-window').append(` |
|
<div class="sender"> |
|
<span class="sender-message">${msgContent}</span> |
|
<br/> |
|
<span class="message-time">${converdata(Date.now())}</span> |
|
</div>`) |
|
scrollDown() |
|
|
|
/** LIMPA O CAMPO DE ENVIO DE MENSAGEM */ |
|
$('#fieldsendmessage').val("") |
|
} |
|
|
|
/** |
|
* ATUALIZA AS MENSAGEM QUE SÃO RECEBIDAS NA TELA DO ATENDIMENTO |
|
* @param {*} ev |
|
*/ |
|
const viewMessage = (ev) => { |
|
const sessionOpen = localStorage.getItem('session_uniqueid') |
|
const datesend = ev.event?.mensagem.datetime ? converdata(ev.event?.mensagem.datetime, true) : 'algumas horas'; |
|
|
|
if(ev.event?.mensagem.uniqueid == sessionOpen){ |
|
marcarMensagemVista(sessionOpen) |
|
switch(ev.event?.mensagem.type){ |
|
case 'text': |
|
$('.chat-window').append(` |
|
<div class="receiver"> |
|
<span class="receiver-message">${ev.event.mensagem.content}</span> |
|
<br/> |
|
<span class="message-time">${datesend}</span> |
|
</div>`) |
|
break |
|
case 'finish': |
|
case 're_start': |
|
$('.chat-window').append(` |
|
<div class="events"> |
|
<span class="events-message">${ev.event.mensagem.content}</span> |
|
</div>`) |
|
break |
|
} |
|
|
|
const mediaDownload = ["image", "voice", "document", "audio", "video", "sticker"] |
|
if(mediaDownload.indexOf(ev.event?.mensagem.type) >= 0){ |
|
const sendobj = { |
|
filename: ev.event?.mensagem.file_name, |
|
id_provedor: ev.event?.mensagem.id_provedor, |
|
type: ev.event?.mensagem.type, |
|
mimetype: ev.event?.mensagem.mimetype, |
|
from: 'receiver' |
|
} |
|
messageTypeMedia(sendobj) |
|
} |
|
scrollDown() |
|
} |
|
} |
|
|
|
/** |
|
* APRESENTA AS NOVAS NOTIFICACOES DE ATENDIMENTO NA TELA DO ATENDENTE |
|
* -> CADA ATENDIMENTO DEVE POSSUIR APENAS UMA NOTIFICACAO |
|
* @param {*} data |
|
*/ |
|
const receiveNotification = (data) => { |
|
let validate = null |
|
|
|
switch(data.event?.type){ |
|
case "mensagem": |
|
if(data.event.mensagem.uniqueid != localStorage.getItem('session_uniqueid')){ |
|
notifyMe(data.event.contact.name, { |
|
body: data.event.mensagem.content, |
|
icon: `images/${data.event.mensagem.media}.png`, |
|
silent: true |
|
}) |
|
soundNotification(`integracao/simpleschat/sound/notification.mp3`) |
|
} |
|
|
|
/** VALIDA O NUMERO, VERIFICA SE O TEM ALGMA MSG INICIAL, SE JÁ TEVE UM NUMERO NA VERIFICACAO */ |
|
listarAtendimentoAgente(localStorage.getItem('my_uniqueid')) |
|
validate = JSON.parse(localStorage.getItem('obj_notification')) |
|
|
|
const vald = validate.data.filter((e) => { |
|
return data.event?.mensagem.uniqueid == e.uniqueid |
|
}) |
|
|
|
if(data.event?.contact.number != localStorage.getItem('session_window')){ |
|
alertNotification(data.event?.mensagem.uniqueid) |
|
} |
|
|
|
if (data.event?.mensagem.uniqueid && data.event?.contact.number && vald.length == 0) { |
|
notifications( |
|
{ |
|
uniqueid: data.event?.mensagem.uniqueid, |
|
cliente_id: data.event?.contact.number, |
|
context: data.event?.mensagem.media, |
|
profile_name: data.event?.contact.name, |
|
data_reg: data.event?.mensagem.datetime, |
|
status: 1, |
|
action: 'mensagem', |
|
} |
|
) |
|
} |
|
break |
|
case "actions": |
|
let obj |
|
switch(data.event.mensagem.type){ |
|
case 'start': |
|
case 'transfer': |
|
case 'att_status': |
|
obj = {} |
|
break |
|
case 'finish': |
|
case 're_start': |
|
obj = { |
|
uniqueid: data.event?.mensagem.uniqueid, |
|
action: data.event.mensagem.type, |
|
} |
|
break |
|
} |
|
notifications(obj) |
|
break |
|
} |
|
} |
|
|
|
|
|
/** |
|
* MANTEM TODAS AS MENSAGENS ARMAZENADAS NO LOCALSTORAGE, SEMPRE QUE ENVIA E RECEBE SERÁ GUARDADO |
|
* @param {*} ev |
|
*/ |
|
const keepMensage = (ev) => { |
|
let msg = JSON.parse(localStorage.getItem('keep_msg')) |
|
if(!msg){ |
|
msg = { data: [] } |
|
} |
|
|
|
if(ev.event?.contact && ev.event?.mensagem.content){ |
|
msg.data.push(ev) |
|
localStorage.removeItem('keep_msg'); |
|
localStorage.setItem('keep_msg', JSON.stringify(msg)) |
|
} |
|
} |
|
|
|
/** |
|
* FUNÇÃO PARA CAPTURAR O ARQUIVO A SER ENVIADO |
|
*/ |
|
const sendMedia = (media = null) => { |
|
let rec |
|
let filename |
|
if($("#footer-content-left audio").length){ |
|
if(media.state == 'recording'){ |
|
media.stop(); |
|
} |
|
let el = $("#footer-content-left audio")[0].src |
|
fileContent = $("#footer-content-left audio")[0].outerHTML |
|
sendMessage({ content: el.replace("data:", "").replace(/^.+,/, ""), type: 'audio', mimetype: 'audio/mpeg', fileContent }) |
|
return |
|
} else if($("#uploadfile")[0].files[0]) { |
|
let el = $("#uploadfile")[0].files[0] |
|
rec = new Blob([el], { type : el.type }) |
|
let filesent = $("#myImg") |
|
filesent[0].id = Date.now() |
|
imgContent = filesent.css({'max-width': '60px'})[0].outerHTML |
|
fileContent = `<a href="${URL.createObjectURL(rec)}" target="_blank">${imgContent}</a>` |
|
filename = el.name |
|
} else { |
|
rec = $("#uploadimage")[0].files[0] |
|
let filesent = $("#myImg") |
|
filesent[0].id = Date.now() |
|
fileContent = filesent.css({'max-width': '350px'})[0].outerHTML |
|
$("#myImg").empty() |
|
} |
|
|
|
const file = new FileReader(); |
|
file.onload = function() { |
|
const typefile = rec.type.split("/")[0].indexOf('image') >= 0 ? rec.type.split("/")[0] : 'document' |
|
sendMessage({ content: file.result.replace("data:", "").replace(/^.+,/, ""), type: typefile, mimetype: rec.type, fileContent, filename }) |
|
} |
|
file.readAsDataURL(rec); |
|
} |