550 lines
20 KiB
JavaScript
550 lines
20 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');
|
|
}
|
|
|
|
|
|
const Permissoes = {
|
|
visuMonitor: true,
|
|
};
|
|
|
|
|
|
// 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 nomeCompleto = data.usuario.nome; // Nome completo do usuário
|
|
|
|
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}`;
|
|
|
|
|
|
|
|
|
|
// Exibe as imagens protegidas usando os URLs retornados pela API
|
|
loadImage(ImagemUser, 'profileImage');
|
|
//loadImage(ImagemUser2, 'profileImage'); // Imagem de perfil do usuário
|
|
loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
|
|
|
|
// Acessando o primeiro objeto do array retornado
|
|
|
|
console.log(data);
|
|
console.log(nomeCompleto);
|
|
console.log(Empresa);
|
|
console.log('Link da imagem de perfil -' + ImagemUser);
|
|
console.log('Link da Logo -' + 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/page/Ambiente/Estrutura/estrutura.css';
|
|
|
|
|
|
const construtor_primario = document.getElementById('entrada_1');
|
|
|
|
//Estrutura Html que será apresentada sobre a tela
|
|
construtor_primario.innerHTML = `
|
|
<nav>
|
|
|
|
<section class="menu_lateral">
|
|
|
|
<div class="seguimentacao_1">
|
|
|
|
<div class="coluna_1">
|
|
|
|
<div class="subcolunas_1">
|
|
|
|
<div class="filheira">
|
|
|
|
<img src="./Acessts/Imagens/iT_Guys/Logo_itGuys - Copia.png" alt="">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="coluna_2">
|
|
|
|
<div class="subcolunas_1">
|
|
|
|
<div class="filheira">
|
|
|
|
<img class="img" src="./Acessts/Imagens/Iconis/home.png" alt="">
|
|
|
|
</div>
|
|
|
|
<div id="sub_entrada_moni_1"></div>
|
|
|
|
<div class="filheira">
|
|
|
|
<img class="img" src="./Acessts/Imagens/Iconis/technical-support.png" alt="">
|
|
|
|
</div>
|
|
|
|
<div class="filheira">
|
|
|
|
<img class="img" src="./Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="subcolunas_2">
|
|
|
|
<div class="filheira">
|
|
|
|
<img class="img" src="./Acessts/Imagens/Iconis/central-de-atendimento.png" alt="">
|
|
|
|
</div>
|
|
|
|
<div class="filheira">
|
|
|
|
<img class="img" src="./Acessts/Imagens/Iconis/engrenagem - Copia.png" alt="">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="seguimentacao_2">
|
|
|
|
<div class="coluna_1">
|
|
|
|
<div class="subcolunas_1">
|
|
|
|
<div class="filheira">
|
|
|
|
<img class="profileImage" alt="">
|
|
|
|
</div>
|
|
|
|
<div class="filheira">
|
|
|
|
<h2> ${nomeCompleto} </h2>
|
|
|
|
<h2> ${Empresa} </h2>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="subcolunas_2">
|
|
|
|
<button class="id_ajuste" id="id_ajuste">
|
|
|
|
<img class="imgjust" src="./Acessts/Imagens/Iconis/seta-direita.png" alt="">
|
|
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="coluna_2">
|
|
|
|
<div class="subcolunas_1">
|
|
|
|
<a href="./html/Home.html" class="filheira_a" target="frame">
|
|
|
|
<div class="filheira">
|
|
|
|
<h2>Home</h2>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<div id="sub_entrada_moni_2"></div>
|
|
|
|
<a href="https://suporte.itguys.com.br/" class="filheira_a" target="frame">
|
|
|
|
<div class="filheira">
|
|
|
|
<h2>Servicdesk</h2>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<a href="./html/projetos_itguys.html" class="filheira_a" target="frame">
|
|
|
|
<div class="filheira">
|
|
|
|
<h2>Ferramentas</h2>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="subcolunas_2">
|
|
|
|
<a href="https://api.whatsapp.com/send?phone=5521966344698" class="filheira_a" target="black_">
|
|
|
|
<div class="filheira">
|
|
|
|
<h2>Suporte</h2>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
<a href="./html/Config.html" class="filheira_a">
|
|
|
|
<div class="filheira">
|
|
|
|
<h2>Configurações</h2>
|
|
|
|
</div>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</nav>
|
|
|
|
<main class="apresentacao">
|
|
|
|
<section class="capitulo_1">
|
|
|
|
<div class="Bloco_subcab1_1">
|
|
|
|
<img class="companyLogo" alt="" class="icon_subcab1_1">
|
|
|
|
</div>
|
|
|
|
<div class="Bloco_subcab1_2">
|
|
|
|
<a href="https://dev.itguys.com.br/"><button>Logout</button></a>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<section class="capitulo_2">
|
|
|
|
<iframe id="test1" name="frame" class="transmissão" src="./html/Home.html"frameborder = "0" ></iframe >
|
|
|
|
</section>
|
|
|
|
</main>
|
|
`
|
|
const construido = true;
|
|
|
|
|
|
localStorage.setItem('construido', JSON.stringify(construido));
|
|
|
|
var botao = document.getElementById('id_ajuste');
|
|
var cabecario = document.querySelector('.capitulo_1');
|
|
var tela = document.querySelector('.capitulo_2');
|
|
var menu = document.querySelector('.menu_lateral');
|
|
|
|
if (botao) {
|
|
botao.addEventListener('click', function () {
|
|
console.log('Botão clicado!');
|
|
if (menu) menu.classList.toggle('expansao');
|
|
if (cabecario) cabecario.classList.toggle('expansao');
|
|
if (tela) tela.classList.toggle('expansao');
|
|
});
|
|
} else {
|
|
console.error('Botão não encontrado!');
|
|
}
|
|
|
|
|
|
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);
|
|
}
|
|
|
|
// Adiciona o listener de clique após a construção do HTML
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//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
|
|
|
|
} catch (error) {
|
|
|
|
|
|
//Constante de controle sobre estilos css do painel de erro.
|
|
const estilos = document.getElementById('conexao');
|
|
|
|
|
|
//variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
|
|
//o Status do erro
|
|
//Mensagem do erro
|
|
//Um mensagem complementar sobre o erro
|
|
|
|
|
|
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 : ''
|
|
}
|
|
});
|
|
|
|
const respostaserver = response.status
|
|
|
|
|
|
let Status = 'Erro 404';
|
|
let mensagem = 'Desculpe mas sua página não foi encontrada';
|
|
let sub_mensagem = 'Tente fazer seu, login novamente';
|
|
let button_info = 'Retorne';
|
|
let button_acao = '/Sites/Site_ItGuys/ambiente_do_usuário/login.html';
|
|
let estilo = './Css/page/Telas_acao/erro_404_Front.css';
|
|
|
|
|
|
|
|
if (respostaserver == 401) {
|
|
|
|
Status = 'Erro 404';
|
|
mensagem = 'Desculpe mas sua página não foi encontrada';
|
|
sub_mensagem = 'Tente fazer seu, login novamente';
|
|
button_info = 'Retorne';
|
|
button_acao = '/Sites/Site_ItGuys/ambiente_do_usuário/login.html';
|
|
estilo = './Css/page/Telas_acao/erro_404_Front.css';
|
|
|
|
}
|
|
|
|
if (respostaserver == 502) {
|
|
|
|
Status = 'Erro 404';
|
|
mensagem = 'Estamos realizando manutenções';
|
|
sub_mensagem = 'Tente fazer seu, login um outro momento';
|
|
button_info = 'Retorne';
|
|
button_acao = '/Sites/Site_ItGuys/ambiente_do_usuário/login.html';
|
|
estilo = './Css/page/Telas_acao/erro_404_Back.css';
|
|
|
|
}
|
|
|
|
|
|
if (respostaserver == 404) {
|
|
|
|
Status = 'Erro 404';
|
|
mensagem = 'Houve um problema inesperado';
|
|
sub_mensagem = 'Por favor contate o suporte suporte@itguys.com.br';
|
|
button_info = 'Nós contate';
|
|
button_acao = 'https://api.whatsapp.com/send?phone=5521966344698';
|
|
estilo = './Css/page/Telas_acao/erro_404_Front.css';
|
|
|
|
}
|
|
|
|
estilos.href = estilo;
|
|
|
|
//Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
|
|
const erro = document.getElementById('entrada_1');
|
|
|
|
erro.innerHTML = '<section class="matriz_404" id="cap">'
|
|
+
|
|
'<section class="paineis_1"><div class="cap"><h1>' + Status + '</h1></div></section>'
|
|
+
|
|
'<section class="paineis_2">'
|
|
+
|
|
'<div class="cap"><h2>' + mensagem + '</h2><p>' + sub_mensagem + '</p></div>'
|
|
+
|
|
'<div class="cap_2"><a href="' + button_acao + '"><button>' + button_info + '</button></a></div>'
|
|
+
|
|
'</section>'
|
|
+
|
|
'<div class="wave wave_1"></div>'
|
|
+
|
|
'<div class="wave wave_2"></div>'
|
|
+
|
|
'<div class="wave wave_3"></div>'
|
|
+
|
|
'<div class="wave wave_4"></div>'
|
|
+
|
|
'</section>'
|
|
;
|
|
|
|
|
|
|
|
|
|
console.error('Erro ao criar blocos:', error);
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
|
|
|
async function loadImage(url, imgElementClass) {
|
|
try {
|
|
const token = getAuthToken();
|
|
console.log('Token:', token);
|
|
console.log('URL da imagem:', 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);
|
|
|
|
// Seleciona todos os elementos com a classe
|
|
const imgElements = document.getElementsByClassName(imgElementClass);
|
|
if (imgElements.length > 0) {
|
|
for (let i = 0; i < imgElements.length; i++) {
|
|
imgElements[i].src = imageUrl;
|
|
}
|
|
} else {
|
|
console.warn('Nenhum elemento encontrado com a classe:', imgElementClass);
|
|
}
|
|
|
|
return imageUrl; // Retorna a URL da imagem carregada
|
|
} catch (error) {
|
|
console.error('Erro ao carregar a imagem:', error);
|
|
console.log('Classe do elemento:', imgElementClass);
|
|
return null; // Retorna null em caso de erro
|
|
}
|
|
}
|
|
// Função para carregar a imagem de fundo
|
|
async function loadBackgroundAndUpdateStyle() {
|
|
try {
|
|
const apiUrl = await getApiUrl();
|
|
const token = getAuthToken();
|
|
const response = await fetch(`${apiUrl}/mounting`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'x-access-token': token ? token : ''
|
|
}
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Erro ao carregar os dados: ' + response.statusText);
|
|
}
|
|
|
|
const data = await response.json();
|
|
const imagemFun = `${apiUrl}${data.usuario.img_fundo}`;
|
|
|
|
const fundoResponse = await fetch(imagemFun, {
|
|
method: 'GET',
|
|
headers: {
|
|
'x-access-token': token ? token : ''
|
|
}
|
|
});
|
|
|
|
if (!fundoResponse.ok) {
|
|
throw new Error('Erro ao carregar a imagem de fundo: ' + fundoResponse.statusText);
|
|
}
|
|
|
|
const blob = await fundoResponse.blob();
|
|
const fundoUserUrl = URL.createObjectURL(blob);
|
|
|
|
const fundouser = document.getElementById('fundouser');
|
|
fundouser.innerHTML =
|
|
'.seguimentacao_2 .coluna_1 {' +
|
|
'width: 100%;' +
|
|
'height: 30vh;' +
|
|
'display: flex;' +
|
|
'flex-direction: row;' +
|
|
'background-image: url("' + fundoUserUrl + '");' +
|
|
'background-position: center;'
|
|
'background-position: center;' +
|
|
'background-size: cover;' +
|
|
'overflow: hidden;' +
|
|
'transition: 1s ease;' +
|
|
'}';
|
|
|
|
|
|
|
|
|
|
console.log('Imagem de fundo carregada e estilo aplicado com sucesso.');
|
|
} catch (error) {
|
|
console.error('Erro ao carregar a imagem de fundo:', error);
|
|
}
|
|
}
|
|
// Aguarda o carregamento completo do DOM
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
setTimeout(async () => {
|
|
await criarBlocos();
|
|
await loadBackgroundAndUpdateStyle();
|
|
setTimeout(localStorage.setItem('Carregou', 'true'), 500) // Salva um valor no localStorage
|
|
}, 3000); // Executa as funções 3 segundos após o carregamento do DOM
|
|
});
|
|
|
|
|
|
|