diff --git a/Ambiente_Usuario_copy.html b/Ambiente_Usuario_copy.html index bbc47b2..f61b08b 100644 --- a/Ambiente_Usuario_copy.html +++ b/Ambiente_Usuario_copy.html @@ -4,13 +4,14 @@ - - - - + + + + - - + Ambiente do Usuario diff --git a/Ambiente_Usuario_copy2.html b/Ambiente_Usuario_copy2.html new file mode 100644 index 0000000..cab6159 --- /dev/null +++ b/Ambiente_Usuario_copy2.html @@ -0,0 +1,104 @@ + + + + + + + + + + Ambiente do Usuario + + + + + + + +
+ +
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/Css/global/Estrutura.css b/Css/global/Estrutura.css index a56e2fc..d60049b 100644 --- a/Css/global/Estrutura.css +++ b/Css/global/Estrutura.css @@ -1,3 +1,5 @@ +/*base de conexões com todos os elementos da páginas*/ + @import './Menu_Lateral.css'; @import './Telas.css'; @import './import.css'; \ No newline at end of file diff --git a/js/Ambiente/Config/Estrutural_config/config.js b/js/Ambiente/Config/Estrutural_config/config.js index 0fc9043..76d4fde 100644 --- a/js/Ambiente/Config/Estrutural_config/config.js +++ b/js/Ambiente/Config/Estrutural_config/config.js @@ -1,6 +1,9 @@ + +//Variavel botão 1 responsavel por inicar a função var botao_1 = document.getElementById('opicao_1'); botao_1.addEventListener('click', surgir1); +//Nessa função o conteudo da tela é modificado e novas informaçõe são apresentadas 'lembre de alinhar o nome da função com o seu botão respecitivo, sendo essa do botão 1' function surgir1() { var estilo = document.getElementById('conexao'); @@ -9,9 +12,13 @@ function surgir1() { painel.innerHTML = 'ola1'; } + + +//Variavel botão 2 responsavel por inicar a função var botao_2 = document.getElementById('opicao_2'); botao_2.addEventListener('click', surgir2); +//Nessa função o conteudo da tela é modificado e novas informaçõe são apresentadas 'lembre de alinhar o nome da função com o seu botão respecitivo, sendo essa do botão 2' function surgir2() { var estilo = document.getElementById('conexao'); var painel = document.getElementById('preenchimento'); @@ -19,9 +26,11 @@ function surgir2() { painel.innerHTML = 'ola2'; } +//Variavel botão 3 responsavel por inicar a função var botao_3 = document.getElementById('opicao_3'); botao_3.addEventListener('click', surgir3); +//Nessa função o conteudo da tela é modificado e novas informaçõe são apresentadas 'lembre de alinhar o nome da função com o seu botão respecitivo, sendo essa do botão 3' function surgir3() { var estilo = document.getElementById('conexao'); var painel = document.getElementById('preenchimento'); @@ -29,9 +38,11 @@ function surgir3() { painel.innerHTML = 'ola3'; } +//Variavel botão 4 responsavel por inicar a função var botao_4 = document.getElementById('opicao_4'); botao_4.addEventListener('click', surgir4); +//Nessa função o conteudo da tela é modificado e novas informaçõe são apresentadas 'lembre de alinhar o nome da função com o seu botão respecitivo, sendo essa do botão 4' function surgir4() { var estilo = document.getElementById('conexao'); var painel = document.getElementById('preenchimento'); @@ -39,10 +50,11 @@ function surgir4() { painel.innerHTML = 'ola4'; } - +//Variavel botão 5 responsavel por inicar a função var botao_5 = document.getElementById('opicao_5'); botao_5.addEventListener('click', surgir5); +//Nessa função o conteudo da tela é modificado e novas informaçõe são apresentadas 'lembre de alinhar o nome da função com o seu botão respecitivo, sendo essa do botão 5' function surgir5() { var estilo = document.getElementById('conexao'); var painel = document.getElementById('preenchimento'); @@ -50,9 +62,11 @@ function surgir5() { painel.innerHTML = 'ola5'; } +//Variavel botão 6 responsavel por inicar a função var botao_6 = document.getElementById('opicao_6'); botao_6.addEventListener('click', surgir6); +//Nessa função o conteudo da tela é modificado e novas informaçõe são apresentadas 'lembre de alinhar o nome da função com o seu botão respecitivo, sendo essa do botão 6' function surgir6() { var estilo = document.getElementById('conexao'); var painel = document.getElementById('preenchimento'); diff --git a/js/Ambiente/Config/Estrutural_config/construtor_config.js b/js/Ambiente/Config/Estrutural_config/construtor_config.js index e69de29..eda24d4 100644 --- a/js/Ambiente/Config/Estrutural_config/construtor_config.js +++ b/js/Ambiente/Config/Estrutural_config/construtor_config.js @@ -0,0 +1 @@ +//onde estará a construção da estrutura de configuração do ambiente do usuário \ No newline at end of file diff --git a/js/Ambiente/Estrutura/Estrutura_Primaria.js b/js/Ambiente/Estrutura/Estrutura_Primaria.js index 9c4da6b..81bcb41 100644 --- a/js/Ambiente/Estrutura/Estrutura_Primaria.js +++ b/js/Ambiente/Estrutura/Estrutura_Primaria.js @@ -1,20 +1,30 @@ -//Variavel que recebe as validação do login do usuário + +//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 = @@ -39,6 +49,7 @@ if (autenteticação == true) { '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 = @@ -90,6 +101,7 @@ if (autenteticação == true) { + '
' + + //Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar. '
' + '
' @@ -119,24 +131,39 @@ if (autenteticação == true) { '' ; + //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); - const script2 = document.createElement('script'); - script2.src = '../js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js'; - document.body.appendChild(script2); + //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 { +} + +//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 = '
' @@ -167,3 +194,23 @@ if (autenteticação == true) { } + +// 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'; + }); +} + + + + + + + + + diff --git a/js/Ambiente/Estrutura/Reacao_menu.js b/js/Ambiente/Estrutura/Reacao_menu.js index 8b304a0..3bd33df 100644 --- a/js/Ambiente/Estrutura/Reacao_menu.js +++ b/js/Ambiente/Estrutura/Reacao_menu.js @@ -1,4 +1,13 @@ +//Função de adapitação do menu e da tela do ambiente do usuário, resumidamente ao apertar na seinha do menu, todo o ambiente do usuário é reajustado, enquanto da mesma forma ao pertar a setinha novamente todo o ambiente do usuário retornar ao seu laouyt tradicional + + +//Aqui são as variaveis que conectao todos esses elementos, dentre elas: +//botão conecta o pontao de condicional da ação +//cabecario elemento pertencente da tela do usuário +//tela seria o iframe que apresenta todas as informações do ambiente do usuário +//menu seria os elementos visuais do usuário +//temas seria alguns elementos do proprio menu var botao = document.querySelector('#menu') var cabecario = document.querySelector('.cabecario_1') var tela = document.querySelector('.transmissão') @@ -6,7 +15,7 @@ var menu = document.querySelector('.capitulo_1') var temas = document.querySelectorAll('.item_menu') - +//Aqui se aplica o evento de cliente, sobre afunção que aplica as classes no menu caberio e telas botao.addEventListener('click', function () { menu.classList.toggle('expansao'); cabecario.classList.toggle('expansao'); diff --git a/js/Ambiente/Estrutura/load.js b/js/Ambiente/Estrutura/load.js index e7aaf61..9835333 100644 --- a/js/Ambiente/Estrutura/load.js +++ b/js/Ambiente/Estrutura/load.js @@ -1,36 +1,44 @@ +// Adiciona um ouvinte de evento para quando o conteúdo do DOM estiver completamente carregado document.addEventListener("DOMContentLoaded", function () { + // Obtém o elemento com o ID 'entrada_1' var main = document.getElementById("entrada_1"); - // Verificar se a tag main está vazia + // Verifica se a tag main está vazia if (main.innerHTML.trim() === "") { - + // Se a tag estiver vazia, obtém novamente o mesmo elemento const tela_laod = document.getElementById('entrada_1'); + // Adiciona um elemento canvas ao conteúdo da tag main tela_laod.innerHTML = ''; + // Obtém o contexto 2D do canvas para desenhar const canvas = document.getElementById('animationCanvas'); const ctx = canvas.getContext('2d'); - // Define canvas dimensions + // Define as dimensões do canvas para preencher a tela canvas.width = window.innerWidth; canvas.height = window.innerHeight; + // Define um objeto 'circle' que armazena as propriedades da animação const circle = { - centerX: canvas.width / 2, - centerY: canvas.height / 2, - radius: 150, // Raio do caminho circular - rotationSpeed: 0.02, - angle: 0, - linePath: [], // Para armazenar a trajetória - maxPathLength: 350 // Limite para o comprimento da trajetória + centerX: canvas.width / 2, // Centro do círculo no eixo X + centerY: canvas.height / 2, // Centro do círculo no eixo Y + radius: 150, // Raio do círculo + rotationSpeed: 0.02, // Velocidade de rotação + angle: 0, // Ângulo atual + linePath: [], // Armazena a trajetória do ponto + maxPathLength: 350 // Comprimento máximo da trajetória }; + // Função para desenhar a trajetória circular function drawCircularPath() { + // Limpa o canvas antes de desenhar ctx.clearRect(0, 0, canvas.width, canvas.height); - // Adiciona o ponto da trajetória atual ao caminho + // Calcula as coordenadas do ponto atual na trajetória circular const pathX = circle.centerX + circle.radius * Math.cos(circle.angle); const pathY = circle.centerY + circle.radius * Math.sin(circle.angle); + // Adiciona o ponto atual à trajetória circle.linePath.push({ x: pathX, y: pathY }); // Desenha a trajetória acumulada @@ -39,34 +47,36 @@ document.addEventListener("DOMContentLoaded", function () { ctx.moveTo(circle.linePath[i].x, circle.linePath[i].y); ctx.lineTo(circle.linePath[i + 1].x, circle.linePath[i + 1].y); } - ctx.strokeStyle = '#22c0a3'; - ctx.lineWidth = 10; - ctx.stroke(); + ctx.strokeStyle = '#22c0a3'; // Define a cor da linha + ctx.lineWidth = 10; // Define a largura da linha + ctx.stroke(); // Desenha a linha no canvas - // Limita o comprimento da trajetória e reinicia a trajetória quando necessário + // Limita o comprimento da trajetória if (circle.linePath.length > circle.maxPathLength) { circle.linePath.shift(); // Remove o primeiro ponto do caminho - if (circle.angle >= Math.PI * 2) { // Completa um ciclo + // Reinicia a trajetória se um ciclo completo foi completado + if (circle.angle >= Math.PI * 2) { // Verifica se completou um ciclo circle.angle = 0; // Reinicia o ângulo circle.linePath = []; // Limpa a trajetória } } } + // Função de animação que atualiza a posição do ponto e desenha a trajetória function animate() { - circle.angle += circle.rotationSpeed; - drawCircularPath(); - requestAnimationFrame(animate); + circle.angle += circle.rotationSpeed; // Atualiza o ângulo + drawCircularPath(); // Desenha a trajetória atual + requestAnimationFrame(animate); // Solicita a próxima animação } - animate(); + animate(); // Inicia a animação // Ajusta o tamanho do canvas quando a janela é redimensionada window.addEventListener('resize', () => { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; - circle.centerX = canvas.width / 2; - circle.centerY = canvas.height / 2; + canvas.width = window.innerWidth; // Ajusta a largura + canvas.height = window.innerHeight; // Ajusta a altura + circle.centerX = canvas.width / 2; // Atualiza o centro X + circle.centerY = canvas.height / 2; // Atualiza o centro Y }); } -}); \ No newline at end of file +}); diff --git a/js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js b/js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js index dd7b7bf..4310ea5 100644 --- a/js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js +++ b/js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js @@ -1,12 +1,15 @@ +// Verifica se a variável 'visuMonitor' é verdadeira if (visuMonitor == true) { - + // Obtém o elemento com o ID 'sub_entrada' para inserir o conteúdo const construtor_Secundarios_Monitoramento = document.getElementById('sub_entrada'); + // Define o conteúdo HTML a ser inserido no 'sub_entrada' construtor_Secundarios_Monitoramento.innerHTML = '

