369 lines
16 KiB
JavaScript
369 lines
16 KiB
JavaScript
// Função responsavel por aplicar a funcionalidade de ajuste da tela
|
|
function Interatividade() {
|
|
//Delcaração das variaveis que serão usadas
|
|
var botao = document.getElementById('id_ajuste');
|
|
var cabecario = document.querySelector('.capitulo_1');
|
|
var tela = document.querySelector('.capitulo_2');
|
|
var menu = document.querySelector('.menu_lateral');
|
|
|
|
//Condicional de existencia do elemento da variavel botao
|
|
if (botao) {
|
|
//Evento de click
|
|
botao.addEventListener('click', function () {
|
|
//console.log('Botão clicado!'); // Console para validar a aplicação do botão pois na epoca tinha conflitos dessa função ser usada ao mesmo tempo que seu elemento estava construido sobre a tela
|
|
//Aplicações de classes que pode ser retiradas e aplicadas novamente usando o toggle
|
|
if (menu) menu.classList.toggle('expansao');
|
|
if (cabecario) cabecario.classList.toggle('expansao');
|
|
if (tela) tela.classList.toggle('expansao');
|
|
});
|
|
} else {
|
|
//Caso de erro para caso o botão não seja encontrados
|
|
console.error('Botão não encontrado!');
|
|
}
|
|
|
|
// Função que foi desutilizada
|
|
/*if (Permissoes.visuMonitor) {
|
|
const script2 = document.createElement('script');
|
|
script2.src = './js/page/Ambiente/Monitoramento/Modulo_Construcao/Funcao/Estrutura_Secundaria_Monitor.js';
|
|
script2.setAttribute // Acessando a propriedade corretamente
|
|
document.body.appendChild(script2);
|
|
}*/
|
|
|
|
}
|
|
|
|
// Função para gerar controladores, permitem cada uma das telas do sistema serem apresentadas diante ao sistema.
|
|
async function ApresentarTelas(InfoGeral) {
|
|
// Inicialização da função InteraçõesTelas
|
|
InteracoesTelas();
|
|
// Essa função possui a resposabilidade de alinhar todas const de todas as telas e chamamento de suas funções respectivas
|
|
function InteracoesTelas() {
|
|
ControladorDeVisualizacao(InfoGeral);
|
|
|
|
// Alinhamento de todas as consts
|
|
const Config_texts = document.getElementById('Configuracao_1');
|
|
const Config_icon = document.getElementById('Configuracao_2');
|
|
const Home_texts = document.getElementById('Home_1');
|
|
const Home_icon = document.getElementById('Home_2');
|
|
const Logou_texts = document.getElementById('EncerrarSessao_1');
|
|
const Logou_icon = document.getElementById('EncerrarSessao_2');
|
|
const PainelMoniIcon = document.getElementById('sub_entrada_moni_1');
|
|
const PainelMoniButton = document.getElementById('sub_entrada_moni_2');
|
|
|
|
|
|
// Adiciona eventos para alternar entre as telas cada resposta para o função carregar tela inicia um evento definido mais afrente
|
|
Config_texts.addEventListener('click', () => carregarTela('config'));
|
|
Config_icon.addEventListener('click', () => carregarTela('config'));
|
|
Home_texts.addEventListener('click', () => carregarTela('home'));
|
|
Home_icon.addEventListener('click', () => carregarTela('home'));
|
|
PainelMoniButton.addEventListener('click', () => carregarTela('moni'));
|
|
PainelMoniIcon.addEventListener('click', () => carregarTela('moni'));
|
|
|
|
// Evento de logout
|
|
Logou_texts.addEventListener('click', EncerrarSessaAm);
|
|
Logou_icon.addEventListener('click', EncerrarSessaAm);
|
|
|
|
function EncerrarSessaAm() {
|
|
localStorage.removeItem('x-access-token');
|
|
window.location.href = "./login.html";
|
|
}
|
|
}
|
|
|
|
// Função responsavel por inicializar cada uma das telas do sistema apartir do evento condicional
|
|
async function carregarTela(tela) {
|
|
|
|
|
|
//Alinhamento da inserção estrutural inicial para ser usada dentro da tela de visualização
|
|
const telaVisualizacao = document.getElementById('TelaVisualizacao');
|
|
telaVisualizacao.innerHTML = EstrutraPrimaria();
|
|
|
|
// Função que insere base estrutura de visualização, levantando a subEntrada_1 ser a estrutura para a tela de carregamento, enquanto subEntrada_2 é a estrutura que aparesenta toda a tela respectiva.
|
|
function EstrutraPrimaria() {
|
|
return `
|
|
<div id="subEntrada_1" ></div>
|
|
<div id="subEntrada_2" ></div>
|
|
`;
|
|
}
|
|
// Inicializa a função de TeladeCarregamento
|
|
TeladeCarregamento();
|
|
|
|
|
|
// Função responsavel por apresentar a tela de carregamento
|
|
function TeladeCarregamento() {
|
|
// Conexão com a subentrada_1
|
|
const Subentrada1 = document.getElementById('subEntrada_1');
|
|
// Inicialização de carregamento da função InciandoCarregamento
|
|
InciandoCarregamento();
|
|
|
|
// Inserção da estrutura de carregamento
|
|
function InciandoCarregamento() {
|
|
|
|
Subentrada1.innerHTML = estruraAnimiada();
|
|
|
|
//Inserção html do load
|
|
function estruraAnimiada() {
|
|
return `
|
|
<div id="Painel_loading" class="Painel_loading">
|
|
<div class="loading">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
|
|
}
|
|
|
|
// Inicializa a função de FinalizandoCarregamento
|
|
FinalizandoCarregamento();
|
|
|
|
}
|
|
|
|
// Essa realiza o processo de finalização da tela de carregamento
|
|
function FinalizandoCarregamento() {
|
|
|
|
//Aplica intevalo de verificações para capitar se foi incluido carregou dentro de localstorage, uma vez encotrado um if busca a resposta para validar se ele é true, ele executa o if.
|
|
const interval = setInterval(() => {
|
|
const Subtela_laod = document.getElementById('subEntrada_1');
|
|
const SubPaine_load = document.getElementById('Painel_loading')
|
|
const Subcarregou_Moni = localStorage.getItem('Carregou_tela_Moni');
|
|
const Subcarregou_Home = localStorage.getItem('Carregou_tela_Home');
|
|
|
|
// primeiro caso desenvolvido para capitar a conclusão de carregamento da tela de monitoramento
|
|
if (SubPaine_load && Subtela_laod) { // Verifica se os elementos existem
|
|
if (Subcarregou_Moni === 'true') {
|
|
SubPaine_load.style.opacity = "0";
|
|
|
|
// Aplica um delei no carregamento para para deixar a a animação suave
|
|
setTimeout(() => {
|
|
Subtela_laod.innerHTML = ''; // Limpa o conteúdo do elemento do load
|
|
localStorage.removeItem('Carregou_tela_Moni'); // Remove o item do localStorage
|
|
clearInterval(interval); // Para de verificar
|
|
}, 1000);
|
|
}
|
|
} else {
|
|
clearInterval(interval); // Para de verificar se os elementos não existem
|
|
}
|
|
|
|
// Aplica um delei no carregamento para para deixar a a animação suave
|
|
if (SubPaine_load && Subtela_laod) { // Verifica se os elementos existem
|
|
if (Subcarregou_Home === 'true') {
|
|
SubPaine_load.style.opacity = "0";
|
|
|
|
setTimeout(() => {
|
|
Subtela_laod.innerHTML = ''; // Limpa o conteúdo do elemento do load
|
|
localStorage.removeItem('Carregou_tela_Home'); // Remove o item do localStorage
|
|
clearInterval(interval); // Para de verificar
|
|
}, 1000);
|
|
}
|
|
} else {
|
|
clearInterval(interval); // Para de verificar se os elementos não existem
|
|
}
|
|
}, 3500); // Verifica a cada 500ms
|
|
}
|
|
|
|
|
|
}
|
|
|
|
// Conexão com a segunda estrutura
|
|
const Subentrada2 = document.getElementById('subEntrada_2');
|
|
|
|
//Data como o formulario que cada tela precisa possuir para ser incializada, script de html, script de função e mensagem.
|
|
const scriptPaths = {
|
|
|
|
//Alinhamento das telas por datas, aqui são organizadas das possiveis respostas de cada botão e os caminhos scripts cada uma delas necessita para o seu funcionamento.
|
|
home: {
|
|
func: './js/page/Modulo_Construcao/Funcao/Home/Func_Home.js',
|
|
html: './js/page/Modulo_Construcao/Painel/Home/Html_Home.js',
|
|
mensagem: 'Carregando ...',
|
|
},
|
|
moni: {
|
|
func: './js/page/Modulo_Construcao/Funcao/Monitoramento/Func_Moni.js',
|
|
html: './js/page/Modulo_Construcao/Painel/Monitoramento/Html_Moni.js',
|
|
mensagem: 'Carregando ...',
|
|
},
|
|
config: {
|
|
func: './js/page/Modulo_Construcao/Funcao/Config/Estrutura/config.js',
|
|
html: './js/page/Modulo_Construcao/Painel/Config/Estrutura/Estrutura_Config_Html.js',
|
|
mensagem: 'Carregando ...',
|
|
},
|
|
};
|
|
|
|
if (!scriptPaths[tela]) {
|
|
console.error('Tela inválida:', tela);
|
|
return;
|
|
}
|
|
|
|
// Remove scripts antigos antes de adicionar novos
|
|
document.querySelectorAll('script[data-dinamico]').forEach(script => script.remove());
|
|
|
|
try {
|
|
// Aguarda o carregamento dos dois scripts
|
|
await Promise.all([
|
|
carregarScript(scriptPaths[tela].html),
|
|
carregarScript(scriptPaths[tela].func),
|
|
|
|
]);
|
|
|
|
// Aplicação de if realizam a modificação da mensagem de cada condicional para a estrutura de seu html respectivo.
|
|
|
|
// Estrutura html do home
|
|
if (tela === 'home' && typeof estruturaHtml_Home === 'function') {
|
|
scriptPaths[tela].mensagem = estruturaHtml_Home();
|
|
|
|
const Tela_homelink = document.getElementById('conexao_tela');
|
|
Tela_homelink.href = "./Css/page/Ambiente/Home/root_Home.css";
|
|
|
|
}
|
|
|
|
// Estrutura html de monitoramento
|
|
if (tela === 'moni' && typeof estruturaHtml_Home === 'function') {
|
|
scriptPaths[tela].mensagem = estruturaHtml_Moni();
|
|
|
|
const Tela_homelink = document.getElementById('conexao_tela');
|
|
Tela_homelink.href = "./Css/page/Ambiente/Monitoramento/Monitor.css";
|
|
|
|
}
|
|
|
|
// Estrutura html de configuração
|
|
if (tela === 'config' && typeof estruturaHtml_Home === 'function') {
|
|
|
|
const novatela = document.getElementById('entrada_2')
|
|
const antigatela = document.getElementById('entrada_1')
|
|
Carregar_Configuracoes();
|
|
localStorage.setItem('Iniciar_Config', 'true')
|
|
|
|
function Carregar_Configuracoes() {
|
|
|
|
InciandoCarregamento_Config();
|
|
|
|
function InciandoCarregamento_Config() {
|
|
|
|
antigatela.innerHTML = estruraAnimiadaConfig();
|
|
|
|
function estruraAnimiadaConfig() {
|
|
return `
|
|
<div id="Painel_loading" class="Painel_loadingConfig">
|
|
<div class="loading">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
FinalizandoCarregamento_Config();
|
|
}
|
|
|
|
function FinalizandoCarregamento_Config() {
|
|
|
|
//Aplica intevalo de verificações para capitar se foi incluido carregou dentro de localstorage, uma vez encotrado um if busca a resposta para validar se ele é true, ele executa o if.
|
|
const intervalConfig = setInterval(() => {
|
|
const Subtela_laodConfig = document.getElementById('entrada_1');
|
|
const SubPaine_loadConfig = document.getElementById('Painel_loading')
|
|
const SubcarregouConfig = localStorage.getItem('Carregou_tela_config');
|
|
|
|
if (SubcarregouConfig === 'true') {
|
|
SubPaine_loadConfig.style.opacity = "0";
|
|
|
|
setTimeout(() => {
|
|
Subtela_laodConfig.innerHTML = ''; // Limpa o conteúdo do elemento do load
|
|
localStorage.removeItem('Carregou_tela_config'); // Remove o item do localStorage
|
|
clearInterval(intervalConfig); // Para de verificar
|
|
}, 500);
|
|
|
|
}
|
|
}, 1500); // Verifica a cada 500ms
|
|
}
|
|
|
|
|
|
}
|
|
|
|
novatela.innerHTML = estruturaHtml_Config();
|
|
|
|
|
|
// Remove os scripts específicos, se existirem
|
|
const scriptFunc = document.getElementById('Ambiente_func');
|
|
const scriptHtml = document.getElementById('Ambiente_Html');
|
|
|
|
|
|
if (scriptFunc) {
|
|
scriptFunc.remove(); // Remove o script 'func'
|
|
//console.log('Script Ambiente_func removido');
|
|
}
|
|
|
|
if (scriptHtml) {
|
|
scriptHtml.remove(); // Remove o script 'html'
|
|
//console.log('Script Ambiente_Html removido');
|
|
}
|
|
|
|
//console.log('estrutura')
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
Subentrada2.innerHTML = scriptPaths[tela].mensagem;
|
|
//console.log(`Tela ${tela} carregada com sucesso!`);
|
|
} catch (error) {
|
|
console.error('Erro ao carregar os scripts:', error);
|
|
}
|
|
}
|
|
|
|
// função que carreca os scripts dentro do html
|
|
function carregarScript(src) {
|
|
return new Promise((resolve, reject) => {
|
|
const script = document.createElement('script');
|
|
script.src = src;
|
|
script.dataset.dinamico = true; // Marca como script dinâmico
|
|
script.onload = () => resolve();
|
|
script.onerror = () => reject(new Error(`Erro ao carregar o script ${src}`));
|
|
document.body.appendChild(script);
|
|
});
|
|
}
|
|
|
|
|
|
// Carrega a tela 'home' automaticamente ao iniciar
|
|
carregarTela('home');
|
|
|
|
const TElaConfig_new = localStorage.getItem('Carregou_tela_config_New');
|
|
if (TElaConfig_new === "true") {
|
|
console.log('home');
|
|
localStorage.setItem('Carregou_Novamente', 'true');
|
|
localStorage.removeItem('Carregou_tela_config_New'); // Remove o item do localStorage
|
|
}
|
|
|
|
// Controlador de visualização sobre as opições que existem dentro do ambiente do usuário
|
|
function ControladorDeVisualizacao(InfoGeral) {
|
|
|
|
if (InfoGeral.Empresa == "itguys.com.br") {
|
|
const PainelMoniIcon = document.getElementById('sub_entrada_Zammad_1');
|
|
const PainelMoniButton = document.getElementById('sub_entrada_Zammad_2');
|
|
|
|
|
|
PainelMoniButton.innerHTML = `
|
|
<a href="https://zammad.itguys.com.br/" class="filheira_a" target="black_">
|
|
|
|
<div class="filheira">
|
|
|
|
<h2>Zammad</h2>
|
|
|
|
</div>
|
|
|
|
</a>`;
|
|
PainelMoniIcon.innerHTML = `
|
|
<div class="filheira">
|
|
<img class="img" src="./Acessts/Imagens/Iconis/Zammad_logo.png" alt="">
|
|
</div>
|
|
`;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
}
|