|
|
|
|
@ -1,238 +1,283 @@
|
|
|
|
|
/** |
|
|
|
|
* EVENTOS GERADOS PELO USUARIO DA APLICACAO |
|
|
|
|
*/ |
|
|
|
|
$(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') |
|
|
|
|
}); |
|
|
|
|
$(function () { |
|
|
|
|
connect(ws); |
|
|
|
|
notifications(); |
|
|
|
|
|
|
|
|
|
// waveSurferStart();
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* VOICE RECORDER |
|
|
|
|
*/ |
|
|
|
|
$(".modal-content-body").on("click", "#stoprecorder", () => { |
|
|
|
|
$("#msgRecorder").text("Paramos de gravar sua voz!"); |
|
|
|
|
mediaRecorder.stop(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// Chama fila de atendimento
|
|
|
|
|
|
|
|
|
|
// $("#btnFila").on("click", () => {
|
|
|
|
|
// notifications();
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
// $("#btnAtendimento").on("click", () => {
|
|
|
|
|
// notifications();
|
|
|
|
|
// });
|
|
|
|
|
|
|
|
|
|
$("#exitChat").on("click", () => { |
|
|
|
|
abrirMensagem = false; |
|
|
|
|
abrirTela(); |
|
|
|
|
// removeMensagemBody();
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$(".box-event-buttons button").on("click", (e) => { |
|
|
|
|
click_btn(e); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$("#voicerecorder").on("click", () => { |
|
|
|
|
recorderVoice(); |
|
|
|
|
}); |
|
|
|
|
/** FIM VOICE RECORDER */ |
|
|
|
|
|
|
|
|
|
/** EVENTOS DE CLICK NO BODY */ |
|
|
|
|
$("body").mouseup(function () { |
|
|
|
|
$("#uploadfiles").fadeOut(200); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
/** INICIO DAS FUNCIONALIDADES */ |
|
|
|
|
startSendImage(); |
|
|
|
|
startSendFile(); |
|
|
|
|
startPause(); |
|
|
|
|
startTransfer(); |
|
|
|
|
startFinalizar(); |
|
|
|
|
exitSystem(); |
|
|
|
|
startFooter(); |
|
|
|
|
/** INICIA COM O HEADER DO CONTATO VAZIO */ |
|
|
|
|
startChannelMessage(); |
|
|
|
|
|
|
|
|
|
/** INICIA O CHAT NO FINAL DA CONVERSA */ |
|
|
|
|
$(".chats").on("click", function () { |
|
|
|
|
scrollDown(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$(".checkbox-switch").on("change", ({ target }) => { |
|
|
|
|
changeInterfaceTheme(target); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
/** ENVIA AS MSG PELO ENTER */ |
|
|
|
|
$("#fieldsendmessage").bind("keyup", function (ev) { |
|
|
|
|
if (ev.keyCode == 13 && $(this).val().trim().length > 0) { |
|
|
|
|
sendMessage(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
/** 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 && $(this).val().trim().length > 0){ |
|
|
|
|
sendMessage() |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
$("#fieldsendmessage").on("keyup", () => { |
|
|
|
|
if ($(this).val().trim().length == 0) { |
|
|
|
|
$(this).val(""); |
|
|
|
|
} |
|
|
|
|
resizeSendMsg(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$('#fieldsendmessage').on('keyup', () => { |
|
|
|
|
if($(this).val().trim().length == 0){ |
|
|
|
|
$(this).val('') |
|
|
|
|
} |
|
|
|
|
resizeSendMsg() |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
$('.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') |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
$(".type-message-bar-right").on("click", () => { |
|
|
|
|
sendMessage(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$('#footer-content-right').on('click', '#footersend', () => { |
|
|
|
|
sendMedia(mediaRecorder) |
|
|
|
|
$('#modalselect').css({display: 'none'}) |
|
|
|
|
}) |
|
|
|
|
supervisorAgente() |
|
|
|
|
/** abre modal de configurações*/ |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
$("#configs").on("click", () => { |
|
|
|
|
openConfigs(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$("#imgclip").on("click", function () { |
|
|
|
|
modalStart(); |
|
|
|
|
$("#uploadimage").val(""); |
|
|
|
|
$("#uploadfile").val(""); |
|
|
|
|
if ($("#uploadfiles").is(":hidden")) { |
|
|
|
|
$("#uploadfiles").fadeIn(200); |
|
|
|
|
} else { |
|
|
|
|
$("#uploadfiles").fadeOut(200); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
$("#footer-content-right").on("click", "#footersend", () => { |
|
|
|
|
sendMedia(mediaRecorder); |
|
|
|
|
// $("#modalselect").css({ display: "none" });
|
|
|
|
|
}); |
|
|
|
|
supervisorAgente(); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* EVENTOS DE CLICK PARA SELECIONAR A SESSAO DE MENSAGEM/CONVERSA E RECUPERAR AS MENSAGENS JA 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')) |
|
|
|
|
<<<<<<< HEAD |
|
|
|
|
|
|
|
|
|
listarAtendimentoAgente(localStorage.getItem('my_uniqueid')) |
|
|
|
|
======= |
|
|
|
|
listarAtendimentoAgente(localStorage.getItem('id_empresa'), localStorage.getItem('my_uniqueid')) |
|
|
|
|
>>>>>>> 1e181ff (ajustes de funcionalidades) |
|
|
|
|
const allNotifications = JSON.parse(localStorage.getItem('obj_notification')) |
|
|
|
|
|
|
|
|
|
console.log(allNotifications) |
|
|
|
|
|
|
|
|
|
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') |
|
|
|
|
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("id_empresa"), |
|
|
|
|
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.uniqueid){ |
|
|
|
|
return true |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
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.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.msg_date ? converdata(new Date(e.msg_date).getTime()) : 'algumas horas'; |
|
|
|
|
<<<<<<< HEAD |
|
|
|
|
let typesend = localStorage.getItem('my_uniqueid') == e.src ? 'sender': 'receiver' |
|
|
|
|
======= |
|
|
|
|
let typesend = localStorage.getItem('my_uniqueid') == e.dst ? 'receiver' : 'sender' |
|
|
|
|
>>>>>>> 1e181ff (ajustes de funcionalidades) |
|
|
|
|
|
|
|
|
|
if(e.type == 'text'){ |
|
|
|
|
$('.chat-window').append(` |
|
|
|
|
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.msg_date |
|
|
|
|
? converdata(new Date(e.msg_date).getTime()) |
|
|
|
|
: "algumas horas"; |
|
|
|
|
let typesend = |
|
|
|
|
localStorage.getItem("my_uniqueid") == e.dst ? "receiver" : "sender"; |
|
|
|
|
|
|
|
|
|
if (e.type == "text") { |
|
|
|
|
$(".chat-window").append(` |
|
|
|
|
<div class="${typesend}"> |
|
|
|
|
<span class="${typesend}-message">${e.content}</span> |
|
|
|
|
<span class="${typesend}-message">${e.content.replace( |
|
|
|
|
/\r?\n/g, |
|
|
|
|
"<br>" |
|
|
|
|
)}</span> |
|
|
|
|
<br/> |
|
|
|
|
<span class="message-time">${datesend}</span> |
|
|
|
|
</div>` |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
</div>`); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(e.type == 'finish' || e.type == 're_start'){ |
|
|
|
|
$('.chat-window').append(` |
|
|
|
|
if (e.type == "finish" || e.type == "re_start") { |
|
|
|
|
$(".chat-window").append(` |
|
|
|
|
<div class="events"> |
|
|
|
|
<span class="events-message">${e.content}</span> |
|
|
|
|
</div>` |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if(e.type != 'text'){ |
|
|
|
|
const sendobj = { |
|
|
|
|
filename: e.file_name, |
|
|
|
|
id_provedor: e.id_provedor,
|
|
|
|
|
type: e.type,
|
|
|
|
|
mimetype: e.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>`); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (e.type != "text") { |
|
|
|
|
const sendobj = { |
|
|
|
|
filename: e.file_name, |
|
|
|
|
id_provedor: e.id_provedor, |
|
|
|
|
type: e.type, |
|
|
|
|
mimetype: e.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>
|
|
|
|
|
</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>`);
|
|
|
|
|
|
|
|
|
|
const audio = `<audio controls>
|
|
|
|
|
<source src="data:audio/mpeg;base64,${e.msg}"></source> |
|
|
|
|
</audio>` |
|
|
|
|
$('.chat-window').append(` |
|
|
|
|
</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>`); |
|
|
|
|
} 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}/link/${e.uniqueid}/${window.btoa('application/' + l)}" target="_blank"> |
|
|
|
|
<a href="http://${server_api}/link/${
|
|
|
|
|
e.uniqueid |
|
|
|
|
}/${window.btoa("application/" + l)}" target="_blank"> |
|
|
|
|
<img src="${path}/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>`); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} 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() |
|
|
|
|
} |
|
|
|
|
</div>`); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
scrollDown(); |
|
|
|
|
}); |
|
|
|
|
abrirMensagem = true; |
|
|
|
|
startNotification(); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* REALIZA O ENVIO DE MENSAGEM ATRAVEZ DA API |
|
|
|
|
@ -240,105 +285,120 @@ const selectNotification = (id) => {
|
|
|
|
|
* @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(` |
|
|
|
|
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> |
|
|
|
|
<span class="sender-message">${msgContent.replace( |
|
|
|
|
/\r?\n/g, |
|
|
|
|
"<br>" |
|
|
|
|
)}</span> |
|
|
|
|
<br/> |
|
|
|
|
<span class="message-time">${converdata(Date.now())}</span> |
|
|
|
|
</div>`) |
|
|
|
|
scrollDown() |
|
|
|
|
</div>`); |
|
|
|
|
scrollDown(); |
|
|
|
|
|
|
|
|
|
/** LIMPA O CAMPO DE ENVIO DE MENSAGEM */ |
|
|
|
|
$('#fieldsendmessage').val("") |
|
|
|
|
} |
|
|
|
|
/** LIMPA O CAMPO DE ENVIO DE MENSAGEM */ |
|
|
|
|
$("#fieldsendmessage").val(""); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* ATUALIZA AS MENSAGEM QUE SAO RECEBIDAS NA TELA DO ATENDIMENTO |
|
|
|
|
* Os dados são transmitidos pelo evento de WS |
|
|
|
|
* Os dados s<EFBFBD>o transmitidos pelo evento de WS |
|
|
|
|
* @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(` |
|
|
|
|
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>`); |
|
|
|
|
break; |
|
|
|
|
case "finish": |
|
|
|
|
case "re_start": |
|
|
|
|
$(".chat-window").append(` |
|
|
|
|
<div class="events"> |
|
|
|
|
<span class="events-message">${ev.event.mensagem.content}</span> |
|
|
|
|
</div>`) |
|
|
|
|
break |
|
|
|
|
} |
|
|
|
|
</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() |
|
|
|
|
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 |
|
|
|
|
@ -346,118 +406,142 @@ const viewMessage = (ev) => {
|
|
|
|
|
* @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(`${path}/sound/notification.mp3`) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** VALIDA O NUMERO, VERIFICA SE O TEM ALGMA MSG INICIAL, SE JA TEVE UM NUMERO NA VERIFICACAO */ |
|
|
|
|
listarAtendimentoAgente(localStorage.getItem('id_empresa'), 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 |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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(`${path}/sound/notification.mp3`); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** VALIDA O NUMERO, VERIFICA SE O TEM ALGMA MSG INICIAL, SE JA TEVE UM NUMERO NA VERIFICACAO */ |
|
|
|
|
listarAtendimentoAgente( |
|
|
|
|
localStorage.getItem("id_empresa"), |
|
|
|
|
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 SERA 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)) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
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)); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* FUNCAO 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 sendMedia = (media = null) => { |
|
|
|
|
let rec; |
|
|
|
|
let filename; |
|
|
|
|
if ($("#footer-content-left audio").length) { |
|
|
|
|
if (media.state == "recording") { |
|
|
|
|
media.stop(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
} |
|
|
|
|
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); |
|
|
|
|
}; |
|
|
|
|
|
