teste
/
testes
Template
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

Atualização 7 - integração de comuncação com o sevidor

This commit is contained in:
daivid.alves 2024-10-08 18:01:32 -03:00
parent db642e067e
commit 2b2bc01b1c
4 changed files with 223 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Ambiente_Usuario_copy.html
View File

@ -25,8 +25,6 @@
</main> </main>
<!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela--> <!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
<script src="./js/padrao_A1.js"></script> <script src="./js/padrao_A1.js"></script>

41
html/tes.html Normal file
View File

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exibir Imagens Protegidas</title>
<style>
/* Define o fundo da página como preto */
body {
background-color: black; /* Fundo preto */
color: white; /* Texto branco para melhor contraste */
}
/* Define o fundo de um contêiner específico como preto */
#logoContainer {
background-color: black; /* Fundo preto */
padding: 20px;
text-align: center;
}
/* Adiciona algum estilo para as imagens */
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1 style="color: white;">Imagens Protegidas com Fundo Preto</h1>
<!-- Contêiner com fundo preto onde a imagem será exibida -->
<div id="logoContainer">
<img id="profileImage" alt="Imagem de Perfil" width="200px">
<img id="companyLogo" alt="Logo da Empresa" width="200px">
</div>
<div id="result"></div> <!-- Onde erros serão exibidos -->
<script src="../js/tes.js"></script> <!-- O arquivo JS é referenciado aqui -->
</body>
</html>

123
js/padrao_A1.js
View File

@ -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() { async function getApiUrl() {
try { try {
const response = await fetch('../../../Sites/Site_ItGuys/php/config_url.php'); // Solicita a URL base do PHP 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'); 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() { async function criarBlocos() {
try { try {
const apiUrl = await getApiUrl(); const apiUrl = await getApiUrl(); // Obtém a URL da API a partir do PHP
const token = getAuthToken(); 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`, { const response = await fetch(`${apiUrl}/mounting`, {
method: 'GET', method: 'GET',
headers: { headers: {
@ -34,27 +36,36 @@ async function criarBlocos() {
}); });
if (!response.ok) { 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(); const data = await response.json();
// Acessando o primeiro objeto do array retornado
const usuarioInfo = dadosDosBlocos[0]; // Acessa o primeiro item do array
// Agora acessa as propriedades do objeto // Agora acessa as propriedades do objeto
const Usuário = usuarioInfo.usuario; const Usuário = data.usuario.nome.substring(0, 11); // Limita a 10 caracteres;
const Empresa = usuarioInfo.empresa; const Empresa = data.empresa.nome;
const ImagemUser = usuarioInfo.imagemUser; const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
const imagemFun = `url(${usuarioInfo.imagemFun})`; 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(Usuário);
console.log(Empresa); console.log(Empresa);
console.log(ImagemUser); 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. //constante que controla o estilo css que está estilizando todo o ambiente do usuário.
@ -93,7 +104,7 @@ async function criarBlocos() {
+ +
'<header class="cabecario_1">' '<header class="cabecario_1">'
+ +
'<div class="Bloco_subcab1_1"><img src="../Acessts/Imagens/iT_Guys/logo_flat.png" alt="" class="icon_subcab1_1"></div>' '<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>' '<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
+ +
@ -115,9 +126,9 @@ async function criarBlocos() {
+ +
'<div class="user_1">' '<div class="user_1">'
+ +
'<img src="' + ImagemUser + '" alt="" class="icon_subcab2_2">' '<img id="profileImage" alt="" class="icon_subcab2_2">'
+ +
'<img src="' + ImagemUser + '" alt="" class="icon_subcab2_1">' '<img id="profileImage2" alt="" class="icon_subcab2_1">'
+ +
'</div>' '</div>'
+ +
@ -171,9 +182,73 @@ async function criarBlocos() {
//construtor da reação do menu sobre as interações do usuário //construtor da reação do menu sobre as interações do usuário
const script1 = document.createElement('script'); 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); 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 //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) { if (visuMonitor == true) {
const script2 = document.createElement('script'); const script2 = document.createElement('script');
@ -457,16 +532,16 @@ async function criarBlocos() {
window.location.href = '../login.html'; window.location.href = '../login.html';
}); });
} }
*/
} catch (error) { } 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 // Chama a função para criar os blocos ao carregar a página
document.addEventListener('DOMContentLoaded', criarBlocos); document.addEventListener('DOMContentLoaded', criarBlocos);
@ -500,4 +575,4 @@ function espasao() {
item.addEventListener('click', selectLink)) item.addEventListener('click', selectLink))
} }
*/

83
js/tes.js Normal file
View File

@ -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 <img> 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);