forked from felipe.fontana/simples-painel
47 changed files with 712 additions and 868 deletions
@ -0,0 +1,29 @@
|
||||
function atualizaUsuario(id_user) { |
||||
$.ajax({ |
||||
type: "get", |
||||
url: `users/editar/${id_user}`, |
||||
success: function ({ |
||||
data |
||||
}) { |
||||
|
||||
const modal = document.querySelector('.modal-edit'); |
||||
modal.style.display = 'block'; |
||||
modal.querySelector('form').action = `/users/editar/${data.id}`; |
||||
|
||||
modal.querySelector("input[name='nome']").value = data.nome; |
||||
modal.querySelector("input[name='email']").value = data.email; |
||||
modal.querySelector("input[name='matricula']").value = data.matricula; |
||||
|
||||
const containerCheckbox = modal.querySelector(".container-checkbox"); |
||||
|
||||
if (!data.status) { |
||||
containerCheckbox.innerHTML = `<input type="radio" name="status" value="on"> <span class="mr-3 dark:text-gray-100">Sim</span>
|
||||
<input type="radio" name="status" value="off" checked> <span class="dark:text-gray-100">Não</span>` |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function fecharModal() { |
||||
document.querySelector('.modal-edit').style.display = 'none'; |
||||
} |
||||
@ -0,0 +1,94 @@
|
||||
const colorStatus = { |
||||
LIVRE: "green-500", |
||||
OCUPADO: "red-500", |
||||
PAUSA: "red-500", |
||||
INDISPONIVEL: "orange-400", |
||||
CHAMANDO: "orange-400", |
||||
} |
||||
|
||||
function getFilaId() |
||||
{ |
||||
const url = window.location.href; |
||||
const splitUrl = url.split('/'); |
||||
const id = splitUrl[splitUrl.length - 1]; |
||||
return id; |
||||
} |
||||
|
||||
function getDadosRelatorioDB(fila_id) { |
||||
return new Promise(function(resolve, reject){ |
||||
$.ajax({ |
||||
type: "get", |
||||
dataType: 'json', |
||||
url: `/dashboard/agentes/${fila_id}/fila`, |
||||
success: function(response) { |
||||
const data = response.data; |
||||
resolve(data); |
||||
} |
||||
}); |
||||
}) |
||||
} |
||||
|
||||
async function montarRelatorios()
|
||||
{
|
||||
const id = getFilaId(); |
||||
const data = await getDadosRelatorioDB(id); |
||||
let elementsTable = ""; |
||||
|
||||
data.forEach(supervisor => { |
||||
|
||||
const tempoFormatado = supervisor.login.split(".")[0]; |
||||
|
||||
const btnPlay = ` |
||||
<form method="POST" action="/dashboard/agentes/{{$fila->id}}/retirarPausa" title="Retirar Pausa?" class="bg-blue-600 text-white rounded flex-1 text-xl text-center py-2 px-3 cursor-pointer" > |
||||
@csrf |
||||
<input type="hidden" name="supervisor_id" value="${supervisor.id}"> |
||||
<button > |
||||
<i class="fas fa-play-circle"></i> |
||||
</button> |
||||
</form> |
||||
` |
||||
const btnPausa = `<a class="bg-blue-600 text-white rounded flex-1 text-xl text-center py-2 px-3 cursor-pointer" title="Colocar em Pausa?" onclick="selecionaAgente(${supervisor.id})"><i class="fas fa-pause"></i></a>`; |
||||
|
||||
const agenteIsPausa = supervisor.status === "PAUSA" ? btnPlay : btnPausa; |
||||
|
||||
elementsTable += ` |
||||
<tr class="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 text-center"> |
||||
<td class="p-3 text-sm text-gray-700 dark:text-gray-100">${supervisor.id}</td> |
||||
<td class="p-3 text-sm text-gray-700 dark:text-gray-100">${supervisor.nome}</td> |
||||
<td class="p-3 text-sm text-gray-700 dark:text-gray-100">${supervisor.matricula}</td> |
||||
<td class="p-3 text-sm text-gray-700 dark:text-gray-100">${tempoFormatado}</td> |
||||
|
||||
<td class="p-3 text-sm text-gray-700 dark:text-gray-100">${supervisor.motivo_pausa ?? "Sem Pausa"}</td> |
||||
|
||||
<td class="p-3 text-sm text-${colorStatus[supervisor.status]}">${supervisor.status}</td> |
||||
|
||||
<td class="p-3 text-sm text-gray-700 dark:text-gray-100">${supervisor.qtde_atendimento}</td> |
||||
|
||||
<td class="p-3 text-sm font-bold flex items-center gap-2 flex-wrap"> |
||||
${agenteIsPausa} |
||||
|
||||
|
||||
<form method="POST" action="/dashboard/agentes/{{$fila->id}}/desconectar" title="Desconectar Pausa?" class="bg-red-600 text-white flex-1 rounded text-xl text-center py-2 px-3" > |
||||
@csrf |
||||
<input type="hidden" name="supervisor_id" value="${supervisor.id}"> |
||||
<button > |
||||
<i class="fas fa-power-off"></i> |
||||
</button> |
||||
</form> |
||||
</td> |
||||
</tr> |
||||
` |
||||
}); |
||||
|
||||
|
||||
$(".table-relatorio").html(elementsTable); |
||||
} |
||||
|
||||
function selecionaAgente(supervisor_id){ |
||||
console.log(supervisor_id); |
||||
const modal = document.querySelector(".modal"); |
||||
modal.style.display = "block"; |
||||
modal.querySelector("form").action = `/dashboard/agentes/{{$fila->nome}}/pausar`; |
||||
modal.querySelector("input[name='supervisor_id']").value = supervisor_id; |
||||
} |
||||
|
||||
@ -0,0 +1,7 @@
|
||||
function selectTheme() { |
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
||||
document.documentElement.classList.add('dark') |
||||
} else { |
||||
document.documentElement.classList.remove('dark') |
||||
} |
||||
} |
||||
@ -0,0 +1,35 @@
|
||||
function atualizaContato(id_contato) { |
||||
$.ajax({ |
||||
type: "get", |
||||
url: `contatos/${id_contato}/edit`, |
||||
success: function({ |
||||
data |
||||
}) { |
||||
const contato_data = data.contato_data; |
||||
|
||||
$(".modal-edit").show(); |
||||
$(".modal-edit").find('form').attr('action', `contatos/${id_contato}`); |
||||
|
||||
$(".modal-edit").find("input[name='nome']").val(contato_data.nome); |
||||
$(".modal-edit").find("input[name='email']").val(contato_data.email); |
||||
$(".modal-edit").find("textarea[name='descricao']").val(contato_data.notes); |
||||
|
||||
const numeroFormatado = $(".modal-edit").find("input[name='numero']").masked(contato_data.contato);
|
||||
$(".modal-edit").find("input[name='numero']").val(numeroFormatado); |
||||
|
||||
if (contato_data.status) { |
||||
$(".modal-edit").find(".container-radio"). |
||||
html(`<input type="radio" name="status" value="on" checked> <span class="mr-3 dark:text-gray-100">Sim</span><input type="radio" name="status" value="off" > <span class="dark:text-gray-100">Não</span>`) |
||||
|
||||
} else { |
||||
$(".modal-edit").find(".container-radio"). |
||||
html(`<input type="radio" name="status" value="on" > <span class="mr-3 dark:text-gray-100">Sim</span>
|
||||
<input type="radio" name="status" value="off" checked> <span class="dark:text-gray-100">Não</span>`) |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function fecharModal() { |
||||
document.querySelector('.modal-edit').style.display = 'none'; |
||||
} |
||||
@ -0,0 +1,66 @@
|
||||
const eventos = { |
||||
EMESPERA: 'Em espera', |
||||
TRANSFER: 'Transferidos', |
||||
COMPLETE_CALLER: 'Finalizadas pelo cliente', |
||||
LOST_CONNECTION: 'Desconectadas', |
||||
COMPLETE_AGENT: 'Finalizas pelo Agente', |
||||
START: 'Iniciadas', |
||||
} |
||||
|
||||
function getDadosRelatorioDB() { |
||||
return new Promise(function(resolve, reject){ |
||||
$.ajax({ |
||||
type: "get", |
||||
dataType: 'json', |
||||
url: `dashboard/getRelatorioDados`, |
||||
success: function(response) { |
||||
const data = response.data; |
||||
resolve(data); |
||||
} |
||||
}); |
||||
}) |
||||
} |
||||
|
||||
async function montarRelatorios()
|
||||
{ |
||||
const data = await getDadosRelatorioDB(); |
||||
|
||||
$(".text-ativos").text(data.totalAgentesAtivos); |
||||
$(".text-pausa").text(data.totalAgentesPausa); |
||||
$(".text-atendimentoDia").text(data.atendimentosDia); |
||||
$(".text-atendimentosMes").text(data.atendimentosPorMes); |
||||
|
||||
let elementsTable = ""; |
||||
|
||||
data.relatoriosAtendimento.forEach(relatorio => { |
||||
elementsTable += ` |
||||
<tr class="bg-white dark:bg-gray-800 dark:border-gray-600 border-b-2"> |
||||
<td class="text-center" title="Ativar essa fila"> |
||||
<a href="dashboard/agentes/${relatorio.fila_id}" class="text-xl p-2 hover:bg-gray-100 hover:dark:bg-gray-700 rounded-full"> |
||||
<i class="fas fa-play-circle text-gray-900 dark:text-gray-100"> |
||||
</i> |
||||
</a> |
||||
</td> |
||||
<td class="p-3 text-sm text-gray-700 dark:text-gray-100 text-left">${relatorio.fila}</td> |
||||
<td class="p-3 text-sm text-gray-700 dark:text-gray-100 text-left">${relatorio.quantidade_supervisores}</td> |
||||
<td class="p-3 text-sm text-gray-700 dark:text-gray-100 text-left">${relatorio.quantidade_atendimentos}</td> |
||||
<td class="p-3 text-sm text-gray-700 dark:text-gray-100 text-left">0</td> |
||||
<td class="p-3 text-sm text-gray-700 dark:text-gray-100"> |
||||
<div title="Colocar fila em Pausa" class="dark:bg-white bg-gray-800 hover:bg-gray-100 hover:dark:bg-gray-500 rounded-full w-6 h-6 flex items-center justify-center cursor-pointer" onclick="selecionaFila(${relatorio.fila_id})"> |
||||
<i class="fas fa-pause dark:text-gray-900 text-gray-100 text-xs"></i></button> |
||||
</div> |
||||
</td> |
||||
</tr> |
||||
` |
||||
}); |
||||
|
||||
|
||||
$(".table-relatorio").html(elementsTable); |
||||
} |
||||
|
||||
function selecionaFila(fila_id){ |
||||
const modal = document.querySelector(".modal"); |
||||
modal.style.display = "block"; |
||||
modal.querySelector("form").action = `/dashboard/agentes/${fila_id}/pausarAgentesFila`; |
||||
} |
||||
|
||||
@ -0,0 +1,19 @@
|
||||
function atualizaEmpresa(empresa_id) { |
||||
$.ajax({ |
||||
type: "get", |
||||
url: `empresas/${empresa_id}/edit`, |
||||
success: function({data}) { |
||||
const empresa_data = data.empresa_data; |
||||
console.log(empresa_data); |
||||
$(".modal-edit").show(); |
||||
|
||||
$(".modal-edit").find('form').attr('action', `empresas/${empresa_id}`); |
||||
|
||||
$(".modal-edit").find("input[name='nome']").val(empresa_data.nome); |
||||
$(".modal-edit").find("input[name='token']").val(empresa_data.token); |
||||
$(".modal-edit").find("input[name='email']").val(empresa_data.email); |
||||
const cnpjFormatado = $(".modal-edit").find("input[name='cnpj']").masked(empresa_data.cnpj);
|
||||
$(".modal-edit").find("input[name='cnpj']").val(cnpjFormatado); |
||||
} |
||||
}); |
||||
} |
||||
@ -0,0 +1,31 @@
|
||||
function atualizarFila(id_fila) { |
||||
$.ajax({ |
||||
type: "get", |
||||
url: `filas/editar/${id_fila}`, |
||||
success: function({ |
||||
data |
||||
}) { |
||||
console.log(data) |
||||
const modal = document.querySelector('.modal-edit'); |
||||
|
||||
modal.style.display = 'block'; |
||||
|
||||
modal.querySelector('form').action = `/filas/editar/${data.id}`; |
||||
|
||||
modal.querySelector("input[name='nome']").value = data.nome; |
||||
|
||||
const containerCheckbox = modal.querySelector(".container-checkbox"); |
||||
|
||||
if (!data.is_ativa) { |
||||
containerCheckbox.innerHTML = `<input type="radio" name="status" value="on"> <span class="mr-3 dark:text-gray-100">Sim</span>
|
||||
<input type="radio" name="status" value="off" checked> <span class="dark:text-gray-100">Não</span>` |
||||
} |
||||
|
||||
} |
||||
|
||||
}); |
||||
} |
||||
|
||||
function fecharModal() { |
||||
document.querySelector('.modal-edit').style.display = 'none'; |
||||
} |
||||
@ -0,0 +1,181 @@
|
||||
const eventos = { |
||||
EMESPERA: 'Em espera', |
||||
TRANSFER: 'Transferidos', |
||||
COMPLETE_CALLER: 'Finalizadas pelo cliente', |
||||
LOST_CONNECTION: 'Desconectadas', |
||||
COMPLETE_AGENT: 'Finalizas pelo Agente', |
||||
START: 'Iniciadas', |
||||
} |
||||
|
||||
function getDadosRelatorioDB() { |
||||
return new Promise(function(resolve, reject) { |
||||
$.ajax({ |
||||
type: "get", |
||||
dataType: 'json', |
||||
url: `graficos/getDados`, |
||||
success: function(response) { |
||||
const data = response.data; |
||||
resolve(data); |
||||
} |
||||
}); |
||||
}) |
||||
} |
||||
|
||||
function montaGrafico1(dataDB) { |
||||
|
||||
let labels = dataDB.map((value) => value.nome) |
||||
let data = dataDB.map((value) => value.qtde_atendimento) |
||||
const ctx = document.getElementById('myChart'); |
||||
|
||||
new Chart(ctx, { |
||||
type: 'bar', |
||||
data: { |
||||
labels: labels, |
||||
datasets: [{ |
||||
data: data, |
||||
label: "Atendimento Por Agente", |
||||
font: 90, |
||||
borderWidth: 1, |
||||
backgroundColor: [ |
||||
'rgba(255, 99, 132, 0.7)', |
||||
'rgba(255, 159, 64, 0.7)', |
||||
'rgba(255, 205, 86, 0.7)', |
||||
'rgba(75, 192, 192, 0.7)', |
||||
'rgba(54, 162, 235, 0.7)', |
||||
'rgba(153, 102, 255, 0.7)', |
||||
'rgba(201, 203, 207, 0.7)' |
||||
], |
||||
borderColor: [ |
||||
'rgb(255, 99, 132)', |
||||
'rgb(255, 159, 64)', |
||||
'rgb(255, 205, 86)', |
||||
'rgb(75, 192, 192)', |
||||
'rgb(54, 162, 235)', |
||||
'rgb(153, 102, 255)', |
||||
'rgb(201, 203, 207)' |
||||
], |
||||
}], |
||||
}, |
||||
options: { |
||||
color: '#fff', |
||||
plugins: { |
||||
legend: { |
||||
labels: { |
||||
font: { |
||||
size: 15 |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
scales: { |
||||
y: { |
||||
beginAtZero: true, |
||||
}, |
||||
x: { |
||||
ticks: { |
||||
color: '#91a0a7', |
||||
font: { |
||||
size: 13 |
||||
}, |
||||
} |
||||
} |
||||
}, |
||||
}, |
||||
}); |
||||
} |
||||
|
||||
function montaGrafico2(dataDB) { |
||||
|
||||
const ctx2 = document.getElementById('myChart2'); |
||||
const somaPorEvento = {}; |
||||
|
||||
dataDB.forEach(element => { |
||||
if (somaPorEvento[element.evento]) { |
||||
somaPorEvento[element.evento] += element.qtde_usados; |
||||
} else { |
||||
somaPorEvento[element.evento] = element.qtde_usados; |
||||
} |
||||
}) |
||||
|
||||
let labels = Object.keys(somaPorEvento).map(label => eventos[label]); |
||||
let data = Object.values(somaPorEvento); |
||||
|
||||
new Chart(ctx2, { |
||||
type: 'doughnut', |
||||
data: { |
||||
labels: labels, |
||||
datasets: [{ |
||||
data: data, |
||||
borderWidth: 1, |
||||
backgroundColor: [ |
||||
'rgba(255, 99, 132, 0.8)', |
||||
'rgba(255, 159, 64, 0.8)', |
||||
'rgba(75, 192, 192, 0.8)', |
||||
'rgba(54, 162, 235, 0.8)', |
||||
'rgba(153, 102, 255, 0.8)', |
||||
'rgba(201, 203, 207, 0.8)' |
||||
], |
||||
borderColor: [ |
||||
'rgb(255, 99, 132)', |
||||
'rgb(255, 159, 64)', |
||||
'rgb(75, 192, 192)', |
||||
'rgb(54, 162, 235)', |
||||
'rgb(153, 102, 255)', |
||||
'rgb(201, 203, 207)' |
||||
], |
||||
}] |
||||
}, |
||||
|
||||
options: { |
||||
color: '#91a0a7', |
||||
|
||||
scales: { |
||||
y: { |
||||
beginAtZero: true |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
function montaGrafico3(dataDB) { |
||||
|
||||
const ctx3 = document.getElementById('myChart3'); |
||||
let labels3 = dataDB.map((value) => value.nome) |
||||
let data3 = dataDB.map((value) => value.qtde_fila) |
||||
|
||||
|
||||
new Chart(ctx3, { |
||||
type: 'pie', |
||||
data: { |
||||
labels: labels3, |
||||
datasets: [{ |
||||
label: 'Quantidade de atendimento', |
||||
data: data3, |
||||
borderWidth: 1, |
||||
backgroundColor: [ |
||||
'rgb(255, 99, 132)', |
||||
'rgb(54, 162, 235)', |
||||
'rgb(255, 205, 86)' |
||||
], |
||||
fontColor: '#fff', |
||||
}] |
||||
}, |
||||
options: { |
||||
color: '#91a0a7', |
||||
scales: { |
||||
y: { |
||||
beginAtZero: true |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
async function graficos() { |
||||
const data = await getDadosRelatorioDB(); |
||||
|
||||
montaGrafico1(data.atendimentosData); |
||||
montaGrafico2(data.atendimentosStatusData); |
||||
montaGrafico3(data.filasMaisUsadas); |
||||
} |
||||
@ -0,0 +1,32 @@
|
||||
function atualizarPausa(id_user) { |
||||
$.ajax({ |
||||
type: "get", |
||||
url: `pausas/editar/${id_user}`, |
||||
success: function({ |
||||
data |
||||
}) { |
||||
|
||||
|
||||
const modal = document.querySelector('.modal-edit'); |
||||
|
||||
modal.style.display = 'block'; |
||||
|
||||
modal.querySelector('form').action = `/pausas/editar/${data.id}`; |
||||
|
||||
modal.querySelector("input[name='motivo']").value = data.motivo; |
||||
|
||||
|
||||
const containerCheckbox = modal.querySelector(".container-checkbox"); |
||||
|
||||
if (!data.is_ativo) { |
||||
containerCheckbox.innerHTML = `<input type="radio" name="status" value="on"> <span class="mr-3 dark:text-gray-100">Sim</span>
|
||||
<input type="radio" name="status" value="off" checked> <span class="dark:text-gray-100">Não</span>` |
||||
} |
||||
|
||||
} |
||||
}); |
||||
} |
||||
|
||||
function fecharModal() { |
||||
document.querySelector('.modal-edit').style.display = 'none'; |
||||
} |
||||
@ -0,0 +1,59 @@
|
||||
function atualizaRedirect(id_redirect) { |
||||
$.ajax({ |
||||
type: "get", |
||||
url: `redirects/${id_redirect}/edit`, |
||||
success: function({ |
||||
data |
||||
}) { |
||||
const redirect_data = data.redirect_data; |
||||
const numbers_channels = data.numbers; |
||||
const modal = document.querySelector('.modal-edit'); |
||||
modal.style.display = 'block'; |
||||
modal.querySelector('form').action = `redirects/${id_redirect}`; |
||||
|
||||
modal.querySelector("input[name='nome']").value = redirect_data.name; |
||||
modal.querySelector("textarea[name='descricao']").value = redirect_data.description; |
||||
|
||||
const containerRadioStatus = document.querySelector(".container-radio-status"); |
||||
const containerRadioInitial = document.querySelector(".container-radio-initial"); |
||||
|
||||
if (redirect_data.status) { |
||||
containerRadioStatus.innerHTML = |
||||
`<input type="radio" name="status" value="on" checked> <span class="mr-3 dark:text-gray-100">Sim</span>
|
||||
<input type="radio" name="status" value="off" > <span class="dark:text-gray-100">Não</span>` |
||||
} else { |
||||
containerRadioStatus.innerHTML = |
||||
`<input type="radio" name="status" value="on" > <span class="mr-3 dark:text-gray-100">Sim</span>
|
||||
<input type="radio" name="status" value="off" checked> <span class="dark:text-gray-100">Não</span>` |
||||
} |
||||
|
||||
if (redirect_data.initial) { |
||||
containerRadioInitial.innerHTML = |
||||
`<input type="radio" name="initial" value="on" checked> <span class="mr-3 dark:text-gray-100">Sim</span>
|
||||
<input type="radio" name="initial" value="off" > <span class="dark:text-gray-100">Não</span>` |
||||
} else { |
||||
containerRadioInitial.innerHTML = |
||||
`<input type="radio" name="initial" value="on" > <span class="mr-3 dark:text-gray-100">Sim</span>
|
||||
<input type="radio" name="initial" value="off" checked> <span class="dark:text-gray-100">Não</span>` |
||||
} |
||||
|
||||
const containerChannels = modal.querySelector("select[name='channel']"); |
||||
numbers_channels.forEach(channel => { |
||||
if (redirect_data.id_number === channel.id) { |
||||
containerChannels.innerHTML = |
||||
` <option value="${channel.id}" selected>${channel.title}</option>` |
||||
|
||||
} else { |
||||
containerChannels.innerHTML = |
||||
` <option value="${channel.id}">${channel.title}</option>` |
||||
|
||||
} |
||||
}) |
||||
|
||||
} |
||||
}); |
||||
} |
||||
|
||||
function fecharModal() { |
||||
document.querySelector('.modal-edit').style.display = 'none'; |
||||
} |
||||
@ -0,0 +1,56 @@
|
||||
function atualizaRedirectOption(option_id) { |
||||
$.ajax({ |
||||
type: "get", |
||||
url: `options/${option_id}/edit`, |
||||
success: async function({ |
||||
data |
||||
}) { |
||||
|
||||
const option_data = data.option_data; |
||||
const types = data.types |
||||
const modal = document.querySelector('.modal-edit'); |
||||
|
||||
modal.style.display = 'block'; |
||||
modal.setAttribute('data-sequenceDB', option_data.sequence); |
||||
modal.querySelector("input[name='sequencia']").value = option_data.sequence; |
||||
modal.querySelector("textarea[name='descricao']").value = option_data.description; |
||||
|
||||
modal.querySelector('form').action = `options/${option_id}`; |
||||
|
||||
if (option_data.hide) { |
||||
modal.querySelector(".container-radio").innerHTML = |
||||
`<input type="radio" name="status" value="on"> <span class="mr-3 dark:text-gray-100" >Sim</span>
|
||||
<input type="radio" name="status" value="off" checked> <span class="dark:text-gray-100">Não</span>`; |
||||
} else { |
||||
modal.querySelector(".container-radio").innerHTML = |
||||
`<input type="radio" name="status" value="on" checked> <span class="mr-3 dark:text-gray-100" >Sim</span>
|
||||
<input type="radio" name="status" value="off" > <span class="dark:text-gray-100">Não</span>`; |
||||
} |
||||
|
||||
let containerTypes = ''; |
||||
|
||||
types.forEach(type => { |
||||
if (option_data.id_type === type.id) { |
||||
containerTypes += |
||||
` <option value="${type.id}" selected>${type.name}</option>` |
||||
} else { |
||||
containerTypes += |
||||
` <option value="${type.id}">${type.name}</option>` |
||||
} |
||||
}) |
||||
|
||||
modal.querySelector(".select-types").innerHTML = containerTypes; |
||||
montaSelectDestino(option_data.id_type, modal, option_data.code_id); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
document.querySelectorAll('.select-types').forEach(el => { |
||||
el.addEventListener('change', (e) => { |
||||
const select = e.target; |
||||
const modal = select.closest('.modal') ?? select.closest('.modal-edit'); |
||||
const id_redirect = select.value; |
||||
|
||||
montaSelectDestino(id_redirect, modal); |
||||
}) |
||||
}) |
||||
@ -0,0 +1,39 @@
|
||||
async function montaSelectDestino(id_type, modal, code_id = null) { |
||||
const data = await requestType(id_type); |
||||
const selectDestino = modal.querySelector(".select-destino"); |
||||
const inputDestino = modal.querySelector(".input-destino"); |
||||
|
||||
if (!data) { |
||||
selectDestino.style.display = 'none'; |
||||
selectDestino.disabled = true; |
||||
inputDestino.disabled = false; |
||||
inputDestino.style.display = 'block'; |
||||
|
||||
return; |
||||
} |
||||
|
||||
selectDestino.style.display = 'block'; |
||||
selectDestino.disabled = false; |
||||
inputDestino.disabled = true; |
||||
inputDestino.style.display = 'none'; |
||||
|
||||
let selectElements = ""; |
||||
if (code_id) { |
||||
data.forEach(element => { |
||||
let matriculaOrId = element.matricula ?? element.id; |
||||
if (matriculaOrId.toString() === code_id.toString()) { |
||||
selectElements += |
||||
` <option value="${element.id}" selected>${element.name}</option>` |
||||
} else { |
||||
selectElements += |
||||
` <option value="${element.id}">${element.name}</option>` |
||||
} |
||||
}) |
||||
} else { |
||||
data.forEach(element => { |
||||
selectElements += `<option value="${element.id}">${element.name}</option>` |
||||
}); |
||||
} |
||||
|
||||
selectDestino.innerHTML = selectElements; |
||||
} |
||||
@ -0,0 +1,13 @@
|
||||
function requestType(id_type) { |
||||
return new Promise(function(resolve, reject) { |
||||
$.ajax({ |
||||
type: "get", |
||||
dataType: 'json', |
||||
url: `options/${id_type}`, |
||||
success: function(response) { |
||||
const data = response.data.data; |
||||
resolve(data); |
||||
} |
||||
}); |
||||
}); |
||||
} |
||||
@ -1,69 +0,0 @@
|
||||
<x-app-layout> |
||||
<div class="py-8 px-8"> |
||||
|
||||
|
||||
@if(session('status')) |
||||
<div class="w-full p-5 bg-blue-600 mb-5 text-white rounded uppercase font-bold text-lg"> |
||||
{{session('status')}} |
||||
</div> |
||||
@endif |
||||
|
||||
<div class="header flex flex-col items-center gap-4"> |
||||
<h1 class=" text-gray-900 dark:text-gray-100 text-3xl font-bold text-center"> |
||||
Supervisores |
||||
</h1> |
||||
|
||||
</div> |
||||
|
||||
<div class="body mt-4 overflow-auto rounded-lg shadow"> |
||||
<table class="w-full"> |
||||
<thead class="bg-gray-50 border-gray-200 border-b-2"> |
||||
<tr> |
||||
<th class="p-3 text-sm font-semibold tracking-wide text-left">ID</th> |
||||
<th class="p-3 text-sm font-semibold tracking-wide text-left">Nome</th> |
||||
<th class="p-3 text-sm font-semibold tracking-wide text-left">Matricula</th> |
||||
<th class="p-3 text-sm font-semibold tracking-wide text-left">Fila</th> |
||||
<th class="p-3 text-sm font-semibold tracking-wide text-left">Motivo Pausa</th> |
||||
<th class="p-3 text-sm font-semibold tracking-wide text-left">Tempo de Login</th> |
||||
<th class="p-3 text-sm font-semibold tracking-wide text-left">Status</th> |
||||
<th class="p-3 text-sm font-semibold tracking-wide text-left">Ações</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
|
||||
@foreach($supervisores as $supervisor) |
||||
<tr class="bg-white"> |
||||
<td class="p-3 text-sm text-gray-700">{{$supervisor->id}}</td> |
||||
<td class="p-3 text-sm text-gray-700">{{$supervisor->nome}}</td> |
||||
<td class="p-3 text-sm text-gray-700">{{$supervisor->matricula}}</td> |
||||
<td class="p-3 text-sm text-gray-700">{{$supervisor->fila}}</td> |
||||
<td class="p-3 text-sm text-gray-700"> |
||||
@if($supervisor->motivo_pausa) |
||||
{{$supervisor->motivo_pausa}} |
||||
@else |
||||
Sem Pausa |
||||
@endif |
||||
</td> |
||||
<td class="p-3 text-sm text-gray-700">{{$supervisor->tempo_login}}</td> |
||||
<td class="p-3 text-sm text-gray-700">{{$supervisor->status}}</td> |
||||
<td class="p-3 text-sm font-bold flex items-center gap-2 flex-wrap"> |
||||
<a class="bg-blue-600 text-white p-2 rounded flex-1 text-lg text-center" href="supervisor/editar/{{$supervisor->id}}"><i class="fas fa-edit"></i></a> |
||||
<form method="POST" action="supervisor/deletar/{{$supervisor->id}}" class="flex-1 flex" onclick="javascript: if(!confirm('Deseja deletar esses dados?')) return false;"> |
||||
@csrf |
||||
@method('delete') |
||||
<button class="bg-red-600 text-white p-2 rounded flex-1 text-lg"> |
||||
<i class="fas fa-trash"></i> |
||||
</button> |
||||
</form> |
||||
</td> |
||||
</tr> |
||||
@endforeach |
||||
|
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
|
||||
<x-modalSupervisores :filas="$filas" :agentes="$agentes" :numberChannels="$numberChannels"></x-modalSupervisores> |
||||
|
||||
</x-app-layout> |
||||
Loading…
Reference in new issue