testes/js/padrao_A1.js

579 lines
25 KiB
JavaScript

// Função para obter a URL base da API
async function getApiUrl() {
try {
const response = await fetch('../../../Sites/Site_ItGuys/php/config_url.php'); // Solicita a URL base do PHP
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
return data.apiUrl; // Retorna a URL base
} catch (error) {
console.error('Error fetching API URL:', error);
throw error;
}
}
// Função para obter o token do localStorage
function getAuthToken() {
return localStorage.getItem('x-access-token');
}
// Função para carregar uma imagem protegida com token JWT e exibi-la
// Função para carregar e exibir as imagens protegidas
async function criarBlocos() {
try {
const apiUrl = await getApiUrl(); // Obtém a URL da API a partir do PHP
const token = getAuthToken(); // Obtém o token JWT do localStorage
// Faz uma requisição para obter os dados da rota /mounting
const response = await fetch(`${apiUrl}/mounting`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'x-access-token': token ? token : ''
}
});
if (!response.ok) {
throw new Error('Erro na requisição: ' + response.statusText);
}
const data = await response.json();
// Agora acessa as propriedades do objeto
const Usuário = data.usuario.nome.substring(0, 11); // Limita a 10 caracteres;
const Empresa = data.empresa.nome;
const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
const logoEmpresa = `${apiUrl}${data.empresa.logo}`;
const imagemFun = 'ola';
// Exibe as imagens protegidas usando os URLs retornados pela API
loadImage(ImagemUser, 'profileImage');
loadImage(ImagemUser2, 'profileImage2'); // Imagem de perfil do usuário
loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
// Acessando o primeiro objeto do array retornado
console.log(data);
console.log(Usuário);
console.log(Empresa);
console.log(ImagemUser);
console.log(logoEmpresa);
//var visuMonitor = usuarioInfo.Permissoes_Monitor;
//constante que controla o estilo css que está estilizando todo o ambiente do usuário.
const estilos = document.getElementById('conexao');
estilos.href = './Css/global/Estrutura.css';
const fundouser = document.getElementById('fundouser');
fundouser.innerHTML =
'.Corpo_1 .Colunas_1 {'
+
'display: flex;'
+
'flex-direction: row;'
+
'background-image:' + imagemFun + ';'
+
'background-position: center;'
+
'background-size: cover;'
+
'width: 15vw;'
+
'height: 10vh;'
+
'overflow: hidden;'
+
'transition: 1s ease;'
;
const construtor_primario = document.getElementById('entrada_1');
construtor_primario.innerHTML =
'<section class="menu">'
+
'<header class="cabecario_1">'
+
'<div class="Bloco_subcab1_1"><img id="companyLogo" alt="" class="icon_subcab1_1"></div>'
+
'<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
+
'</header>'
+
'</section>'
+
'<main class="matriz">'
+
'<section class="capitulo_1">'
+
'<div class="Corpo_1">'
+
'<div class="Colunas_1">'
+
'<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
+
'<div class="seguimentos_2">'
+
'<div class="user_1">'
+
'<img id="profileImage" alt="" class="icon_subcab2_2">'
+
'<img id="profileImage2" alt="" class="icon_subcab2_1">'
+
'</div>'
+
'<div class="user_2"><p> <div id="User">' + Usuário + '</div><div id="Empresa">' + Empresa + '</div></p></div>'
+
'</div>'
+
'</div>'
+
'<div class="Colunas_2">'
+
'<div class="seguimentos_1"></div>'
+
'<div class="seguimentos_2"><div class="sessao_1"><a href="./Home.html" target="frame">'
+
'<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
+
'<section class="forg">'
+
//Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
'<div id="sub_entrada"></div>'
+
'</section>'
+
'<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
+
'</div>'
+
'<div class="sessao_2">'
+
'<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
+
'<a href="./Config.html" ><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
+
' </div>'
+
'</section>'
+
'<section class="capitulo_2">'
+
'<div class="Corpo_2">'
+
'<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "./Home.html"frameborder = "0" ></iframe ></div>'
+
'</div>'
+
'</main>'
;
//Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.
//construtor da reação do menu sobre as interações do usuário
const script1 = document.createElement('script');
script1.src = './js/Ambiente/Estrutura/Reacao_menu.js';
document.body.appendChild(script1);
} catch (error) {
console.error('Erro ao criar blocos:', error);
document.getElementById('result').innerText = 'Erro ao carregar dados: ' + error.message;
}
}
// Função para carregar uma imagem protegida com token JWT e exibi-la
async function loadImage(url, imgElementId) {
try {
const token = getAuthToken();
console.log('Token:', token); // Verifica o token
console.log('URL da imagem:', url); // Verifica a URL
const response = await fetch(url, {
method: 'GET',
headers: {
'x-access-token': token ? token : ''
}
});
if (!response.ok) {
throw new Error('Erro ao carregar a imagem: ' + response.statusText);
}
const blob = await response.blob();
const imageUrl = URL.createObjectURL(blob);
document.getElementById(imgElementId).src = imageUrl;
} catch (error) {
console.error('Erro ao carregar a imagem:', error);
console.log('ID do elemento:', imgElementId); // Verifica o ID do elemento
}
}
// Inicia o carregamento das imagens quando o script for carregado
document.addEventListener('DOMContentLoaded', criarBlocos);
/*
async function criarBlocos() {
try {
const apiUrl = await getApiUrl();
const token = getAuthToken();
const response = await fetch(`${apiUrl}/mounting`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'x-access-token': token ? token : ''
}
});
if (!response.ok) {
throw new Error('Failed to fetch block data');
}
const dadosDosBlocos = await response.json();
//construtor da sub camada de construção, alinhada sobre a condicional onde se a pessoa possui permisão para visualizar o monitoramente de sua empresa, visuMonitor será igual á true, enquanto se ela não tiver permissão para visualizar o visuMonitor será igual á false
if (visuMonitor == true) {
const script2 = document.createElement('script');
script2.src = '../js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
document.body.appendChild(script2);
};
// Limpar o container de blocos
/*
const entrada_1 = document.getElementById('entrada_1');
entrada_1.innerHTML = '';
// Iterar sobre o array de dados dos blocos
dadosDosBlocos.forEach(dadosDoBloco => {
const Painel = document.createElement('section'); // Responsavel por trazer todos os lementos da tela.
const cab = document.createElement('section');
cab.classList.add('menu');//Responsavel por trazer todo o cabeçario para a tela
const Matriz = document.createElement('main');
Matriz.classList.add('matriz');//Responsavel por trazer o menu e a tela do iframe.
//Cabeçalho
const sucab = document.createElement('header');
sucab.classList.add('cabecario_1');
//Bloco reponsavel pela imagem de logo da itguys
const bloco_subcab1_1 = document.createElement('div');//cria a tag div na página
bloco_subcab1_1.classList.add('Bloco_subcab1_1');//Define a classe do Bloco_subcab1_1, para a constante Bloco_subcab1_1.
const img_cab = document.createElement('img');//Cria a tag img na página
img_cab.classList.add('icon_subcab1_1');//Define a classe do icon_subcab1_1, para a constante img_cab.
img_cab.src = dadosDoBloco.imagem_Cab;//Cria o src para a tag img, e capita a informação registradas no dadosDoBlco no registro imagem_cab.
img_cab.alt = '';//Cria uma alt sem nenhuma definição para a tag img.
bloco_subcab1_1.appendChild(img_cab);//Define o img_cap como objeto filho do bloco_subcab1_1, logo a tag img estara dentor da div bloco_suvcab1_1.
const bloco_subcab1_2 = document.createElement('div');//cria a tag div na página
bloco_subcab1_2.classList.add('Bloco_subcab1_2');//Define a classe do bloco_subcab1_2, para a constante Bloco_subcab1_2.
const bloco_a_cab = document.createElement('a');//Criação da tag a na página.
bloco_a_cab.href = dadosDoBloco.A_cab;//Criação do href para a tag a, e capita a informação registradas no dadosDoBlco no registro A_cab.
bloco_subcab1_2.appendChild(bloco_a_cab);//Define o bloco_a_cab como objeto filho do bloco_subcab1_2, logo a tag a estara dentor da div bloco_subcab1_2.
const bloco_button_cab = document.createElement('button');//cria a tag button na página.
bloco_button_cab.id = "logoutButton";
bloco_button_cab.textContent = dadosDoBloco.button_Cab;// Define um texto para o button.
bloco_a_cab.appendChild(bloco_button_cab);//Define o bloco_button_cab como objeto filho do bloco_a_cab,logo a tag button estara dentor da div bloco_a_cab.
//Matriz
const capitulo_1 = document.createElement('section');//Cria uma tag section na página.
capitulo_1.classList.add('capitulo_1');//adicina diretamente a classe capitulo_1, section recem criada.
const Corpo_1 = document.createElement('section');//Cria uma tag section na página.
Corpo_1.classList.add('Corpo_1');//adicina diretamente a classe corpo_1, section recem criada.
const Coluna_1 = document.createElement('div');//Cria uma tag div na página.
Coluna_1.classList.add('Colunas_1');//adicina diretamente a classe Colunas_1, div recem criada.
//Menu Lateral
//Painel personalizavel do usuario
const seguimento_1 = document.createElement('div');// Cria uma tag div na página.
seguimento_1.classList.add('seguimentos_1'); // adiciona diretamente a classe seguimentos_1 na div recem criada
Coluna_1.appendChild(seguimento_1); // define a div seguimento_1 como objeto filo da Coluna_1, log a tag div estara dentro da div Coluna_1
const seguimento_1_button = document.createElement('button');
seguimento_1.appendChild(seguimento_1_button);
const seguimento_1_img = document.createElement('img');
seguimento_1_img.id = "menu";
seguimento_1_img.src = dadosDoBloco.imagem_segumento_1;
seguimento_1_img.alt = "";
seguimento_1_button.appendChild(seguimento_1_img);
const seguimento_2 = document.createElement('div');
seguimento_2.classList.add('seguimentos_2');
Coluna_1.appendChild(seguimento_2);
const user_1 = document.createElement('div');
user_1.classList.add('user_1');
seguimento_2.appendChild(user_1);
const seguimento_2_img_1_user_1 = document.createElement('img');
seguimento_2_img_1_user_1.classList.add('icon_subcab2_2');
seguimento_2_img_1_user_1.src = dadosDoBloco.imagem_User_1_segumento_2;
seguimento_2_img_1_user_1.alt = "";
user_1.appendChild(seguimento_2_img_1_user_1);
const seguimento_2_img_2_user_1 = document.createElement('img');
seguimento_2_img_2_user_1.classList.add('icon_subcab2_1');
seguimento_2_img_2_user_1.src = dadosDoBloco.imagem_User_2_segumento_2;
seguimento_2_img_2_user_1.alt = "";
user_1.appendChild(seguimento_2_img_2_user_1);
const user_2 = document.createElement('div');
user_2.classList.add('user_2');
seguimento_2.appendChild(user_2);
const identidade = document.createElement('p');
user_2.appendChild(identidade);
const User = document.createElement('div');
User.id = "User";
User.classList.add('user_2');
User.textContent = dadosDoBloco.texto_User_segumento_2;
identidade.appendChild(User);
const Empresa = document.createElement('div');
Empresa.id = "Empresa";
Empresa.textContent = dadosDoBloco.texto_Empresa_segumento_2;
user_2.classList.add('user_2');
identidade.appendChild(Empresa);
const Coluna_2 = document.createElement('div');
Coluna_2.classList.add('Colunas_2');
const seguimento_1_colun_2 = document.createElement('div');
seguimento_1_colun_2.classList.add('seguimentos_1');
Coluna_2.appendChild(seguimento_1_colun_2);
const seguimento_2_colun_2 = document.createElement('div');
seguimento_2_colun_2.classList.add('seguimentos_2');
Coluna_2.appendChild(seguimento_2_colun_2);
//Sessão de Cima
const sessao1 = document.createElement('div');
sessao1.classList.add('sessao_1');
seguimento_2_colun_2.appendChild(sessao1);
//Home
const sessao1_a_1 = document.createElement('a');
sessao1_a_1.href = dadosDoBloco.Menu_home_a;
sessao1_a_1.target = 'frame';
sessao1.appendChild(sessao1_a_1);
const sessao1_a_1_item_menu = document.createElement('div');
sessao1_a_1_item_menu.classList.add('item_menu');
sessao1_a_1.appendChild(sessao1_a_1_item_menu);
const sessao1_a_1_item_menu_img = document.createElement('img');
sessao1_a_1_item_menu_img.src = dadosDoBloco.Menu_home_img;
sessao1_a_1_item_menu_img.alt = "";
sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_img);
const sessao1_a_1_item_menu_text = document.createElement('p');
sessao1_a_1_item_menu_text.textContent = dadosDoBloco.Menu_home_text;
sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_text);
//SevicDesck
const sessao1_a_2 = document.createElement('a');
sessao1_a_2.href = dadosDoBloco.Menu_Servicedesk_a;
sessao1.appendChild(sessao1_a_2);
const sessao1_a_2_item_menu = document.createElement('div');
sessao1_a_2_item_menu.classList.add('item_menu');
sessao1_a_2.appendChild(sessao1_a_2_item_menu);
const sessao1_a_2_item_menu_img = document.createElement('img');
sessao1_a_2_item_menu_img.src = dadosDoBloco.Menu_Servicedesk_img;
sessao1_a_2_item_menu_img.alt = "";
sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_img);
const sessao1_a_2_item_menu_text = document.createElement('p');
sessao1_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Servicedesk_text;
sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_text);
//Monitoramento
const sessao1_a_3 = document.createElement('a');
sessao1_a_3.href = dadosDoBloco.Menu_Monitor_a;
sessao1_a_3.target = 'frame';
sessao1.appendChild(sessao1_a_3);
const sessao1_a_3_item_menu = document.createElement('div');
sessao1_a_3_item_menu.classList.add('item_menu');
sessao1_a_3.appendChild(sessao1_a_3_item_menu);
const sessao1_a_3_item_menu_img = document.createElement('img');
sessao1_a_3_item_menu_img.src = dadosDoBloco.Menu_Monitor_img;
sessao1_a_3_item_menu_img.alt = "";
sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_img);
const sessao1_a_3_item_menu_text = document.createElement('p');
sessao1_a_3_item_menu_text.textContent = dadosDoBloco.Menu_Monitor_text;
sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_text);
//Sessão de baixo
const sessao2 = document.createElement('div');
sessao2.classList.add('sessao_2');
seguimento_2_colun_2.appendChild(sessao2);
//Suporte
const sessao2_a_1 = document.createElement('a');
sessao2_a_1.href = dadosDoBloco.Menu_Suporte_a;
sessao2.appendChild(sessao2_a_1);
const sessao2_a_1_item_menu = document.createElement('div');
sessao2_a_1_item_menu.classList.add('item_menu');
sessao2_a_1.appendChild(sessao2_a_1_item_menu);
const sessao2_a_1_item_menu_img = document.createElement('img');
sessao2_a_1_item_menu_img.src = dadosDoBloco.Menu_Suporte_img;
sessao2_a_1_item_menu_img.alt = "";
sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_img);
const sessao2_a_1_item_menu_text = document.createElement('p');
sessao2_a_1_item_menu_text.textContent = dadosDoBloco.Menu_Suporte_text;
sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_text);
//Configuração
const sessao2_a_2 = document.createElement('a');
sessao2_a_2.href = dadosDoBloco.Menu_Config_a;
sessao2_a_2.target = 'frame';
sessao2.appendChild(sessao2_a_2);
const sessao2_a_2_item_menu = document.createElement('div');
sessao2_a_2_item_menu.classList.add('item_menu');
sessao2_a_2.appendChild(sessao2_a_2_item_menu);
const sessao2_a_2_item_menu_img = document.createElement('img');
sessao2_a_2_item_menu_img.src = dadosDoBloco.Menu_Config_img;
sessao2_a_2_item_menu_img.alt = "";
sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_img);
const sessao2_a_2_item_menu_text = document.createElement('p');
sessao2_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Config_text;
sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_text);
//capitulo 2
const capitulo_2 = document.createElement('section');
capitulo_2.classList.add('capitulo_2');
const Corpo_2 = document.createElement('section');
Corpo_2.classList.add('Corpo_2');
const Corpo_2_Coluna_1 = document.createElement('div');
Corpo_2_Coluna_1.classList.add('Colunas_1');
const Tela = document.createElement('iframe');
Tela.classList.add('transmissão');
Tela.src = dadosDoBloco.Tela;
Tela.name = 'frame';
Corpo_2_Coluna_1.appendChild(Tela);
// Adicionar o painel ao bloco
Painel.appendChild(cab);
Painel.appendChild(Matriz);
cab.appendChild(sucab);
sucab.appendChild(bloco_subcab1_1);
sucab.appendChild(bloco_subcab1_2);
Matriz.appendChild(capitulo_1);
capitulo_1.appendChild(Corpo_1);
Corpo_1.appendChild(Coluna_1);
Corpo_1.appendChild(Coluna_2);
Matriz.appendChild(capitulo_2);
capitulo_2.appendChild(Corpo_2);
Corpo_2.appendChild(Corpo_2_Coluna_1);
// Adicionar o bloco ao container de blocos
entrada_1.appendChild(Painel);
});
// Todas as funcionalidades que precisam da pagina construida precisam estar dentro de uma função e serem chamadas aqui.
espasao();
// Event listener para o botão de logout
const logoutButton = document.getElementById('logoutButton');
if (logoutButton) {
logoutButton.addEventListener('click', function () {
// Limpar o token do localStorage ao clicar no botão de logout
clearAuthToken();
// Redirecionar para a página de login ou qualquer outra página desejada após o logout
window.location.href = '../login.html';
});
}
} catch (error) {
console.error('Erro ao criar blocos:', error);
}
// Chama a função para criar os blocos ao carregar a página
document.addEventListener('DOMContentLoaded', criarBlocos);
function espasao() {
var botao = document.querySelector('#menu')
var cabecario = document.querySelector('.cabecario_1')
var tela = document.querySelector('.transmissão')
var menu = document.querySelector('.capitulo_1')
var temas = document.querySelectorAll('.item_menu')
botao.addEventListener('click', function () {
menu.classList.toggle('expansao');
cabecario.classList.toggle('expansao');
tela.classList.toggle('expansao');
});
function selectLink() {
temas.forEach((item) =>
item.classList.remove('ativo')
)
this.classList.add('ativo')
}
temas.forEach((item) =>
item.addEventListener('click', selectLink))
}
*/