508 lines
23 KiB
JavaScript
508 lines
23 KiB
JavaScript
|
|
// Função principal responsável por gerenciar o alinhamento dos ambientes e relatórios.
|
|
function AlinhamentoAmbientesRelatorios() {
|
|
|
|
// Obtém o elemento HTML com o ID 'ListeRelatorios' onde os relatórios serão listados.
|
|
const ListaAmbientesRelatorios = document.getElementById('ListeRelatorios');
|
|
|
|
// Insere o componente de relatórios dinâmicos na área do elemento 'ListeRelatorios'.
|
|
ListaAmbientesRelatorios.innerHTML = ComponenteAmbientesRelatorios();
|
|
|
|
// Chama as funções que ativam, desativam e lidam com erros nos relatórios.
|
|
Relatorios_on(); // Função que ativa a visualização de relatórios (ON).
|
|
Relatorios_erro(); // Função que lida com os relatórios em erro.
|
|
Relatorios_off(); // Função que desativa os relatórios (OFF).
|
|
}
|
|
|
|
// Função responsável por retornar o HTML de um componente de relatórios dinâmico.
|
|
function ComponenteAmbientesRelatorios() {
|
|
|
|
// Retorna uma string com a estrutura HTML do componente.
|
|
return `
|
|
<div class="titulo_Cap">
|
|
<!-- Título principal da seção de controle de ambiente -->
|
|
<h2>Controle de Ambiente</h2>
|
|
</div>
|
|
|
|
<div class="painel_Cap">
|
|
<div class="coluna_1">
|
|
<!-- Botões para controlar o estado dos relatórios (ON, OFF, ERRO) -->
|
|
<button class="desativado" id="Relatorios_ON">ON</button>
|
|
<button class="desativado" id="Relatorios_OFF">OFF</button>
|
|
<button class="desativado" id="Relatorios_ERRO">ERRO</button>
|
|
</div>
|
|
|
|
<div class="coluna_2">
|
|
<!-- Área onde os relatórios dinâmicos serão listados -->
|
|
<div class="opicaoAmbie dinamico" id="ListaRelatoriosDinamicos">
|
|
<!-- Exemplo de botão de relatório dinâmico -->
|
|
<button id='relatorio_1323'>Itguys</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
`
|
|
}
|
|
|
|
// Função que é ativada quando o botão "ON" é clicado, permitindo visualizar os relatórios.
|
|
function Relatorios_on() {
|
|
|
|
// Obtém o botão "ON" e adiciona um evento de clique.
|
|
const ButtonON = document.getElementById('Relatorios_ON');
|
|
ButtonON.addEventListener('click', ApresentarPainelON);
|
|
|
|
// Função que exibe os relatórios quando o botão "ON" é clicado.
|
|
function ApresentarPainelON() {
|
|
|
|
// Dados dos relatórios que serão exibidos
|
|
const DataRelatorios_ON = {
|
|
Registro_1: {
|
|
id_Registro: '543514',
|
|
Ambiente: "Itguys",
|
|
DatadoEvento: "(18:02 - 20/10/24)",
|
|
Evento: "Um Relatório foi emitido, do gráfico da 104"
|
|
},
|
|
Registro_2: {
|
|
id_Registro: '123214',
|
|
Ambiente: "Enseg",
|
|
DatadoEvento: "(12:02 - 21/08/24)",
|
|
Evento: "Usuário Alan resetou sua senha"
|
|
},
|
|
Registro_3: {
|
|
id_Registro: '3213214',
|
|
Ambiente: "Itguys",
|
|
DatadoEvento: "(14:02 - 21/12/24)",
|
|
Evento: "Usuário João realizou modificações no Ramal do Dev"
|
|
},
|
|
Registro_4: {
|
|
id_Registro: '4213214',
|
|
Ambiente: "Prolog",
|
|
DatadoEvento: "(12:02 - 10/06/24)",
|
|
Evento: "Usuário Francisco puxou um relatório sobre a Starlink"
|
|
},
|
|
Registro_5: {
|
|
id_Registro: '1230214',
|
|
Ambiente: "Oest Pan",
|
|
DatadoEvento: "(14:02 - 21/12/24)",
|
|
Evento: "Usuário Ricardo realizou um reset em sua senha"
|
|
}
|
|
}
|
|
|
|
// Obtém o elemento onde os relatórios dinâmicos serão exibidos.
|
|
const ListadeRelatorios = document.getElementById('ListaRelatoriosDinamicos');
|
|
|
|
// Altera as classes CSS para ativar a exibição dos relatórios.
|
|
ListadeRelatorios.classList.add('RelatoriosON');
|
|
ListadeRelatorios.classList.remove('RelatoriosERRO');
|
|
ListadeRelatorios.classList.remove('RelatoriosOFF');
|
|
ListadeRelatorios.classList.remove('dinamico');
|
|
|
|
// Ativa o botão "ON" e desativa os outros botões.
|
|
const BotaoReferencial = document.getElementById('Relatorios_ON');
|
|
BotaoReferencial.classList.add('Ativo');
|
|
BotaoReferencial.classList.remove('desativado');
|
|
|
|
const RegrasaoExtra_1 = document.getElementById('Relatorios_ERRO');
|
|
RegrasaoExtra_1.classList.remove('Ativo');
|
|
RegrasaoExtra_1.classList.add('desativado');
|
|
|
|
const RegrasaoExtra_2 = document.getElementById('Relatorios_OFF');
|
|
RegrasaoExtra_2.classList.remove('Ativo');
|
|
RegrasaoExtra_2.classList.add('desativado');
|
|
|
|
// Gatilho para renderizar os relatórios na interface.
|
|
ListadeRelatorios.innerHTML = GatilhodeRelatorios();
|
|
|
|
// Após um pequeno delay, exibe os relatórios, associando os eventos de clique.
|
|
setTimeout(() => {
|
|
for (let registrosOn in DataRelatorios_ON) {
|
|
const code = DataRelatorios_ON[registrosOn].id_Registro;
|
|
const ambiente = DataRelatorios_ON[registrosOn].Ambiente;
|
|
const data = DataRelatorios_ON[registrosOn].DatadoEvento;
|
|
const Evento = DataRelatorios_ON[registrosOn].Evento;
|
|
|
|
// Chama a função para associar o evento de clique em cada relatório.
|
|
ViusalizadorRelatorioAmbiente(code, ambiente, data, Evento);
|
|
}
|
|
}, 0);
|
|
|
|
// Função que gera o HTML dos botões de relatórios.
|
|
function GatilhodeRelatorios() {
|
|
let htmlContent = '';
|
|
|
|
// Itera sobre os registros de relatório e gera um botão para cada um.
|
|
for (let registrosOn in DataRelatorios_ON) {
|
|
const code = DataRelatorios_ON[registrosOn].id_Registro;
|
|
const ambiente = DataRelatorios_ON[registrosOn].Ambiente;
|
|
const data = DataRelatorios_ON[registrosOn].DatadoEvento;
|
|
|
|
// Cria um botão para cada relatório.
|
|
htmlContent += ` <button id='relatorio_ON_${ambiente}_${code}'>${ambiente} - ${data}</button>`;
|
|
}
|
|
|
|
return htmlContent; // Retorna o HTML gerado com os botões.
|
|
}
|
|
|
|
// Função que é chamada quando um relatório específico é clicado.
|
|
function ViusalizadorRelatorioAmbiente(Id, Empresa, Data, Ocorrido) {
|
|
const ItemAmbiente = document.getElementById(`relatorio_ON_${Empresa}_${Id}`);
|
|
|
|
// Adiciona um evento de clique para abrir a visualização do relatório.
|
|
ItemAmbiente.addEventListener('click', PaineldeVisualizacao);
|
|
|
|
// Função que exibe o painel de visualização do relatório.
|
|
function PaineldeVisualizacao() {
|
|
const PainelVisualizacao = document.getElementById('PopPainel');
|
|
|
|
// Exibe o painel e ajusta suas classes para o modo de visualização.
|
|
PainelVisualizacao.style.display = 'flex';
|
|
PainelVisualizacao.classList.remove('CriacaoAmbientes');
|
|
PainelVisualizacao.classList.remove('EdicaoAmbientes');
|
|
PainelVisualizacao.classList.add('VisualizacaoRelaotirio');
|
|
PainelVisualizacao.innerHTML = PainelRelatorio();
|
|
|
|
// Função para adicionar o botão de fechamento e lógica extra.
|
|
Extras();
|
|
|
|
function PainelRelatorio() {
|
|
return `
|
|
<div class='fecharPainel'>
|
|
<button id='FecharPainel'>X</button>
|
|
</div>
|
|
<div class='Titulo_Relatorio'>
|
|
<h2>Relatório de Número - ${Id}</h2>
|
|
</div>
|
|
<div class='Evento'>
|
|
<p>No Ambiente ${Empresa} - ${Ocorrido} às ${Data}<p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Função para adicionar a funcionalidade de fechar o painel.
|
|
function Extras() {
|
|
fechar();
|
|
|
|
function fechar() {
|
|
const FecharPainelEdicao = document.getElementById('FecharPainel');
|
|
FecharPainelEdicao.addEventListener('click', EncerrarTarefa);
|
|
|
|
function EncerrarTarefa() {
|
|
PainelVisualizacao.style.display = 'none'; // Fecha o painel.
|
|
PainelVisualizacao.classList.remove('VisualizacaoRelaotirio');
|
|
PainelVisualizacao.innerHTML = ''; // Limpa o conteúdo do painel.
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Função que é ativada quando o botão "ERRO" é clicado, permitindo visualizar os relatórios de erro.
|
|
function Relatorios_erro() {
|
|
|
|
// Obtém o botão "ERRO" e adiciona um evento de clique.
|
|
const ButtonERRO = document.getElementById('Relatorios_ERRO');
|
|
ButtonERRO.addEventListener('click', ApresentarPainelERRO);
|
|
|
|
// Função que exibe os relatórios de erro quando o botão "ERRO" é clicado.
|
|
function ApresentarPainelERRO() {
|
|
|
|
// Dados dos relatórios de erro que serão exibidos
|
|
const DataRelatorios_ERRO = {
|
|
Registro_1: {
|
|
id_Registro: '0913214',
|
|
Ambiente: "Itguys",
|
|
DatadoEvento: "(18:02 - 20/10/24)",
|
|
Evento: "Houve um erro 2130, ao puxar o relatorio do grafico 1"
|
|
},
|
|
Registro_2: {
|
|
id_Registro: '045314',
|
|
Ambiente: "Prolog",
|
|
DatadoEvento: "(11:02 - 01/08/24)",
|
|
Evento: "Houve um erro sobre o resete de senha, do usuário/a Sonya"
|
|
},
|
|
Registro_3: {
|
|
id_Registro: '3901214',
|
|
Ambiente: "Oest Pan",
|
|
DatadoEvento: "(18:02 - 02/11/24)",
|
|
Evento: "Dashboard de máquina está com gráficos vazios"
|
|
},
|
|
Registro_4: {
|
|
id_Registro: '91230214',
|
|
Ambiente: "Anatram",
|
|
DatadoEvento: "(16:02 - 11/06/24)",
|
|
Evento: "Usuário Francisco originou erro 500 durante o reset de senha"
|
|
},
|
|
Registro_5: {
|
|
id_Registro: '2130123',
|
|
Ambiente: "Enseg",
|
|
DatadoEvento: "(17:02 - 21/12/24)",
|
|
Evento: "Usuário Ricardo originou um erro ao puxar o relatório dos ramais."
|
|
}
|
|
}
|
|
|
|
// Obtém o elemento onde os relatórios de erro serão exibidos.
|
|
const ListadeRelatorios = document.getElementById('ListaRelatoriosDinamicos');
|
|
|
|
// Altera as classes CSS para ativar a exibição dos relatórios de erro.
|
|
ListadeRelatorios.classList.add('RelatoriosERRO');
|
|
ListadeRelatorios.classList.remove('RelatoriosON');
|
|
ListadeRelatorios.classList.remove('RelatoriosOFF');
|
|
ListadeRelatorios.classList.remove('dinamico');
|
|
|
|
// Ativa o botão "ERRO" e desativa os outros botões.
|
|
const BotaoReferencial = document.getElementById('Relatorios_ERRO');
|
|
BotaoReferencial.classList.add('Ativo');
|
|
BotaoReferencial.classList.remove('desativado');
|
|
|
|
const RegrasaoExtra_1 = document.getElementById('Relatorios_ON');
|
|
RegrasaoExtra_1.classList.remove('Ativo');
|
|
RegrasaoExtra_1.classList.add('desativado');
|
|
|
|
const RegrasaoExtra_2 = document.getElementById('Relatorios_OFF');
|
|
RegrasaoExtra_2.classList.remove('Ativo');
|
|
RegrasaoExtra_2.classList.add('desativado');
|
|
|
|
// Gatilho para renderizar os relatórios na interface.
|
|
ListadeRelatorios.innerHTML = GatilhodeRelatorios();
|
|
|
|
// Após um pequeno delay, exibe os relatórios de erro, associando os eventos de clique.
|
|
setTimeout(() => {
|
|
for (let registrosERRO in DataRelatorios_ERRO) {
|
|
const code = DataRelatorios_ERRO[registrosERRO].id_Registro;
|
|
const ambiente = DataRelatorios_ERRO[registrosERRO].Ambiente;
|
|
const data = DataRelatorios_ERRO[registrosERRO].DatadoEvento;
|
|
const Evento = DataRelatorios_ERRO[registrosERRO].Evento;
|
|
|
|
// Chama a função para associar o evento de clique em cada relatório.
|
|
ViusalizadorRelatorioAmbiente(code, ambiente, data, Evento);
|
|
}
|
|
}, 0);
|
|
|
|
// Função que gera o HTML dos botões de relatórios de erro.
|
|
function GatilhodeRelatorios() {
|
|
let htmlContent = '';
|
|
|
|
// Itera sobre os registros de erro e gera um botão para cada um.
|
|
for (let registrosERRO in DataRelatorios_ERRO) {
|
|
const code = DataRelatorios_ERRO[registrosERRO].id_Registro;
|
|
const ambiente = DataRelatorios_ERRO[registrosERRO].Ambiente;
|
|
const data = DataRelatorios_ERRO[registrosERRO].DatadoEvento;
|
|
|
|
// Cria um botão para cada relatório de erro.
|
|
htmlContent += ` <button id='relatorio_ERRO_${ambiente}_${code}'>${ambiente} - ${data}</button>`;
|
|
}
|
|
|
|
return htmlContent; // Retorna o HTML gerado com os botões.
|
|
}
|
|
|
|
// Função que é chamada quando um relatório específico de erro é clicado.
|
|
function ViusalizadorRelatorioAmbiente(Id, Empresa, Data, Ocorrido) {
|
|
const ItemAmbiente = document.getElementById(`relatorio_ERRO_${Empresa}_${Id}`);
|
|
|
|
// Adiciona um evento de clique para abrir a visualização do relatório de erro.
|
|
ItemAmbiente.addEventListener('click', PaineldeVisualizacao);
|
|
|
|
// Função que exibe o painel de visualização do relatório de erro.
|
|
function PaineldeVisualizacao() {
|
|
const PainelVisualizacao = document.getElementById('PopPainel');
|
|
|
|
// Exibe o painel e ajusta suas classes para o modo de visualização.
|
|
PainelVisualizacao.style.display = 'flex';
|
|
PainelVisualizacao.classList.remove('CriacaoAmbientes');
|
|
PainelVisualizacao.classList.remove('EdicaoAmbientes');
|
|
PainelVisualizacao.classList.add('VisualizacaoRelaotirio');
|
|
PainelVisualizacao.innerHTML = PainelRelatorio();
|
|
|
|
// Função para adicionar o botão de fechamento e lógica extra.
|
|
Extras();
|
|
|
|
function PainelRelatorio() {
|
|
return `
|
|
<div class='fecharPainel'>
|
|
<button id='FecharPainel'>X</button>
|
|
</div>
|
|
<div class='Titulo_Relatorio'>
|
|
<h2>Relatório de Número - ${Id}</h2>
|
|
</div>
|
|
<div class='Evento'>
|
|
<p>No Ambiente ${Empresa} - ${Ocorrido} às ${Data}<p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Função para adicionar a funcionalidade de fechar o painel.
|
|
function Extras() {
|
|
fechar();
|
|
|
|
function fechar() {
|
|
const FecharPainelEdicao = document.getElementById('FecharPainel');
|
|
FecharPainelEdicao.addEventListener('click', EncerrarTarefa);
|
|
|
|
function EncerrarTarefa() {
|
|
PainelVisualizacao.style.display = 'none'; // Fecha o painel.
|
|
PainelVisualizacao.classList.remove('VisualizacaoRelaotirio');
|
|
PainelVisualizacao.innerHTML = ''; // Limpa o conteúdo do painel.
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Função que é ativada quando o botão "OFF" é clicado, permitindo visualizar os relatórios de desligamento.
|
|
function Relatorios_off() {
|
|
|
|
// Obtém o botão "OFF" e adiciona um evento de clique.
|
|
const ButtonOFF = document.getElementById('Relatorios_OFF');
|
|
ButtonOFF.addEventListener('click', ApresentarPainelOFF);
|
|
|
|
// Função que exibe os relatórios de desligamento quando o botão "OFF" é clicado.
|
|
function ApresentarPainelOFF() {
|
|
|
|
// Dados dos relatórios de desligamento que serão exibidos
|
|
const DataRelatorios_OFF = {
|
|
Registro_1: {
|
|
id_Registro: '21984',
|
|
Ambiente: "ItGuys",
|
|
DatadoEvento: "(17:02 - 20/10/24)",
|
|
Evento: "Ambiente foi desligado, pelo ADM Daivid, para realizar ajustes"
|
|
},
|
|
Registro_2: {
|
|
id_Registro: '218784',
|
|
Ambiente: "Enseg",
|
|
DatadoEvento: "(13:02 - 01/08/24)",
|
|
Evento: "Ambiente foi desligado, por conta de um erro interno, no reset de senhas."
|
|
},
|
|
Registro_3: {
|
|
id_Registro: '25464514',
|
|
Ambiente: "Prolog",
|
|
DatadoEvento: "(15:02 - 02/11/24)",
|
|
Evento: "Ambiente foi desligado temporariamente, por conta da invasão de usuário Rodrigo, sobre uma tela que ele não deveria acessar."
|
|
},
|
|
Registro_4: {
|
|
id_Registro: '21334',
|
|
Ambiente: "Enseg",
|
|
DatadoEvento: "(11:02 - 11/06/24)",
|
|
Evento: "Ambiente passou por desligamento para passar por uma atualização das suas dashboards"
|
|
},
|
|
Registro_5: {
|
|
id_Registro: '213214',
|
|
Ambiente: "Enseg",
|
|
DatadoEvento: "(15:02 - 21/12/24)",
|
|
Evento: "Ambiente foi desligado por conta de um erro no reset de senha do usuário, causando um travamento geral."
|
|
}
|
|
}
|
|
|
|
// Obtém o elemento onde os relatórios de desligamento serão exibidos.
|
|
const ListadeRelatorios = document.getElementById('ListaRelatoriosDinamicos');
|
|
|
|
// Altera as classes CSS para ativar a exibição dos relatórios de desligamento.
|
|
ListadeRelatorios.classList.add('RelatoriosOFF');
|
|
ListadeRelatorios.classList.remove('RelatoriosERRO');
|
|
ListadeRelatorios.classList.remove('RelatoriosON');
|
|
ListadeRelatorios.classList.remove('dinamico');
|
|
|
|
// Ativa o botão "OFF" e desativa os outros botões.
|
|
const BotaoReferencial = document.getElementById('Relatorios_OFF');
|
|
BotaoReferencial.classList.add('Ativo');
|
|
BotaoReferencial.classList.remove('desativado');
|
|
|
|
const RegrasaoExtra_1 = document.getElementById('Relatorios_ON');
|
|
RegrasaoExtra_1.classList.remove('Ativo');
|
|
RegrasaoExtra_1.classList.add('desativado');
|
|
|
|
const RegrasaoExtra_2 = document.getElementById('Relatorios_ERRO');
|
|
RegrasaoExtra_2.classList.remove('Ativo');
|
|
RegrasaoExtra_2.classList.add('desativado');
|
|
|
|
// Gatilho para renderizar os relatórios na interface.
|
|
ListadeRelatorios.innerHTML = GatilhodeRelatorios();
|
|
|
|
// Após um pequeno delay, exibe os relatórios de desligamento e associa os eventos de clique.
|
|
setTimeout(() => {
|
|
for (let registrosOFF in DataRelatorios_OFF) {
|
|
const code = DataRelatorios_OFF[registrosOFF].id_Registro;
|
|
const ambiente = DataRelatorios_OFF[registrosOFF].Ambiente;
|
|
const data = DataRelatorios_OFF[registrosOFF].DatadoEvento;
|
|
const Evento = DataRelatorios_OFF[registrosOFF].Evento;
|
|
|
|
// Chama a função para associar o evento de clique em cada relatório.
|
|
ViusalizadorRelatorioAmbiente(code, ambiente, data, Evento);
|
|
}
|
|
}, 0);
|
|
|
|
// Função que gera o HTML dos botões de relatórios de desligamento.
|
|
function GatilhodeRelatorios() {
|
|
let htmlContent = '';
|
|
|
|
// Itera sobre os registros de desligamento e gera um botão para cada um.
|
|
for (let registrosOFF in DataRelatorios_OFF) {
|
|
const code = DataRelatorios_OFF[registrosOFF].id_Registro;
|
|
const ambiente = DataRelatorios_OFF[registrosOFF].Ambiente;
|
|
const data = DataRelatorios_OFF[registrosOFF].DatadoEvento;
|
|
|
|
// Cria um botão para cada relatório de desligamento.
|
|
htmlContent += ` <button id='relatorio_OFF_${ambiente}_${code}'> ${ambiente} - ${data}</button>`;
|
|
}
|
|
|
|
return htmlContent; // Retorna o HTML gerado com os botões.
|
|
}
|
|
|
|
// Função que é chamada quando um relatório específico de desligamento é clicado.
|
|
function ViusalizadorRelatorioAmbiente(Id, Empresa, Data, Ocorrido) {
|
|
const ItemAmbiente = document.getElementById(`relatorio_OFF_${Empresa}_${Id}`);
|
|
|
|
// Adiciona um evento de clique para abrir a visualização do relatório de desligamento.
|
|
ItemAmbiente.addEventListener('click', PaineldeVisualizacao);
|
|
|
|
// Função que exibe o painel de visualização do relatório de desligamento.
|
|
function PaineldeVisualizacao() {
|
|
const PainelVisualizacao = document.getElementById('PopPainel');
|
|
|
|
// Exibe o painel e ajusta suas classes para o modo de visualização.
|
|
PainelVisualizacao.style.display = 'flex';
|
|
PainelVisualizacao.classList.remove('CriacaoAmbientes');
|
|
PainelVisualizacao.classList.remove('EdicaoAmbientes');
|
|
PainelVisualizacao.classList.add('VisualizacaoRelaotirio');
|
|
PainelVisualizacao.innerHTML = PainelRelatorio();
|
|
|
|
// Função para adicionar o botão de fechamento e lógica extra.
|
|
Extras();
|
|
|
|
function PainelRelatorio() {
|
|
return `
|
|
<div class='fecharPainel'>
|
|
<button id='FecharPainel'>X</button>
|
|
</div>
|
|
<div class='Titulo_Relatorio'>
|
|
<h2>Relatório de Número - ${Id}</h2>
|
|
</div>
|
|
<div class='Evento'>
|
|
<p>No Ambiente ${Empresa} - ${Ocorrido} às ${Data}<p>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Função para adicionar a funcionalidade de fechar o painel.
|
|
function Extras() {
|
|
fechar();
|
|
|
|
function fechar() {
|
|
const FecharPainelEdicao = document.getElementById('FecharPainel');
|
|
FecharPainelEdicao.addEventListener('click', EncerrarTarefa);
|
|
|
|
function EncerrarTarefa() {
|
|
PainelVisualizacao.style.display = 'none'; // Fecha o painel.
|
|
PainelVisualizacao.classList.remove('VisualizacaoRelaotirio');
|
|
PainelVisualizacao.innerHTML = ''; // Limpa o conteúdo do painel.
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|