7 changed files with 1494 additions and 187 deletions
@ -0,0 +1,493 @@
|
||||
/** |
||||
* EVENTOS GERADOS PELO USUARIO DA APLICACAO |
||||
*/ |
||||
$(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(); |
||||
} |
||||
}); |
||||
$("#fieldsendmessage").on("keyup", () => { |
||||
if ($(this).val().trim().length == 0) { |
||||
$(this).val(""); |
||||
} |
||||
resizeSendMsg(); |
||||
}); |
||||
$(".type-message-bar-right").on("click", () => { |
||||
sendMessage(); |
||||
}); |
||||
/** 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")); |
||||
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 (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.replace( |
||||
/\r?\n/g, |
||||
"<br>" |
||||
)}</span> |
||||
<br/> |
||||
<span class="message-time">${datesend}</span> |
||||
</div>`); |
||||
} |
||||
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 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>`);
|
||||
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}/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 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(); |
||||
}); |
||||
abrirMensagem = true; |
||||
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.replace( |
||||
/\r?\n/g, |
||||
"<br>" |
||||
)}</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 SAO RECEBIDAS NA TELA DO ATENDIMENTO |
||||
* 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(` |
||||
<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(`${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)); |
||||
} |
||||
}; |
||||
/** |
||||
* FUNCAO PARA CAPTUFRAR 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); |
||||
}; |
||||
@ -0,0 +1,802 @@
|
||||
/** ROLAGEM DO SCROLL AT<EFBFBD> NO FINAL DO CHAT */ |
||||
const scrollDown = () => { |
||||
$(".chat-window").animate({ scrollTop: 99999 * $(this).height() }, 1); |
||||
}; |
||||
const startFooter = () => { |
||||
let contador = 1; |
||||
let atendimentos = 8; |
||||
$(".estatisticas").append( |
||||
`<span class="total-calls">Total Atendimentos - ${atendimentos}</span><span class="time-login">Tempo em Acesso - ${contador}s</span>` |
||||
); |
||||
}; |
||||
const click_btn = (btn) => { |
||||
const target = btn.target; |
||||
const parent = target.parentElement || target.parentNode; |
||||
$(parent) |
||||
.children() |
||||
.each(function () { |
||||
$(this)[0].classList.remove("button-selected"); |
||||
}); |
||||
target.classList.add("button-selected"); |
||||
}; |
||||
/** LIMPA O CONTEUDO DO MODAL */ |
||||
const modalStart = () => { |
||||
$("#footer-content-left").empty(); |
||||
$("#footer-content-right").empty(); |
||||
$(".modal-content-body").empty(); |
||||
$(".modal-content-body").removeClass("d-flex") |
||||
$(".modal-content-body").removeClass("align-items-center") |
||||
$(".modal-header-title").empty(); |
||||
}; |
||||
/** INICIA COM O HEADER DO CONTATO VAZIO */ |
||||
const startChannelMessage = () => { |
||||
$("#typemessagebar").hide(); |
||||
$("#headerbuttonsagent").hide(); |
||||
$("#headermediaagent").hide(); |
||||
$("#chatwindowagent").css({ overflow: "hidden" }); |
||||
$("#uploadfiles").hide(); |
||||
}; |
||||
/** CARREGA OS ELEMENTOS DA SESSAO DA CONVERSA */ |
||||
const startNotification = () => { |
||||
$("#typemessagebar").show(); |
||||
$("#headerbuttonsagent").show(); |
||||
$("#headermediaagent").show(); |
||||
$("#welcometomessage").hide(); |
||||
abrirTela(); |
||||
$("#chatwindowagent").css({ overflow: "scroll" }); |
||||
}; |
||||
const removeMensagemBody = () => { |
||||
$(".chat-window .sender").remove(); |
||||
$(".chat-window .receiver").remove(); |
||||
$(".chat-window .events").remove(); |
||||
$(".chat-window").remove(); |
||||
$(".chat-window-header").remove(); |
||||
|
||||
}; |
||||
const hideButtons = (type) => { |
||||
if (type) { |
||||
$("#voicerecorder").css({ "pointer-events": "none" }); |
||||
$("#imgclip").css({ "pointer-events": "none" }); |
||||
$("#fieldsendmessage").css({ "pointer-events": "none" }); |
||||
$("#fieldsendmessage").hide(); |
||||
$("#tranferagent").hide(); |
||||
$("#finalizaratendimento").hide(); |
||||
} else { |
||||
$("#voicerecorder").css({ "pointer-events": "auto" }); |
||||
$("#imgclip").css({ "pointer-events": "auto" }); |
||||
$("#fieldsendmessage").css({ "pointer-events": "auto" }); |
||||
$("#fieldsendmessage").show(); |
||||
$("#tranferagent").show(); |
||||
$("#finalizaratendimento").show(); |
||||
} |
||||
}; |
||||
const alertModal = (title, message) => { |
||||
modalStart(); |
||||
$(this).css({ "align-items": "center" }); |
||||
$(".modal-content-body").append(() => title); |
||||
$(".modal-header-title").append(`${message}`); |
||||
$("#modalselect").show(); |
||||
}; |
||||
/** |
||||
* HABILITA O ENVIO DE ARQUIVO DE IMAGENS E APRESENTA UMA MODAL PARA APRESENTACAO DA IMAGEM SELECIONADA |
||||
*/ |
||||
const startSendImage = () => { |
||||
modalStart(); |
||||
$("#uploadimage").on("change", function () { |
||||
const file = new FileReader(); |
||||
file.readAsDataURL(this.files[0]); |
||||
const imgName = this.files[0].name; |
||||
file.onload = function (e) { |
||||
$("#myImg").remove(); |
||||
$("#footername").remove(); |
||||
$("#footersend").remove(); |
||||
$(".modal-content-body").append( |
||||
`<img id="myImg" src="${e.target.result}" >` |
||||
); |
||||
$("#footer-content-left").append( |
||||
`<label id="footername"><b>Arquivo:</b> ${imgName}</label>` |
||||
); |
||||
$("#footer-content-right").append( |
||||
`<a href="#" class="btn-send" id="footersend"><img src="${path}/images/enter.svg" /></a>` |
||||
); |
||||
}; |
||||
$("#modalselect").show(); |
||||
}); |
||||
}; |
||||
/** |
||||
* GERENCIA A RESPONSIVIDADE DO LAYOUT |
||||
*/ |
||||
const abrirTela = () => { |
||||
let sidebar = document.querySelector(".sidebar"); |
||||
let main = document.querySelector(".main"); |
||||
// console.log('chama papae')
|
||||
main.classList.toggle("chatAtivo", abrirMensagem); |
||||
sidebar.classList.toggle("chatAtivo", abrirMensagem); |
||||
}; |
||||
const fecharTela = () => { |
||||
abrirMensagem = false; |
||||
}; |
||||
/** |
||||
* GERENCIA A TROCA DO MODO DA INTERFACE |
||||
*/ |
||||
const changeInterfaceTheme = (element) => { |
||||
let switch_ball = document.querySelector(".switch-ball"); |
||||
let change = element.checked |
||||
? '<span><i class="fas fa-moon"></i></span>' |
||||
: '<span><i class="fas fa-sun"></i></span>'; |
||||
switch_ball.innerHTML = change; |
||||
element.checked |
||||
? changeColors(darkMode, html) |
||||
: changeColors(initialColors, html); |
||||
}; |
||||
const changeColors = (colors, raiz) => { |
||||
console.log(colors); |
||||
Object.keys(colors).map((key) => { |
||||
raiz.style.setProperty(transformKey(key), colors[key]); |
||||
}); |
||||
}; |
||||
const transformKey = (key) => |
||||
"--" + key.replace(/([A-Z])/g, "-$1").toLowerCase(); |
||||
const getStyle = (element, style) => |
||||
window.getComputedStyle(element).getPropertyValue(style); |
||||
const darkMode = { |
||||
textPrimary: "#EEEEEE", |
||||
bg: "#41444d", |
||||
bgLightDark: "#2b303b", |
||||
chatHoverColor: "#5b5e66", |
||||
chatActiveColor: '#1e2129', |
||||
senderMessage: "#268d61", |
||||
receiveMessage: "#35373b", |
||||
colorMoon: "#fff", |
||||
eventsMessage: "#222" |
||||
}; |
||||
const initialColors = { |
||||
bg: getStyle(html, "--bg"), |
||||
textPrimary: getStyle(html, "--text-primary"), |
||||
bgLightDark: getStyle(html, "--bg-light-dark"), |
||||
chatHoverColor: getStyle(html, "--chat-hover-color"), |
||||
chatActiveColor: getStyle(html, "--chat-active-color"), |
||||
senderMessage: getStyle(html, "--sender-message"), |
||||
receiveMessage: getStyle(html, "--receive-message"), |
||||
colorMoon: getStyle(html, "--color-moon"), |
||||
eventsMessage: getStyle(html, "--events-message"), |
||||
}; |
||||
/** |
||||
* HABILITA O MODAL PARA AJUSTAR CONFIGURAÇÕES |
||||
*/ |
||||
const openConfigs = () => { |
||||
modalStart(); |
||||
$(".modal-content").css({ width: "70%" }); |
||||
$(".modal-content-body").append(`<div class="config-list">
|
||||
<div class="config config-selected"> |
||||
<span class="config-name">Geral</span> |
||||
</div> |
||||
<div class="config "> |
||||
<span class="config-name">Perfil</span> |
||||
</div> |
||||
<div class="config "> |
||||
<span class="config-name">Aparência</span> |
||||
</div> |
||||
<div class="config "> |
||||
<span class="config-name">Notificações</span> |
||||
</div> |
||||
</div> |
||||
<div class="config-info"> |
||||
<h1>Tema da Interface</h1> |
||||
<div class="box-interface"> |
||||
<input type="checkbox" class="checkbox-switch" id="input-checkbox-switch"> |
||||
|
||||
<label for="input-checkbox-switch" class="label-switch"> |
||||
<i class="fas fa-sun"></i> |
||||
<i class="fas fa-moon"></i> |
||||
<div class="switch-ball"></div> |
||||
</label> |
||||
</div> |
||||
</div>`); |
||||
$(".modal-header-title2"); |
||||
$("#modalselect").show(); |
||||
}; |
||||
/** |
||||
* HABILITA O ENVIO DE ARQUIVO DE IMAGENS E APRESENTA UMA MODAL PARA APRESENTACAO DA IMAGEM SELECIONADA |
||||
*/ |
||||
const openImgModal = (link) => { |
||||
modalStart(); |
||||
$("#myImg").remove(); |
||||
$(".modal-content-body").append( |
||||
`<a href="${link}" target="_blank"><img id="myImg" src="${link}"></a>` |
||||
); |
||||
$("#modalselect").show(); |
||||
}; |
||||
const resizeSendMsg = () => { |
||||
let tamField = $("#fieldsendmessage")[0].clientWidth; |
||||
let qtdField = $("#fieldsendmessage").val().length; |
||||
if (qtdField * 8 >= tamField) { |
||||
$("#fieldsendmessage").attr("rows", 4); |
||||
} else { |
||||
$("#fieldsendmessage").attr("rows", 1); |
||||
} |
||||
}; |
||||
const startSendFile = () => { |
||||
modalStart(); |
||||
$("#uploadfile").on("change", function () { |
||||
const file = new FileReader(); |
||||
file.readAsDataURL(this.files[0]); |
||||
const filename = this.files[0].name; |
||||
const typefile = this.files[0].name.split(".")[1]; |
||||
$("#myImg").remove(); |
||||
icontypes.forEach((e) => { |
||||
if (typefile.indexOf(e) >= 0) { |
||||
$(".modal-content-body").append( |
||||
`<img id="myImg" src="${path}/images/icons/${e}-file.png" style="max-width: 100px">` |
||||
); |
||||
return; |
||||
} |
||||
}); |
||||
if (!$("#myImg")[0]) { |
||||
$(".modal-content-body").append( |
||||
`<img id="myImg" src="${path}/images/icons/notfound-file.png" style="max-width: 100px">` |
||||
); |
||||
} |
||||
file.onload = function (e) { |
||||
$("#footername").remove(); |
||||
$("#footersend").remove(); |
||||
$("#footer-content-left").append( |
||||
`<label id="footername"><b>Arquivo:</b> ${filename}</label>` |
||||
); |
||||
$("#footer-content-right").append( |
||||
`<a href="#" class="btn-send" id="footersend"><img src="${path}/images/enter.svg" /></a>` |
||||
); |
||||
}; |
||||
$("#modalselect").show(); |
||||
}); |
||||
}; |
||||
const startPause = () => { |
||||
$("#btnsPause").on("click", "#entrePause", function () { |
||||
listarPausasAgente(localStorage.getItem("id_empresa")).then((pausas) => { |
||||
modalStart(); |
||||
$("#modalselect").show(); |
||||
$(".modal-content-body").append(() => { |
||||
let selectPause = ""; |
||||
pausas.data.forEach((e) => { |
||||
if (e.matricula != localStorage.getItem("my_uniqueid")) { |
||||
selectPause += `<option value="${e.id}">${e.motivo}</option>`; |
||||
selectPause += `<option value="${e.id}">${e.motivo}</option>`; |
||||
selectPause += `<option value="${e.id}">${e.motivo}</option>`; |
||||
selectPause += `<option value="${e.id}">${e.motivo}</option>`; |
||||
selectPause += `<option value="${e.id}">${e.motivo}</option>`; |
||||
} |
||||
}); |
||||
if (selectPause.length > 0) { |
||||
selectPause = `<div class="select-pause"><select id="selectpause">${selectPause}</select><i class="fas fa-chevron-down"></i></div>`; |
||||
} else { |
||||
selectPause = "<h3>Nenhuma pausa foi encontrado!</h3>"; |
||||
} |
||||
return selectPause; |
||||
}); |
||||
$(".modal-header-title").append( |
||||
`<span class="fz-14">Selecione uma Pausa:</span>` |
||||
); |
||||
$("#footer-content-right").append( |
||||
`<a href="#" class="btn-send" id="pausesend"><img src="${path}/images/enter.svg" /></a>` |
||||
); |
||||
$("#modalselect").show(); |
||||
}); |
||||
}); |
||||
$("#btnsPause").on("click", "#exitPause", () => { |
||||
sairPausa(localStorage.getItem("my_uniqueid")).then(() => { |
||||
monitorPausaAgente(); |
||||
}); |
||||
}); |
||||
$("#footer-content-right").on("click", "#pausesend", () => { |
||||
entrarPausa( |
||||
$("#selectpause").val(), |
||||
localStorage.getItem("my_uniqueid") |
||||
).then(() => { |
||||
$("#modalselect").css({ display: "none" }); |
||||
monitorPausaAgente(); |
||||
}); |
||||
}); |
||||
}; |
||||
const startTransfer = () => { |
||||
$("#tranferagent").on("click", function () { |
||||
modalStart(); |
||||
listarAgentesDisponivel(localStorage.getItem("id_empresa")).then( |
||||
(agentes) => { |
||||
$(".modal-content-body").append(() => { |
||||
let optAgent = null; |
||||
agentes.data.forEach((e) => { |
||||
if (e.matricula != localStorage.getItem("my_uniqueid")) { |
||||
optAgent += `<option value="${e.matricula}">${e.nome} - ${e.fila}</option>`; |
||||
} |
||||
}); |
||||
if (optAgent) { |
||||
return `<select id="selectranfer">${optAgent}</select>`; |
||||
} |
||||
$("#transfersend").hide(); |
||||
return `<h3>Nenhum agente disponível no momento!</h3>`; |
||||
}); |
||||
} |
||||
); |
||||
$(".modal-header-title").append( |
||||
`<span class="fz-14">Selecione um agente para transferir:</span>` |
||||
); |
||||
$("#footer-content-right").append( |
||||
`<a href="#" class="btn-send" id="transfersend"><img src="${path}/images/enter.svg" /></a>` |
||||
); |
||||
$("#modalselect").show(); |
||||
}); |
||||
$("#footer-content-right").on("click", "#transfersend", () => { |
||||
transferirAtendimento( |
||||
localStorage.getItem("my_uniqueid"), |
||||
$("#selectranfer").val(), |
||||
localStorage.getItem("session_uniqueid") |
||||
).then((res) => { |
||||
if (res.status == "success") { |
||||
hideButtons(true); |
||||
notifications({ |
||||
matricula: localStorage.getItem("my_uniqueid"), |
||||
uniqueid: localStorage.getItem("session_uniqueid"), |
||||
action: "finish", |
||||
}); |
||||
$("#modalselect").css({ display: "none" }); |
||||
} |
||||
}); |
||||
}); |
||||
}; |
||||
const exitSystem = () => { |
||||
$("#exitSystem").on("click", function () { |
||||
if (confirm("Deseja realmente desconectar do sistema?")) { |
||||
sair(localStorage.getItem("my_uniqueid")); |
||||
} |
||||
}); |
||||
}; |
||||
const startFinalizar = () => { |
||||
$("#finalizaratendimento").on("click", function () { |
||||
if (confirm("Deseja realmente finalizar o atendimento?")) { |
||||
finalizarAtendimento( |
||||
localStorage.getItem("my_uniqueid"), |
||||
localStorage.getItem("session_uniqueid") |
||||
); |
||||
} |
||||
}); |
||||
}; |
||||
/** |
||||
* FUNCAO PARA RECUPERAR O AUDIO DO MICROFONE |
||||
*/ |
||||
function recorderVoice() { |
||||
$("#modalselect").show(); |
||||
modalStart(); |
||||
$(".modal-content").css({ width: "30%" }); |
||||
$(".modal-content-body").addClass("d-flex") |
||||
$(".modal-content-body").addClass("align-items-center") |
||||
$(".modal-content-body") |
||||
.append(`<img src="${path}/images/stop.svg" class="cursor-pointer" id="stoprecorder"/>
|
||||
<div class="modal-content-body-item "> |
||||
<div class="modal-content-body-itens"> |
||||
<span class="fz-18"><b><span id="minutes">00</span>:<span id="seconds">00</span></b></span> |
||||
</div> |
||||
<div class="modal-content-body-itens"> |
||||
<span id="msgRecorder">Estamos gravando sua linda voz ...</span> |
||||
</div> |
||||
</div>`); |
||||
$("#footer-content-right").append( |
||||
`<a href="#" class="btn-send" id="footersend"><img src="${path}/images/enter.svg" /></a>` |
||||
); |
||||
navigator.mediaDevices.getUserMedia({ video: false, audio: true }).then( |
||||
(stream) => { |
||||
let option = { |
||||
type: "audio/mpeg", |
||||
}; |
||||
mediaRecorder = new MediaRecorder(stream); |
||||
let chunks = []; |
||||
mediaRecorder.ondataavailable = (data) => { |
||||
chunks.push(data.data); |
||||
}; |
||||
mediaRecorder.onstop = () => { |
||||
const blob = new Blob(chunks, option); |
||||
const reader = new FileReader(); |
||||
reader.readAsDataURL(blob); |
||||
reader.onloadend = () => { |
||||
const audio = document.createElement("audio"); |
||||
audio.src = reader.result; |
||||
audio.controls = true; |
||||
$("#footer-content-left").append(audio); |
||||
}; |
||||
}; |
||||
mediaRecorder.start(); |
||||
}, |
||||
(err) => { |
||||
// add msg de error
|
||||
} |
||||
); |
||||
} |
||||
/** |
||||
* ENVIA AS MENSAGEM DO TIPO MIDIA (RECEPTIVO) |
||||
* @param {*} id_provedor |
||||
* @param {*} type |
||||
* @param {*} mimetype |
||||
* @param {*} delivery |
||||
* @returns |
||||
*/ |
||||
const messageTypeMedia = (obj) => { |
||||
const fileDownload = |
||||
server_api + "/link/" + obj.id_provedor + "/" + window.btoa(obj.mimetype); |
||||
if (obj.type == "voice" || obj.type == "audio") { |
||||
// console.log(obj)
|
||||
// let wavesurfer = WaveSurfer.create({
|
||||
// container: '#waveform',
|
||||
// waveColor: 'violet',
|
||||
// progressColor: 'purple'
|
||||
// });
|
||||
// $('.chat-window').append(`
|
||||
// <div class="${obj.from}">
|
||||
// <span class="${obj.from}-message">
|
||||
// <audio controls><source src="${fileDownload}" type="${obj.mimetype}"></audio>
|
||||
// <a href="${fileDownload}"><img src="${path}/images/arrow-down.svg" class="btn-default"></a>
|
||||
// </span>
|
||||
// <br/>
|
||||
// <span class="message-time">${converdata(Date.now())}</span>
|
||||
// </div>`)
|
||||
$(".chat-window").append(` |
||||
<div class="${obj.from}"> |
||||
<span class="${obj.from}-message audio"> |
||||
<audio controls><source src="${fileDownload}" type="${ |
||||
obj.mimetype |
||||
}"></audio> |
||||
<a href="${fileDownload}"><img src="${path}/images/arrow-down.svg" class="btn-default"></a> |
||||
</span> |
||||
<br/> |
||||
<span class="message-time">${converdata(Date.now())}</span> |
||||
</div>`); |
||||
// const audio = `<div id="waveform"></div>`
|
||||
// // $('.chat-window').append(`
|
||||
// // <div class="${typesend}">
|
||||
// // <span class="${typesend}-message">${audio}</span>
|
||||
// // <br/>
|
||||
// // <span class="message-time">${datereceived}</span>
|
||||
// // </div>`)
|
||||
// wavesurfer.load(e.msg);
|
||||
return; |
||||
} |
||||
if (obj.type == "video") { |
||||
$(".chat-window").append(` |
||||
<div class="${obj.from}"> |
||||
<span class="${obj.from}-message"> |
||||
<video controls> |
||||
<source src="${fileDownload}" type="${obj.mimetype}"> |
||||
</video> |
||||
</span> |
||||
<br/> |
||||
<span class="message-time">${converdata(Date.now())}</span> |
||||
</div>`); |
||||
return; |
||||
} |
||||
if (obj.type == "document") { |
||||
const typefile = obj.filename.split(".")[1]; |
||||
let icon; |
||||
if (icontypes.indexOf(typefile) >= 0) { |
||||
icon = `<img src="${path}/images/icons/${typefile}-file.png" style="max-width: 60px"></img>`; |
||||
} else { |
||||
icon = `<img src="${path}/images/icons/notfound-file.png" style="max-width: 60px"></img>`; |
||||
} |
||||
$(".chat-window").append(` |
||||
<div class="${obj.from}"> |
||||
<span class="${obj.from}-message message-column"> |
||||
<a href="${fileDownload}" target="_blank"> |
||||
${icon} |
||||
</a> |
||||
</span> |
||||
<span class="fz-12">${obj.filename}</span> |
||||
<br/> |
||||
<span class="message-time">${converdata(Date.now())}</span> |
||||
</div>`); |
||||
return; |
||||
} |
||||
if (obj.type == "image" || obj.type == "sticker") { |
||||
$(".chat-window").append(` |
||||
<div class="${obj.from}"> |
||||
<span class="${obj.from}-message message-column"> |
||||
<img src="${fileDownload}" style="max-width: 200px; max-height: 150px" onclick="openImgModal('${fileDownload}')" > |
||||
</span> |
||||
<span class="message-time">${converdata(Date.now())}</span> |
||||
</div>`); |
||||
return; |
||||
} |
||||
}; |
||||
/** |
||||
* data = { number, media, name, datetime } |
||||
* |
||||
* @param {} data |
||||
* @returns |
||||
*/ |
||||
const buildNotification = (data = {}) => { |
||||
if (data.length == "undefined") { |
||||
return; |
||||
} |
||||
const datesend = converdata(data.datetime); |
||||
const status = data.status == 0 ? "opacity-8" : ""; |
||||
return `<div class="chat ${status}" id="${data.uniqueid}" onclick="selectNotification(this.id)">
|
||||
<div class="chat-left"> |
||||
<img src="${path}/images/${data.media}.png"/> |
||||
</div> |
||||
<div class="chat-right "> |
||||
<div class="chat-right-top"> |
||||
<span class="contact-name">${data.name}</span> |
||||
<span class="chat-date">${datesend}</span> |
||||
</div> |
||||
<div class="chat-right-bottom"> |
||||
<div class="chat-right-bottom-left"> |
||||
<span class="chat-message-${data.media}">${data.media}</span> |
||||
</div> |
||||
<div class="chat-right-bottom-right"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
`;
|
||||
// return `<div class="chat ${status}" id="${data.uniqueid}" onclick="selectNotification(this.id)">
|
||||
// <div class="chat-left">
|
||||
// <img src="${path}/images/${data.media}.png"/>
|
||||
// </div>
|
||||
// <div class="chat-right ">
|
||||
// <div class="chat-right-top">
|
||||
// <span class="contact-name">${data.name}</span>
|
||||
// <span class="chat-date">${datesend}</span>
|
||||
// </div>
|
||||
// <div class="chat-right-bottom">
|
||||
// <div class="chat-right-bottom-left">
|
||||
// <span class="chat-message-${data.media}">${data.media}</span>
|
||||
// </div>
|
||||
// <div class="chat-right-bottom-right"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="chat" id="${data.uniqueid}" onclick="selectNotification(this.id)">
|
||||
// <div class="chat-left">
|
||||
// <img src="${path}/images/${data.media}.png"/>
|
||||
// </div>
|
||||
// <div class="chat-right ">
|
||||
// <div class="chat-right-top">
|
||||
// <span class="contact-name">${data.name}</span>
|
||||
// <span class="chat-date">${datesend}</span>
|
||||
// </div>
|
||||
// <div class="chat-right-bottom">
|
||||
// <div class="chat-right-bottom-left">
|
||||
// <span class="chat-message-${data.media}">${data.media}</span>
|
||||
// </div>
|
||||
// <div class="chat-right-bottom-right"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
// `;
|
||||
}; |
||||
const alertNotification = (uniqueid, type = "add") => { |
||||
$("#" + uniqueid.replace(".", `\\.`) + " .chat-right-bottom-right").empty(); |
||||
if (type != "remove") { |
||||
listaMensagem(uniqueid).then((mensagens) => { |
||||
const countMsg = mensagens.data.filter((e) => { |
||||
if (e.status != "read") { |
||||
return true; |
||||
} |
||||
}); |
||||
let notf = countMsg.length; |
||||
$( |
||||
"#" + uniqueid.replace(".", `\\.`) + " .chat-right-bottom-right" |
||||
).append(`<span class="unread-messages-number">${notf}</span>`); |
||||
}); |
||||
} |
||||
}; |
||||
function soundNotification(url) { |
||||
const audio = new Audio(url); |
||||
audio.play(); |
||||
} |
||||
const notifyMe = (title, content) => { |
||||
if (!("Notification" in window)) { |
||||
console.log("This browser does not support desktop notification"); |
||||
} else if (Notification.permission === "granted") { |
||||
let notification = new Notification(title, { |
||||
body: content.body, |
||||
icon: content.icon, |
||||
silent: true, |
||||
}); |
||||
} else if ( |
||||
Notification.permission !== "denied" || |
||||
Notification.permission === "default" |
||||
) { |
||||
Notification.requestPermission(function (permission) { |
||||
if (permission === "granted") { |
||||
let notification = new Notification(title, { |
||||
body: content.body, |
||||
icon: content.icon, |
||||
silent: true, |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
}; |
||||
/** |
||||
* CRIA AS NOTIFICACOES DE TODOS OS ATENDIMENTOS NA INICIALIZACAO DO SISTEMA OU ATUALIZACAO |
||||
*/ |
||||
const notifications = (obj = {}) => { |
||||
/** STATUS DO AGENTE */ |
||||
monitorPausaAgente(); |
||||
listarAtendimentoAgente( |
||||
localStorage.getItem("id_empresa"), |
||||
localStorage.getItem("my_uniqueid") |
||||
).then((notification) => { |
||||
let chatList = ""; |
||||
$("#chats").empty(); |
||||
if (!notification.data) { |
||||
return; |
||||
} |
||||
if (Object.values(obj).length > 0) { |
||||
if (obj.action == "mensagem") { |
||||
notification.data.push(obj); |
||||
} else if (obj.action == "finish") { |
||||
/** RECEBIMENTO DO SOCKET PARA ALTERAR ESTILO DO HTML */ |
||||
notification.data.forEach((el) => { |
||||
if (el.uniqueid == obj.uniqueid) { |
||||
/** MARCA ATENDIMENTO COMO FINALIZADO */ |
||||
obj.action == "finish" ? (el.status = 0) : null; |
||||
/** REMOVE OS BOTOES E CAIXA DE TEXTO DEPOIS DA FINALIZACAO */ |
||||
if (el.uniqueid == localStorage.getItem("session_uniqueid")) { |
||||
hideButtons(true); |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
notification.data.sort((a, b) => b.status - a.status); |
||||
notification.data.forEach((e) => { |
||||
chatList += buildNotification({ |
||||
uniqueid: e.uniqueid, |
||||
number: e.cliente_id, |
||||
media: e.context, |
||||
name: e.profile_name, |
||||
datetime: e.data_reg, |
||||
status: e.status, |
||||
protocolo: e.protocolo, |
||||
media: e.media, |
||||
}); |
||||
}); |
||||
$("#chats").append(chatList); |
||||
}); |
||||
}; |
||||
const monitorPausaAgente = () => { |
||||
statusAgente( |
||||
localStorage.getItem("id_empresa"), |
||||
localStorage.getItem("my_uniqueid") |
||||
).then((agente) => { |
||||
let statusagent = agente.data[0].status; |
||||
const status = [ |
||||
{ |
||||
status: "LIVRE", |
||||
class: "status-connect", |
||||
html: `id="entrePause" src="${path}/images/pause.svg" title="Atribuir uma pausa"`, |
||||
descricao: statusagent, |
||||
}, |
||||
{ |
||||
status: "PAUSA", |
||||
class: "status-desconnect", |
||||
html: `id="exitPause" src="${path}/images/play.svg" title="Remover a pausa"`, |
||||
descricao: `${statusagent} - ${agente.data[0].motivo_pausa}`, |
||||
}, |
||||
{ |
||||
status: "OCUPADO", |
||||
class: "status-reconnect", |
||||
html: `id="entrePause" src="${path}/images/pause.svg" title="Atribuir uma pausa"`, |
||||
descricao: statusagent, |
||||
}, |
||||
{ |
||||
status: "INDISPONIVEL", |
||||
class: "status-reconnect", |
||||
html: `id="exitPause" src="${path}/images/play.svg" title="Remover a pausa"`, |
||||
descricao: statusagent, |
||||
}, |
||||
]; |
||||
if (statusagent) { |
||||
status.forEach((el) => { |
||||
if (el.status == statusagent) { |
||||
$("#status_agent").attr("class", el.class); |
||||
$("#status_agent").text(el.descricao); |
||||
$("#btnsPause").empty(); |
||||
$("#btnsPause").html(`<img ${el.html} >`); |
||||
} |
||||
}); |
||||
$("#myuniqueid").text(localStorage.getItem("my_uniqueid")); |
||||
/** CONFIGURACAO NOME */ |
||||
$("#nameagent").text(agente.data[0].nome); |
||||
/** CONFIGURACAO FILA */ |
||||
$("#queueagente").text(agente.data[0].fila); |
||||
} |
||||
}); |
||||
}; |
||||
const supervisorAgente = () => { |
||||
/** MONITORA AS CONFIGURACOES */ |
||||
setInterval(() => { |
||||
statusAgente(localStorage.getItem("my_uniqueid")).then((agente) => { |
||||
if ( |
||||
agente.status == "error" && |
||||
agente.message == "Agente não encontrado" |
||||
) { |
||||
window.close(); |
||||
} |
||||
}); |
||||
}, 30000); |
||||
}; |
||||
/** CONNECT TO WS */ |
||||
const connect = (wsserver) => { |
||||
const ws = new WebSocket(wsserver); |
||||
ws.onmessage = function (e) {}; |
||||
ws.onclose = function (e) { |
||||
setTimeout(function () { |
||||
connect(wsserver); |
||||
}, 3000); |
||||
}; |
||||
ws.onerror = function (err) { |
||||
alertModal( |
||||
`<h2>CONECTANDO NO SISTEMA! POR FAVOR AGUARDE.</h2>`, |
||||
`<img id="imgReconnect" width="20px" src="${path}/images/loading.gif">` |
||||
); |
||||
$("#status_agent").addClass("status-desconnect").text("DESCONECTADO"); |
||||
ws.close(); |
||||
}; |
||||
ws.onopen = function wsconnect() { |
||||
$("#status_agent").addClass("status-reconnect").text("RECONECTANDO ..."); |
||||
entrar( |
||||
localStorage.getItem("my_uniqueid"), |
||||
localStorage.getItem("obj_queue") |
||||
).then((login) => { |
||||
if ( |
||||
login.status == "success" || |
||||
login.message.indexOf("autenticado") >= 0 |
||||
) { |
||||
$("#modalselect").css({ display: "none" }); |
||||
monitorPausaAgente(); |
||||
ws.send( |
||||
JSON.stringify({ matricula: localStorage.getItem("my_uniqueid") }) |
||||
); |
||||
notifications(); |
||||
} else if (login.status == "error") { |
||||
alertModal( |
||||
`<h2>OPSS!! ${login.message}  </h2>`, |
||||
`<img width="20px" src="${path}/images/alerta.png">` |
||||
); |
||||
$("#status_agent").addClass("status-desconnect").text("OFF"); |
||||
} else { |
||||
wsconnect(); |
||||
} |
||||
}); |
||||
}; |
||||
ws.addEventListener("open", () => { |
||||
const storage = [ |
||||
"my_uniqueid", |
||||
"keep_msg", |
||||
"obj_contact", |
||||
"session_uniqueid", |
||||
"session_window", |
||||
]; |
||||
ws.addEventListener("message", (e) => { |
||||
/** att: atualizacao do websocket */ |
||||
if (e.data != "att") { |
||||
const data = JSON.parse(e?.data); |
||||
if (localStorage.getItem("session_uniqueid") == null) { |
||||
localStorage.setItem( |
||||
"session_uniqueid", |
||||
data.event.mensagem.uniqueid |
||||
); |
||||
} |
||||
if ($("#welcometomessage").is(":hidden") == false) { |
||||
localStorage.setItem("session_window", null); |
||||
} |
||||
/** ATUALIZACAO DA SESSAO CORRENTE (VALIDA PARA NAO ENVIAR PARA TELA INICIAL)*/ |
||||
if (localStorage.getItem("session_window") !== "null") { |
||||
viewMessage(data); |
||||
} |
||||
/** RECEBE AS PRIMEIRAS MENSAGENS */ |
||||
receiveNotification(data); |
||||
} |
||||
}); |
||||
}); |
||||
}; |
||||
|
||||
Loading…
Reference in new issue