From 2b2bc01b1cf9574a5cd25887cab6c6ce30132fbb Mon Sep 17 00:00:00 2001 From: "daivid.alves" Date: Tue, 8 Oct 2024 18:01:32 -0300 Subject: [PATCH] =?UTF-8?q?Atualiza=C3=A7=C3=A3o=207=20-=20integra=C3=A7?= =?UTF-8?q?=C3=A3o=20de=20comunca=C3=A7=C3=A3o=20com=20o=20sevidor?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Ambiente_Usuario_copy.html | 2 - html/tes.html | 41 +++++++++++++ js/padrao_A1.js | 123 +++++++++++++++++++++++++++++-------- js/tes.js | 83 +++++++++++++++++++++++++ 4 files changed, 223 insertions(+), 26 deletions(-) create mode 100644 html/tes.html create mode 100644 js/tes.js diff --git a/Ambiente_Usuario_copy.html b/Ambiente_Usuario_copy.html index f61b08b..b55b5d9 100644 --- a/Ambiente_Usuario_copy.html +++ b/Ambiente_Usuario_copy.html @@ -25,8 +25,6 @@ - - diff --git a/html/tes.html b/html/tes.html new file mode 100644 index 0000000..c1e2a64 --- /dev/null +++ b/html/tes.html @@ -0,0 +1,41 @@ + + + + + + Exibir Imagens Protegidas + + + +

Imagens Protegidas com Fundo Preto

+ + +
+ Imagem de Perfil + +
+ +
+ + + + diff --git a/js/padrao_A1.js b/js/padrao_A1.js index db07a58..11b1b7d 100644 --- a/js/padrao_A1.js +++ b/js/padrao_A1.js @@ -1,4 +1,4 @@ -// Função para obter a URL base do servidor +// 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 @@ -18,13 +18,15 @@ 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(); - const token = getAuthToken(); + 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: { @@ -34,27 +36,36 @@ async function criarBlocos() { }); if (!response.ok) { - throw new Error('Failed to fetch block data'); + throw new Error('Erro na requisição: ' + response.statusText); + } - const dadosDosBlocos = await response.json(); - - // Acessando o primeiro objeto do array retornado - const usuarioInfo = dadosDosBlocos[0]; // Acessa o primeiro item do array + const data = await response.json(); // Agora acessa as propriedades do objeto - const Usuário = usuarioInfo.usuario; - const Empresa = usuarioInfo.empresa; - const ImagemUser = usuarioInfo.imagemUser; - const imagemFun = `url(${usuarioInfo.imagemFun})`; + 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'; - console.log(usuarioInfo); + + // 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(imagemFun); + console.log(logoEmpresa); - var visuMonitor = usuarioInfo.Permissoes_Monitor; + + //var visuMonitor = usuarioInfo.Permissoes_Monitor; //constante que controla o estilo css que está estilizando todo o ambiente do usuário. @@ -93,7 +104,7 @@ async function criarBlocos() { + '
' + - '
' + '
' + '
' + @@ -115,9 +126,9 @@ async function criarBlocos() { + '
' + - '' + '' + - '' + '' + '
' + @@ -171,9 +182,73 @@ async function criarBlocos() { //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'; + 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'); @@ -457,16 +532,16 @@ async function criarBlocos() { window.location.href = '../login.html'; }); } - */ + } catch (error) { - console.error('Erro ao criar blocos:', 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); @@ -500,4 +575,4 @@ function espasao() { item.addEventListener('click', selectLink)) } - +*/ diff --git a/js/tes.js b/js/tes.js new file mode 100644 index 0000000..28400a1 --- /dev/null +++ b/js/tes.js @@ -0,0 +1,83 @@ +// Função para obter a URL base da API +async function getApiUrl() { + try { + const response = await fetch('../../../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 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(); + + // Usar a URL da API para acessar as imagens protegidas + const profileImageUrl = `${apiUrl}${data.usuario.img_perfil}`; + const companyLogoUrl = `${apiUrl}${data.empresa.logo}`; + + // Exibe as imagens protegidas usando os URLs retornados pela API + loadImage(profileImageUrl, 'profileImage'); // Imagem de perfil do usuário + loadImage(companyLogoUrl, 'companyLogo'); // Logo da empresa + + } 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) + const response = await fetch(url, { + method: 'GET', + headers: { + 'x-access-token': token // Se o backend usa um cabeçalho customizado + } + }); + + if (!response.ok) { + throw new Error('Erro ao carregar a imagem: ' + response.statusText); + } + + const blob = await response.blob(); // Converte a resposta para um blob + const imageUrl = URL.createObjectURL(blob); // Cria uma URL temporária para a imagem + + // Define a URL da imagem no elemento correspondente + document.getElementById(imgElementId).src = imageUrl; + } catch (error) { + console.error('Erro ao carregar a imagem:', error); + } +} + +// Inicia o carregamento das imagens quando o script for carregado +document.addEventListener('DOMContentLoaded', criarBlocos);