Monitoramento

' + + // Cria o item do menu "Monitoramento" + ''; // Fecha o submenu }; - +// Adiciona um evento para mostrar o submenu quando o mouse entra no item do menu document.getElementById('testes').addEventListener('mouseenter', function () { - document.getElementById('sub_menu').classList.add('show'); + document.getElementById('sub_menu').classList.add('show'); // Adiciona a classe 'show' para exibir o submenu }); +// Adiciona um evento para esconder o submenu quando o mouse sai do item do menu document.getElementById('testes').addEventListener('mouseleave', function () { - document.getElementById('sub_menu').classList.remove('show'); + document.getElementById('sub_menu').classList.remove('show'); // Remove a classe 'show' para ocultar o submenu }); +// Adiciona um evento para manter o submenu visível enquanto o mouse está sobre ele document.getElementById('sub_menu').addEventListener('mouseenter', function () { - this.classList.add('show'); + this.classList.add('show'); // Adiciona a classe 'show' para manter o submenu visível }); +// Adiciona um evento para esconder o submenu quando o mouse sai do submenu document.getElementById('sub_menu').addEventListener('mouseleave', function () { - this.classList.remove('show'); -}); \ No newline at end of file + this.classList.remove('show'); // Remove a classe 'show' para ocultar o submenu +}); diff --git a/js/Login/login.js b/js/Login/login.js index 8106acd..21e9629 100644 --- a/js/Login/login.js +++ b/js/Login/login.js @@ -3,7 +3,7 @@ async function getApiUrl() { try { //solicitação do arquivo config_url.php - const response = await fetch('../../../php/config_url.php'); + const response = await fetch('../../../Sites/Site_ItGuys/php/config_url.php'); //Aplicação de um if caso a resposta do php seja oposta ao ok if (!response.ok) { throw new Error('Network response was not ok'); diff --git a/js/padrao_A1.js b/js/padrao_A1.js index 07a6dad..db07a58 100644 --- a/js/padrao_A1.js +++ b/js/padrao_A1.js @@ -1,7 +1,7 @@ // Função para obter a URL base do servidor async function getApiUrl() { try { - const response = await fetch('../../php/config_url.php'); // Solicita a URL base do PHP + 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'); } @@ -18,19 +18,18 @@ function getAuthToken() { return localStorage.getItem('x-access-token'); } + + async function criarBlocos() { try { - // Obtém a URL base do servidor const apiUrl = await getApiUrl(); - // Obter o token JWT do localStorage const token = getAuthToken(); - // Fazer uma requisição para o servidor para obter os dados dos blocos const response = await fetch(`${apiUrl}/mounting`, { method: 'GET', headers: { 'Content-Type': 'application/json', - 'x-access-token': token ? token : '' // Usando x-access-token diretamente no cabeçalho + 'x-access-token': token ? token : '' } }); @@ -39,278 +38,426 @@ async function criarBlocos() { } const dadosDosBlocos = await response.json(); + + // Acessando o primeiro objeto do array retornado + const usuarioInfo = dadosDosBlocos[0]; // Acessa o primeiro item do array + + // Agora acessa as propriedades do objeto + const Usuário = usuarioInfo.usuario; + const Empresa = usuarioInfo.empresa; + const ImagemUser = usuarioInfo.imagemUser; + const imagemFun = `url(${usuarioInfo.imagemFun})`; + + console.log(usuarioInfo); + console.log(Usuário); + console.log(Empresa); + console.log(ImagemUser); + console.log(imagemFun); + + 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/global/Estrutura.css'; + + 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;' + ; + + + const construtor_primario = document.getElementById('entrada_1'); + + construtor_primario.innerHTML = + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '' + + + '' + + + '
' + + + '

' + Usuário + '
' + Empresa + '

' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '

Home

' + + + '
' + + + //Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar. + '
' + + + '
' + + + '

Servicedesk

' + + + '
' + + + '
' + + + '

Suporte

' + + + '

Configuracões

' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + + + '
' + ; + + //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); + }; + + + + + // Limpar o container de blocos - - - const entrada_1 = document.getElementById('entrada_1'); - entrada_1.innerHTML = ''; - - // Iterar sobre o array de dados dos blocos - dadosDosBlocos.forEach(dadosDoBloco => { - const Painel = document.createElement('section'); // Responsavel por trazer todos os lementos da tela. - const cab = document.createElement('section'); - cab.classList.add('menu');//Responsavel por trazer todo o cabeçario para a tela - const Matriz = document.createElement('main'); - Matriz.classList.add('matriz');//Responsavel por trazer o menu e a tela do iframe. - - - //Cabeçalho - - const sucab = document.createElement('header'); - sucab.classList.add('cabecario_1'); - - //Bloco reponsavel pela imagem de logo da itguys - - const bloco_subcab1_1 = document.createElement('div');//cria a tag div na página - bloco_subcab1_1.classList.add('Bloco_subcab1_1');//Define a classe do Bloco_subcab1_1, para a constante Bloco_subcab1_1. - const img_cab = document.createElement('img');//Cria a tag img na página - img_cab.classList.add('icon_subcab1_1');//Define a classe do icon_subcab1_1, para a constante img_cab. - img_cab.src = dadosDoBloco.imagem_Cab;//Cria o src para a tag img, e capita a informação registradas no dadosDoBlco no registro imagem_cab. - img_cab.alt = '';//Cria uma alt sem nenhuma definição para a tag img. - bloco_subcab1_1.appendChild(img_cab);//Define o img_cap como objeto filho do bloco_subcab1_1, logo a tag img estara dentor da div bloco_suvcab1_1. - - const bloco_subcab1_2 = document.createElement('div');//cria a tag div na página - bloco_subcab1_2.classList.add('Bloco_subcab1_2');//Define a classe do bloco_subcab1_2, para a constante Bloco_subcab1_2. - const bloco_a_cab = document.createElement('a');//Criação da tag a na página. - bloco_a_cab.href = dadosDoBloco.A_cab;//Criação do href para a tag a, e capita a informação registradas no dadosDoBlco no registro A_cab. - bloco_subcab1_2.appendChild(bloco_a_cab);//Define o bloco_a_cab como objeto filho do bloco_subcab1_2, logo a tag a estara dentor da div bloco_subcab1_2. - const bloco_button_cab = document.createElement('button');//cria a tag button na página. - bloco_button_cab.id = "logoutButton"; - bloco_button_cab.textContent = dadosDoBloco.button_Cab;// Define um texto para o button. - bloco_a_cab.appendChild(bloco_button_cab);//Define o bloco_button_cab como objeto filho do bloco_a_cab,logo a tag button estara dentor da div bloco_a_cab. - - //Matriz - - const capitulo_1 = document.createElement('section');//Cria uma tag section na página. - capitulo_1.classList.add('capitulo_1');//adicina diretamente a classe capitulo_1, section recem criada. - const Corpo_1 = document.createElement('section');//Cria uma tag section na página. - Corpo_1.classList.add('Corpo_1');//adicina diretamente a classe corpo_1, section recem criada. - const Coluna_1 = document.createElement('div');//Cria uma tag div na página. - Coluna_1.classList.add('Colunas_1');//adicina diretamente a classe Colunas_1, div recem criada. - - //Menu Lateral - - //Painel personalizavel do usuario - - const seguimento_1 = document.createElement('div');// Cria uma tag div na página. - seguimento_1.classList.add('seguimentos_1'); // adiciona diretamente a classe seguimentos_1 na div recem criada - Coluna_1.appendChild(seguimento_1); // define a div seguimento_1 como objeto filo da Coluna_1, log a tag div estara dentro da div Coluna_1 - const seguimento_1_button = document.createElement('button'); - seguimento_1.appendChild(seguimento_1_button); - const seguimento_1_img = document.createElement('img'); - seguimento_1_img.id = "menu"; - seguimento_1_img.src = dadosDoBloco.imagem_segumento_1; - seguimento_1_img.alt = ""; - seguimento_1_button.appendChild(seguimento_1_img); - - const seguimento_2 = document.createElement('div'); - seguimento_2.classList.add('seguimentos_2'); - Coluna_1.appendChild(seguimento_2); - - const user_1 = document.createElement('div'); - user_1.classList.add('user_1'); - seguimento_2.appendChild(user_1); - - const seguimento_2_img_1_user_1 = document.createElement('img'); - seguimento_2_img_1_user_1.classList.add('icon_subcab2_2'); - seguimento_2_img_1_user_1.src = dadosDoBloco.imagem_User_1_segumento_2; - seguimento_2_img_1_user_1.alt = ""; - user_1.appendChild(seguimento_2_img_1_user_1); - const seguimento_2_img_2_user_1 = document.createElement('img'); - seguimento_2_img_2_user_1.classList.add('icon_subcab2_1'); - seguimento_2_img_2_user_1.src = dadosDoBloco.imagem_User_2_segumento_2; - seguimento_2_img_2_user_1.alt = ""; - user_1.appendChild(seguimento_2_img_2_user_1); - - - const user_2 = document.createElement('div'); - user_2.classList.add('user_2'); - seguimento_2.appendChild(user_2); - - const identidade = document.createElement('p'); - user_2.appendChild(identidade); - const User = document.createElement('div'); - User.id = "User"; - User.classList.add('user_2'); - User.textContent = dadosDoBloco.texto_User_segumento_2; - identidade.appendChild(User); - const Empresa = document.createElement('div'); - Empresa.id = "Empresa"; - Empresa.textContent = dadosDoBloco.texto_Empresa_segumento_2; - user_2.classList.add('user_2'); - identidade.appendChild(Empresa); - - const Coluna_2 = document.createElement('div'); - Coluna_2.classList.add('Colunas_2'); - - const seguimento_1_colun_2 = document.createElement('div'); - seguimento_1_colun_2.classList.add('seguimentos_1'); - Coluna_2.appendChild(seguimento_1_colun_2); - - const seguimento_2_colun_2 = document.createElement('div'); - seguimento_2_colun_2.classList.add('seguimentos_2'); - Coluna_2.appendChild(seguimento_2_colun_2); - - //Sessão de Cima - - const sessao1 = document.createElement('div'); - sessao1.classList.add('sessao_1'); - seguimento_2_colun_2.appendChild(sessao1); - - //Home - - const sessao1_a_1 = document.createElement('a'); - sessao1_a_1.href = dadosDoBloco.Menu_home_a; - sessao1_a_1.target = 'frame'; - sessao1.appendChild(sessao1_a_1); - - const sessao1_a_1_item_menu = document.createElement('div'); - sessao1_a_1_item_menu.classList.add('item_menu'); - sessao1_a_1.appendChild(sessao1_a_1_item_menu); - - const sessao1_a_1_item_menu_img = document.createElement('img'); - sessao1_a_1_item_menu_img.src = dadosDoBloco.Menu_home_img; - sessao1_a_1_item_menu_img.alt = ""; - sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_img); - const sessao1_a_1_item_menu_text = document.createElement('p'); - sessao1_a_1_item_menu_text.textContent = dadosDoBloco.Menu_home_text; - sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_text); - - //SevicDesck - - const sessao1_a_2 = document.createElement('a'); - sessao1_a_2.href = dadosDoBloco.Menu_Servicedesk_a; - sessao1.appendChild(sessao1_a_2); - - const sessao1_a_2_item_menu = document.createElement('div'); - sessao1_a_2_item_menu.classList.add('item_menu'); - sessao1_a_2.appendChild(sessao1_a_2_item_menu); - - const sessao1_a_2_item_menu_img = document.createElement('img'); - sessao1_a_2_item_menu_img.src = dadosDoBloco.Menu_Servicedesk_img; - sessao1_a_2_item_menu_img.alt = ""; - sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_img); - const sessao1_a_2_item_menu_text = document.createElement('p'); - sessao1_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Servicedesk_text; - sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_text); - - //Monitoramento - - const sessao1_a_3 = document.createElement('a'); - sessao1_a_3.href = dadosDoBloco.Menu_Monitor_a; - sessao1_a_3.target = 'frame'; - sessao1.appendChild(sessao1_a_3); - - const sessao1_a_3_item_menu = document.createElement('div'); - sessao1_a_3_item_menu.classList.add('item_menu'); - sessao1_a_3.appendChild(sessao1_a_3_item_menu); - - const sessao1_a_3_item_menu_img = document.createElement('img'); - sessao1_a_3_item_menu_img.src = dadosDoBloco.Menu_Monitor_img; - sessao1_a_3_item_menu_img.alt = ""; - sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_img); - const sessao1_a_3_item_menu_text = document.createElement('p'); - sessao1_a_3_item_menu_text.textContent = dadosDoBloco.Menu_Monitor_text; - sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_text); - - //Sessão de baixo - - const sessao2 = document.createElement('div'); - sessao2.classList.add('sessao_2'); - seguimento_2_colun_2.appendChild(sessao2); - - //Suporte - - const sessao2_a_1 = document.createElement('a'); - sessao2_a_1.href = dadosDoBloco.Menu_Suporte_a; - sessao2.appendChild(sessao2_a_1); - - const sessao2_a_1_item_menu = document.createElement('div'); - sessao2_a_1_item_menu.classList.add('item_menu'); - sessao2_a_1.appendChild(sessao2_a_1_item_menu); - - const sessao2_a_1_item_menu_img = document.createElement('img'); - sessao2_a_1_item_menu_img.src = dadosDoBloco.Menu_Suporte_img; - sessao2_a_1_item_menu_img.alt = ""; - sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_img); - const sessao2_a_1_item_menu_text = document.createElement('p'); - sessao2_a_1_item_menu_text.textContent = dadosDoBloco.Menu_Suporte_text; - sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_text); - - //Configuração - - const sessao2_a_2 = document.createElement('a'); - sessao2_a_2.href = dadosDoBloco.Menu_Config_a; - sessao2_a_2.target = 'frame'; - sessao2.appendChild(sessao2_a_2); - - const sessao2_a_2_item_menu = document.createElement('div'); - sessao2_a_2_item_menu.classList.add('item_menu'); - sessao2_a_2.appendChild(sessao2_a_2_item_menu); - - const sessao2_a_2_item_menu_img = document.createElement('img'); - sessao2_a_2_item_menu_img.src = dadosDoBloco.Menu_Config_img; - sessao2_a_2_item_menu_img.alt = ""; - sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_img); - const sessao2_a_2_item_menu_text = document.createElement('p'); - sessao2_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Config_text; - sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_text); - - //capitulo 2 - - const capitulo_2 = document.createElement('section'); - capitulo_2.classList.add('capitulo_2'); - const Corpo_2 = document.createElement('section'); - Corpo_2.classList.add('Corpo_2'); - const Corpo_2_Coluna_1 = document.createElement('div'); - Corpo_2_Coluna_1.classList.add('Colunas_1'); - - const Tela = document.createElement('iframe'); - Tela.classList.add('transmissão'); - Tela.src = dadosDoBloco.Tela; - Tela.name = 'frame'; - Corpo_2_Coluna_1.appendChild(Tela); - - - - // Adicionar o painel ao bloco - - Painel.appendChild(cab); - Painel.appendChild(Matriz); - - - cab.appendChild(sucab); - sucab.appendChild(bloco_subcab1_1); - sucab.appendChild(bloco_subcab1_2); - - Matriz.appendChild(capitulo_1); - capitulo_1.appendChild(Corpo_1); - Corpo_1.appendChild(Coluna_1); - Corpo_1.appendChild(Coluna_2); - - Matriz.appendChild(capitulo_2); - capitulo_2.appendChild(Corpo_2); - Corpo_2.appendChild(Corpo_2_Coluna_1); - - - // Adicionar o bloco ao container de blocos - entrada_1.appendChild(Painel); - }); - - // Todas as funcionalidades que precisam da pagina construida precisam estar dentro de uma função e serem chamadas aqui. - - espasao(); - - // 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'; - }); - } + /* + + const entrada_1 = document.getElementById('entrada_1'); + entrada_1.innerHTML = ''; + + // Iterar sobre o array de dados dos blocos + dadosDosBlocos.forEach(dadosDoBloco => { + const Painel = document.createElement('section'); // Responsavel por trazer todos os lementos da tela. + const cab = document.createElement('section'); + cab.classList.add('menu');//Responsavel por trazer todo o cabeçario para a tela + const Matriz = document.createElement('main'); + Matriz.classList.add('matriz');//Responsavel por trazer o menu e a tela do iframe. + + + //Cabeçalho + + const sucab = document.createElement('header'); + sucab.classList.add('cabecario_1'); + + //Bloco reponsavel pela imagem de logo da itguys + + const bloco_subcab1_1 = document.createElement('div');//cria a tag div na página + bloco_subcab1_1.classList.add('Bloco_subcab1_1');//Define a classe do Bloco_subcab1_1, para a constante Bloco_subcab1_1. + const img_cab = document.createElement('img');//Cria a tag img na página + img_cab.classList.add('icon_subcab1_1');//Define a classe do icon_subcab1_1, para a constante img_cab. + img_cab.src = dadosDoBloco.imagem_Cab;//Cria o src para a tag img, e capita a informação registradas no dadosDoBlco no registro imagem_cab. + img_cab.alt = '';//Cria uma alt sem nenhuma definição para a tag img. + bloco_subcab1_1.appendChild(img_cab);//Define o img_cap como objeto filho do bloco_subcab1_1, logo a tag img estara dentor da div bloco_suvcab1_1. + + const bloco_subcab1_2 = document.createElement('div');//cria a tag div na página + bloco_subcab1_2.classList.add('Bloco_subcab1_2');//Define a classe do bloco_subcab1_2, para a constante Bloco_subcab1_2. + const bloco_a_cab = document.createElement('a');//Criação da tag a na página. + bloco_a_cab.href = dadosDoBloco.A_cab;//Criação do href para a tag a, e capita a informação registradas no dadosDoBlco no registro A_cab. + bloco_subcab1_2.appendChild(bloco_a_cab);//Define o bloco_a_cab como objeto filho do bloco_subcab1_2, logo a tag a estara dentor da div bloco_subcab1_2. + const bloco_button_cab = document.createElement('button');//cria a tag button na página. + bloco_button_cab.id = "logoutButton"; + bloco_button_cab.textContent = dadosDoBloco.button_Cab;// Define um texto para o button. + bloco_a_cab.appendChild(bloco_button_cab);//Define o bloco_button_cab como objeto filho do bloco_a_cab,logo a tag button estara dentor da div bloco_a_cab. + + //Matriz + + const capitulo_1 = document.createElement('section');//Cria uma tag section na página. + capitulo_1.classList.add('capitulo_1');//adicina diretamente a classe capitulo_1, section recem criada. + const Corpo_1 = document.createElement('section');//Cria uma tag section na página. + Corpo_1.classList.add('Corpo_1');//adicina diretamente a classe corpo_1, section recem criada. + const Coluna_1 = document.createElement('div');//Cria uma tag div na página. + Coluna_1.classList.add('Colunas_1');//adicina diretamente a classe Colunas_1, div recem criada. + + //Menu Lateral + + //Painel personalizavel do usuario + + const seguimento_1 = document.createElement('div');// Cria uma tag div na página. + seguimento_1.classList.add('seguimentos_1'); // adiciona diretamente a classe seguimentos_1 na div recem criada + Coluna_1.appendChild(seguimento_1); // define a div seguimento_1 como objeto filo da Coluna_1, log a tag div estara dentro da div Coluna_1 + const seguimento_1_button = document.createElement('button'); + seguimento_1.appendChild(seguimento_1_button); + const seguimento_1_img = document.createElement('img'); + seguimento_1_img.id = "menu"; + seguimento_1_img.src = dadosDoBloco.imagem_segumento_1; + seguimento_1_img.alt = ""; + seguimento_1_button.appendChild(seguimento_1_img); + + const seguimento_2 = document.createElement('div'); + seguimento_2.classList.add('seguimentos_2'); + Coluna_1.appendChild(seguimento_2); + + const user_1 = document.createElement('div'); + user_1.classList.add('user_1'); + seguimento_2.appendChild(user_1); + + const seguimento_2_img_1_user_1 = document.createElement('img'); + seguimento_2_img_1_user_1.classList.add('icon_subcab2_2'); + seguimento_2_img_1_user_1.src = dadosDoBloco.imagem_User_1_segumento_2; + seguimento_2_img_1_user_1.alt = ""; + user_1.appendChild(seguimento_2_img_1_user_1); + const seguimento_2_img_2_user_1 = document.createElement('img'); + seguimento_2_img_2_user_1.classList.add('icon_subcab2_1'); + seguimento_2_img_2_user_1.src = dadosDoBloco.imagem_User_2_segumento_2; + seguimento_2_img_2_user_1.alt = ""; + user_1.appendChild(seguimento_2_img_2_user_1); + + + const user_2 = document.createElement('div'); + user_2.classList.add('user_2'); + seguimento_2.appendChild(user_2); + + const identidade = document.createElement('p'); + user_2.appendChild(identidade); + const User = document.createElement('div'); + User.id = "User"; + User.classList.add('user_2'); + User.textContent = dadosDoBloco.texto_User_segumento_2; + identidade.appendChild(User); + const Empresa = document.createElement('div'); + Empresa.id = "Empresa"; + Empresa.textContent = dadosDoBloco.texto_Empresa_segumento_2; + user_2.classList.add('user_2'); + identidade.appendChild(Empresa); + + const Coluna_2 = document.createElement('div'); + Coluna_2.classList.add('Colunas_2'); + + const seguimento_1_colun_2 = document.createElement('div'); + seguimento_1_colun_2.classList.add('seguimentos_1'); + Coluna_2.appendChild(seguimento_1_colun_2); + + const seguimento_2_colun_2 = document.createElement('div'); + seguimento_2_colun_2.classList.add('seguimentos_2'); + Coluna_2.appendChild(seguimento_2_colun_2); + + //Sessão de Cima + + const sessao1 = document.createElement('div'); + sessao1.classList.add('sessao_1'); + seguimento_2_colun_2.appendChild(sessao1); + + //Home + + const sessao1_a_1 = document.createElement('a'); + sessao1_a_1.href = dadosDoBloco.Menu_home_a; + sessao1_a_1.target = 'frame'; + sessao1.appendChild(sessao1_a_1); + + const sessao1_a_1_item_menu = document.createElement('div'); + sessao1_a_1_item_menu.classList.add('item_menu'); + sessao1_a_1.appendChild(sessao1_a_1_item_menu); + + const sessao1_a_1_item_menu_img = document.createElement('img'); + sessao1_a_1_item_menu_img.src = dadosDoBloco.Menu_home_img; + sessao1_a_1_item_menu_img.alt = ""; + sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_img); + const sessao1_a_1_item_menu_text = document.createElement('p'); + sessao1_a_1_item_menu_text.textContent = dadosDoBloco.Menu_home_text; + sessao1_a_1_item_menu.appendChild(sessao1_a_1_item_menu_text); + + //SevicDesck + + const sessao1_a_2 = document.createElement('a'); + sessao1_a_2.href = dadosDoBloco.Menu_Servicedesk_a; + sessao1.appendChild(sessao1_a_2); + + const sessao1_a_2_item_menu = document.createElement('div'); + sessao1_a_2_item_menu.classList.add('item_menu'); + sessao1_a_2.appendChild(sessao1_a_2_item_menu); + + const sessao1_a_2_item_menu_img = document.createElement('img'); + sessao1_a_2_item_menu_img.src = dadosDoBloco.Menu_Servicedesk_img; + sessao1_a_2_item_menu_img.alt = ""; + sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_img); + const sessao1_a_2_item_menu_text = document.createElement('p'); + sessao1_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Servicedesk_text; + sessao1_a_2_item_menu.appendChild(sessao1_a_2_item_menu_text); + + //Monitoramento + + const sessao1_a_3 = document.createElement('a'); + sessao1_a_3.href = dadosDoBloco.Menu_Monitor_a; + sessao1_a_3.target = 'frame'; + sessao1.appendChild(sessao1_a_3); + + const sessao1_a_3_item_menu = document.createElement('div'); + sessao1_a_3_item_menu.classList.add('item_menu'); + sessao1_a_3.appendChild(sessao1_a_3_item_menu); + + const sessao1_a_3_item_menu_img = document.createElement('img'); + sessao1_a_3_item_menu_img.src = dadosDoBloco.Menu_Monitor_img; + sessao1_a_3_item_menu_img.alt = ""; + sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_img); + const sessao1_a_3_item_menu_text = document.createElement('p'); + sessao1_a_3_item_menu_text.textContent = dadosDoBloco.Menu_Monitor_text; + sessao1_a_3_item_menu.appendChild(sessao1_a_3_item_menu_text); + + //Sessão de baixo + + const sessao2 = document.createElement('div'); + sessao2.classList.add('sessao_2'); + seguimento_2_colun_2.appendChild(sessao2); + + //Suporte + + const sessao2_a_1 = document.createElement('a'); + sessao2_a_1.href = dadosDoBloco.Menu_Suporte_a; + sessao2.appendChild(sessao2_a_1); + + const sessao2_a_1_item_menu = document.createElement('div'); + sessao2_a_1_item_menu.classList.add('item_menu'); + sessao2_a_1.appendChild(sessao2_a_1_item_menu); + + const sessao2_a_1_item_menu_img = document.createElement('img'); + sessao2_a_1_item_menu_img.src = dadosDoBloco.Menu_Suporte_img; + sessao2_a_1_item_menu_img.alt = ""; + sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_img); + const sessao2_a_1_item_menu_text = document.createElement('p'); + sessao2_a_1_item_menu_text.textContent = dadosDoBloco.Menu_Suporte_text; + sessao2_a_1_item_menu.appendChild(sessao2_a_1_item_menu_text); + + //Configuração + + const sessao2_a_2 = document.createElement('a'); + sessao2_a_2.href = dadosDoBloco.Menu_Config_a; + sessao2_a_2.target = 'frame'; + sessao2.appendChild(sessao2_a_2); + + const sessao2_a_2_item_menu = document.createElement('div'); + sessao2_a_2_item_menu.classList.add('item_menu'); + sessao2_a_2.appendChild(sessao2_a_2_item_menu); + + const sessao2_a_2_item_menu_img = document.createElement('img'); + sessao2_a_2_item_menu_img.src = dadosDoBloco.Menu_Config_img; + sessao2_a_2_item_menu_img.alt = ""; + sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_img); + const sessao2_a_2_item_menu_text = document.createElement('p'); + sessao2_a_2_item_menu_text.textContent = dadosDoBloco.Menu_Config_text; + sessao2_a_2_item_menu.appendChild(sessao2_a_2_item_menu_text); + + //capitulo 2 + + const capitulo_2 = document.createElement('section'); + capitulo_2.classList.add('capitulo_2'); + const Corpo_2 = document.createElement('section'); + Corpo_2.classList.add('Corpo_2'); + const Corpo_2_Coluna_1 = document.createElement('div'); + Corpo_2_Coluna_1.classList.add('Colunas_1'); + + const Tela = document.createElement('iframe'); + Tela.classList.add('transmissão'); + Tela.src = dadosDoBloco.Tela; + Tela.name = 'frame'; + Corpo_2_Coluna_1.appendChild(Tela); + + + + // Adicionar o painel ao bloco + + Painel.appendChild(cab); + Painel.appendChild(Matriz); + + + cab.appendChild(sucab); + sucab.appendChild(bloco_subcab1_1); + sucab.appendChild(bloco_subcab1_2); + + Matriz.appendChild(capitulo_1); + capitulo_1.appendChild(Corpo_1); + Corpo_1.appendChild(Coluna_1); + Corpo_1.appendChild(Coluna_2); + + Matriz.appendChild(capitulo_2); + capitulo_2.appendChild(Corpo_2); + Corpo_2.appendChild(Corpo_2_Coluna_1); + + + // Adicionar o bloco ao container de blocos + entrada_1.appendChild(Painel); + }); + + // Todas as funcionalidades que precisam da pagina construida precisam estar dentro de uma função e serem chamadas aqui. + + espasao(); + + // 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'; + }); + } + */ @@ -319,6 +466,7 @@ async function criarBlocos() { } } + // Chama a função para criar os blocos ao carregar a página document.addEventListener('DOMContentLoaded', criarBlocos);