@ -2,8 +2,13 @@
* EVENTOS GERADOS PELO USUARIO DA APLICACAO
* /
$ ( function ( ) {
connect ( ws ) ;
connect ( localStorage . getItem ( 'obj_ ws' ) ) ;
notifications ( ) ;
startSearch ( ) ;
changeColors ( darkMode , html ) ;
localStorage . removeItem ( 'session_status' ) ;
localStorage . setItem ( 'session_status' , 0 ) ;
/ * *
* VOICE RECORDER
* /
@ -11,33 +16,104 @@ $(function () {
$ ( "#msgRecorder" ) . text ( "Paramos de gravar sua voz!" ) ;
mediaRecorder . stop ( ) ;
} ) ;
/ * *
* HABILITA FECHAR O MODAL
* /
$ ( ".close" ) . on ( "click" , ( ) => {
$ ( "#modalselect" ) . hide ( ) ;
recStart ( ) ;
} ) ;
$ ( ".close-toast" ) . on ( "click" , ( ) => {
$ ( ".toast" ) . hide ( ) ;
} ) ;
$ ( document ) . on ( 'click' , function ( event ) {
const modal = document . getElementById ( "modalselect" ) ;
if ( event . target == modal ) {
modal . style . display = "none" ;
recStart ( ) ;
}
} )
$ ( "#voicerecorder" ) . on ( "click" , ( ) => {
recorderVoice ( ) ;
} ) ;
$ ( "#search-form" ) . on ( "keyup" , ( { target } ) => {
search ( target ) ;
} ) ;
$ ( "#chat-window-header-right-icon" ) . on ( "click" , ( ) => {
responsivoButtonsHeader ( ) ;
} ) ;
$ ( "#btn-enviar-template" ) . on ( "click" , ( { target } ) => {
enviaHsm ( target ) ;
} ) ;
$ ( "#btnFila" ) . on ( "click" , ( ) => {
filaNotifications ( ) ;
isAtend = false ;
} ) ;
$ ( "#btnAtendimento" ) . on ( "click" , ( ) => {
notifications ( ) ;
isAtend = true ;
click _btn ( document . querySelector ( "#btnAtendimento" ) ) ;
} ) ;
$ ( "#exitChat" ) . on ( "click" , ( ) => {
abrirMensagem = false ;
abrirTela ( ) ;
// removeMensagemBody();
} ) ;
$ ( "#abrirContato" ) . on ( "click" , ( ) => {
abrirTelaContato ( ) ;
buildContacts ( ) ;
} ) ;
$ ( "#btn-add" ) . on ( "click" , ( ) => {
abrirTelaContatoCadastro ( ) ;
} ) ;
$ ( "#btn-contatos" ) . on ( "click" , ( ) => {
voltarTelaCadastro ( ) ;
} ) ;
$ ( "#btn-contato" ) . on ( "click" , ( e ) => {
e . preventDefault ( ) ;
const form = $ ( "#form-contato" ) ;
cadastroContato ( form [ 0 ] ) ;
} ) ;
$ ( "#btn-inicial" ) . on ( "click" , ( ) => {
voltarTelaInicial ( ) ;
} ) ;
$ ( "#option-view-button" ) . on ( 'click' , ( e ) => {
const checkbox = e . target ;
mostraTemplatesOptions ( checkbox ) ;
} ) ;
$ ( "#recuperaratendimento" ) . on ( "click" , ( ) => {
if ( confirm ( "Deseja recuperar o atendimento?" ) ) {
recuperarAtendimento ( ) ;
}
} ) ;
$ ( "input[name=contato]" ) . on ( "keyup" , ( event ) => {
let input = event . target
input . value = phoneMask ( input . value )
} ) ;
/ * *
* HABILITA O ENVIO DE MIDIAS CTRL + V
* /
$ ( document ) . on ( 'keydown' , function ( e ) {
if ( e . ctrlKey || e . metaKey ) {
if ( e . keyCode == 86 ) { // 86 é o código da tecla "V"
if ( + localStorage . getItem ( 'session_status' ) === 0 ) return ;
$ ( document ) . one ( 'paste' , function ( event ) {
// Verifica se o que foi colado é uma imagem
if ( event . originalEvent . clipboardData . items && event . originalEvent . clipboardData . items . length ) {
// Percorre todos os itens colados
for ( let i = 0 ; i < event . originalEvent . clipboardData . items . length ; i ++ ) {
// Verifica se o item atual é uma imagem
if ( event . originalEvent . clipboardData . items [ i ] . type . indexOf ( "image" ) !== - 1 ) {
// Cria um objeto File a partir da imagem colada
let imageFile = event . originalEvent . clipboardData . items [ i ] . getAsFile ( ) ;
startSendImagePrintScreen ( imageFile )
mediaPrint = imageFile ;
}
}
}
} ) ;
}
}
} )
/** FIM VOICE RECORDER */
/** EVENTOS DE CLICK NO BODY */
@ -48,16 +124,14 @@ $(function () {
$ ( ".chat-window-header-right" ) . removeClass ( "ativo" ) ;
} ) ;
/** INICIO DAS FUNCIONALIDADES */
startSendImage ( ) ;
startSendFile ( ) ;
startPause ( ) ;
startTransfer ( ) ;
startFinalizar ( ) ;
startSalvaContato ( ) ;
exitSystem ( ) ;
startFooter ( ) ;
/** INICIA COM O HEADER DO CONTATO VAZIO */
startChannelMessage ( ) ;
@ -91,8 +165,6 @@ $(function () {
} ) ;
$ ( "#imgclip" ) . on ( "click" , function ( ) {
modalStart ( ) ;
$ ( "#uploadimage" ) . val ( "" ) ;
$ ( "#uploadfile" ) . val ( "" ) ;
if ( $ ( "#uploadfiles" ) . is ( ":hidden" ) ) {
$ ( "#uploadfiles" ) . fadeIn ( 200 ) ;
} else {
@ -104,13 +176,20 @@ $(function () {
$ ( "#modalselect" ) . css ( { display : "none" } ) ;
} ) ;
supervisorAgente ( ) ;
//REMOVE TAGS
for ( x = 0 ; x <= 15 ; x ++ ) {
$ ( ` #myscript ${ x } ` ) . remove ( )
}
} ) ;
/ * *
* EVENTOS DE CLICK PARA SELECIONAR A SESSAO DE MENSAGEM / CONVERSA E RECUPERAR AS MENSAGENS JA TROCADAS NO ATENDIMENTO
* @ param { * } id
* /
const selectNotification = ( id ) => {
const selectNotification = ( id , status , datetime , chatType ) => {
marcarMensagemVista ( id ) ;
toggleEnvioTemplates ( 0 ) ;
listaMensagem ( id ) . then ( async ( ) => {
let uniqueid ;
let number ;
@ -119,28 +198,35 @@ const selectNotification = (id) => {
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" )
) ;
const allNotifications = typeChat ( chatType ) ;
const atendimentos = await buscarAtendimento ( id ) ;
hideButtons ( false ) ;
allNotifications . data . forEach ( ( e ) => {
allNotifications . forEach ( ( e ) => {
$ ( "#" + e . uniqueid . replace ( "." , ` \\ . ` ) ) . removeClass (
"select-notification"
) ;
if ( e . uniqueid == id && e . status == 0 ) {
hideButtons ( true ) ;
monitoraStatusRecuperacaoAtendimento ( datetime ) ;
}
const statusIsSended = e . evento === sendTemplate ;
if ( e . uniqueid == id && statusIsSended ) {
hideButtons ( true ) ;
}
} ) ;
$ ( "#" + id . replace ( "." , ` \\ . ` ) ) . addClass ( "select-notification" ) ;
allNotifications . data . forEach ( ( e ) => {
allNotifications . forEach ( ( e ) => {
if ( e . uniqueid == id && e . status == 0 ) {
hideButtons ( true ) ;
monitoraStatusRecuperacaoAtendimento ( datetime ) ;
}
} ) ;
if ( dataRequest . data . length > 0 ) {
dataContact = dataRequest . data . filter ( ( e ) => {
if ( id . trim ( ) == e . uniqueid ) {
@ -148,7 +234,8 @@ const selectNotification = (id) => {
}
} ) ;
}
allNotifications . data . forEach ( ( e ) => {
allNotifications . forEach ( ( e ) => {
if ( id === e . uniqueid ) {
uniqueid = e . uniqueid ;
name = e . nome ;
@ -156,13 +243,32 @@ const selectNotification = (id) => {
protocolo = e . protocolo ;
}
} ) ;
localStorage . removeItem ( "session_window" ) ;
localStorage . removeItem ( "session_uniqueid" ) ;
localStorage . removeItem ( "session_status" ) ;
localStorage . setItem ( "session_uniqueid" , uniqueid ) ;
localStorage . setItem ( "session_status" , status ) ;
localStorage . setItem ( "session_window" , number ) ;
localStorage . setItem ( "session_name" , name ) ;
// CHECA SE O CONTATO JA EXISTE NA LISTA DE CONTATO, SE NÃO, EXIBE O BOTÃO DE SALVAR CONTATO
var contactsString = localStorage . getItem ( "obj_contacts" ) ;
var contacts = JSON . parse ( contactsString ) ;
var numberExists = contacts . data . some ( function ( contact ) {
return contact . contato === number ;
} ) ;
if ( numberExists ) {
$ ( "#salvarcontato" ) . hide ( ) ;
} else {
$ ( "#salvarcontato" ) . show ( ) ;
}
$ ( ".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) */
$ ( ".chat-window .sender" ) . remove ( ) ;
$ ( ".chat-window .receiver" ) . remove ( ) ;
@ -172,32 +278,24 @@ const selectNotification = (id) => {
if ( typeof dataContact === "undefined" ) return ;
dataContact . forEach ( ( e ) => {
const datesend = e . msg _date
? converdata ( new Date ( e . msg _date ) . getTime ( ) )
: "algumas horas" ;
const datesend = e . msg _date ? converdata ( new Date ( e . msg _date ) . getTime ( ) ) : "algumas horas" ;
let typesend = atendimentos . data [ 0 ] . cliente _id == e . src ? "receiver" : "sender" ;
let statusMessage = e . status != 'error' ? datesend : '<span style="color:red">Mensagem não foi enviada!</span>' ;
let statusMessage = e . status != 'error' ? datesend : '<span class="message-error" style="color:red">Mensagem não foi enviada!</span>' ;
if ( e . type == "text" ) {
$ ( ".chat-window" ) . append ( `
< div class = "${typesend}" >
< span class = "${typesend}-message" > $ { e . content . replace ( /\r?\n/g , "<br>" ) } < / s p a n >
< span class = "${typesend}-message" > $ { e . content . replace ( /\r?\n/g , "<br>" ) } < / s p a n >
< br / >
< span class = "message-time" > $ { statusMessage } < / s p a n >
< / d i v > ` ) ;
}
if ( e . type == "transfer" ) {
$ ( ".chat-window" ) . append ( `
< div class = "events" >
< span class = "events-message" > $ { e . content } por $ { e . profile _name } , $ { datesend } . < / s p a n >
< / d i v > ` ) ;
$ ( ".chat-window" ) . append ( ` <div class="events"><span class="events-message"> ${ e . content } por ${ e . profile _name } , ${ datesend } .</span></div> ` ) ;
}
if ( e . type == "finish" || e . type == "re_start" ) {
$ ( ".chat-window" ) . append ( `
< div class = "events" >
< span class = "events-message" > $ { e . content } < / s p a n >
< / d i v > ` ) ;
if ( e . type == "finish" || e . type == "re_start" || e . type == "recover" || e . type == "timeout" ) {
$ ( ".chat-window" ) . append ( ` <div class="events"><span class="events-message"> ${ e . content } </span></div> ` ) ;
}
if ( e . type != "text" ) {
const sendobj = {
@ -210,9 +308,7 @@ const selectNotification = (id) => {
messageTypeMedia ( sendobj ) ;
}
if ( e . de == localStorage . getItem ( "my_uniqueid" ) ) {
const datereceived = e . datetime
? converdata ( e . datetime )
: "algumas horas" ;
const datereceived = e . datetime ? converdata ( e . datetime ) : "algumas horas" ;
if ( e . type == "text" ) {
$ ( ".chat-window" ) . append ( `
< div class = "${typesend}" >
@ -232,18 +328,16 @@ const selectNotification = (id) => {
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 >
< / s p a n >
$ { e . filename }
< br / >
< span class = "message-time" > $ { datereceived } < / s p a n >
< / d i v > ` ) ;
< div class = "${typesend}" >
< span class = "${typesend}-message message-column" >
< a href = "${server_api}/link/${e.uniqueid}/${window.btoa(" application / " + l)}" target = "_blank" >
< img src = "${path}/images/icons/${l}-file.png" style = "max-width: 60px" >
< / a >
< / s p a n >
$ { e . filename }
< br / >
< span class = "message-time" > $ { datereceived } < / s p a n >
< / d i v > ` ) ;
}
} ) ;
} else if ( e . type == "image" ) {
@ -260,22 +354,59 @@ const selectNotification = (id) => {
scrollDown ( ) ;
} ) ;
abrirMensagem = true ;
startNotification ( ) ;
} ;
/ * *
* EVENTOS DE CLICK PARA SELECIONAR A SESSAO DE MENSAGEM / CONVERSA E RECUPERAR AS MENSAGENS JA TROCADAS NO ATENDIMENTO
* @ param { * } id
* /
const selectContact = async ( id ) => {
let name ;
let number ;
const { data } = await listarTemplates ( ) ;
localStorage . setItem ( "obj_templates" , JSON . stringify ( data ) ) ;
const allNotifications = JSON . parse (
localStorage . getItem ( "obj_contacts" )
) ;
allNotifications . data . forEach ( ( contact ) => {
if ( + id === contact . id ) {
name = contact . nome ;
number = contact . contato ;
}
} ) ;
localStorage . setItem ( 'client_id' , number ) ;
$ ( ".chat-window .sender" ) . remove ( ) ;
$ ( ".chat-window .receiver" ) . remove ( ) ;
$ ( ".chat-window .events" ) . remove ( ) ;
$ ( ".chat-window-contact-status" ) . text ( "" ) ;
$ ( ".chat-window-contact-name" ) . text ( name ) ;
abrirMensagem = true ;
hideButtons ( true ) ;
startNotification ( ) ;
montaSelectTemplateMessages ( data ) ;
} ;
/ * *
* 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" ) ) ;
if ( ! sendNumber || ! myUniqueid || ! agent ) {
alert ( 'Não foi possível carregar todas as informações do sessão do atendimento! Por favor, Tente novamente.' ) ;
if ( ! sendNumber || ! myUniqueid || ! agent ) {
alert ( 'Não foi possível carregar todas as informações da sessão do atendimento! Por favor, Tente novamente.' ) ;
return ;
}
@ -308,7 +439,7 @@ const sendMessage = (obj = {}) => {
mimetype : mimetype ,
media : media ,
content : sendContent ,
status : "sende d" ,
status : "rea d" ,
} ,
} ,
} ;
@ -319,10 +450,7 @@ const sendMessage = (obj = {}) => {
let msgContent = type == "text" ? sendContent : obj . fileContent ;
$ ( ".chat-window" ) . append ( `
< div class = "sender" >
< span class = "sender-message" > $ { msgContent . replace (
/\r?\n/g ,
"<br>"
) } < / s p a n >
< span class = "sender-message" > $ { msgContent . replace ( /\r?\n/g , "<br>" ) } < / s p a n >
< br / >
< span class = "message-time" > $ { converdata ( Date . now ( ) ) } < / s p a n >
< / d i v > ` ) ;
@ -353,10 +481,16 @@ const viewMessage = (ev) => {
break ;
case "finish" :
case "re_start" :
$ ( ".chat-window" ) . append ( `
< div class = "events" >
< span class = "events-message" > $ { ev . event . mensagem . content } < / s p a n >
< / d i v > ` ) ;
$ ( ".chat-window" ) . append ( ` <div class="events"><span class="events-message"> ${ ev . event . mensagem . content } </span></div> ` ) ;
break ;
case "timeout" :
$ ( ".chat-window" ) . append ( ` <div class="events"><span class="events-message"> ${ ev . event . mensagem . content } </span></div> ` ) ;
break ;
case "alert" :
break ;
case "recover" :
$ ( ".chat-window" ) . append ( ` <div class="events"><span class="events-message"> ${ ev . event . mensagem . content } </span></div> ` ) ;
hideButtons ( false ) ;
break ;
}
const mediaDownload = [
@ -389,9 +523,7 @@ const receiveNotification = (data) => {
let validate = null ;
switch ( data . event ? . type ) {
case "mensagem" :
if (
data . event . mensagem . uniqueid != localStorage . getItem ( "session_uniqueid" )
) {
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 ` ,
@ -400,25 +532,17 @@ const receiveNotification = (data) => {
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" )
) ;
listarAtendimentoAgente ( localStorage . getItem ( "my_uniqueid" ) ) ;
validate = JSON . parse ( localStorage . getItem ( "obj_notification" ) ) ;
const vald = validate . data . filter ( ( e ) => {
return data . event ? . mensagem . uniqueid == e . uniqueid ;
} ) ;
if (
data . event ? . contact . number != localStorage . getItem ( "session_window" )
) {
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
) {
if ( data . event ? . mensagem . uniqueid && data . event ? . contact . number && vald . length == 0 ) {
notifications ( {
uniqueid : data . event ? . mensagem . uniqueid ,
cliente _id : data . event ? . contact . number ,
@ -441,6 +565,7 @@ const receiveNotification = (data) => {
break ;
case "finish" :
case "re_start" :
case "recover" :
obj = {
uniqueid : data . event ? . mensagem . uniqueid ,
action : data . event . mensagem . type ,
@ -470,44 +595,83 @@ const keepMensage = (ev) => {
* 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 ;
if ( mediaAudio ) {
sendAudio ( media ) ;
} else if ( mediaDoc ) {
sendFile ( ) ;
} else if ( mediaImage || mediaPrint ) {
sendImage ( ) ;
} else {
alert ( 'opção invalida' ) ;
}
$ ( "#uploadimage" ) . val ( "" ) ;
$ ( '#fieldsendmessage' ) . focus ( ) ;
} ;
const sendAudio = ( media ) => {
if ( media . state == "recording" ) {
media . stop ( ) ;
}
const el = mediaAudio . src ;
const fileContent = mediaAudio . outerHTML ;
sendMessage ( {
content : el . replace ( "data:" , "" ) . replace ( /^.+,/ , "" ) ,
type : "audio" ,
mimetype : "audio/mpeg" ,
fileContent ,
} ) ;
mediaAudio = null ;
}
const sendFile = ( ) => {
let el = mediaDoc ;
let rec = new Blob ( [ el ] , { type : el . type } ) ;
let filesent = $ ( "#myImg" ) ;
filesent [ 0 ] . id = Date . now ( ) ;
imgContent = filesent . css ( { "max-width" : "120px" } ) [ 0 ] . outerHTML ;
fileContent = ` <a href=" ${ URL . createObjectURL (
rec
) } " target=" _blank " > $ { imgContent } < / a > ` ;
filename = el . name ;
const file = new FileReader ( ) ;
file . onload = function ( ) {
const typefile =
rec . type . split ( "/" ) [ 0 ] . indexOf ( "image" ) >= 0
? rec . type . split ( "/" ) [ 0 ]
: "document" ;
sendMessage ( {
content : el . replace ( "data:" , "" ) . replace ( /^.+,/ , "" ) ,
type : "audio" ,
mimetype : "audio/mpeg" ,
content : fil e. result . replace ( "data:" , "" ) . replace ( /^.+,/ , "" ) ,
type : typefile ,
mimetype : rec . type ,
fileContent ,
filename ,
} ) ;
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" : "200px" } ) [ 0 ] . outerHTML ;
$ ( "#myImg" ) . empty ( ) ;
}
} ;
file . readAsDataURL ( rec ) ;
mediaDoc = null ;
}
const sendImage = ( ) => {
const el = mediaImage ? ? mediaPrint ;
const rec = new Blob ( [ el ] , { type : el . type } ) ;
let filesent = $ ( "#myImg" ) ;
filesent [ 0 ] . id = Date . now ( ) ;
fileContent = filesent . css ( { "max-width" : "200px" } ) [ 0 ] . outerHTML ;
filename = el . name ;
$ ( "#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 ,
@ -516,5 +680,7 @@ const sendMedia = (media = null) => {
filename ,
} ) ;
} ;
file . readAsDataURL ( rec ) ;
} ;
mediaImage = null ;
}
