templates/chat/base_chat.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block stylesheets %}
  4.     <style>
  5.         .panel {
  6.             width: 100%;
  7.             position: absolute;
  8.             bottom: 0;
  9.             z-index: 999;
  10.         }
  12.         .panel-search {
  13.             display: none;
  14.             padding: 10px;
  15.             background-color: #dfdfdf;
  16.             height: 500px;
  17.         }
  19.         .panel::after {
  20.             content: '';
  21.             background-color: red;
  22.             opacity: 0.5;
  23.         }
  25.         #list-pacientes-search {
  26.             height: 540px;
  27.             overflow-y: scroll;
  28.         }
  29.     </style>
  30. {% endblock %}
  31. {% block body %}
  32.     <div class="body-chat">
  33.         <div class="container-fluid">
  34.             <div class="row clearfix">
  35.                 <div class="col-lg-12">
  36.                     <div class="card chat-app mt-4">
  37.                         <div id="plist" class="people-list">
  38.                 <div class="row mb-1">
  39.                                 <div class="col-lg-12">
  40.                 <div class="list-button-container">
  41.                   <div class="text-left btn btn-secundario btn-sm">
  42.                   <i class="fa fa-external-link-square mr-1"></i>
  43.                     <a target="_blank" href="{{ path('chat', { afiliadoId: afiliadoId, whabaId: whabaOrigen }) }}" style="cursor: pointer; color:inherit; text-decoration: none;" class="">Abrir en navegador web</a>
  44.                   </div>
  45.                   <div class="text-right">
  46.                     <button id="btnNewConversation" class="btn btn-corporativo btn-sm">
  47.                       <i class="fa fa-pencil mr-1"></i>
  48.                       Nuevo chat
  49.                     </button>
  50.                   </div>
  51.                 </div>
  52.                                 </div>
  53.                             </div>
  54.                             <div class="row mb-1">
  55.                                 <div class="col-lg-12">
  56.                                     <div class="input-group">
  57.                                         <div class="input-group-prepend">
  58.                                             <span class="input-group-text">
  59.                                                 <i class="fa fa-search"></i>
  60.                                             </span>
  61.                                         </div>
  62.                                         <input id="txtSearch" type="text" class="form-control" placeholder="Buscar chat activos..."/>
  63.                                     </div>
  64.                                 </div>
  65.                             </div>
  66.                             <ul class="list-unstyled chat-list mt-2 mb-0" id="listUserConversation">
  67.                                 {% include 'chat/listado-chat.html.twig' %}
  68.                             </ul>
  69.                         </div>
  70.                         <div class="chat">
  71.                             <div class="chat-header clearfix">
  72.                                 {% include 'chat/conversacion-header.html.twig' %}
  73.                             </div>
  74.                             <div class="chat-history">
  75.                   {% if oHistorialMensajes is defined %}
  76.                     {% include 'chat/conversacion.html.twig' %}
  77.                   {% endif %}
  78.                             </div>
  79.                             <div class="chat-message clearfix">
  80.                                 <div class="input-group d-flex no-gutters flex-row align-items-stretch " >
  81.                   <div class="flex-grow-1">
  82.                     <input type="text" class="form-control" placeholder="Introduce el texto aquí..." id="txtText"/>
  83.                   </div>
  84.                                     <div class="input-group-append col-md-auto">
  85.                                         <button id="btnAcction" disabled class="btn btn-corporativo" data-whabadestino="" data-centroid="" data-numtelefono="" data-template="false">
  86.                                             <i class="fa fa-plus"></i>
  87.                                         </button>
  88.                                         <button type="button" class="btn btn-corporativo btnSendMessage" disabled id="btnSendMessage" data-whabadestino="" data-centroid="" data-numtelefono="" data-template="false">
  89.                                             <i class="fa fa-send"></i>
  90.                                         </button>
  91.                                     </div>
  92.                                 </div>
  93.                             </div>
  94.                         </div>
  95.                         <div class="panel">
  96.                             <div class="panel-search">
  97.                                 <div class="row">
  98.                                     <div class="col-lg-12">
  99.                                         <div class="input-group">
  100.                                             <input type="text" class="form-control txtSearchPacienteNombre" placeholder="Nombre paciente" aria-label="Nombre paciente" aria-describedby="basic-addon2"/>
  101.                                             <input type="text" class="form-control txtSearcPacienteApellido" placeholder="Apellido paciente" aria-label="Apellido paciente" aria-describedby="basic-addon2"/>
  102.                                             <div class="input-group-append">
  103.                                                 <button id="btnSearchPaciente" class="btn btn-corporativo" type="button">Buscar</button>
  104.                                             </div>
  105.                                         </div>
  106.                                     </div>
  107.                                 </div>
  108.                                 <div class="row">
  109.                                     <div class="col-lg-12">
  110.                                         <div id="loadSearch" class="spinner-border" role="status" style="display: none">
  111.                                             <span class="sr-only">Loading...</span>
  112.                                         </div>
  113.                                         <ul id="list-pacientes-search" class="list-group"></ul>
  114.                                     </div>
  115.                                 </div>
  116.                             </div>
  117.                         </div>
  118.                     </div>
  119.                 </div>
  120.             </div>
  121.         </div>
  122.     </div>
  123. <div id="loading-overlay">
  124.   <div id="loading-icon"></div>
  125. </div>
  127.     {% include 'chat/componentes/modal-detail-paciente.html.twig' %}
  128.     {% include 'chat/componentes/modal-action-chat.html.twig' %}
  129. {% endblock %}
  131. {% block javascripts %}
  132.     <script type="text/javascript">
  133. var isOpenSearch = false;
  134. var emojioneAreaInstance;
  136. $(document).keyup(function(e) {
  137.   if (e.which === 27) {
  138.     if (isOpenSearch) {
  139.       $(".panel-search").slideToggle('slow');
  140.       isOpenSearch = false;
  141.     }
  142.   }
  143. });
  145. $(document).click(function(e) {
  146.   if (isOpenSearch) {
  147.     if ($(e.target).is('div') || $(e.target).is('ul')) {
  148.       $(".panel-search").slideToggle('slow');
  149.       isOpenSearch = false;
  150.     }
  151.   }
  152. });
  154. // $("#txtSearch").on('keyup')
  155. $(document).on('keyup', '#txtSearch', function() {
  156.   var li = $("li.listado-conversaciones");
  157.   var val = $(this).val().toLowerCase();
  158.   li.removeClass('hidden')
  160.   if (val && val.length > 0) {
  161.     li.each(function() {
  162.       var that = $(this);
  163.       var txt = that.text().toLowerCase();
  165.       // If searched term is not found into li's text
  166.       if (txt.indexOf(val) == -1) {
  167.         // Add .hidden class to the specific element
  168.         that.addClass('hidden');
  169.       }
  170.     });
  171.   }
  172. });
  175. $(document).on('click', '#btnNewConversation', function() {
  176.   if (!isOpenSearch) {
  177.     $(".panel-search").slideToggle('slow');
  178.     isOpenSearch = true;
  179.   }
  180. });
  182. $(document).on('click', '#btnSearchPaciente', function() {
  183.   var txtPacienteNombre = $(".txtSearchPacienteNombre").val();
  184.   var txtPacienteApellido = $(".txtSearcPacienteApellido").val()
  185.   var centroId = '{{ centroId }}';
  187.   var datos = {
  188.     pacienteNombre: txtPacienteNombre,
  189.     pacienteApellido: txtPacienteApellido,
  190.     centroId: centroId
  191.   };
  193.   $("#loadSearch").css({
  194.     'display': 'inline-block'
  195.   });
  196.   $("#list-pacientes-search").empty();
  197.   var html = '';
  198.   $.ajax({
  199.     url: '{{ path('get_search_pacientes') }}',
  200.     dataType: 'json',
  201.     type: 'POST',
  202.     data: datos,
  203.     success: function(data) {
  204.       if (data.aPacientes.length > 0) {
  205.         data.aPacientes.forEach(function(element) {
  206.           html += '<li class="list-group-item selecte-pacient-conversation" data-numtelefono="' + element.telefono + '" data-vcid="' + element.id + '" data-centroid="' + centroId + '">';
  207.           html += '<a style="cursor: pointer">' + element.nombre + ' ' + element.apellidos + ' - ' + element.telefono + ' - ' + element.categoryTelefono + '</a>';
  208.           html += '</li>';
  209.         });
  210.         $("#list-pacientes-search").empty().append(html);
  211.         $("#loadSearch").css({
  212.           'display': 'none'
  213.         });
  214.       }
  215.     }
  216.   })
  218. });
  220. /* $(document).on('click', '.selecte-pacient-conversation', function() {
  221.   var centroid = $(this).data('centroid');
  222.   var numtelefono = $(this).data('numtelefono');
  223.   forceDatabaseUpdate(centroid, numtelefono);
  224.   initConversation(centroid, numtelefono);
  225.   $(".panel-search").slideToggle('slow');
  226.   isOpenSearch = false;
  227. }); */
  229. $(document).on('click', '.selecte-pacient-conversation', async function() {
  230.   var centroid = $(this).data('centroid');
  231.   var numtelefono = $(this).data('numtelefono');
  232.   await forceDatabaseUpdate(centroid, numtelefono);
  233.   initConversation(centroid, numtelefono);
  234.   $(".panel-search").slideToggle('slow');
  235.   isOpenSearch = false;
  236. });
  238. $(document).on('click', '.listado-conversaciones', function() {
  239.   var centroId = $(this).data('centroid');
  240.   var numTelefono = $(this).data('numtelefono');
  241.   $(".listado-conversaciones").removeClass('active-chat');
  242.   $(this).addClass('active-chat');
  243.   initConversation(centroId, numTelefono);
  244. });
  246. /* function forceDatabaseUpdate(centroid, numtelefono) {
  247.   $.ajax({
  248.     url: '{{ path('force_database_update') }}'+ '/' + numtelefono + '/' + centroid,
  249.     dataType: 'json',
  250.     success: function(data) {
  251.       // Handle successful response here
  252.     },
  253.     error: function(xhr, status, error) {
  254.       // Handle error response here
  255.     }
  256.   });
  257. } */
  259. function forceDatabaseUpdate(centroid, numtelefono) {
  260.   // Show the loading overlay and disable all clicks
  261.   $('#loading-overlay').show();
  262.   $('body').addClass('disable-clicks');
  263.   
  264.   return new Promise(function(resolve, reject) {
  265.     $.ajax({
  266.       url: '{{ path('force_database_update') }}'+ '/' + numtelefono + '/' + centroid,
  267.       dataType: 'json',
  268.       success: function(data) {
  269.         // Hide the loading overlay and re-enable clicks on success
  270.         $('#loading-overlay').hide();
  271.         $('body').removeClass('disable-clicks');
  272.         $(".listado-conversaciones").removeClass('active-chat');
  273.         // Call the resolve function with the returned data
  274.         resolve(data);
  275.       },
  276.       error: function(xhr, status, error) {
  277.         // Hide the loading overlay and re-enable clicks on error
  278.         $('#loading-overlay').hide();
  279.         $('body').removeClass('disable-clicks');
  280.         // Call the reject function with the error information
  281.         reject(error);
  282.       }
  283.     });
  284.   });
  285. }
  289. function initConversation(centroId, numTelefono) {
  290.   var whabaOrigen = '{{ whabaOrigen }}';
  291.   $.ajax({
  292.     url: '{{ path('get_conversacion', {'whabaOrigenId': whabaOrigen}) }}/' + numTelefono + '/' + centroId,
  293.     dataType: 'json',
  294.     success: function(data) {
  295.       $(".chat-header").empty().append(data.viewCabecera);
  296.       $(".chat-history").empty().append(data.viewConversacion);
  297.       /*$(".chat-history").animate({
  298.         scrollTop: $(".chat-history").get(0).scrollHeight
  299.       }, 2000);*/
  300.       $(".chat-history").scrollTop($(".chat-history").get(0).scrollHeight);
  301.       $(".btnSendMessage").data('whabadestino', whabaOrigen).data('centroid', centroId).data('numtelefono', numTelefono);
  302.       $(".badge-" + numTelefono + '-' + centroId).remove();
  303.       // Forzamos a colocar el "Hola", para la plantilla generica
  304.       // var valorPlantillaGenerica = (data.isTemplateSend) ? 'Hola' : '';
  305.       // $("#txtText").val(valorPlantillaGenerica);
  306.       $(".btnSendMessage").data('template', data.isTemplateSend);
  307.       /*if (!data.isTemplateSend) {
  308.         $("#btnAcction").prop('disabled', false);
  309.       }*/
  310.       $("#btnAcction").data('whabadestino', whabaOrigen) /* .data('vcid', vcId) */ .data('centroid', centroId).data('numtelefono', numTelefono).prop('disabled', false);
  311.     }
  312.   })
  313. }
  315. $(document).on('click', '#upload_link_document', function() {
  316.   $("#uploadFile").trigger('click');
  317. });
  320. $(document).on('change', '#uploadFile', function() {
  321.     console.log(this.files[0]);
  322.     var file = this.files[0];
  323.     var typeFile = file.type;
  324.     console.log(typeFile);
  325.     var aFormatsDocs = ['application/pdf', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/msword'];
  326.     var aFormatsImage = ['image/jpeg', 'image/png'];
  327.     var aFormatsVideo = ['video/mp4'];
  328.     var fileTipo = '';
  329.     var maxMbVideo = 16 * 1024 * 1024;
  330.     
  331.     if (aFormatsDocs.indexOf(typeFile) !== -1) {
  332.         fileTipo = 'document';
  333.     } else if (aFormatsImage.indexOf(typeFile) !== -1) {
  334.         fileTipo = 'image';
  335.     } else if (aFormatsVideo.indexOf(typeFile) !== -1) {
  336.         fileTipo = 'video';
  337.         if (file.size > maxMbVideo) {
  338.             alert('Vídeo superior a tamaño soportado 16mb');
  339.             return false;
  340.         }
  341.     }
  342.     
  343.     var centroid = $("#btnAcction").data('centroid');
  344.     var numTelefono = $("#btnAcction").data('numtelefono');
  345.     var formData = new FormData();
  346.     formData.append('file', file);
  347.     formData.append('typeFile', fileTipo);
  348.     formData.append('fileExtensionType', typeFile)
  349.     formData.append('whabadestino', $("#btnAcction").data('whabadestino'));
  350.     formData.append('centroId', $("#btnAcction").data('centroid'));
  351.     formData.append('numtelefono', $("#btnAcction").data('numtelefono'));
  353.     $("#actionSheet").modal('hide');
  354.     $.ajax({
  355.         url: '{{ path('upload_file_and_send') }}',
  356.         data: formData,
  357.         type: 'POST',
  358.         contentType: false,
  359.         processData: false,
  360.         async: true,
  361.         success: function(data) {
  362.             console.log(data)
  363.             $("ul[data-id='" + numTelefono + '_' + centroid + "']").append(data.view);
  364.             /*$(".chat-history").animate({
  365.                 scrollTop: $(".chat-history").get(0).scrollHeight
  366.             }, 2000);*/
  367.             $(".chat-history").scrollTop($(".chat-history").get(0).scrollHeight);
  368.             $("#uploadFile").val(null);
  369.         }
  370.     })
  371. });
  373. let isSending2 = false;
  375. $(document).ready(function() {
  376.   // Initialize emojioneArea for the txtText element
  377.   emojioneAreaInstance = $("#txtText").emojioneArea({
  378.     inline: true,
  379.     searchPlaceholder: "Buscar",
  380.     pickerPosition: "top"
  381.   })[0].emojioneArea;
  383.   var valor = ''; // Define the 'valor' variable outside the 'updateDisabledState' function
  385.   function updateDisabledState() {
  386.     var disabledButton = (valor.length > 0 && numtelefono !== '') ? false : true;
  387.     var numtelefono = $(".btnSendMessage").data('numtelefono');
  388.     $(".btnSendMessage").prop('disabled', disabledButton);
  389.   }
  391.   emojioneAreaInstance.val = function() {
  392.     return this.getText();
  393.   };
  395.   // Bind the keyup event to the emojioneArea instance
  396.   emojioneAreaInstance.on("keyup", function(editor, event) {
  397.     if (isSending2) {
  398.       return;
  399.     }
  400.     
  401.     valor = emojioneAreaInstance.getText(); // Update the 'valor' variable within the keyup event handler
  402.     var charCode = (event.which) ? event.which : event.keyCode;
  403.     var numtelefono = $(".btnSendMessage").data('numtelefono');
  404.     updateDisabledState();
  405.     
  406.     if (valor.length > 0 && numtelefono !== '') {
  407.       if (charCode === 13) {
  408.         isSending2 = true;
  410.         var whabaOrigen = $(".btnSendMessage").data('whabadestino');
  411.         var centroid = $(".btnSendMessage").data('centroid');
  412.         var isTemplate = $(".btnSendMessage").data('template');
  413.         var numTelefono = $(".btnSendMessage").data('numtelefono');
  414.         sendMessage(whabaOrigen, centroid, isTemplate, numTelefono);
  415.         
  416.         setTimeout(() => {
  417.           isSending2 = false;
  418.         }, 3000); // Adjust the debounce time as needed
  419.       }
  420.     }
  421.   });
  423.   // Bind the emojibtn.click event to update the disabled state of the button
  424.   emojioneAreaInstance.on("emojibtn.click", function() {
  425.     updateDisabledState();
  426.   });
  427. });
  430.   function setText(text) {
  431.     emojioneAreaInstance.setText(text);
  432.     updateDisabledState();
  433.   }
  435. let isSending = false;
  437. $(document).on('click', '.btnSendMessage', function() {
  438.     if (isSending) {
  439.         return;
  440.     }
  442.     isSending = true;
  444.     var whabaOrigen = $(this).data('whabadestino');
  445.     var centroid = $(this).data('centroid');
  446.     var isTemplate = $(this).data('template');
  447.     var numTelefono = $(this).data('numtelefono');
  449.     sendMessage(whabaOrigen, centroid, isTemplate, numTelefono);
  451.     setTimeout(() => {
  452.         isSending = false;
  453.     }, 3000); // Adjust the debounce time as needed
  454. });
  456. function sendMessage(whabaOrigen, centroid, isTemplate, numTelefono) {
  457.     var typeSend = '';
  459.     /*
  460.     if (isTemplate) {
  461.         typeSend = 'template';
  462.     } else {
  463.         typeSend = 'text';
  464.     }
  465.     */
  466.     typeSend = 'text';
  467.     var datos = {
  468.         whabaOrigen: whabaOrigen,
  469.         centroid: centroid,
  470.         texto: emojioneAreaInstance.val(),
  471.         typeSend: typeSend,
  472.         telefonoDestino: numTelefono
  473.     };
  475.     $.ajax({
  476.         url: '{{ path('send_mensaje') }}',
  477.         type: 'POST',
  478.         data: datos,
  479.         dataType: 'json',
  480.         success: function(data) {
  481.             $("ul[data-id='" + numTelefono + '_' + centroid + "']").append(data.view);
  482.             /*
  483.             $(".chat-history").animate({
  484.                 scrollTop: $(".chat-history").get(0).scrollHeight
  485.             }, 2000);
  486.             */
  487.             $(".chat-history").scrollTop($(".chat-history").get(0).scrollHeight);
  488.             /* $("#txtText").val(''); */
  489.             emojioneAreaInstance.setText('');
  490.             $(".btnSendMessage").prop('disabled', true);
  491.             $("#btnAcction").prop('disabled', false);
  492.             /*
  493.             if (isTemplate) {
  494.                 $(".btnSendMessage").data('template', false);
  495.             }
  496.             */
  497.         }
  498.     });
  499. }
  501. $(document).on('click', '.btnDetailPaciente', function() {
  502.   var pacienteId = $(this).data('pacienteid');
  503.   var centroId = $(this).data('centroid');
  505.   $.ajax({
  506.     url: '{{ path('get_datos_paciente') }}/' + centroId + '/' + pacienteId,
  507.     dataType: 'html',
  508.     success: function(data) {
  509.       $("#modalDatosPaciente .modal-body").empty().append(data);
  510.       $("#modalDatosPaciente").modal('show');
  511.     }
  512.   });
  513. });
  515. $(document).on('click', '#btnAcction', function() {
  516.   $("#actionSheet").modal('show');
  517. });
  519. setInterval(callListadoPacientesChat, 30000);
  521. function callListadoPacientesChat() { // Obtaining started chat
  522.   var numTelefono = (typeof $(".chat-listado").data('numtelefono') !== "undefined") ? $(".chat-listado").data('numtelefono') : '';
  523.   var url = (numTelefono !== '') ? '{{ path('get_listado_conversaciones', {'whabaOrigen': whabaOrigen}) }}/' + numTelefono : '{{ path('get_listado_conversaciones', {'whabaOrigen': whabaOrigen}) }}';
  525.   $.ajax({
  526.     url: url,
  527.     dataType: 'html',
  528.     success: function(data) {
  529.       $("#listUserConversation").empty().append(data);
  530.     }
  531.   });
  532. }
  534. setInterval(callLastMessage, 600);
  536. function callLastMessage() {
  537.   var idenChat = $(".chat-listado").data('id');
  538.   var whabaid = $(".chat-listado").data('whabaid');
  539.   var extract = idenChat.split("_");
  541.   if (idenChat !== '') {
  542.     $.ajax({
  543.       url: '{{ path('get_last_message_chat') }}/' + extract[0] + '/' + extract[1],
  544.       type: 'POST',
  545.       data: {
  546.         whabaid: whabaid
  547.       },
  548.       dataType: 'json',
  549.       success: function(data) {
  550.         if (data.totalItems > 0) {
  551.           $("ul[data-id='" + idenChat + "']").append(data.view);
  552.           $(".chat-history").animate({
  553.             scrollTop: $(".chat-history").get(0).scrollHeight
  554.           }, 2000);
  555.         }
  556.       }
  557.     });
  558.   }
  559. }
  561. function downloadFile(conversacionId, classComponente, type) {
  562.   $.ajax({
  563.     url: '{{ path('get_content_media') }}/' + conversacionId,
  564.     dataType: 'json',
  565.     success: function(data) {
  566.       if (type === 'image') {
  567.         $("." + classComponente).attr('src', data.urlMedia);
  568.         $("." + classComponente + "-download").hide();
  569.       } else if (type === 'audio') {
  570.         var htmlAudio = '<audio controls>';
  571.         htmlAudio += '<source src="' + data.urlMedia + '" type="audio/ogg" >';
  572.         htmlAudio += '</audio>';
  573.         $(".audiodownloaded-" + conversacionId).empty().append(htmlAudio);
  574.         $("." + classComponente + "-download").hide();
  575.       } else if (type === 'video') {
  576.         var htmlVideo = '<video controls autoplay>';
  577.         htmlVideo += '<source src="' + data.urlMedia + '" type="video/mp4">';
  578.         htmlVideo += '</video>';
  579.         $(".videodownload-" + conversacionId).empty().append(htmlVideo);
  580.         $("." + classComponente + "-download").hide();
  581.       } else if (type === 'documento') {
  582.         var downloadLink = document.createElement('a');
  583.         window.open(data.urlMedia);
  584.       }
  585.     }
  586.   });
  587. }
  588.     </script>
  589. {% endblock %}