265 lines
12 KiB
JavaScript
265 lines
12 KiB
JavaScript
|
|
|
|
// Função para criar os blocos com base nos dados fornecidos
|
|
function criarBlocos(dados) {
|
|
// Limpar o container de blocos
|
|
entrada_1.innerHTML = '';
|
|
|
|
// Iterar sobre o array de dados dos blocos
|
|
dados.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.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);
|
|
});
|
|
}
|
|
|
|
|
|
// Renderizar os blocos inicialmente ao carregar a página
|
|
criarBlocos(dadosDosBlocos);
|
|
|