Atualização 7 - registros de comentarios bore a estrutura base do ambiente do usuário
This commit is contained in:
daivid.alves
parent
bf0e08ed9d
commit
db642e067e
|
|
@ -4,13 +4,14 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="../Css/padraouser.css">
|
||||
<link rel="stylesheet" href="./Css/global/Blocos.css">
|
||||
<link rel="stylesheet" href="./Css/global/import.css">
|
||||
<link rel="stylesheet" href="./Css/page/Telas_acao/erro_404.css">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Feature-Policy"
|
||||
content="geolocation 'none'; microphone 'none'; camera 'none'; fullscreen 'none'; payment 'none'; vr 'none'; autoplay 'none'; accelerometer 'none'; ambient-light-sensor 'none'; gyroscope 'none'; magnetometer 'none';picture-in-picture 'none';sync-xhr 'none'; usb 'none';clipboard-write 'none'; clipboard-read 'none'; payments 'none'; ">
|
||||
|
||||
<link id="conexao" rel="stylesheet" href="../Css/page/Telas_acao/load.css">
|
||||
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
||||
|
||||
|
||||
<style id="fundouser">
|
||||
</style>
|
||||
<title>Ambiente do Usuario</title>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,104 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
||||
|
||||
|
||||
<title>Ambiente do Usuario</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<!-- Seu conteúdo principal aqui -->
|
||||
<main id="entrada_1">
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
|
||||
<!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
|
||||
<script>
|
||||
|
||||
async function getApiUrl() {
|
||||
try {
|
||||
const response = await fetch('../../php/config_url.php'); // Solicita a URL base do PHP
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
const data = await response.json();
|
||||
return data.apiUrl; // Retorna a URL base
|
||||
} catch (error) {
|
||||
console.error('Error fetching API URL:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function criarBlocos() {
|
||||
try {
|
||||
const apiUrl = await getApiUrl();
|
||||
const token = getAuthToken();
|
||||
|
||||
// Alinha autenteticação com a existência do token
|
||||
var autenteticação = !!token; // Se token existe, autenteticação é true, senão é false
|
||||
|
||||
const response = await fetch(`${apiUrl}/mounting`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-access-token': token || ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error('Falha ao buscar dados dos blocos');
|
||||
|
||||
const dadosDosBlocos = await response.json();
|
||||
|
||||
// Extraindo as informações do JSON
|
||||
const Usuário = dadosDosBlocos.usuario; // ou dadosDosBlocos[0].usuario se for um array
|
||||
const Empresa = dadosDosBlocos.empresa; // ou dadosDosBlocos[0].empresa
|
||||
const ImagemUser = dadosDosBlocos.imagemUser; // ou dadosDosBlocos[0].imagemUser
|
||||
const imagemFun = `url(${dadosDosBlocos.imagemFun})`; // ou dadosDosBlocos[0].imagemFun
|
||||
console.log(Usuário);
|
||||
if (autenteticação) {
|
||||
// Renderiza a interface do usuário se a autenticação for verdadeira
|
||||
renderUserInterface({ Usuário, Empresa, ImagemUser, imagemFun });
|
||||
} else {
|
||||
// Lógica para quando a autenticação falhar
|
||||
console.error('Usuário não autenticado');
|
||||
// Você pode redirecionar para a página de login ou mostrar uma mensagem de erro
|
||||
}
|
||||
|
||||
// Event listener para o botão de logout
|
||||
const logoutButton = document.getElementById('logoutButton');
|
||||
if (logoutButton) {
|
||||
logoutButton.addEventListener('click', () => {
|
||||
localStorage.removeItem('x-access-token'); // Limpa o token
|
||||
window.location.href = '../login.html';
|
||||
});
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erro ao criar blocos:', error);
|
||||
// Trate o erro de forma elegante, talvez mostrando uma mensagem ao usuário
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</html>
|
||||
|
|
@ -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';
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
//onde estará a construção da estrutura de configuração do ambiente do usuário
|
||||
|
|
@ -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) {
|
|||
+
|
||||
'<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>'
|
||||
|
|
@ -119,24 +131,39 @@ if (autenteticação == true) {
|
|||
'</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);
|
||||
|
||||
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 = '<section class="matriz_404" id="cap">'
|
||||
|
|
@ -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';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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 = '<canvas id="animationCanvas"></canvas>';
|
||||
|
||||
// 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
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 =
|
||||
'<div class="item_menu" id="testes"><img src="../Acessts/Imagens/Iconis/monitor.png" alt=""><p>Monitoramento</p></div>'
|
||||
+ // Cria o item do menu "Monitoramento"
|
||||
'<div class="sub_menu" id="sub_menu">' // Cria um submenu
|
||||
+
|
||||
'<div class="sub_menu" id="sub_menu">'
|
||||
+
|
||||
// Cada link dentro do submenu, com imagem e texto
|
||||
'<a href="./Monitoramento.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>iTGuys</p></div></a>'
|
||||
+
|
||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Freguesia.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Freguesia</p></div></a>'
|
||||
|
|
@ -29,26 +32,26 @@ if (visuMonitor == true) {
|
|||
+
|
||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_IVVCG.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>IVVCG</p></div></a>'
|
||||
+
|
||||
'</div>';
|
||||
|
||||
|
||||
|
||||
'</div>'; // 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');
|
||||
});
|
||||
this.classList.remove('show'); // Remove a classe 'show' para ocultar o submenu
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
700
js/padrao_A1.js
700
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 =
|
||||
'<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);
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 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);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue