print + recuperar

app/view/content.php

@@ -57,6 +57,11 @@
                             <img class="chat-window-menu-icon" src="<?= $files ?>/images/cross-circle.svg" />
                             <span class="chat-window-menu-span"> Finalizar</span>
                         </div>
+
+                        <div class="chat-window-header-right-commands btn-info" id="recuperaratendimento" title="Recuperar atendimento">
+                            <img class="chat-window-menu-icon" src="<?= $files ?>/images/reply.png" />
+                            <span class="chat-window-menu-span"> Recuperar</span>
+                        </div>
                     </div>
                     <span id="chat-window-header-right-icon" class="responsive-icon-header"><i class="fas fa-ellipsis-v"></i></span>
                 </div>

public/css/styles.css

@@ -69,6 +69,10 @@ html {
   --color-moon: #f1c40f;
 }
 
+#footer-content-left{
+  color: var(--text-primary);
+}
+
 /* Personalizações */
 
 .modal-content-body-item {
@@ -111,7 +115,7 @@ html {
   padding: 1rem;
 
   font-size: 1.5rem;
-  display: none !important;
+  display: none;
 }
 
 .box-event-buttons button {
@@ -1551,7 +1555,7 @@ audio {
   .chat-window-header-right {
     padding: 1rem;
     background-color: var(--bg-light-dark);
-    bottom: -90px;
+    /* bottom: -90px; */
     z-index: 9000;
     border-radius: 1rem;
     right: 25px;
@@ -1571,8 +1575,8 @@ audio {
   }
 
   .responsive-icon-header {
-    display: block !important;
-  }
+    display: block;
+  } 
 }
 
 @media (max-width: 400px) {

public/js/config.js

@@ -3,9 +3,12 @@ const server_api = `https://${localStorage.getItem('obj_server')}`
 const version_api = '/api/v1/'
 const supervisor_api = localStorage.getItem('supervisor_api') ? localStorage.getItem('supervisor_api') : localStorage.getItem('obj_server')
 let mediaRecorder
+let mediaPrint
 const icontypes = ['csv', 'doc', 'pdf', 'txt', 'xls', 'zip', 'ppt']
 const path = 'public'
 const html = document.querySelector("html");
 let abrirMensagem = false;
 let inputInterface = document.querySelector('#input-checkbox-switch');
-let chatsArray = [];
+let chatsArray = [];
+
+const RecuperacaoAtendimentoLimite = 22;

public/js/main.js

@@ -27,6 +27,17 @@ $(function () {
     filaNotifications();
   });
 
+
+  $("#recuperaratendimento").on("click", () => {
+    recuperarAtendimento(
+      localStorage.getItem("session_uniqueid"),
+      localStorage.getItem("my_uniqueid")
+    );
+  });
+
+
+  
+
   $("#btnAtendimento").on("click", () => {
     notifications();
   });
@@ -37,6 +48,13 @@ $(function () {
     // removeMensagemBody();
   });
 
+
+  $("#uploadimage").on("change", function () {
+
+    startSendImage(this.files);
+  });
+
+
   /** FIM VOICE RECORDER */
   /** EVENTOS DE CLICK NO BODY */
   $("body").mouseup(function () {
@@ -47,7 +65,7 @@ $(function () {
   });
 
   /** INICIO DAS FUNCIONALIDADES */
-  startSendImage();
+  // startSendImage();
   startSendFile();
   startPause();
   startTransfer();
@@ -55,6 +73,38 @@ $(function () {
   exitSystem();
   startFooter();
 
+
+/**
+ * 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;
+              }
+            }
+          }
+        });
+        
+      }
+    }
+  })
+
+
   /** INICIA COM O HEADER DO CONTATO VAZIO */
   startChannelMessage();
   /** INICIA O CHAT NO FINAL DA CONVERSA */
@@ -111,7 +161,9 @@ $(function () {
  * 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) => {
+
+  
   marcarMensagemVista(id);
   listaMensagem(id).then(async () => {
     let uniqueid;
@@ -135,12 +187,14 @@ const selectNotification = (id) => {
       );
       if (e.uniqueid == id && e.status == 0) {
         hideButtons(true);
+        monitoraStatusTransferenciaAtendimento(datetime);
       }
     });
     $("#" + id.replace(".", `\\.`)).addClass("select-notification");
     allNotifications.data.forEach((e) => {
       if (e.uniqueid == id && e.status == 0) {
         hideButtons(true);
+        monitoraStatusTransferenciaAtendimento(datetime);
       }
     });
     if (dataRequest.data.length > 0) {
@@ -160,8 +214,10 @@ const selectNotification = (id) => {
     });
     localStorage.removeItem("session_window");
     localStorage.removeItem("session_uniqueid");
+    localStorage.removeItem("session_status");
     localStorage.setItem("session_uniqueid", uniqueid);
     localStorage.setItem("session_window", number);
+    localStorage.setItem("session_status", status);
     $(".chat-window-contact-name").text(name);
 
     $(".chat-window-contact-status").text("Protocolo: " + protocolo);
@@ -169,6 +225,7 @@ const selectNotification = (id) => {
     $(".chat-window .sender").remove();
     $(".chat-window .receiver").remove();
     $(".chat-window .events").remove();
+
     alertNotification(localStorage.getItem("session_uniqueid"), "remove");
 
     if (typeof dataContact === "undefined") return;
@@ -257,11 +314,14 @@ const selectNotification = (id) => {
         }
       }
     });
+
     scrollDown();
+
   });
   abrirMensagem = true;
-
   startNotification();
+
+
 };
 /**
  * REALIZA O ENVIO DE MENSAGEM ATRAVEZ DA API
@@ -469,8 +529,10 @@ 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();
@@ -495,7 +557,13 @@ const sendMedia = (media = null) => {
     )}" target="_blank">${imgContent}</a>`;
     filename = el.name;
   } else {
-    rec = $("#uploadimage")[0].files[0];
+    
+    rec = mediaPrint;
+
+    if($("#uploadimage")[0].files[0]){
+      rec = $("#uploadimage")[0].files[0];
+    }
+    
     let filesent = $("#myImg");
     filesent[0].id = Date.now();
     fileContent = filesent.css({ "max-width": "200px" })[0].outerHTML;
@@ -516,4 +584,6 @@ const sendMedia = (media = null) => {
     });
   };
   file.readAsDataURL(rec);
+  $("#uploadimage").val("");
+  $('#fieldsendmessage').focus();
 };

public/js/requests.js

@@ -264,6 +264,35 @@ const transferirAtendimento = (origem, destino, uniqueid) => new Promise((resolv
         }
     });
 })
+const recuperarAtendimento = (uniqueid, matricula) => new Promise((resolve) => {
+    $.ajax({
+        url: `${server_api}${version_api}atendimentos/recover`,
+        type: "PUT",
+        data: JSON.stringify({
+            // matricula_origem: origem,
+            // matricula_destino: destino,
+            uniqueid,
+            matricula
+        }),
+        success: function (res) {
+            if (res.status == 'success') {
+                alert('Atendimento foi recuperado!')
+                resolve(res)
+            } else {
+                alert(res.message)
+            }
+            resolve(res)
+        },
+        error: function (res) {
+            alertModal(
+                `<h3>OPS... HOUVE UM PROBLEMA &nbsp</h3><img id="imgReconnect" width="25px" src="${path}/images/alerta.png">
+                <p>Não foi possível carregar as infomações do agente!</p>`,
+                'OPS!!!'
+            )
+        }
+    });
+})
+
 const marcarMensagemVista = (uniqueid) => {
     $.ajax({
         url: `${server_api}${version_api}messages/markMessageRead`,

public/js/util.js

@@ -87,11 +87,20 @@ const hideButtons = (type) => {
     $("#voicerecorder").css({ "pointer-events": "none" });
     $("#imgclip").css({ "pointer-events": "none" });
     $("#fieldsendmessage").css({ "pointer-events": "none" });
+    // $("#fieldsendmessage").css('opacity', '0');
     $("#fieldsendmessage").hide();
     $("#tranferagent").hide();
     $("#finalizaratendimento").hide();
-    $(".chat-window-header-right").hide();
-    $("#chat-window-header-right-icon").hide();
+    // $(".chat-window-header-right").hide();
+
+    // $("#recuperaratendimento").show();
+
+    $(".chat-window-header-right").css('bottom', '-50px');
+    
+    // $("#chat-window-header-right-icon").hide();
+    // $(".responsive-icon-header").hide();
+    
+    
   } else {
     $("#voicerecorder").css({ "pointer-events": "auto" });
     $("#imgclip").css({ "pointer-events": "auto" });
@@ -99,8 +108,14 @@ const hideButtons = (type) => {
     $("#fieldsendmessage").show();
     $("#tranferagent").show();
     $("#finalizaratendimento").show();
+    
     $(".chat-window-header-right").show();
-    $("#chat-window-header-right-icon").show();
+    
+    $(".chat-window-header-right").css('bottom', '-90px');
+
+    $("#recuperaratendimento").hide();
+    $('#fieldsendmessage').focus();
+
 }
 };
 const alertModal = (title, message) => {
@@ -110,32 +125,74 @@ const alertModal = (title, message) => {
   $(".modal-header-title").append(`${message}`);
   $("#modalselect").show();
 };
+
+
+
+/**
+ * LOG
+ */
+
+
+const log = (message) => {
+  console.log(message);
+}
+
+
 /**
  * HABILITA O ENVIO DE ARQUIVO DE IMAGENS E APRESENTA UMA MODAL PARA APRESENTACAO DA IMAGEM SELECIONADA
  */
-const startSendImage = () => {
+const startSendImage = (file) => {
+
   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();
-  });
-};
+  const fileReader = new FileReader(); 
+  // const file = new FileReader();
+  fileReader.readAsDataURL(file[0]);
+  const imgName = file[0].name;
+
+  fileReader.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();
+}
+
+
+
+const startSendImagePrintScreen = (file) => {
+
+  modalStart();
+  const fileReader = new FileReader();
+  fileReader.readAsDataURL(file);
+  const imgName = file.name;
+
+  fileReader.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
@@ -543,7 +600,7 @@ const buildNotification = (data = {}) => {
   }
   const datesend = converdata(data.datetime);
   const status = data.status == 0 ? "opacity-8" : "";
-  return `<div class="chat ${status}" id="${data.uniqueid}" onclick="selectNotification(this.id)">
+  return `<div class="chat ${status}" id="${data.uniqueid}" onclick="selectNotification(this.id, ${data.status}, '${data.datetime}')">
         <div class="chat-left">
             <img src="${path}/images/${data.media}.png"/>
         </div>
@@ -739,6 +796,53 @@ const filaNotifications = (obj = {}) => {
   );
 };
 
+
+const monitoraStatusTransferenciaAtendimento = (date) => {
+
+
+  let formatedTransferDate = date.slice(0, date.lastIndexOf(':'));
+
+  const data_atual = new Date();
+
+  let formatedDate = formatDate(data_atual, 'Y-m-d hh:M')
+
+  const start = new Date(formatedTransferDate);
+  const end = new Date(formatedDate);
+  
+  const diffInTime = Math.abs(end - start) / 1000 / 60 / 60
+
+  log(diffInTime)
+
+  if(diffInTime > RecuperacaoAtendimentoLimite){
+    return;
+  }
+
+  $("#recuperaratendimento").show();
+
+}
+
+
+const formatDate = (date, format) => {
+  const map = {
+    m: String(date.getMonth()+1).padStart(2,'0'),
+    d: date.getDate().toString().padStart(2,'0'),
+    y: date.getFullYear().toString().slice(-2),
+    Y: date.getFullYear(),
+    hh: date.getHours(),
+    M: date.getMinutes(),
+    ss: date.getSeconds(),
+    ll: date.getMilliseconds()
+  }
+  
+  return(format.replace(/m|d|y|Y|hh|M|ss|ll/gi, matched => map[matched]))
+
+}
+
+
+
+
+
+
 const monitorPausaAgente = () => {
   statusAgente(
     localStorage.getItem("my_uniqueid")