Browse Source

inserido uma tela de configuracao do ramal para o agente, inserido uma tela para tratar possiveis alertas ao usuario, criado uma feature para remover o registro de um ramal, corrigido bugs

master
Matheo Bonucia 5 months ago
parent
commit
ba7b8282fb
  1. 112
      keypad.js
  2. 103
      keypad_style.css
  3. 23
      simplesipsdk.js
  4. 10
      vazio.html

112
keypad.js

@ -33,32 +33,6 @@ const KeypadSimplesIP = (function () {
"0",
"#",
];
//Listeners para testes==============================================
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("home").addEventListener("click", () => {
stateCurrent.setStateCall("home");
});
document.getElementById("outgoingcall").addEventListener("click", () => {
stateCurrent.setStateCall("outgoingcall");
});
document.getElementById("incall").addEventListener("click", () => {
stateCurrent.setStateCall("incall");
});
document.getElementById("incomingcall").addEventListener("click", () => {
stateCurrent.setStateCall("incomingcall");
});
document.getElementById("online").addEventListener("click", () => {
defineStatusAgent("online");
});
document.getElementById("busy").addEventListener("click", () => {
defineStatusAgent("busy");
});
document.getElementById("away").addEventListener("click", () => {
UASimplesIP.unregister();
defineStatusAgent("away");
});
});
//==================================================================
//RECEBENDO CHAMADA
let otherNumber = "Indefinido";
@ -186,6 +160,29 @@ const KeypadSimplesIP = (function () {
const divDados = document.createElement("div");
divDados.classList.add("divDados");
const divUnregister = document.createElement("div");
divUnregister.classList.add("divUnregister");
const textoUnregister = document.createElement("p");
textoUnregister.textContent = "Apagar ramal";
const unregisterBtn = document.createElement("button");
unregisterBtn.id = "unregister";
unregisterBtn.addEventListener("click", () => {
inputServidor.querySelector("input").value = "";
inputPorta.querySelector("input").value = "";
inputNome.querySelector("input").value = "";
inputRamal.querySelector("input").value = "";
inputSenha.querySelector("input").value = "";
UASimplesIP.config.NOME = "";
UASimplesIP.config.PORTA = "";
UASimplesIP.config.SENHA = "";
UASimplesIP.config.SERVIDOR = "";
UASimplesIP.config.RAMAL = "";
localStorage.clear();
stateCurrent.setStateCall("home");
UASimplesIP.unregister();
});
divUnregister.appendChild(textoUnregister);
divUnregister.appendChild(unregisterBtn);
// Função para criar elementos <label> com suas respectivas legendas
const createLabelAndInput = (
labelText,
@ -249,6 +246,7 @@ const KeypadSimplesIP = (function () {
divDados.appendChild(inputSenha);
configScreen.appendChild(titleConfig);
configScreen.appendChild(divUnregister);
formScreen.appendChild(divDados);
formScreen.appendChild(divBtns);
@ -298,11 +296,40 @@ const KeypadSimplesIP = (function () {
UASimplesIP.config.RAMAL = ramal;
UASimplesIP.config.SENHA = senha;
stateCurrent.setStateCall("home");
UASimplesIP.start();
if (servidor === "" || ramal === "" || senha === "") {
simplesipCreateAlert(
container,
"Por favor, insira os dados necessários"
);
} else {
stateCurrent.setStateCall("home");
UASimplesIP.start();
}
});
};
const simplesipCreateAlert = (container, message) => {
const createAlert = document.createElement("div");
createAlert.classList.add("alertScreen");
const iconAlert = document.createElement("img");
iconAlert.src = alertImg;
const textAlert = document.createElement("p");
textAlert.textContent = message;
createAlert.appendChild(iconAlert);
createAlert.appendChild(textAlert);
const btnAlert = document.createElement("button");
btnAlert.id = "btnAlert";
btnAlert.textContent = "OK";
btnAlert.addEventListener("click", () => {
createAlert.parentNode.removeChild(createAlert);
});
createAlert.appendChild(btnAlert);
container.appendChild(createAlert);
};
function handleAlertMessage() {}
const simplesipCreateInCall = (container, themeMode) => {
const simplesipInCall = document.createElement("div");
simplesipInCall.classList.add("simplesipInCall");
@ -554,6 +581,11 @@ const KeypadSimplesIP = (function () {
container.appendChild(simplesipHead);
};
// Ouvindo o evento 'statusChange' emitido pelo JSSIP
UASimplesIP.simplesipEvento.on("statusChange", (newStatus) => {
defineStatusAgent(newStatus);
});
const defineStatusAgent = (status) => {
const circleElements = document.querySelectorAll(".circle");
@ -561,29 +593,30 @@ 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")
circle.classList.remove("online", "away", "busy", "unknown")
);
// Atualiza conforme o parâmetro passado
switch (status) {
case "online":
// Verifica se o primeiro elemento de circleElements não é undefined
case "registered":
if (circleElements[0]) {
circleElements[0].classList.add("online");
}
break;
case "away":
case "registrationFailed":
if (circleElements[0]) {
circleElements[0].classList.add("away");
circleElements[0].classList.add("busy");
document.getElementById("agentName").textContent =
"Falha ao registrar";
}
break;
case "busy":
case "unregistered":
if (circleElements[0]) {
circleElements[0].classList.add("busy");
circleElements[0].classList.add("unknown");
}
break;
default:
// Lidar com o caso padrão
circleElements[0].classList.add("unknown");
break;
}
}
@ -593,6 +626,7 @@ const KeypadSimplesIP = (function () {
const agentLocalDisplay = document.createElement("div");
agentLocalDisplay.id = "agentLocalDisplay";
const statusAgent = document.createElement("div");
statusAgent.classList.add("statusAgent");
const nameAgent = document.createElement("div");
nameAgent.id = "agentName";
@ -602,11 +636,10 @@ const KeypadSimplesIP = (function () {
//add o circulo de status
statusAgent.appendChild(defaultCircle);
agentLocalDisplay.appendChild(statusAgent);
//add name agent
nameAgent.textContent = UASimplesIP.config.NOME
? UASimplesIP.config.NOME
: "Indefinido";
: "Agente";
agentLocalDisplay.appendChild(nameAgent);
header.appendChild(agentLocalDisplay);
};
@ -879,6 +912,9 @@ const KeypadSimplesIP = (function () {
configuration.SENHA = localStorage.getItem("senha") || "";
};
const alertImg =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAACB0lEQVR4nO2Yz0sCQRiG59LMJQiiQzf7aWVZYkHXDnkpLIKKICSCCPppJVgRUUIQBEFEaBAEQRCBdAw6hLMd/Au6BHbrGv4BCV+4ymim7uzq2kjzwAtz/F5m99mPRUgikUgkEhMASlxA8buaCBlG1QREUT1Q8gkKgXTiEKltQNUCUBzKGj4dHETVALxgGyjk63cBkgBaY0eiAxQ/5Rk+FYqfkcgAxWMFh8+UcCMRgVeEgZI3zQIKjsEjIkg0gGKf9vDsFraQ4NoEjYilVcirTc1HSQytFtLmutsJnqFBNRvjThBWq1BAm74JByvgn3SIqVUoos3d6T5WYG+mVzytgoY2D2btrEDAYxdPq6ChzaO5HlbgeL5bLK0ChzZPFmyswOlil1haBQ5tni11sgLnKx3iaBUKb5s/ElyzsgKXXivPtyFREa0W3TazcrXZzgpc+9r4Pm7UZK1ybZvp3PhbWYHbnRa+AoqJWuXfNlO522tmBe73m/gLKCZpVde2qRAIH1pYgYeARUcBUn6tGtg2S028rFo1tm2WGhysqDZz8xGug5DXqio0eTZQIlEWrfJqMzfbU5llLnk2dAu0RK3q0WZulkcGWIHk2fCjRA1qVa82cxO9aITV0X41yXMJ70LMkFb1atPUUANaVX/K/vXgSuYW/mMB4lKfPwGGh2r7PS+RSCQSVCm+AQ0vLbmgWFIkAAAAAElFTkSuQmCC";
const engrenagem =
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAADfUlEQVR4nO2aS2sUQRDHRyKKbwSjBx8IChpFjA804lG86F09GvQDROItGpCAokE/gZ68bRCXGGb6/+9ZxoOueIhePYhiFoWNJz0kMY9dKZ3gMO7Ozsvd2ZiCgoXt6a5fd1d3TdUYxrL8B0LyLskFklWvApgj2W+0i5As+SE8MG+MdhDTNDcCqNQDITnjOM5KI+tCsicA4pcqpfa3zECt9S4A10zT7AxqR7K3EQjJC0F9mKbZSbJPKbUzVQjLsnaT/OgaUdZan6/XFsBwIxAAt+o9T/IMgM9u25JSam8qENKR33ldH7hvmuZqb9uxsbHNJF+EWJFCPp/f4H02l8utkkmo4V8ThUJhT+oQPn1r2/YB1y+ekvwRAmJxMqZIPtZaH7Isax/J8YD28WFM09zRAGLRoNmwxtd5vgJgOkTbCdu2t0cGCem0TVUAlyODjI6OriX5LkMQ7x3HWW/EEQDHkm6dlCDmAJw0kgjJwQyA3DCSioQTAIotBHmZy+U6jDREjuFWbDEAU4nvEK9orU+1aDUWLMs6mBoIyWcRDSiTHADQDWCdqNb6iOx1978ofT1MBQLAVveFKOzAOX/44RX5j+RIhP6+FYvFNbHeJ9yQ46rEUyRfR4GoVqsrGo0hbaLAAHhO8p5c0kqpE0ETJTN/R8KABPu5HDhA7QmbTHAQfBKb/+qY5HxCxxwIC+GZvJsJx5yv1WnQ62lDVUodjgoiB0CSMQFUUgeJEwe5jp8tkHwE//D5SbZAAHRnZWvNNjuwSxqQApit1el1SZ5J3qkZx6/WehOArzHHmnFt7Q+MduU9XCl1keTtkMmERR0JeyECeBJh5m2SQ5JGItkVK8EXI0QZESdusBKhIUh+jxWipBQ0TsplZ1nWUTmWReW3+ESM7fTIaPcwHkAl1TBefCbi9koLZFpyXqlASDZREnGtWBH+1nHJQiYGIfmghRBVd2WGE0Eopc4mvfHT8hWS52JBOI6zheSXVkPwj5Zt294WGURqIRkwvurTvliFnTBJ7CgZ+IRJ7JLYZPyLsgKAV26bHve2jlVWkNxVgyRgKXHBp06hR+6UQX/MI4WeMFlJSSbUKPR0SARdIwpPr2rlK719AHA64XE9FPD8cU8VID0IX+GnV5JtQe0AXAmxIpdClDR6YxV2mhyXdRlZF3OpfDCwZD7h8GQt2/+jmmUx4stP5T+W3JrYH80AAAAASUVORK5CYII=";

103
keypad_style.css

@ -124,13 +124,13 @@
}
.circle {
width: 13px;
height: 13px;
width: 17px;
height: 17px;
border-radius: 50%;
display: inline-block;
margin-right: 5px;
vertical-align: middle;
background-color: #bdbbbb;
background-color: #aeb0b3;
}
.online {
@ -145,6 +145,16 @@
background-color: rgb(215, 21, 21);
}
.unknown {
background-color: #aeb0b3;
}
.statusAgent {
display: flex;
justify-content: center;
align-items: center;
}
#agentLocalDisplay {
display: flex;
flex-direction: row;
@ -156,6 +166,7 @@
#agentName {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 16px;
font-weight: 501;
}
.displayInCall {
@ -202,7 +213,7 @@
.animationHover:hover {
transform: scale(1.05);
transition: transform 0.2s ease-out;
transition: transform 0.2s ease;
}
.numberOutgoingCall {
@ -303,6 +314,8 @@
#titleConfig {
font-size: 16px;
font-weight: 501;
margin-top: 20px;
margin-bottom: 25px;
}
.simplesip-bn {
@ -385,7 +398,8 @@
}
#btnSave,
#btnCancel {
#btnCancel,
#btnAlert {
width: 65px;
height: 32px;
border: none;
@ -405,19 +419,88 @@
#btnSave {
cursor: pointer;
background-color: #81b38b;
background-color: #25a22b;
}
#btnSave:hover {
background-color: #5fb170;
background-color: #1db225;
}
.divUnregister {
display: flex;
align-items: center;
justify-content: end;
width: 70%;
font-size: 13px;
color: #f44336;
}
.divUnregister p {
margin: 0;
opacity: 0;
transition: opacity 0.3s ease;
}
.divUnregister:hover p {
opacity: 1; /* Quando hover, o texto aparece */
}
#unregister {
background-color: transparent;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
position: relative;
overflow: hidden;
}
#unregister::before,
#unregister::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 20px;
background-color: #f44336;
}
#unregister::before {
transform: translate(-50%, -50%) rotate(45deg);
}
#unregister::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
.alertScreen {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
border-radius: 8px;
text-align: center;
align-content: center;
z-index: 9999;
background-color: #000000d1;
text-wrap: wrap;
}
.alertScreen p {
color: whitesmoke;
}
.divDados {
display: flex;
flex-direction: column;
justify-content: center;
justify-content: start;
align-items: center;
height: 350px;
height: calc(100% + 10px);
margin-bottom: 5px;
}
.divDados input {
@ -459,6 +542,6 @@
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
justify-content: start;
height: calc(510.17px - 36.167px);
}

23
simplesipsdk.js

@ -240,6 +240,25 @@ const UASimplesIP = (function () {
eventoSip.emit("outgoingcall", session.remote_identity.uri.user);
}
});
phone.on("registered", function (e) {
eventoSip.emit("statusChange", "registered");
});
phone.on("unregistered", function (e) {
eventoSip.emit("statusChange", "unregistered");
});
phone.on("registrationFailed", function (e) {
eventoSip.emit("statusChange", "registrationFailed");
});
phone.on("connected", function (e) {
eventoSip.emit("statusChange", "connected");
});
phone.on("disconnected", function (e) {
eventoSip.emit("statusChange", "disconnected");
});
phone.start();
}
}
@ -278,7 +297,9 @@ const UASimplesIP = (function () {
},
unregister: () => {
console.log(phone.status);
phone
? phone.unregister()
: console.warn("Sem ramal cadastrado para apagar");
},
estouRegistradonoPBX: () => {

10
vazio.html

@ -47,15 +47,5 @@
<button id="busy">Agente ocupado</button>
<button id="away">Agente ausente</button>
</div>
<!-- <script>
const configuracao = UASimplesIP.config;
configuracao.PROTOCOLO = "ws";
configuracao.SERVIDOR = "129.148.58.190";
configuracao.PORTA = "8088";
configuracao.NOME = "MATHEO BONUCIA";
configuracao.RAMAL = "1000";
configuracao.SENHA = "123";
</script> -->
</body>
</html>

Loading…
Cancel
Save