corrigido mensagens de erro e outras melhorias do UX, corrigido bugs no status do agente ao realizar uma alteracao, corrigido listener ao pressionar teclas de discagem no teclado

5 months ago · d9b434eb0f
3 changed files with 59 additions and 29 deletions
--- a/keypad.js
+++ b/keypad.js
@ -76,7 +76,7 @@ const KeypadSimplesIP = (function () {

    updateUI = function () {
      const currentStateCall = stateCurrent.getStateCall();
-
+      document.addEventListener("keydown", handleKeyPress); // Ao
      //cada vez que irei atualizar a tela eu devo remover todo o html do filho
      // e só assim posso estar criando uma nova tela, para n gerar conflitos e bugs

@ -120,6 +120,7 @@ const KeypadSimplesIP = (function () {
      }

      document.body.appendChild(simplesipContainer);
+      defineStatusAgent(currentStatus); //sempre atualiza o status do agente ao mudar de tela
    };

    updateUI();
@ -151,7 +152,7 @@ const KeypadSimplesIP = (function () {
    const btnCancel = document.createElement("button");
    btnCancel.classList.add("animationHover");
    btnCancel.id = "btnCancel";
-    btnCancel.type = "reset";
+    btnCancel.type = "button";
    btnCancel.textContent = "Cancelar";
    btnCancel.addEventListener("click", () => {
      stateCurrent.setStateCall("home");
@ -178,6 +179,7 @@ const KeypadSimplesIP = (function () {
      UASimplesIP.config.SERVIDOR = "";
      UASimplesIP.config.RAMAL = "";
      localStorage.clear();
+      currentStatus = "unknown";
      stateCurrent.setStateCall("home");
      UASimplesIP.unregister();
    });
@ -208,7 +210,7 @@ const KeypadSimplesIP = (function () {

    // Criar inputs com suas respectivas legendas
    const inputServidor = createLabelAndInput(
-      "Servidor",
+      "Servidor*",
      "servidor",
      "text",
      "0.0.0.0"
@ -221,13 +223,13 @@ const KeypadSimplesIP = (function () {
      "Insira o nome do agente"
    );
    const inputRamal = createLabelAndInput(
-      "Ramal",
+      "Ramal*",
      "ramal",
      "text",
      "Insira o ramal do agente"
    );
    const inputSenha = createLabelAndInput(
-      "Senha",
+      "Senha*",
      "senha",
      "password",
      "Insira a senha do ramal"
@ -307,8 +309,15 @@ const KeypadSimplesIP = (function () {
      }
    });
  };
+  // Variável para controlar se uma tela de alerta já está sendo exibida
+  let isAlertDisplayed = false;

  const simplesipCreateAlert = (container, message) => {
+    // Verifica se uma tela de alerta já está sendo exibida
+    if (isAlertDisplayed) {
+      return; // Sai da função se uma tela de alerta já estiver sendo exibida
+    }
+
    const createAlert = document.createElement("div");
    createAlert.classList.add("alertScreen");
    const iconAlert = document.createElement("img");
@ -322,13 +331,19 @@ const KeypadSimplesIP = (function () {
    btnAlert.id = "btnAlert";
    btnAlert.textContent = "OK";
    btnAlert.addEventListener("click", () => {
-      createAlert.parentNode.removeChild(createAlert);
+      // Remove a tela de alerta ao clicar no botão "OK"
+      container.removeChild(createAlert);
+      // Atualiza a variável para indicar que a tela de alerta foi removida
+      isAlertDisplayed = false;
    });
    createAlert.appendChild(btnAlert);
+
+    // Adiciona a tela de alerta ao contêiner
    container.appendChild(createAlert);
-  };

-  function handleAlertMessage() {}
+    // Atualiza a variável para indicar que uma tela de alerta está sendo exibida
+    isAlertDisplayed = true;
+  };

  const simplesipCreateInCall = (container, themeMode) => {
    const simplesipInCall = document.createElement("div");
@ -455,9 +470,16 @@ const KeypadSimplesIP = (function () {

  let storedNumberCall = "";
  const handleCall = () => {
+    const container = document.getElementById("simplesipContainer");
    const numberCall = document.getElementById("display").textContent;
    if (numberCall !== "") {
      storedNumberCall = numberCall;
+      UASimplesIP.simplesipEvento.on("error", function () {
+        simplesipCreateAlert(
+          container,
+          "Conecte-se a um ramal antes de fazer uma chamada"
+        );
+      });
      UASimplesIP.realizaUmaChamada(storedNumberCall);
    } else {
      //manda o usuario para mensagem de que precisa inserir um numero
@ -552,8 +574,13 @@ const KeypadSimplesIP = (function () {
    const clearDisplay = document.getElementById("clearDisplay");
    if (haveText.length == 1) {
      clearDisplay.style.display = "flex";
+      clearDisplay.style.opacity = 1;
+      clearDisplay.style.transition = "opacity 0.3s ease";
+      clearDisplay.style.cursor = "pointer";
    } else if (haveText.length == 0) {
-      clearDisplay.style.display = "none";
+      clearDisplay.style.display = "flex";
+      clearDisplay.style.opacity = 0;
+      clearDisplay.style.cursor = "";
    }
  }

@ -581,9 +608,11 @@ const KeypadSimplesIP = (function () {
    container.appendChild(simplesipHead);
  };

+  var currentStatus = "unknown";
  // Ouvindo o evento 'statusChange' emitido pelo JSSIP
  UASimplesIP.simplesipEvento.on("statusChange", (newStatus) => {
-    defineStatusAgent(newStatus);
+    currentStatus = newStatus;
+    defineStatusAgent(currentStatus);
  });

  const defineStatusAgent = (status) => {
@ -593,7 +622,7 @@ const KeypadSimplesIP = (function () {
    if (circleElements && circleElements.length > 0) {
      // Remove qualquer uma dessas classes antes de atualizar
      circleElements.forEach((circle) =>
-        circle.classList.remove("online", "away", "busy", "unknown")
+        circle.classList.remove("online", "away", "busy", "unknown", "error")
      );

      // Atualiza conforme o parâmetro passado
@ -606,8 +635,6 @@ const KeypadSimplesIP = (function () {
        case "registrationFailed":
          if (circleElements[0]) {
            circleElements[0].classList.add("busy");
-            document.getElementById("agentName").textContent =
-              "Falha ao registrar";
          }
          break;
        case "unregistered":
@ -616,7 +643,7 @@ const KeypadSimplesIP = (function () {
          }
          break;
        default:
-          circleElements[0].classList.add("unknown");
+          circleElements[0].classList.add("default");
          break;
      }
    }
@ -771,13 +798,13 @@ const KeypadSimplesIP = (function () {
    const simplesipMinimize = document.createElement("button");
    simplesipMinimize.classList.add("btn-minimize");
    simplesipMinimize.id = "btn-minimize";
-    document.addEventListener("keydown", handleKeyPress);
    simplesipMinimize.addEventListener("click", handleMinimize);
    titles.appendChild(simplesipMinimize);
  };

  let isKeyPadMinimized = false;
  const handleMinimize = () => {
+    const containerElement = document.getElementById("simplesipContainer");
    let nextElement =
      document.getElementById("simplesipTitles").nextElementSibling;
    let nextElementId = "";
@ -793,11 +820,11 @@ const KeypadSimplesIP = (function () {
    if (isKeyPadMinimized) {
      btnMinimize.classList.remove("btn-minimize");
      btnMinimize.classList.add("btn-expand");
-      document.addEventListener("keydown", handleKeyPress);
+      document.removeEventListener("keydown", handleKeyPress);
    } else {
      btnMinimize.classList.remove("btn-expand");
      btnMinimize.classList.add("btn-minimize");
-      document.removeEventListener("keydown", handleKeyPress);
+      document.addEventListener("keydown", handleKeyPress);
    }
  };

--- a/keypad_style.css
+++ b/keypad_style.css
@ -21,6 +21,7 @@
  display: flex;
  flex-direction: column;
  width: 280px;
+  max-height: 510px; /* verificar se esse valor será o melhor */
  border: 1px solid #bdbbbb;
  border-radius: 8px;
  box-sizing: content-box;
@ -29,16 +30,16 @@
 .simplesipKeypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
+  gap: 8px;
  height: max-content;
-  padding: 10px;
+  padding: 9px;
  justify-items: center;
-  transition: height 0.5s ease-in-out; /* Adicione uma transição suave para a opacidade */
-  pointer-events: auto; /* Mantém os eventos de mouse ativos quando visível */
+  transition: height 0.5s ease-in-out;
+  pointer-events: auto;
 }

 .simplesipHead {
-  height: 80px;
+  min-height: 80px;
  display: flex;
  justify-content: center;
  flex-direction: column;
@ -186,8 +187,8 @@
  border: 1px solid transparent;
  cursor: pointer;
  border-radius: 50%;
-  width: 70px;
-  height: 70px;
+  width: 65px;
+  height: 65px;
  line-height: 6px;
 }

@ -239,11 +240,13 @@
 .dark {
  background-color: rgba(17, 24, 39, 1);
  color: whitesmoke;
+  border-bottom-color: #f5f5f559;
 }

 .light {
  color: #333;
  background-color: whitesmoke;
+  border-bottom-color: #42424259;
 }

 .endCall {
@ -370,12 +373,11 @@
  display: flex;
  justify-content: center;
  position: absolute;
-  bottom: 0;
+  bottom: -1px;
  right: 10px;
 }

 .display {
-  height: 100%;
  min-height: 40px;
  font-size: 30px;
  width: 100%;
@ -387,8 +389,8 @@
 }

 #clearDisplay {
-  cursor: pointer;
-  display: none;
+  display: flex;
+  opacity: 0;
  align-items: center;
  justify-content: end;
 }
@ -492,6 +494,7 @@

 .alertScreen p {
  color: whitesmoke;
+  padding: 0 40px;
 }

 .divDados {
--- a/simplesipsdk.js
+++ b/simplesipsdk.js
@ -289,7 +289,7 @@ const UASimplesIP = (function () {
    },

    realizaUmaChamada: (numero) => {
-      phone.call(numero);
+      phone ? phone.call(numero) : eventoSip.emit("error");
    },

    ativaDebug: (value) => {