testes/js/page/Modulo_Construcao/Funcao/Estrutura/Controlador_telas.js

// Função para carregar e exibir as imagens protegidas
document.addEventListener('DOMContentLoaded', () => {
    insercaoFunc_Total();
});

function insercaoFunc_Total() {

    const script_Load = document.createElement('script');
    script_Load.src = './js/page/Modulo_Construcao/Painel/Estrutura/load.js';
    document.body.appendChild(script_Load);


}

async function criarBlocos() {

    try {

        const { response, apiUrl } = await Autenticao(); // Recebe o objeto com response e apiUrl
        const data = await response.json(); // Faz o parse do JSON retornado

        // 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);

        await insercaoFunc_Estrutura();


        async function insercaoFunc_Estrutura() {

            const script_Func = document.createElement('script');
            script_Func.src = './js/page/Modulo_Construcao/Painel/Estrutura/Estrutura.js';
            document.body.appendChild(script_Func);

            const script_Html = document.createElement('script');
            script_Html.src = './js/page/Modulo_Construcao/Painel/Estrutura/Html_estrutura.js';
            document.body.appendChild(script_Html);

            script_Html.onload = async () => {
                await EstruturaEsqueleto(); // Chama a função somente após o script ser carregado
            };


            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(nomeCompleto, Empresa);
                Interatividade();
                ApresentarTelas();


            }

        }



    } catch (error) {

        insercaoFunc_Erro();

        function insercaoFunc_Erro() {

            const script_ERRO = document.createElement('script');
            script_ERRO.src = './js/page/Modulo_Construcao/Painel/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
});