Browse Source

alteracoes layout

pull/4/head
guilherme guia 2 years ago
parent
commit
935f370fcc
  1. 42
      app/view/content.php
  2. 2
      app/view/header.php
  3. 19
      index.php
  4. 596
      public/css/styles.css
  5. 68
      public/css/teste
  6. BIN
      public/images/lua.png
  7. BIN
      public/images/send-message.png
  8. BIN
      public/images/seta-para-baixo.png
  9. BIN
      public/images/settings.png
  10. BIN
      public/images/sol.png
  11. 13
      public/index.html
  12. 20
      public/js/config.js
  13. 852
      public/js/main.js
  14. 33
      public/js/requests.js
  15. 1243
      public/js/util.js
  16. 6095
      public/js/waveSurfer.js

42
app/view/content.php

@ -13,21 +13,42 @@
<div class="sidebar-header-icons"> <div class="sidebar-header-icons">
<div id="btnsPause"></div> <div id="btnsPause"></div>
<img src="<?= $files ?>/images/power.svg" id="exitSystem" alt="Desconectar do Chat" title="Sair do sistema" /> <img src="<?= $files ?>/images/power.svg" id="exitSystem" alt="Desconectar do Chat" title="Sair do sistema" />
<!-- <img src="<?= $files ?>/images/settings.png" title="Configurações" id="configs"/> -->
<input type="checkbox" class="checkbox-switch" id="input-checkbox-switch">
<label for="input-checkbox-switch" class="label-switch">
<!-- <span><i class="fas fa-sun"></i></span>
<span><i class="fas fa-moon"></i></span> -->
<div class="switch-ball light-mode">
<span><i class="fas fa-sun"></i></span>
</div>
</label>
</div> </div>
</div> </div>
<div class="chats" id="chats"></div> <div class="box-event-buttons">
</div> <button class="btn-atendimento button-selected" id="btnAtendimento">Em atendimento </button>
<button class="btn-fila" id="btnFila">Em espera</button>
</div>
<div class="search">
<i class="fas fa-search search-icon"></i>
<input type="text" class="search-form" placeholder="Search">
</div>
<div class="chats" id="chats">
</div>
<div class="estatisticas">
</div>
</div>
<div class="main"> <div class="main">
<div class="chat-window-header"> <div class="chat-window-header">
<div class="chat-window-header-left" id="headermediaagent"> <div class="chat-window-header-left" id="headermediaagent">
<span class="btn-exit-chat" id="exitChat"><i class="fas fa-arrow-left"></i></span>
<img class="chat-window-contact-image" src="<?= $files ?>/images/whatsapp.png" /> <img class="chat-window-contact-image" src="<?= $files ?>/images/whatsapp.png" />
<div class="contact-name-and-status-container"> <div class="contact-name-and-status-container">
<span class="chat-window-contact-name"></span> <span class="chat-window-contact-name"></span>
<span class="chat-window-contact-status">WhatsApp</span> <span class="chat-window-contact-status">WhatsApp</span>
</div> </div>
</div> </div>
<div class="chat-window-header-right" id="headerbuttonsagent"> <!-- <div class="chat-window-header-right" id="headerbuttonsagent">
<div class="chat-window-header-right-commands btn-info" id="tranferagent" title="Transferir atendimento"> <div class="chat-window-header-right-commands btn-info" id="tranferagent" title="Transferir atendimento">
<img class="chat-window-menu-icon" src="<?= $files ?>/images/redo.svg" /> <img class="chat-window-menu-icon" src="<?= $files ?>/images/redo.svg" />
<span class="chat-window-menu-span"> Transferir</span> <span class="chat-window-menu-span"> Transferir</span>
@ -36,7 +57,7 @@
<img class="chat-window-menu-icon" src="<?= $files ?>/images/cross-circle.svg" /> <img class="chat-window-menu-icon" src="<?= $files ?>/images/cross-circle.svg" />
<span class="chat-window-menu-span"> Finalizar</span> <span class="chat-window-menu-span"> Finalizar</span>
</div> </div>
</div> </div> -->
</div> </div>
<div class="chat-window" id="chatwindowagent"> <div class="chat-window" id="chatwindowagent">
@ -56,18 +77,18 @@
</label> </label>
<input id="uploadimage" accept="image/*,video/mp4,video/3gpp,video/quicktime" type="file" multiple="" style="display: none;"> <input id="uploadimage" accept="image/*,video/mp4,video/3gpp,video/quicktime" type="file" multiple="" style="display: none;">
</div> </div>
<div class="type-message-bar" id="typemessagebar"> <div class="type-message-bar" id="typemessagebar">
<div class="type-message-bar-left">
<img src="<?= $files ?>/images/microphone.svg" id="voicerecorder" title="Enviar mensagem de audio" />
<img src="<?= $files ?>/images/clip.svg" id="imgclip" title="Anexar arquivo ou imagem" />
</div>
<div class="type-message-bar-center"> <div class="type-message-bar-center">
<textarea rows="1" type="text" id="fieldsendmessage" placeholder="Escreva uma mensagem" style="resize: none;"></textarea> <textarea rows="1" type="text" id="fieldsendmessage" placeholder="Escreva uma mensagem" style="resize: none;"></textarea>
</div> </div>
<div class="type-message-bar-right flex-center"> <div class="type-message-bar-right flex-center">
<img src="<?= $files ?>/images/paper-plane.svg" title="Enviar mensagem" /> <img src="<?= $files ?>/images/microphone.svg" id="voicerecorder" title="Enviar mensagem de audio" class="icons file"/>
<img src="<?= $files ?>/images/clip.svg" id="imgclip" title="Anexar arquivo ou imagem" class="icons file"/>
<img src="<?= $files ?>/images/send-message.png" title="Enviar mensagem" class="icons send"/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -90,6 +111,9 @@
</div> </div>
</div> </div>
<script> <script>
let modal = document.getElementById("modalselect"); let modal = document.getElementById("modalselect");
let span = document.getElementsByClassName("close")[0]; let span = document.getElementsByClassName("close")[0];

