Conexão do ambiente do usuário com o servidor
This commit is contained in:
daivid.alves
parent
2b2bc01b1c
commit
4c54f21b32
|
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
<link id="conexao" rel="stylesheet" href="../Css/page/Telas_acao/load.css">
|
<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">
|
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
||||||
|
<link rel="stylesheet" href="./Css/page/Telas_acao/erro_404.css">
|
||||||
<style id="fundouser">
|
<style id="fundouser">
|
||||||
</style>
|
</style>
|
||||||
<title>Ambiente do Usuario</title>
|
<title>Ambiente do Usuario</title>
|
||||||
|
|
@ -27,11 +28,7 @@
|
||||||
|
|
||||||
<!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
|
<!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
|
||||||
<script src="./js/padrao_A1.js"></script>
|
<script src="./js/padrao_A1.js"></script>
|
||||||
|
<script src="./js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js"></script>
|
||||||
<script src="./js/Erro_404.js"></script>
|
<script src="./js/Ambiente/Estrutura/load.js"></script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
@ -7,13 +8,16 @@
|
||||||
<style>
|
<style>
|
||||||
/* Define o fundo da página como preto */
|
/* Define o fundo da página como preto */
|
||||||
body {
|
body {
|
||||||
background-color: black; /* Fundo preto */
|
background-color: black;
|
||||||
color: white; /* Texto branco para melhor contraste */
|
/* Fundo preto */
|
||||||
|
color: white;
|
||||||
|
/* Texto branco para melhor contraste */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Define o fundo de um contêiner específico como preto */
|
/* Define o fundo de um contêiner específico como preto */
|
||||||
#logoContainer {
|
#logoContainer {
|
||||||
background-color: black; /* Fundo preto */
|
background-color: black;
|
||||||
|
/* Fundo preto */
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -25,6 +29,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1 style="color: white;">Imagens Protegidas com Fundo Preto</h1>
|
<h1 style="color: white;">Imagens Protegidas com Fundo Preto</h1>
|
||||||
|
|
||||||
|
|
@ -38,4 +43,5 @@
|
||||||
|
|
||||||
<script src="../js/tes.js"></script> <!-- O arquivo JS é referenciado aqui -->
|
<script src="../js/tes.js"></script> <!-- O arquivo JS é referenciado aqui -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
|
||||||
|
</html>
|
||||||
|
|
@ -141,7 +141,7 @@ if (autenteticação == true) {
|
||||||
//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
|
//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) {
|
if (visuMonitor == true) {
|
||||||
const script2 = document.createElement('script');
|
const script2 = document.createElement('script');
|
||||||
script2.src = '../js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
|
script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
|
||||||
document.body.appendChild(script2);
|
document.body.appendChild(script2);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -24,7 +24,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||||
centerX: canvas.width / 2, // Centro do círculo no eixo X
|
centerX: canvas.width / 2, // Centro do círculo no eixo X
|
||||||
centerY: canvas.height / 2, // Centro do círculo no eixo Y
|
centerY: canvas.height / 2, // Centro do círculo no eixo Y
|
||||||
radius: 150, // Raio do círculo
|
radius: 150, // Raio do círculo
|
||||||
rotationSpeed: 0.02, // Velocidade de rotação
|
rotationSpeed: 0.10, // Velocidade de rotação
|
||||||
angle: 0, // Ângulo atual
|
angle: 0, // Ângulo atual
|
||||||
linePath: [], // Armazena a trajetória do ponto
|
linePath: [], // Armazena a trajetória do ponto
|
||||||
maxPathLength: 350 // Comprimento máximo da trajetória
|
maxPathLength: 350 // Comprimento máximo da trajetória
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
// Verifica se a variável 'visuMonitor' é verdadeira
|
// Verifica se a variável 'visuMonitor' é verdadeira
|
||||||
if (visuMonitor == true) {
|
|
||||||
|
if (Permissoes.visuMonitor) {
|
||||||
// Obtém o elemento com o ID 'sub_entrada' para inserir o conteúdo
|
// Obtém o elemento com o ID 'sub_entrada' para inserir o conteúdo
|
||||||
const construtor_Secundarios_Monitoramento = document.getElementById('sub_entrada');
|
const construtor_Secundarios_Monitoramento = document.getElementById('sub_entrada');
|
||||||
|
|
||||||
|
|
|
||||||
514
js/padrao_A1.js
514
js/padrao_A1.js
|
|
@ -1,3 +1,6 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Função para obter a URL base da API
|
// Função para obter a URL base da API
|
||||||
async function getApiUrl() {
|
async function getApiUrl() {
|
||||||
try {
|
try {
|
||||||
|
|
@ -18,6 +21,13 @@ function getAuthToken() {
|
||||||
return localStorage.getItem('x-access-token');
|
return localStorage.getItem('x-access-token');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const Permissoes = {
|
||||||
|
visuMonitor: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
||||||
|
|
||||||
// Função para carregar e exibir as imagens protegidas
|
// Função para carregar e exibir as imagens protegidas
|
||||||
|
|
@ -43,23 +53,25 @@ async function criarBlocos() {
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
|
|
||||||
// Agora acessa as propriedades do objeto
|
// Agora acessa as propriedades do objeto
|
||||||
const Usuário = data.usuario.nome.substring(0, 11); // Limita a 10 caracteres;
|
const nomeCompleto = data.usuario.nome; // Nome completo do usuário
|
||||||
|
const primeiroNome = nomeCompleto.split(' ')[0].substring(0, 10); // Pega o primeiro nome e limita a 10 caracteres // Limita a 10 caracteres;
|
||||||
const Empresa = data.empresa.nome;
|
const Empresa = data.empresa.nome;
|
||||||
const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
|
const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
|
||||||
const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
|
//const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
|
||||||
const logoEmpresa = `${apiUrl}${data.empresa.logo}`;
|
const logoEmpresa = `${apiUrl}${data.empresa.logo}`;
|
||||||
const imagemFun = 'ola';
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Exibe as imagens protegidas usando os URLs retornados pela API
|
// Exibe as imagens protegidas usando os URLs retornados pela API
|
||||||
loadImage(ImagemUser, 'profileImage');
|
loadImage(ImagemUser, 'profileImage');
|
||||||
loadImage(ImagemUser2, 'profileImage2'); // Imagem de perfil do usuário
|
//loadImage(ImagemUser2, 'profileImage'); // Imagem de perfil do usuário
|
||||||
loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
|
loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
|
||||||
|
|
||||||
// Acessando o primeiro objeto do array retornado
|
// Acessando o primeiro objeto do array retornado
|
||||||
|
|
||||||
console.log(data);
|
console.log(data);
|
||||||
console.log(Usuário);
|
console.log(primeiroNome);
|
||||||
console.log(Empresa);
|
console.log(Empresa);
|
||||||
console.log(ImagemUser);
|
console.log(ImagemUser);
|
||||||
console.log(logoEmpresa);
|
console.log(logoEmpresa);
|
||||||
|
|
@ -72,30 +84,6 @@ async function criarBlocos() {
|
||||||
const estilos = document.getElementById('conexao');
|
const estilos = document.getElementById('conexao');
|
||||||
estilos.href = './Css/global/Estrutura.css';
|
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');
|
const construtor_primario = document.getElementById('entrada_1');
|
||||||
|
|
||||||
|
|
@ -104,7 +92,7 @@ async function criarBlocos() {
|
||||||
+
|
+
|
||||||
'<header class="cabecario_1">'
|
'<header class="cabecario_1">'
|
||||||
+
|
+
|
||||||
'<div class="Bloco_subcab1_1"><img id="companyLogo" alt="" class="icon_subcab1_1"></div>'
|
'<div class="Bloco_subcab1_1"><img alt="" class="icon_subcab1_1 companyLogo"></div>'
|
||||||
+
|
+
|
||||||
'<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
|
'<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
|
||||||
+
|
+
|
||||||
|
|
@ -126,13 +114,13 @@ async function criarBlocos() {
|
||||||
+
|
+
|
||||||
'<div class="user_1">'
|
'<div class="user_1">'
|
||||||
+
|
+
|
||||||
'<img id="profileImage" alt="" class="icon_subcab2_2">'
|
'<img alt="" class="icon_subcab2_2 profileImage">'
|
||||||
+
|
+
|
||||||
'<img id="profileImage2" alt="" class="icon_subcab2_1">'
|
'<img alt="" class="icon_subcab2_1 profileImage">'
|
||||||
+
|
+
|
||||||
'</div>'
|
'</div>'
|
||||||
+
|
+
|
||||||
'<div class="user_2"><p> <div id="User">' + Usuário + '</div><div id="Empresa">' + Empresa + '</div></p></div>'
|
'<div class="user_2"><p> <div id="User">' + primeiroNome + '</div><div id="Empresa">' + Empresa + '</div></p></div>'
|
||||||
+
|
+
|
||||||
'</div>'
|
'</div>'
|
||||||
+
|
+
|
||||||
|
|
@ -178,6 +166,9 @@ async function criarBlocos() {
|
||||||
'</main>'
|
'</main>'
|
||||||
;
|
;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.
|
//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
|
//construtor da reação do menu sobre as interações do usuário
|
||||||
|
|
@ -186,20 +177,77 @@ async function criarBlocos() {
|
||||||
document.body.appendChild(script1);
|
document.body.appendChild(script1);
|
||||||
|
|
||||||
|
|
||||||
|
if (Permissoes.visuMonitor) {
|
||||||
|
const script2 = document.createElement('script');
|
||||||
|
script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
|
||||||
|
script2.setAttribute // Acessando a propriedade corretamente
|
||||||
|
document.body.appendChild(script2);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
|
|
||||||
|
|
||||||
|
//Constante de controle sobre estilos css do painel de erro.
|
||||||
|
const estilos = document.getElementById('conexao');
|
||||||
|
estilos.href = '../Css/page/Telas_acao/erro_404.css';
|
||||||
|
|
||||||
|
//variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
|
||||||
|
//o Status do erro
|
||||||
|
//Mensagem do erro
|
||||||
|
//Um mensagem complementar sobre o erro
|
||||||
|
var Status = 'Erro 404';
|
||||||
|
var mensagem = 'Desculpe mas sua página não foi encontrada';
|
||||||
|
var sub_mensagem = 'Tente fazer seu, login novamente';
|
||||||
|
|
||||||
|
//Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
|
||||||
|
const erro = document.getElementById('entrada_1');
|
||||||
|
|
||||||
|
erro.innerHTML = '<section class="matriz_404" id="cap">'
|
||||||
|
+
|
||||||
|
'<section class="paineis_1"><div class="cap"><h1>' + Status + '</h1></div></section>'
|
||||||
|
+
|
||||||
|
'<section class="paineis_2">'
|
||||||
|
+
|
||||||
|
'<div class="cap"><h2>' + mensagem + '</h2><p>' + sub_mensagem + '</p></div>'
|
||||||
|
+
|
||||||
|
'<div class="cap_2"><a href="/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/login.html"><button>Retornar</button></a></div>'
|
||||||
|
+
|
||||||
|
'</section>'
|
||||||
|
+
|
||||||
|
'<div class="wave wave_1"></div>'
|
||||||
|
+
|
||||||
|
'<div class="wave wave_2"></div>'
|
||||||
|
+
|
||||||
|
'<div class="wave wave_3"></div>'
|
||||||
|
+
|
||||||
|
'<div class="wave wave_4"></div>'
|
||||||
|
+
|
||||||
|
'</section>'
|
||||||
|
;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
console.error('Erro ao criar blocos:', error);
|
console.error('Erro ao criar blocos:', error);
|
||||||
document.getElementById('result').innerText = 'Erro ao carregar dados: ' + error.message;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
||||||
|
|
||||||
|
async function loadImage(url, imgElementClass) {
|
||||||
async function loadImage(url, imgElementId) {
|
|
||||||
try {
|
try {
|
||||||
const token = getAuthToken();
|
const token = getAuthToken();
|
||||||
console.log('Token:', token); // Verifica o token
|
console.log('Token:', token);
|
||||||
console.log('URL da imagem:', url); // Verifica a URL
|
console.log('URL da imagem:', url);
|
||||||
|
|
||||||
const response = await fetch(url, {
|
const response = await fetch(url, {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
|
|
@ -214,365 +262,79 @@ async function loadImage(url, imgElementId) {
|
||||||
|
|
||||||
const blob = await response.blob();
|
const blob = await response.blob();
|
||||||
const imageUrl = URL.createObjectURL(blob);
|
const imageUrl = URL.createObjectURL(blob);
|
||||||
document.getElementById(imgElementId).src = imageUrl;
|
|
||||||
|
// Seleciona todos os elementos com a classe
|
||||||
|
const imgElements = document.getElementsByClassName(imgElementClass);
|
||||||
|
if (imgElements.length > 0) {
|
||||||
|
for (let i = 0; i < imgElements.length; i++) {
|
||||||
|
imgElements[i].src = imageUrl;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.warn('Nenhum elemento encontrado com a classe:', imgElementClass);
|
||||||
|
}
|
||||||
|
|
||||||
|
return imageUrl; // Retorna a URL da imagem carregada
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Erro ao carregar a imagem:', error);
|
console.error('Erro ao carregar a imagem:', error);
|
||||||
console.log('ID do elemento:', imgElementId); // Verifica o ID do elemento
|
console.log('Classe do elemento:', imgElementClass);
|
||||||
|
return null; // Retorna null em caso de erro
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// Função para carregar a imagem de fundo
|
||||||
|
async function loadBackgroundAndUpdateStyle() {
|
||||||
// Inicia o carregamento das imagens quando o script for carregado
|
|
||||||
document.addEventListener('DOMContentLoaded', criarBlocos);
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
async function criarBlocos() {
|
|
||||||
try {
|
try {
|
||||||
const apiUrl = await getApiUrl();
|
const apiUrl = await getApiUrl();
|
||||||
const token = getAuthToken();
|
const token = getAuthToken();
|
||||||
|
|
||||||
const response = await fetch(`${apiUrl}/mounting`, {
|
const response = await fetch(`${apiUrl}/mounting`, {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
headers: {
|
headers: {
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'x-access-token': token ? token : ''
|
'x-access-token': token ? token : ''
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error('Failed to fetch block data');
|
throw new Error('Erro ao carregar os dados: ' + response.statusText);
|
||||||
}
|
}
|
||||||
|
|
||||||
const dadosDosBlocos = await response.json();
|
const data = await response.json();
|
||||||
|
const imagemFun = `${apiUrl}${data.usuario.img_fundo}`;
|
||||||
|
|
||||||
|
const fundoResponse = await fetch(imagemFun, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'x-access-token': token ? token : ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!fundoResponse.ok) {
|
||||||
|
throw new Error('Erro ao carregar a imagem de fundo: ' + fundoResponse.statusText);
|
||||||
|
}
|
||||||
|
|
||||||
//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
|
const blob = await fundoResponse.blob();
|
||||||
if (visuMonitor == true) {
|
const fundoUserUrl = URL.createObjectURL(blob);
|
||||||
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 fundouser = document.getElementById('fundouser');
|
||||||
|
fundouser.innerHTML =
|
||||||
|
'.Corpo_1 .Colunas_1 {' +
|
||||||
|
'display: flex;' +
|
||||||
|
'flex-direction: row;' +
|
||||||
|
'background-image: url("' + fundoUserUrl + '");' +
|
||||||
|
'background-position: center;' +
|
||||||
|
'background-size: cover;' +
|
||||||
|
'width: 15vw;' +
|
||||||
|
'height: 10vh;' +
|
||||||
|
'overflow: hidden;' +
|
||||||
|
'transition: 1s ease;' +
|
||||||
|
'}';
|
||||||
|
|
||||||
|
console.log('Imagem de fundo carregada e estilo aplicado com sucesso.');
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Erro ao criar blocos:', error);
|
console.error('Erro ao carregar a imagem de fundo:', error);
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Chama a função para criar os blocos ao carregar a página
|
|
||||||
document.addEventListener('DOMContentLoaded', criarBlocos);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function espasao() {
|
|
||||||
|
|
||||||
|
|
||||||
var botao = document.querySelector('#menu')
|
|
||||||
var cabecario = document.querySelector('.cabecario_1')
|
|
||||||
var tela = document.querySelector('.transmissão')
|
|
||||||
var menu = document.querySelector('.capitulo_1')
|
|
||||||
var temas = document.querySelectorAll('.item_menu')
|
|
||||||
|
|
||||||
|
|
||||||
botao.addEventListener('click', function () {
|
|
||||||
menu.classList.toggle('expansao');
|
|
||||||
cabecario.classList.toggle('expansao');
|
|
||||||
tela.classList.toggle('expansao');
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
function selectLink() {
|
|
||||||
temas.forEach((item) =>
|
|
||||||
item.classList.remove('ativo')
|
|
||||||
)
|
|
||||||
this.classList.add('ativo')
|
|
||||||
}
|
}
|
||||||
temas.forEach((item) =>
|
|
||||||
item.addEventListener('click', selectLink))
|
|
||||||
|
|
||||||
}
|
}
|
||||||
*/
|
|
||||||
|
// Inicia o carregamento das imagens quando o script for carregado
|
||||||
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
|
await criarBlocos();
|
||||||
|
await loadBackgroundAndUpdateStyle();
|
||||||
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue