247 lines
8.6 KiB
JavaScript
247 lines
8.6 KiB
JavaScript
//Evento que esepra, todos os elementos htmls foram construidos na tela para disparar a função
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
insercaoFunc_Total();
|
|
});
|
|
|
|
//Função responsavel por inserir o script de load dentro dá página html
|
|
function insercaoFunc_Total() {
|
|
// Script de carregamento
|
|
const script_Load = document.createElement('script');
|
|
script_Load.src = './js/page/Modulo_Construcao/Painel/Estrutura/load.js';
|
|
document.body.appendChild(script_Load);
|
|
|
|
script_Load.onload = async () => {
|
|
await verificarAmbiente(); // Chama a função somente após o script ser carregado
|
|
};
|
|
|
|
|
|
}
|
|
|
|
let usuarioData = null; // Variável para armazenar dados do usuário
|
|
//Função responsavel por montar toda á página do ambiente do usuário
|
|
async function criarBlocos() {
|
|
|
|
try {
|
|
|
|
// Se os dados já estiverem carregados, use-os diretamente
|
|
if (usuarioData) {
|
|
const { nomeCompleto, Empresa, ImagemUser, logoEmpresa } = usuarioData;
|
|
|
|
loadImage(ImagemUser, 'profileImage');
|
|
loadImage(logoEmpresa, 'companyLogo');
|
|
|
|
console.log('Usando dados armazenados');
|
|
|
|
|
|
} else {
|
|
// Conexção com o script de Comunicacao.js para se utilizar da função de autenticação com a rota mouten, para puxar a const response e apiURL
|
|
const { response, apiUrl } = await Autenticao();
|
|
|
|
//Essa constante faz um tratamento sobre a response retirando o json para armazenar nesse data
|
|
const data = await response.json();
|
|
|
|
// Armazena os dados para usos futuros
|
|
usuarioData = {
|
|
nomeCompleto: data.usuario.nome,
|
|
Empresa: data.empresa.nome,
|
|
ImagemUser: `${apiUrl}${data.usuario.img_perfil}`,
|
|
logoEmpresa: `${apiUrl}${data.empresa.logo}`
|
|
};
|
|
|
|
// Aplica as funções para carregamento das imagens, os alinhando com classe para a aplicação dentro do html.
|
|
loadImage(usuarioData.ImagemUser, 'profileImage');
|
|
loadImage(usuarioData.logoEmpresa, 'companyLogo');
|
|
|
|
console.log(usuarioData);
|
|
console.log(usuarioData.nomeCompleto);
|
|
console.log(usuarioData.Empresa);
|
|
console.log('Link da imagem de perfil -' + usuarioData.ImagemUser);
|
|
console.log('Link da Logo -' + usuarioData.logoEmpresa);
|
|
|
|
|
|
}
|
|
// Inicia a função insercaoFunc_Estrutura
|
|
await insercaoFunc_Estrutura();
|
|
|
|
// Função responsavel por construir todos os elementos sobre a tela apartir das informações recebidas pelo back end.
|
|
async function insercaoFunc_Estrutura() {
|
|
|
|
const script_Func = document.createElement('script');
|
|
script_Func.id = 'Ambiente_func';
|
|
script_Func.src = './js/page/Modulo_Construcao/Funcao/Estrutura/Estrutura.js';
|
|
|
|
const script_Html = document.createElement('script');
|
|
script_Html.id = 'Ambiente_Html';
|
|
script_Html.src = './js/page/Modulo_Construcao/Painel/Estrutura/Html_estrutura.js';
|
|
|
|
// Adiciona os scripts ao DOM e aguarda o carregamento
|
|
await Promise.all([
|
|
carregarScript(script_Func),
|
|
carregarScript(script_Html)
|
|
]);
|
|
|
|
await EstruturaEsqueleto(); // Chama a função somente após o script ser carregado
|
|
|
|
function carregarScript(script) {
|
|
return new Promise((resolve, reject) => {
|
|
script.onload = () => resolve();
|
|
script.onerror = () => reject(new Error(`Erro ao carregar o script: ${script.src}`));
|
|
document.body.appendChild(script);
|
|
});
|
|
}
|
|
|
|
async function EstruturaEsqueleto() {
|
|
//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 = InterfaceAmbiente(usuarioData.nomeCompleto, usuarioData.Empresa);
|
|
|
|
if (construtor_primario.innerHTML !== '') {
|
|
Interatividade();
|
|
ApresentarTelas(usuarioData);
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
insercaoFunc_Erro();
|
|
|
|
function insercaoFunc_Erro() {
|
|
|
|
const script_ERRO = document.createElement('script');
|
|
script_ERRO.src = './js/page/Modulo_Construcao/Funcao/Estrutura/Painel_Erro.js';
|
|
document.body.appendChild(script_ERRO);
|
|
|
|
script_ERRO.onload = async () => {
|
|
await CasodeErro(); // Chama a função somente após o script ser carregado
|
|
};
|
|
|
|
const script_ERRO_Html = document.createElement('script');
|
|
script_ERRO_Html.src = './js/page/Modulo_Construcao/Painel/Estrutura/Html_erro.js';
|
|
document.body.appendChild(script_ERRO_Html);
|
|
|
|
}
|
|
|
|
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', async () => {
|
|
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
|
|
});
|
|
|