2
app/view/header.php

@ -8,4 +8,6 @@
<title>Simples IP - Simples Client</title> <title>Simples IP - Simples Client</title>
<link rel="icon" href="<?= $files ?>/images/favicon.ico" /> <link rel="icon" href="<?= $files ?>/images/favicon.ico" />
<link rel="stylesheet" href="<?= $files ?>/css/styles.css" /> <link rel="stylesheet" href="<?= $files ?>/css/styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
</head> </head>

19
index.php

@ -23,34 +23,21 @@ if ($geturl['t'] == 'gerar' && $post['passwd'] == 'S1MPL3S1P_CH4T') {
]; ];
$token = $crypt->encrypt(json_encode($info, true)); $token = $crypt->encrypt(json_encode($info, true));
echo "Token: <input type='text' value='{$token}' size='90'><br><br>"; echo "Token: <input type='text' value='{$token}' size='90'><br><br>";
echo "<a href='http://{$post['servidor']}:8001/?t=$token' target='_blank'><b>Ir para</b></a>"; // echo "<a href='http://{$post['servidor']}:8001/?t=$token' target='_blank'><b>Ir para</b></a>";
echo "<a href='http://localhost:8001/?t=$token' target='_blank'><b>Ir para</b></a>";
exit; exit;
} }
/**
id_empresa
id_number
my_uniqueid
obj_queue
obj_server
obj_ws
**/
if ($geturl['t']) { if ($geturl['t']) {
$json = json_decode($crypt->decrypt(str_replace(' ', '+', $geturl['t'])), true); $json = json_decode($crypt->decrypt(str_replace(' ', '+', $geturl['t'])), true);
$objs = [ $objs = [
<<<<<<< HEAD
'id_empresa' => $json['id_empresa'],
'obj_server' => $json['servidor'],
'my_uniqueid' => $json['matricula'],
'obj_queue' => $json['fila'],
=======
'id_number' => $json['id_number'], 'id_number' => $json['id_number'],
'id_empresa' => $json['id_empresa'], 'id_empresa' => $json['id_empresa'],
'obj_server' => $json['servidor'], 'obj_server' => $json['servidor'],
'my_uniqueid' => $json['matricula'], 'my_uniqueid' => $json['matricula'],
'obj_queue' => $json['fila'], 'obj_queue' => $json['fila'],
>>>>>>> 1e181ff (ajustes de funcionalidades)
'obj_ws' => $json['websocket'], 'obj_ws' => $json['websocket'],
'session_uniqueid' => null, 'session_uniqueid' => null,
'obj_notification' => null, 'obj_notification' => null,

596
public/css/styles.css

File diff suppressed because it is too large Load Diff

68
public/css/teste

@ -0,0 +1,68 @@
@media (max-width: 680px) {
.app {
grid-template-columns: 30em 1fr;
/* grid-template-columns: 1fr; */
}
/* .sidebar {
display: none;
} */
}
@media (max-width: 850px) {
.app {
grid-template-columns: 33em 1fr;
}
}
@media (max-height: 820px) {
#welcometomessage h1,
h2 {
font-size: 30px;
}
#welcometomessage img {
width: 300px;
}
}
@media (max-height: 1380px) {
.chats {
height: 65vh;
padding-bottom: 20px;
}
}
@media (max-height: 700px) {
.type-message-bar {
bottom: 2rem;
}
/* .estatisticas {
display: none;
} */
.chats {
height: 60vh;
padding-bottom: 30px;
}
.type-message-bar {
bottom: 0;
}
}
/* @media (max-height: 650px) {
.chats {
height: 50vh;
padding-bottom: 30px;
}
} */
/*
@media (max-height: 550px) {
.type-message-bar {
bottom: 11rem;
}
}
*/

BIN
public/images/lua.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1007 B

BIN
public/images/send-message.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 635 B

BIN
public/images/seta-para-baixo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 292 B

BIN
public/images/settings.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 665 B

BIN
public/images/sol.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 987 B

13
public/index.html

@ -28,17 +28,7 @@
<div id="btnsPause"></div> <div id="btnsPause"></div>
<img src="images/power.svg" title="Sair do sistema"/> <img src="images/power.svg" title="Sair do sistema"/>
</div> </div>
</div> </div>
<div class="sidebar-notifications">
<img src="images/notifications.svg" />
<div class="sidebar-notifications-message">
<span>Get Notified of New Messages</span>
<a href="#">Turn on desktop notifications <img src="images/gt-arrow.svg" /></a>
</div>
</div>
<!-- Sidebar search chat --> <!-- Sidebar search chat -->
@ -134,7 +124,6 @@
<script> <script>
let modal = document.getElementById("modalselect"); let modal = document.getElementById("modalselect");
let span = document.getElementsByClassName("close")[0]; let span = document.getElementsByClassName("close")[0];
span.onclick = function () { span.onclick = function () {
modal.style.display = "none"; modal.style.display = "none";
} }

20
public/js/config.js

@ -1,10 +1,10 @@
const ws = localStorage.getItem('obj_ws') const ws = localStorage.getItem("obj_ws");
<<<<<<< HEAD const server_api = `http://${localStorage.getItem("obj_server")}`;
const server_api = localStorage.getItem('obj_server') const supervisor_api = localStorage.getItem("supervisor_api")
======= ? localStorage.getItem("supervisor_api")
const server_api = `http://${localStorage.getItem('obj_server')}` : localStorage.getItem("obj_server");
const supervisor_api = localStorage.getItem('supervisor_api') ? localStorage.getItem('supervisor_api') : localStorage.getItem('obj_server') let mediaRecorder;
>>>>>>> 1e181ff (ajustes de funcionalidades) const icontypes = ["csv", "doc", "pdf", "txt", "xls", "zip", "ppt"];
let mediaRecorder const path = "public";
const icontypes = ['csv', 'doc', 'pdf', 'txt', 'xls', 'zip', 'ppt'] const html = document.querySelector("html");
const path = 'public' let abrirMensagem = false;

852
public/js/main.js

@ -1,463 +1,547 @@
/** /**
* EVENTOS GERADOS PELO USUARIO DA APLICACAO * EVENTOS GERADOS PELO USUARIO DA APLICACAO
*/ */
$(function(){ $(function () {
connect(ws) connect(ws);
notifications() notifications();
/**
* VOICE RECORDER // waveSurferStart();
*/
$('.modal-content-body').on('click', '#stoprecorder', () => { /**
$('#msgRecorder').text('Paramos de gravar sua voz!') * VOICE RECORDER
mediaRecorder.stop() */
}) $(".modal-content-body").on("click", "#stoprecorder", () => {
$("#msgRecorder").text("Paramos de gravar sua voz!");
$('#voicerecorder').on('click', () => { mediaRecorder.stop();
recorderVoice() });
})
/** FIM VOICE RECORDER */ // Chama fila de atendimento
/** EVENTOS DE CLICK NO BODY */ // $("#btnFila").on("click", () => {
$("body").mouseup(function(){ // notifications();
$('#uploadfiles').fadeOut('slow') // });
});
// $("#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 */ $("#fieldsendmessage").on("keyup", () => {
startSendImage() if ($(this).val().trim().length == 0) {
startSendFile() $(this).val("");
startPause() }
startTransfer() resizeSendMsg();
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', () => { $(".type-message-bar-right").on("click", () => {
if($(this).val().trim().length == 0){ sendMessage();
$(this).val('') });
}
resizeSendMsg() /** abre modal de configurações*/
})
$('.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', () => { $("#configs").on("click", () => {
sendMedia(mediaRecorder) openConfigs();
$('#modalselect').css({display: 'none'}) });
})
supervisorAgente() $("#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 * EVENTOS DE CLICK PARA SELECIONAR A SESSAO DE MENSAGEM/CONVERSA E RECUPERAR AS MENSAGENS JA TROCADAS NO ATENDIMENTO
* @param {*} id * @param {*} id
*/ */
const selectNotification = (id) => { const selectNotification = (id) => {
marcarMensagemVista(id) marcarMensagemVista(id);
listaMensagem(id).then(() => {
listaMensagem(id).then(() => { let uniqueid;
let uniqueid let number;
let number let name;
let name let dataContact;
let dataContact let protocolo;
let protocolo
const dataRequest = JSON.parse(localStorage.getItem("obj_contact"));
const dataRequest = JSON.parse(localStorage.getItem('obj_contact')) listarAtendimentoAgente(
<<<<<<< HEAD localStorage.getItem("id_empresa"),
localStorage.getItem("my_uniqueid")
listarAtendimentoAgente(localStorage.getItem('my_uniqueid')) );
======= const allNotifications = JSON.parse(
listarAtendimentoAgente(localStorage.getItem('id_empresa'), localStorage.getItem('my_uniqueid')) localStorage.getItem("obj_notification")
>>>>>>> 1e181ff (ajustes de funcionalidades) );
const allNotifications = JSON.parse(localStorage.getItem('obj_notification'))
hideButtons(false);
console.log(allNotifications) allNotifications.data.forEach((e) => {
$("#" + e.uniqueid.replace(".", `\\.`)).removeClass(
hideButtons(false) "select-notification"
allNotifications.data.forEach(e => { );
$('#' + e.uniqueid.replace('.', `\\.`)).removeClass('select-notification') if (e.uniqueid == id && e.status == 0) {
if(e.uniqueid == id && e.status == 0){ hideButtons(true);
hideButtons(true) }
} });
}) $("#" + id.replace(".", `\\.`)).addClass("select-notification");
$('#' + id.replace('.', `\\.`)).addClass('select-notification')
allNotifications.data.forEach(e => { allNotifications.data.forEach((e) => {
if(e.uniqueid == id && e.status == 0){ if (e.uniqueid == id && e.status == 0) {
hideButtons(true) hideButtons(true);
} }
}) });
if (dataRequest.data.length > 0) {
if(dataRequest.data.length > 0){ dataContact = dataRequest.data.filter((e) => {
dataContact = dataRequest.data.filter(e => { if (id.trim() == e.uniqueid) {
if(id.trim() == e.uniqueid){ return true;
return true
}
})
} }
});
}
allNotifications.data.forEach(e => { allNotifications.data.forEach((e) => {
if(id === e.uniqueid){ if (id === e.uniqueid) {
uniqueid = e.uniqueid uniqueid = e.uniqueid;
name = e.nome name = e.nome;
number = e.cliente_id number = e.cliente_id;
protocolo = e.protocolo protocolo = e.protocolo;
} }
}) });
localStorage.removeItem('session_window') localStorage.removeItem("session_window");
localStorage.removeItem('session_uniqueid') localStorage.removeItem("session_uniqueid");
localStorage.setItem('session_uniqueid', uniqueid) localStorage.setItem("session_uniqueid", uniqueid);
localStorage.setItem('session_window', number) localStorage.setItem("session_window", number);
$('.chat-window-contact-name').text(name) $(".chat-window-contact-name").text(name);
$('.chat-window-contact-status').text('Protocolo: ' + protocolo) $(".chat-window-contact-status").text("Protocolo: " + protocolo);
/** REMOVE AS MSG NA E CONSTRIO A TELA NOVAMENTE (EVITAR DUPLICAR) */ /** REMOVE AS MSG NA E CONSTRIO A TELA NOVAMENTE (EVITAR DUPLICAR) */
$('.chat-window .sender').remove() $(".chat-window .sender").remove();
$('.chat-window .receiver').remove() $(".chat-window .receiver").remove();
$('.chat-window .events').remove() $(".chat-window .events").remove();
alertNotification(localStorage.getItem('session_uniqueid'),'remove') alertNotification(localStorage.getItem("session_uniqueid"), "remove");
dataContact.forEach(e => { dataContact.forEach((e) => {
const datesend = e.msg_date ? converdata(new Date(e.msg_date).getTime()) : 'algumas horas'; const datesend = e.msg_date
<<<<<<< HEAD ? converdata(new Date(e.msg_date).getTime())
let typesend = localStorage.getItem('my_uniqueid') == e.src ? 'sender': 'receiver' : "algumas horas";
======= let typesend =
let typesend = localStorage.getItem('my_uniqueid') == e.dst ? 'receiver' : 'sender' localStorage.getItem("my_uniqueid") == e.dst ? "receiver" : "sender";
>>>>>>> 1e181ff (ajustes de funcionalidades)
if (e.type == "text") {
if(e.type == 'text'){ $(".chat-window").append(`
$('.chat-window').append(`
<div class="${typesend}"> <div class="${typesend}">
<span class="${typesend}-message">${e.content}</span> <span class="${typesend}-message">${e.content.replace(
/\r?\n/g,
"<br>"
)}</span>
<br/> <br/>
<span class="message-time">${datesend}</span> <span class="message-time">${datesend}</span>
</div>` </div>`);
) }
}
if(e.type == 'finish' || e.type == 're_start'){ if (e.type == "finish" || e.type == "re_start") {
$('.chat-window').append(` $(".chat-window").append(`
<div class="events"> <div class="events">
<span class="events-message">${e.content}</span> <span class="events-message">${e.content}</span>
</div>` </div>`);
) }
}
if (e.type != "text") {
if(e.type != 'text'){ const sendobj = {
const sendobj = { filename: e.file_name,
filename: e.file_name, id_provedor: e.id_provedor,
id_provedor: e.id_provedor, type: e.type,
type: e.type, mimetype: e.mimetype,
mimetype: e.mimetype, from: typesend,
from: typesend };
} messageTypeMedia(sendobj);
messageTypeMedia(sendobj) }
}
if (e.de == localStorage.getItem("my_uniqueid")) {
if(e.de == localStorage.getItem('my_uniqueid')){ const datereceived = e.datetime
const datereceived = e.datetime ? converdata(e.datetime) : 'algumas horas'; ? converdata(e.datetime)
if(e.type == 'text'){ : "algumas horas";
$('.chat-window').append(` if (e.type == "text") {
$(".chat-window").append(`
<div class="${typesend}"> <div class="${typesend}">
<span class="${typesend}-message">${e.msg}</span> <span class="${typesend}-message">${e.msg}</span>
<br/> <br/>
<span class="message-time">${datereceived}</span> <span class="message-time">${datereceived}</span>
</div>`) </div>`);
} else if (e.type == 'audio' || e.type == 'voice'){ } else if (e.type == "audio" || e.type == "voice") {
const audio = `<audio controls> // 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> <source src="data:audio/mpeg;base64,${e.msg}"></source>
</audio>` </audio>`;
$('.chat-window').append(` $(".chat-window").append(`
<div class="${typesend}"> <div class="${typesend}">
<span class="${typesend}-message">${audio}</span> <span class="${typesend}-message">${audio}</span>
<br/> <br/>
<span class="message-time">${datereceived}</span> <span class="message-time">${datereceived}</span>
</div>`) </div>`);
} else if (e.type == 'document'){ } else if (e.type == "document") {
icontypes.forEach(l => { icontypes.forEach((l) => {
if(e.filename.indexOf(l) >= 0){ if (e.filename.indexOf(l) >= 0) {
$('.chat-window').append(` $(".chat-window").append(`
<div class="${typesend}"> <div class="${typesend}">
<span class="${typesend}-message message-column"> <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"> <img src="${path}/images/icons/${l}-file.png" style="max-width: 60px">
</a> </a>
</span> </span>
${e.filename} ${e.filename}
<br/> <br/>
<span class="message-time">${datereceived}</span> <span class="message-time">${datereceived}</span>
</div>`) </div>`);
} }
}) });
} else if (e.type == 'image'){ } else if (e.type == "image") {
const fileimg = `data:${e.mimetype};base64,` + e.msg const fileimg = `data:${e.mimetype};base64,` + e.msg;
$('.chat-window').append(` $(".chat-window").append(`
<div class="${typesend}"> <div class="${typesend}">
<span class="${typesend}-message"><img src="${fileimg}" style="max-width: 200px; max-height: 150px"></span> <span class="${typesend}-message"><img src="${fileimg}" style="max-width: 200px; max-height: 150px"></span>
<br/> <br/>
<span class="message-time">${datereceived}</span> <span class="message-time">${datereceived}</span>
</div>`) </div>`);
} }
} }
}) });
scrollDown() scrollDown();
}) });
startNotification() abrirMensagem = true;
} startNotification();
};
/** /**
* REALIZA O ENVIO DE MENSAGEM ATRAVEZ DA API * REALIZA O ENVIO DE MENSAGEM ATRAVEZ DA API
* @param {*} obj * @param {*} obj
* @returns * @returns
*/ */
const sendMessage = (obj = {}) => { const sendMessage = (obj = {}) => {
const sendNumber = localStorage.getItem('session_window') const sendNumber = localStorage.getItem("session_window");
const myUniqueid = localStorage.getItem('my_uniqueid') const myUniqueid = localStorage.getItem("my_uniqueid");
const agent = JSON.parse(localStorage.getItem('obj_status')) const agent = JSON.parse(localStorage.getItem("obj_status"));
let sendContent = (typeof obj.fileContent === "undefined") ? $('#fieldsendmessage').val() : obj.content let sendContent =
let name = agent.data.nome ? agent.data.nome : 'Atendente' typeof obj.fileContent === "undefined"
let uniqueid = localStorage.getItem('session_uniqueid') ? $("#fieldsendmessage").val()
let media = obj.media ? obj.media : 'whatsapp' : obj.content;
let type = obj.type ? obj.type : 'text' let name = agent.data.nome ? agent.data.nome : "Atendente";
let mimetype = obj.mimetype ? obj.mimetype : 'text' let uniqueid = localStorage.getItem("session_uniqueid");
let filename = obj.filename ? obj.filename : Date.now() let media = obj.media ? obj.media : "whatsapp";
let type = obj.type ? obj.type : "text";
if(!sendContent){ let mimetype = obj.mimetype ? obj.mimetype : "text";
return let filename = obj.filename ? obj.filename : Date.now();
}
if (!sendContent) {
let dataSend = { return;
"event": { }
"type": "mensagem",
"contact": { let dataSend = {
"name": name, event: {
"number": myUniqueid, type: "mensagem",
"matricula": myUniqueid contact: {
}, name: name,
"mensagem": { number: myUniqueid,
"uniqueid": uniqueid, matricula: myUniqueid,
"dst": sendNumber, },
"id_provedor": `${uniqueid}_${Date.now()}`, mensagem: {
"type": type, uniqueid: uniqueid,
"mimetype": mimetype, dst: sendNumber,
"media": media, id_provedor: `${uniqueid}_${Date.now()}`,
"content": sendContent, type: type,
"status": "sended" mimetype: mimetype,
} media: media,
} content: sendContent,
} status: "sended",
},
if(type != 'audio'){ },
dataSend.event.mensagem.file_name = filename };
}
if (type != "audio") {
enviarMensagem(dataSend) dataSend.event.mensagem.file_name = filename;
}
let msgContent = type == 'text' ? sendContent : obj.fileContent
$('.chat-window').append(` enviarMensagem(dataSend);
let msgContent = type == "text" ? sendContent : obj.fileContent;
$(".chat-window").append(`
<div class="sender"> <div class="sender">
<span class="sender-message">${msgContent}</span> <span class="sender-message">${msgContent.replace(
/\r?\n/g,
"<br>"
)}</span>
<br/> <br/>
<span class="message-time">${converdata(Date.now())}</span> <span class="message-time">${converdata(Date.now())}</span>
</div>`) </div>`);
scrollDown() scrollDown();
/** LIMPA O CAMPO DE ENVIO DE MENSAGEM */ /** LIMPA O CAMPO DE ENVIO DE MENSAGEM */
$('#fieldsendmessage').val("") $("#fieldsendmessage").val("");
} };
/** /**
* ATUALIZA AS MENSAGEM QUE SAO RECEBIDAS NA TELA DO ATENDIMENTO * 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 * @param {*} ev
*/ */
const viewMessage = (ev) => { const viewMessage = (ev) => {
const sessionOpen = localStorage.getItem('session_uniqueid') const sessionOpen = localStorage.getItem("session_uniqueid");
const datesend = ev.event?.mensagem.datetime ? converdata(ev.event?.mensagem.datetime, true) : 'algumas horas'; const datesend = ev.event?.mensagem.datetime
? converdata(ev.event?.mensagem.datetime, true)
if(ev.event?.mensagem.uniqueid == sessionOpen){ : "algumas horas";
marcarMensagemVista(sessionOpen)
switch(ev.event?.mensagem.type){ if (ev.event?.mensagem.uniqueid == sessionOpen) {
case 'text': marcarMensagemVista(sessionOpen);
$('.chat-window').append(` switch (ev.event?.mensagem.type) {
case "text":
$(".chat-window").append(`
<div class="receiver"> <div class="receiver">
<span class="receiver-message">${ev.event.mensagem.content}</span> <span class="receiver-message">${ev.event.mensagem.content}</span>
<br/> <br/>
<span class="message-time">${datesend}</span> <span class="message-time">${datesend}</span>
</div>`) </div>`);
break break;
case 'finish': case "finish":
case 're_start': case "re_start":
$('.chat-window').append(` $(".chat-window").append(`
<div class="events"> <div class="events">
<span class="events-message">${ev.event.mensagem.content}</span> <span class="events-message">${ev.event.mensagem.content}</span>
</div>`) </div>`);
break break;
} }
const mediaDownload = ["image", "voice", "document", "audio", "video", "sticker"] const mediaDownload = [
if(mediaDownload.indexOf(ev.event?.mensagem.type) >= 0){ "image",
const sendobj = { "voice",
filename: ev.event?.mensagem.file_name, "document",
id_provedor: ev.event?.mensagem.id_provedor, "audio",
type: ev.event?.mensagem.type, "video",
mimetype: ev.event?.mensagem.mimetype, "sticker",
from: 'receiver' ];
} if (mediaDownload.indexOf(ev.event?.mensagem.type) >= 0) {
messageTypeMedia(sendobj) const sendobj = {
} filename: ev.event?.mensagem.file_name,
scrollDown() 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 * APRESENTA AS NOVAS NOTIFICACOES DE ATENDIMENTO NA TELA DO ATENDENTE
* -> CADA ATENDIMENTO DEVE POSSUIR APENAS UMA NOTIFICACAO * -> CADA ATENDIMENTO DEVE POSSUIR APENAS UMA NOTIFICACAO
* @param {*} data * @param {*} data
*/ */
const receiveNotification = (data) => { const receiveNotification = (data) => {
let validate = null let validate = null;
switch(data.event?.type){ switch (data.event?.type) {
case "mensagem": case "mensagem":
if(data.event.mensagem.uniqueid != localStorage.getItem('session_uniqueid')){ if (
notifyMe(data.event.contact.name, { data.event.mensagem.uniqueid != localStorage.getItem("session_uniqueid")
body: data.event.mensagem.content, ) {
icon: `images/${data.event.mensagem.media}.png`, notifyMe(data.event.contact.name, {
silent: true body: data.event.mensagem.content,
}) icon: `images/${data.event.mensagem.media}.png`,
soundNotification(`${path}/sound/notification.mp3`) 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')) /** VALIDA O NUMERO, VERIFICA SE O TEM ALGMA MSG INICIAL, SE JA TEVE UM NUMERO NA VERIFICACAO */
listarAtendimentoAgente(
const vald = validate.data.filter((e) => { localStorage.getItem("id_empresa"),
return data.event?.mensagem.uniqueid == e.uniqueid localStorage.getItem("my_uniqueid")
}) );
validate = JSON.parse(localStorage.getItem("obj_notification"));
if(data.event?.contact.number != localStorage.getItem('session_window')){
alertNotification(data.event.mensagem.uniqueid) const vald = validate.data.filter((e) => {
} return data.event?.mensagem.uniqueid == e.uniqueid;
});
if (data.event?.mensagem.uniqueid && data.event?.contact.number && vald.length == 0) {
notifications( if (
{ data.event?.contact.number != localStorage.getItem("session_window")
uniqueid: data.event?.mensagem.uniqueid, ) {
cliente_id: data.event?.contact.number, alertNotification(data.event.mensagem.uniqueid);
context: data.event?.mensagem.media, }
profile_name: data.event?.contact.name,
data_reg: data.event?.mensagem.datetime, if (
status: 1, data.event?.mensagem.uniqueid &&
action: 'mensagem', data.event?.contact.number &&
} vald.length == 0
) ) {
} notifications({
break uniqueid: data.event?.mensagem.uniqueid,
case "actions": cliente_id: data.event?.contact.number,
let obj context: data.event?.mensagem.media,
switch(data.event.mensagem.type){ profile_name: data.event?.contact.name,
case 'start': data_reg: data.event?.mensagem.datetime,
case 'transfer': status: 1,
case 'att_status': action: "mensagem",
obj = {} });
break }
case 'finish': break;
case 're_start': case "actions":
obj = { let obj;
uniqueid: data.event?.mensagem.uniqueid, switch (data.event.mensagem.type) {
action: data.event.mensagem.type, case "start":
} case "transfer":
break case "att_status":
} obj = {};
notifications(obj) break;
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 * MANTEM TODAS AS MENSAGENS ARMAZENADAS NO LOCALSTORAGE, SEMPRE QUE ENVIA E RECEBE SERA GUARDADO
* @param {*} ev * @param {*} ev
*/ */
const keepMensage = (ev) => { const keepMensage = (ev) => {
let msg = JSON.parse(localStorage.getItem('keep_msg')) let msg = JSON.parse(localStorage.getItem("keep_msg"));
if(!msg){ if (!msg) {
msg = { data: [] } msg = { data: [] };
} }
if(ev.event?.contact && ev.event?.mensagem.content){ if (ev.event?.contact && ev.event?.mensagem.content) {
msg.data.push(ev) msg.data.push(ev);
localStorage.removeItem('keep_msg'); localStorage.removeItem("keep_msg");
localStorage.setItem('keep_msg', JSON.stringify(msg)) localStorage.setItem("keep_msg", JSON.stringify(msg));
} }
} };
/** /**
* FUNCAO PARA CAPTURAR O ARQUIVO A SER ENVIADO * FUNCAO PARA CAPTURAR O ARQUIVO A SER ENVIADO
*/ */
const sendMedia = (media = null) => { const sendMedia = (media = null) => {
let rec let rec;
let filename let filename;
if($("#footer-content-left audio").length){ if ($("#footer-content-left audio").length) {
if(media.state == 'recording'){ if (media.state == "recording") {
media.stop(); 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); 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);
};

33
public/js/requests.js

@ -16,12 +16,6 @@ const listaMensagem = (uniqueid) => new Promise((resolve) => {
$.ajax({ $.ajax({
url: `${server_api}/messages/${uniqueid}`, url: `${server_api}/messages/${uniqueid}`,
type: "GET", type: "GET",
<<<<<<< HEAD
data: {
uniqueid
},
=======
>>>>>>> 1e181ff (ajustes de funcionalidades)
success: function (res) { success: function (res) {
localStorage.removeItem('obj_contact') localStorage.removeItem('obj_contact')
localStorage.setItem('obj_contact', JSON.stringify(res)) localStorage.setItem('obj_contact', JSON.stringify(res))
@ -33,17 +27,11 @@ const listaMensagem = (uniqueid) => new Promise((resolve) => {
}) })
}) })
const listarAgentesDisponivel = (id_empresa) => new Promise((resolve) => { const listarAgentesDisponivel = (id_empresa) => new Promise((resolve) => {
$.ajax({ $.ajax({
url: `${server_api}/supervisor/agentes/status/${id_empresa}/livre`, url: `${server_api}/supervisor/agentes/status/${id_empresa}/livre`,
type: "GET", type: "GET",
<<<<<<< HEAD
data: {
id_empresa,
agente_livre: "true"
},
=======
>>>>>>> 1e181ff (ajustes de funcionalidades)
success: function (res) { success: function (res) {
resolve(res) resolve(res)
}, },
@ -57,12 +45,6 @@ const listarAtendimentoAgente = (id_empresa, matricula) => new Promise((resolve)
$.ajax({ $.ajax({
url: `${server_api}/atendimentos/${id_empresa}/${matricula}`, url: `${server_api}/atendimentos/${id_empresa}/${matricula}`,
type: "GET", type: "GET",
<<<<<<< HEAD
data: {
matricula
},
=======
>>>>>>> 1e181ff (ajustes de funcionalidades)
success: function (res) { success: function (res) {
localStorage.removeItem('obj_notification') localStorage.removeItem('obj_notification')
localStorage.setItem('obj_notification', JSON.stringify(res)) localStorage.setItem('obj_notification', JSON.stringify(res))
@ -78,12 +60,6 @@ const listarPausasAgente = (id_empresa) => new Promise((resolve) => {
$.ajax({ $.ajax({
url: `${server_api}/pausas/${id_empresa}`, url: `${server_api}/pausas/${id_empresa}`,
type: "GET", type: "GET",
<<<<<<< HEAD
data: {
id_empresa
},
=======
>>>>>>> 1e181ff (ajustes de funcionalidades)
success: function (res) { success: function (res) {
resolve(res) resolve(res)
}, },
@ -205,13 +181,6 @@ const statusAgente = (id_empresa, matricula) => new Promise((resolve) => {
$.ajax({ $.ajax({
url: `${server_api}/supervisor/agentes/${id_empresa}/${matricula}`, url: `${server_api}/supervisor/agentes/${id_empresa}/${matricula}`,
type: "GET", type: "GET",
<<<<<<< HEAD
data: {
matricula,
id_empresa: empresa
},
=======
>>>>>>> 1e181ff (ajustes de funcionalidades)
success: function(res) { success: function(res) {
localStorage.removeItem('obj_status') localStorage.removeItem('obj_status')
localStorage.setItem('obj_status', JSON.stringify(res)) localStorage.setItem('obj_status', JSON.stringify(res))

1243
public/js/util.js

File diff suppressed because it is too large Load Diff

6095
public/js/waveSurfer.js

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save