testes/js/Ambiente/Estrutura/Estrutura_Primaria_modelo.js

//Varivel para valida a autenticação do usuário, se for true o ambiente é construido, se for false, um tela de erro é apresentada no lugar do ambiente, e caso a resposta demore para ser apresentada um tela de carregamento é apresentada.
var autenteticação = true;

//If que constrola o cenario de true
if (autenteticação == true) {

    //constante que controla o estilo css que está estilizando todo o ambiente do usuário.
    const estilos = document.getElementById('conexao');
    estilos.href = '../Css/global/Estrutura.css';

    //variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
    //Nome do usuário
    //Nome da empresa
    //Imagem do usuário
    //Imagem de fundo do usuário
    var Usuário = 'Daivid';
    var Empresa = 'ItGuys';
    var ImagemUser = '../Acessts/Imagens/1605305486169.jpg';
    var imagemFun = 'url(../Acessts/Imagens/01160209321024.jpg)';

    //Essa ultima variavel é dedicada ao controle de hiriaquia, caso alguem tenha permissão para visualizar essa categoria, será true, caso ela não tenha permissão, será false, e então toda essa categoria não será apresentada.
    var visuMonitor = true;


    //constante conectada com estilos internos dentro do próprio html, para trazer a capacidade de controlar a imagem que está no fundo do perfil do suário.
    const fundouser = document.getElementById('fundouser');

    fundouser.innerHTML =
        '.Corpo_1 .Colunas_1 {'
        +
        'display: flex;'
        +
        'flex-direction: row;'
        +
        'background-image:' + imagemFun + ';'
        +
        'background-position: center;'
        +
        'background-size: cover;'
        +
        'width: 15vw;'
        +
        'height: 10vh;'
        +
        'overflow: hidden;'
        +
        'transition: 1s ease;'
        ;

    //Constante de construção primira do ambiente do usuário, é aqui onde toda á página é construida, ao mesmo tempo que as variaveis mudificam certas informações.
    const construtor_primario = document.getElementById('entrada_1');

    construtor_primario.innerHTML =
        '<section class="menu">'
        +
        '<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_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
        +
        '</header>'
        +
        '</section>'
        +
        '<main class="matriz">'
        +
        '<section class="capitulo_1">'
        +
        '<div class="Corpo_1">'
        +
        '<div class="Colunas_1">'
        +
        '<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
        +
        '<div class="seguimentos_2">'
        +
        '<div class="user_1">'
        +
        '<img src="' + ImagemUser + '" alt="" class="icon_subcab2_2">'
        +
        '<img src="' + ImagemUser + '" alt="" class="icon_subcab2_1">'
        +
        '</div>'
        +
        '<div class="user_2"><p> <div id="User">' + Usuário + '</div><div id="Empresa">' + Empresa + '</div></p></div>'
        +
        '</div>'
        +
        '</div>'
        +
        '<div class="Colunas_2">'
        +
        '<div class="seguimentos_1"></div>'
        +
        '<div class="seguimentos_2"><div class="sessao_1"><a href="./Home.html" target="frame">'
        +
        '<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
        +
        '<section class="forg">'
        +
        //Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
        '<div id="sub_entrada"></div>'
        +
        '</section>'
        +
        '<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
        +
        '</div>'
        +
        '<div class="sessao_2">'
        +
        '<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
        +
        '<a href="./Config.html" ><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
        +
        ' </div>'
        +
        '</section>'
        +
        '<section class="capitulo_2">'
        +
        '<div class="Corpo_2">'
        +
        '<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "./Home.html"frameborder = "0" ></iframe ></div>'
        +
        '</div>'
        +
        '</main>'
        ;

    //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
    const script1 = document.createElement('script');
    script1.src = '../js/Ambiente/Estrutura/Reacao_menu.js';
    document.body.appendChild(script1);

    //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) {
        const script2 = document.createElement('script');
        script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
        document.body.appendChild(script2);
    };


}

//Else sendo a reação opostao ao do if, logo sendo esse o cenario onde a autenticação não seja valida.
else {

    //Constante de controle sobre estilos css do painel de erro. 
    const estilos = document.getElementById('conexao');
    estilos.href = '../Css/page/Telas_acao/erro_404.css';

    //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
    var Status = 'Erro 404';
    var mensagem = 'Desculpe mas sua página não foi encontrada';
    var sub_mensagem = 'Tente fazer seu, login novamente';

    //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="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/login.html"><button>Retornar</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>'
        ;




}


// Event listener para o botão de logout
const logoutButton = document.getElementById('logoutButton');
if (logoutButton) {
    logoutButton.addEventListener('click', function () {
        // Limpar o token do localStorage ao clicar no botão de logout
        clearAuthToken();
        // Redirecionar para a página de login ou qualquer outra página desejada após o logout
        window.location.href = '../login.html';
    });
}