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

//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 {

        // 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, ResponseAutenticao } = 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}`
        };

        //Consoles para validar a chegada das informações, e se estão sendo usadas corretamento 
        //console.log('Data config' + usuarioData);
        //console.log(usuarioData.nomeCompleto);
        //console.log(usuarioData.Empresa);

        // Inicia a função insercaoFunc_Estrutura
        await insercaoFunc_Estrutura();

        // Função responsavel inserir scripts que construem todo o ambiente do usuário.
        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'; // Esse script é responsavel por todas as funções que o ambiente realiza de forma passiva e ativa.

            const script_Html = document.createElement('script');
            script_Html.id = 'Ambiente_Html';
            script_Html.src = './js/page/Modulo_Construcao/Painel/Estrutura/Html_estrutura.js'; // Esse script é responsavel por inserir toda estrutura html dentro do projeto


            // Adiciona pousa na leitura do codigo somente enquanto os dois scripts ainda estão sendo carregados.
            await Promise.all([
                carregarScript(script_Func),
                carregarScript(script_Html),
            ]);

            await EstruturaEsqueleto(); // Chama de cosntrução do ambiente do usuário.

            // Script responsavel por carregar todo os script dentro dá página html
            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_Estrutura = document.getElementById('conexao');
                estilos_Estrutura.href = './Css/page/Ambiente/Estrutura/estrutura.css';
                const construtor_primario = document.getElementById('entrada_1');


                // Estrutura Html que será apresentada sobre a tela, puxando as informações que foram alinhadas na consultas inicias.
                construtor_primario.innerHTML = InterfaceAmbiente(usuarioData.nomeCompleto, usuarioData.Empresa);

                // Uma condicional para iniciar as funções somente se a estrutura que está recebendo todo o esqueleto html, do ambiente do usuário esitver diferente de vazia, ou seja ser o innerhtml acima ser aplicado corretamente.
                if (construtor_primario.innerHTML !== '') {
                    // Função responsavel belo botão que reajusta todos os elementos sobre a propria tela
                    // 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');
                    await loadBackgroundAndUpdateStyle()
                    //console.log('Link da imagem de perfil -' + usuarioData.ImagemUser);
                    //console.log('Link da Logo -' + usuarioData.logoEmpresa);
                    Interatividade();
                    // Função responsavel sobre o controle da telas dentro do ambiente do usuário, responsavel por determinar qual tela será usada.
                    ApresentarTelas(usuarioData);

                }



            }

            setTimeout(localStorage.setItem('Carregou', 'true'), 500)
        }


        // Cenario de erro completo da estrutura
    } catch (error) {

        localStorage.removeItem('Carregou');

        // Inicialização da função insercaoFunc_Erro
        insercaoFunc_Erro();


        // Função similiar de inserção de scripts para o ambiente do usuário, porem nesse caso sendo para a tela de 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 responsavel por todas as funções da tela de erro

            // Apos o carregamento das funções é executada a função dos casos de erro
            script_ERRO.onload = async () => {
                await CasodeErro(); // Chama a função somente após o script ser carregado
            };

            // Função responsavel por inserir o esqueleto html dentro do ambiente od usuário para apresentar a tela de erro.
            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);

        }

        // Apresentação do atual erro do projeto dentro do //console.log
        console.error('Houve um problema durante a construção do ambiente', error);


    }
}

// Função para carregar uma imagem protegida com token JWT e exibi-la
async function loadImage(url, imgElementClass) {
    try {
        // Obtém o token de autenticação do usuário
        const token = getAuthToken();
        //console.log('Token:', token);
        //console.log('URL da imagem:', url);

        // Faz uma requisição GET para obter a imagem protegida
        const response = await fetch(url, {
            method: 'GET',
            headers: {
                'x-access-token': token ? token : '' // Adiciona o token no cabeçalho da requisição
            }
        });

        // Verifica se a requisição foi bem-sucedida
        if (!response.ok) {
            throw new Error('Erro ao carregar a imagem: ' + response.statusText);
        }

        // Converte a resposta para um Blob (arquivo binário)
        const blob = await response.blob();
        // Cria uma URL temporária para exibir a imagem
        const imageUrl = URL.createObjectURL(blob);

        // Seleciona todos os elementos da página que possuem a classe especificada
        const imgElements = document.getElementsByClassName(imgElementClass);
        if (imgElements.length > 0) {
            // Define a imagem carregada para cada elemento encontrado
            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 e atualizar o estilo dinamicamente
async function loadBackgroundAndUpdateStyle() {
    try {
        // Obtém a URL da API para buscar as informações do usuário
        const apiUrl = await getApiUrl();
        const token = getAuthToken();

        // Faz uma requisição GET para obter os dados do usuário
        const response = await fetch(`${apiUrl}/mounting`, {
            method: 'GET',
            headers: {
                'x-access-token': token ? token : ''
            }
        });

        // Verifica se a requisição foi bem-sucedida
        if (!response.ok) {
            throw new Error('Erro ao carregar os dados: ' + response.statusText);
        }

        // Converte a resposta para JSON
        const data = await response.json();
        // Constrói a URL da imagem de fundo do usuário
        const imagemFun = `${apiUrl}${data.usuario.img_fundo}`;

        // Faz uma nova requisição GET para obter a imagem de fundo
        const fundoResponse = await fetch(imagemFun, {
            method: 'GET',
            headers: {
                'x-access-token': token ? token : ''
            }
        });

        // Verifica se a requisição foi bem-sucedida
        if (!fundoResponse.ok) {
            throw new Error('Erro ao carregar a imagem de fundo: ' + fundoResponse.statusText);
        }

        // Converte a resposta para um Blob (arquivo binário)
        const blob = await fundoResponse.blob();
        // Cria uma URL temporária para exibir a imagem de fundo
        const fundoUserUrl = URL.createObjectURL(blob);

        // Seleciona o elemento com id 'fundouser' e aplica a imagem de fundo dinamicamente
        const fundouser = document.getElementById('fundouser');
        fundouser.innerHTML =
            '.seguimentacao_2 .coluna_1 {' +
            'width: 100%;' +  // Define a largura como 100%
            'height: 30vh;' + // Define a altura como 30% da viewport
            'display: flex;' + // Usa flexbox para organização dos elementos internos
            'flex-direction: row;' + // Organiza os elementos na horizontal
            'background-image: url("' + fundoUserUrl + '");' + // Define a imagem de fundo carregada
            'background-position: center;' + // Centraliza a imagem de fundo
            'background-size: cover;' + // Ajusta a imagem para cobrir toda a área disponível
            'overflow: hidden;' + // Esconde partes que ultrapassam os limites do contêiner
            'transition: 1s ease;' + // Aplica uma transição suave
            '}';

        //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();
        // Salva um valor no localStorage
    }, 3000); // Executa as funções 3 segundos após o carregamento do DOM
});