+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/html/Ambiente_Usuario.html b/html/arquivos_extras/Ambiente_Usuario.html
similarity index 100%
rename from html/Ambiente_Usuario.html
rename to html/arquivos_extras/Ambiente_Usuario.html
diff --git a/html/Ambiente_Usuario copy.html b/html/arquivos_extras/Ambiente_teste.html
similarity index 100%
rename from html/Ambiente_Usuario copy.html
rename to html/arquivos_extras/Ambiente_teste.html
diff --git a/html/tes.html b/html/arquivos_extras/tes.html
similarity index 100%
rename from html/tes.html
rename to html/arquivos_extras/tes.html
diff --git a/html/projetos_itguys.html b/html/projetos_itguys.html
new file mode 100644
index 0000000..b59dab1
--- /dev/null
+++ b/html/projetos_itguys.html
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+ Formulário
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/Ambiente/Estrutura/Estrutura_Primaria.js b/js/Ambiente/Estrutura/Estrutura_Primaria.js
index 98f1f34..30f847f 100644
--- a/js/Ambiente/Estrutura/Estrutura_Primaria.js
+++ b/js/Ambiente/Estrutura/Estrutura_Primaria.js
@@ -1,216 +1,526 @@
-//Varivel para valida a autenticação do usuário, se for true o ambiente é construido, se for false, um tela de erro é apresentada no lugar do ambiente, e caso a resposta demore para ser apresentada um tela de carregamento é apresentada.
-var autenteticação = true;
-
-//If que constrola o cenario de true
-if (autenteticação == true) {
-
- //constante que controla o estilo css que está estilizando todo o ambiente do usuário.
- const estilos = document.getElementById('conexao');
- estilos.href = '../Css/global/Estrutura.css';
-
- //variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
- //Nome do usuário
- //Nome da empresa
- //Imagem do usuário
- //Imagem de fundo do usuário
- var Usuário = 'Daivid';
- var Empresa = 'ItGuys';
- var ImagemUser = '../Acessts/Imagens/1605305486169.jpg';
- var imagemFun = 'url(../Acessts/Imagens/01160209321024.jpg)';
-
- //Essa ultima variavel é dedicada ao controle de hiriaquia, caso alguem tenha permissão para visualizar essa categoria, será true, caso ela não tenha permissão, será false, e então toda essa categoria não será apresentada.
- var visuMonitor = true;
-
-
- //constante conectada com estilos internos dentro do próprio html, para trazer a capacidade de controlar a imagem que está no fundo do perfil do suário.
- const fundouser = document.getElementById('fundouser');
-
- fundouser.innerHTML =
- '.Corpo_1 .Colunas_1 {'
- +
- 'display: flex;'
- +
- 'flex-direction: row;'
- +
- 'background-image:' + imagemFun + ';'
- +
- 'background-position: center;'
- +
- 'background-size: cover;'
- +
- 'width: 15vw;'
- +
- 'height: 10vh;'
- +
- 'overflow: hidden;'
- +
- 'transition: 1s ease;'
- ;
-
- //Constante de construção primira do ambiente do usuário, é aqui onde toda á página é construida, ao mesmo tempo que as variaveis mudificam certas informações.
- const construtor_primario = document.getElementById('entrada_1');
-
- construtor_primario.innerHTML =
- ''
- +
- ''
- +
- '
'
- +
- ''
- +
- //Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
- ''
- +
- ''
- +
- '
'
- +
- ''
- ;
-
- //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);
- };
-
+// Função para obter a URL base da API
+async function getApiUrl() {
+ try {
+ 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');
+ }
+ const data = await response.json();
+ return data.apiUrl; // Retorna a URL base
+ } catch (error) {
+ console.error('Error fetching API URL:', error);
+ throw error;
+ }
}
-//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 = ''
- +
- '
' + Status + '
'
- +
- ''
- +
- '
' + mensagem + '
' + sub_mensagem + '
'
- +
- '
'
- +
- ''
- +
- ''
- +
- ''
- +
- ''
- +
- ''
- +
- ''
- ;
-
-
-
-
+// Função para obter o token do localStorage
+function getAuthToken() {
+ return localStorage.getItem('x-access-token');
}
-// 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 Permissoes = {
+ visuMonitor: true,
+};
+
+
+
+// Função para carregar uma imagem protegida com token JWT e exibi-la
+
+// Função para carregar e exibir as imagens protegidas
+async function criarBlocos() {
+ try {
+ const apiUrl = await getApiUrl(); // Obtém a URL da API a partir do PHP
+ const token = getAuthToken(); // Obtém o token JWT do localStorage
+
+ // Faz uma requisição para obter os dados da rota /mounting
+ const response = await fetch(`${apiUrl}/mounting`, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'x-access-token': token ? token : ''
+ }
+ });
+
+ if (!response.ok) {
+ throw new Error('Erro na requisição: ' + response.statusText);
+
+ }
+
+ const data = await response.json();
+
+ // Agora acessa as propriedades do objeto
+ 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 ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
+ //const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
+ const logoEmpresa = `${apiUrl}${data.empresa.logo}`;
+
+
+
+
+ // Exibe as imagens protegidas usando os URLs retornados pela API
+ loadImage(ImagemUser, 'profileImage');
+ //loadImage(ImagemUser2, 'profileImage'); // Imagem de perfil do usuário
+ loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
+
+ // Acessando o primeiro objeto do array retornado
+
+ console.log(data);
+ console.log(primeiroNome);
+ console.log(Empresa);
+ console.log(ImagemUser);
+ console.log(logoEmpresa);
+
+
+ //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/page/Ambiente/Estrutura/estrutura.css';
+
+
+ const construtor_primario = document.getElementById('entrada_1');
+
+ construtor_primario.innerHTML =
+ ''
+ +
+ ''
+ +
+ ''
+ +
+ '
'
+ +
+ ''
+ +
+ '
'
+ +
+ '
'
+ +
+ ''
+ +
+ '
'
+ +
+ ''
+ +
+ ''
+ +
+ ' '
+ +
+ ''
+ +
+ ''
+
+ const construido = true;
+
+ ;
+ localStorage.setItem('construido', JSON.stringify(construido));
+
+ var botao = document.getElementById('id_ajuste');
+ var cabecario = document.querySelector('.capitulo_1');
+ var tela = document.querySelector('.capitulo_2');
+ var menu = document.querySelector('.menu_lateral');
+
+ if (botao) {
+ botao.addEventListener('click', function () {
+ console.log('Botão clicado!');
+ if (menu) menu.classList.toggle('expansao');
+ if (cabecario) cabecario.classList.toggle('expansao');
+ if (tela) tela.classList.toggle('expansao');
+ });
+ } else {
+ console.error('Botão não encontrado!');
+ }
+
+
+ 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);
+ }
+
+ // Adiciona o listener de clique após a construção do HTML
+
+
+
+
+
+
+ //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
+
+
+
+
+
+
+
+
+
+ } 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
+
+
+ const apiUrl = await getApiUrl(); // Obtém a URL da API a partir do PHP
+ const token = getAuthToken(); // Obtém o token JWT do localStorage
+
+ // Faz uma requisição para obter os dados da rota /mounting
+ const response = await fetch(`${apiUrl}/mounting`, {
+ method: 'GET',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'x-access-token': token ? token : ''
+ }
+ });
+
+ const respostaserver = response.status
+
+ if (respostaserver == 401) {
+
+ var Status = 'Erro 401';
+ var mensagem = 'Desculpe mas sua página não foi encontrada';
+ var sub_mensagem = 'Tente fazer seu, login novamente';
+ var button_info = 'Retorne';
+ var button_acao = '/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/login.html';
+
+ }
+
+ if (respostaserver == 404) {
+
+ var Status = 'Erro 404';
+ var mensagem = 'Houve um problema com seu ambiente !!';
+ var sub_mensagem = 'Por favor contate o suporte suporte@itguys.com.br';
+ var button_info = 'Nós contate';
+ var button_acao = 'https://api.whatsapp.com/send?phone=5521966344698';
+
+ }
+
+
+ //Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
+ const erro = document.getElementById('entrada_1');
+
+ erro.innerHTML = ''
+ +
+ '
' + Status + '
'
+ +
+ ''
+ +
+ '
' + mensagem + '
' + sub_mensagem + '
'
+ +
+ '
'
+ +
+ ''
+ +
+ ''
+ +
+ ''
+ +
+ ''
+ +
+ ''
+ +
+ ''
+ ;
+
+
+
+
+ console.error('Erro ao criar blocos:', error);
+
+
+
+ }
}
+// Função para carregar uma imagem protegida com token JWT e exibi-la
+
+async function loadImage(url, imgElementClass) {
+ try {
+ const token = getAuthToken();
+ console.log('Token:', token);
+ console.log('URL da imagem:', url);
+
+ const response = await fetch(url, {
+ method: 'GET',
+ headers: {
+ 'x-access-token': token ? token : ''
+ }
+ });
+
+ if (!response.ok) {
+ throw new Error('Erro ao carregar a imagem: ' + response.statusText);
+ }
+
+ const blob = await response.blob();
+ const imageUrl = URL.createObjectURL(blob);
+
+ // 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) {
+ console.error('Erro ao carregar a imagem:', error);
+ 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() {
+ try {
+ const apiUrl = await getApiUrl();
+ const token = getAuthToken();
+ const response = await fetch(`${apiUrl}/mounting`, {
+ method: 'GET',
+ headers: {
+ 'x-access-token': token ? token : ''
+ }
+ });
+
+ if (!response.ok) {
+ throw new Error('Erro ao carregar os dados: ' + response.statusText);
+ }
+
+ 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);
+ }
+
+ const blob = await fundoResponse.blob();
+ const fundoUserUrl = URL.createObjectURL(blob);
+
+ const fundouser = document.getElementById('fundouser');
+ fundouser.innerHTML =
+ '.seguimentacao_2 .coluna_1 {' +
+ 'width: 100%;' +
+ 'height: 30vh;' +
+ 'display: flex;' +
+ 'flex-direction: row;' +
+ 'background-image: url("' + fundoUserUrl + '");' +
+ 'background-position: center;'
+ 'background-position: center;' +
+ 'background-size: cover;' +
+ 'overflow: hidden;' +
+ 'transition: 1s ease;' +
+ '}';
+ console.log('Imagem de fundo carregada e estilo aplicado com sucesso.');
+ } catch (error) {
+ console.error('Erro ao carregar a imagem de fundo:', error);
+ }
+}
+
+// Inicia o carregamento das imagens quando o script for carregado
+document.addEventListener('DOMContentLoaded', async () => {
+
+ await criarBlocos();
+ await loadBackgroundAndUpdateStyle();
+
+});
diff --git a/js/Ambiente/Estrutura/Estrutura_Primaria_modelo.js b/js/Ambiente/Estrutura/Estrutura_Primaria_modelo.js
new file mode 100644
index 0000000..98f1f34
--- /dev/null
+++ b/js/Ambiente/Estrutura/Estrutura_Primaria_modelo.js
@@ -0,0 +1,216 @@
+
+
+//Varivel para valida a autenticação do usuário, se for true o ambiente é construido, se for false, um tela de erro é apresentada no lugar do ambiente, e caso a resposta demore para ser apresentada um tela de carregamento é apresentada.
+var autenteticação = true;
+
+//If que constrola o cenario de true
+if (autenteticação == true) {
+
+ //constante que controla o estilo css que está estilizando todo o ambiente do usuário.
+ const estilos = document.getElementById('conexao');
+ estilos.href = '../Css/global/Estrutura.css';
+
+ //variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
+ //Nome do usuário
+ //Nome da empresa
+ //Imagem do usuário
+ //Imagem de fundo do usuário
+ var Usuário = 'Daivid';
+ var Empresa = 'ItGuys';
+ var ImagemUser = '../Acessts/Imagens/1605305486169.jpg';
+ var imagemFun = 'url(../Acessts/Imagens/01160209321024.jpg)';
+
+ //Essa ultima variavel é dedicada ao controle de hiriaquia, caso alguem tenha permissão para visualizar essa categoria, será true, caso ela não tenha permissão, será false, e então toda essa categoria não será apresentada.
+ var visuMonitor = true;
+
+
+ //constante conectada com estilos internos dentro do próprio html, para trazer a capacidade de controlar a imagem que está no fundo do perfil do suário.
+ const fundouser = document.getElementById('fundouser');
+
+ fundouser.innerHTML =
+ '.Corpo_1 .Colunas_1 {'
+ +
+ 'display: flex;'
+ +
+ 'flex-direction: row;'
+ +
+ 'background-image:' + imagemFun + ';'
+ +
+ 'background-position: center;'
+ +
+ 'background-size: cover;'
+ +
+ 'width: 15vw;'
+ +
+ 'height: 10vh;'
+ +
+ 'overflow: hidden;'
+ +
+ 'transition: 1s ease;'
+ ;
+
+ //Constante de construção primira do ambiente do usuário, é aqui onde toda á página é construida, ao mesmo tempo que as variaveis mudificam certas informações.
+ const construtor_primario = document.getElementById('entrada_1');
+
+ construtor_primario.innerHTML =
+ ''
+ +
+ ''
+ +
+ '
'
+ +
+ ''
+ +
+ //Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
+ ''
+ +
+ ''
+ +
+ '
'
+ +
+ ''
+ ;
+
+ //Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.
+
+ //construtor da reação do menu sobre as interações do usuário
+ const script1 = document.createElement('script');
+ script1.src = '../js/Ambiente/Estrutura/Reacao_menu.js';
+ document.body.appendChild(script1);
+
+ //construtor da sub camada de construção, alinhada sobre a condicional onde se a pessoa possui permisão para visualizar o monitoramente de sua empresa, visuMonitor será igual á true, enquanto se ela não tiver permissão para visualizar o visuMonitor será igual á false
+ if (visuMonitor == true) {
+ const script2 = document.createElement('script');
+ script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
+ document.body.appendChild(script2);
+ };
+
+
+}
+
+//Else sendo a reação opostao ao do if, logo sendo esse o cenario onde a autenticação não seja valida.
+else {
+
+ //Constante de controle sobre estilos css do painel de erro.
+ const estilos = document.getElementById('conexao');
+ estilos.href = '../Css/page/Telas_acao/erro_404.css';
+
+ //variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
+ //o Status do erro
+ //Mensagem do erro
+ //Um mensagem complementar sobre o erro
+ var Status = 'Erro 404';
+ var mensagem = 'Desculpe mas sua página não foi encontrada';
+ var sub_mensagem = 'Tente fazer seu, login novamente';
+
+ //Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
+ const erro = document.getElementById('entrada_1');
+
+ erro.innerHTML = ''
+ +
+ '
' + Status + '
'
+ +
+ ''
+ +
+ '
' + mensagem + '
' + sub_mensagem + '
'
+ +
+ '
'
+ +
+ ''
+ +
+ ''
+ +
+ ''
+ +
+ ''
+ +
+ ''
+ +
+ ''
+ ;
+
+
+
+
+}
+
+
+// Event listener para o botão de logout
+const logoutButton = document.getElementById('logoutButton');
+if (logoutButton) {
+ logoutButton.addEventListener('click', function () {
+ // Limpar o token do localStorage ao clicar no botão de logout
+ clearAuthToken();
+ // Redirecionar para a página de login ou qualquer outra página desejada após o logout
+ window.location.href = '../login.html';
+ });
+}
+
+
+
+
+
+
+
+
+
diff --git a/js/Ambiente/Estrutura/Reacao_menu.js b/js/Ambiente/Estrutura/Reacao_menu.js
index 3bd33df..ebec226 100644
--- a/js/Ambiente/Estrutura/Reacao_menu.js
+++ b/js/Ambiente/Estrutura/Reacao_menu.js
@@ -1,33 +1,17 @@
-//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')
-var menu = document.querySelector('.capitulo_1')
-var temas = document.querySelectorAll('.item_menu')
+var botao = document.getElementById('id_ajuste');
+var cabecario = document.querySelector('.capitulo_1');
+var tela = document.querySelector('.capitulo_2');
+var menu = document.querySelector('.menu_lateral');
-
-//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');
- tela.classList.toggle('expansao');
-
-});
-
-function selectLink() {
- temas.forEach((item) =>
- item.classList.remove('ativo')
- )
- this.classList.add('ativo')
+if (botao) {
+ botao.addEventListener('click', function () {
+ console.log('Botão clicado!');
+ if (menu) menu.classList.toggle('expansao');
+ if (cabecario) cabecario.classList.toggle('expansao');
+ if (tela) tela.classList.toggle('expansao');
+ });
+} else {
+ console.error('Botão não encontrado!');
}
-temas.forEach((item) =>
- item.addEventListener('click', selectLink))
\ No newline at end of file
diff --git a/js/Ambiente/Estrutura/load.js b/js/Ambiente/Estrutura/load.js
index f81aa47..cc96c6e 100644
--- a/js/Ambiente/Estrutura/load.js
+++ b/js/Ambiente/Estrutura/load.js
@@ -1,82 +1,86 @@
-// 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'
+function verificarAmbiente() {
var main = document.getElementById("entrada_1");
+ const tela_laod = document.getElementById('entrada_2');
+ let elemento_1;
+ let elemento_2;
- // 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');
+ elemento_1 = 'Estamos carregando sua página';
+ } else {
+ elemento_1 = 'Algo foi encontrado mas estamos preparando';
+ }
- // Adiciona um elemento canvas ao conteúdo da tag main
- tela_laod.innerHTML = '';
+ elemento_2 = '';
+ tela_laod.innerHTML = '
' + elemento_1 + '
' + elemento_2 + '
';
+}
- // Obtém o contexto 2D do canvas para desenhar
- const canvas = document.getElementById('animationCanvas');
- const ctx = canvas.getContext('2d');
+function finalizar() {
+ const tela_laod = document.getElementById('entrada_2');
+ setTimeout(() => {
+ tela_laod.innerHTML = '';
+ }, 3000);
+}
- // Define as dimensões do canvas para preencher a tela
+window.addEventListener('DOMContentLoaded', iniciarAnimacao)
+
+window.addEventListener('load', () => {
+ finalizar();
+});
+
+
+
+function iniciarAnimacao() {
+ const canvas = document.getElementById('animationCanvas');
+ const ctx = canvas.getContext('2d');
+ canvas.width = window.innerWidth;
+ canvas.height = window.innerHeight;
+
+ const circle = {
+ centerX: canvas.width / 2,
+ centerY: canvas.height / 2,
+ radius: 150,
+ rotationSpeed: 0.10,
+ angle: 0,
+ linePath: [],
+ maxPathLength: 350
+ };
+
+ function drawCircularPath() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ const pathX = circle.centerX + circle.radius * Math.cos(circle.angle);
+ const pathY = circle.centerY + circle.radius * Math.sin(circle.angle);
+ circle.linePath.push({ x: pathX, y: pathY });
+
+ ctx.beginPath();
+ for (let i = 0; i < circle.linePath.length - 1; i++) {
+ 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();
+
+ if (circle.linePath.length > circle.maxPathLength) {
+ circle.linePath.shift();
+ if (circle.angle >= Math.PI * 2) {
+ circle.angle = 0;
+ circle.linePath = [];
+ }
+ }
+ }
+
+ function animate() {
+ circle.angle += circle.rotationSpeed;
+ drawCircularPath();
+ requestAnimationFrame(animate);
+ }
+
+ animate();
+
+ window.addEventListener('resize', () => {
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, // 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.10, // 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);
-
- // 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
- ctx.beginPath();
- for (let i = 0; i < circle.linePath.length - 1; i++) {
- 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'; // 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
- if (circle.linePath.length > circle.maxPathLength) {
- circle.linePath.shift(); // Remove o primeiro ponto do caminho
- // 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; // Atualiza o ângulo
- drawCircularPath(); // Desenha a trajetória atual
- requestAnimationFrame(animate); // Solicita a próxima animação
- }
-
- animate(); // Inicia a animação
-
- // Ajusta o tamanho do canvas quando a janela é redimensionada
- window.addEventListener('resize', () => {
- 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
- });
- }
-});
+ circle.centerX = canvas.width / 2;
+ circle.centerY = canvas.height / 2;
+ });
+}
\ No newline at end of file
diff --git a/js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js b/js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js
index cdc04d5..1f03494 100644
--- a/js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js
+++ b/js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js
@@ -1,39 +1,23 @@
// Verifica se a variável 'visuMonitor' é verdadeira
+
if (Permissoes.visuMonitor) {
// 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_icon = document.getElementById('sub_entrada_moni_1');
+ const construtor_Secundarios_Monitoramento_button = document.getElementById('sub_entrada_moni_2');
// Define o conteúdo HTML a ser inserido no 'sub_entrada'
- construtor_Secundarios_Monitoramento.innerHTML =
- '
Monitoramento
'
- + // Cria o item do menu "Monitoramento"
- '
' // Cria um submenu
- +
- // Cada link dentro do submenu, com imagem e texto
- '
'
- +
- ''
- +
- //Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
- ''
- +
- ''
- +
- '
'
- +
- ''
- ;
-
-
-
-
- //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);
-
-
- 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) {
-
-
- //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 = ''
- +
- '
' + Status + '
'
- +
- ''
- +
- '
' + mensagem + '
' + sub_mensagem + '
'
- +
- '
'
- +
- ''
- +
- ''
- +
- ''
- +
- ''
- +
- ''
- +
- ''
- ;
-
-
-
-
- console.error('Erro ao criar blocos:', error);
-
-
-
- }
-}
-
-
-
-// Função para carregar uma imagem protegida com token JWT e exibi-la
-
-async function loadImage(url, imgElementClass) {
- try {
- const token = getAuthToken();
- console.log('Token:', token);
- console.log('URL da imagem:', url);
-
- const response = await fetch(url, {
- method: 'GET',
- headers: {
- 'x-access-token': token ? token : ''
- }
- });
-
- if (!response.ok) {
- throw new Error('Erro ao carregar a imagem: ' + response.statusText);
- }
-
- const blob = await response.blob();
- const imageUrl = URL.createObjectURL(blob);
-
- // 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) {
- console.error('Erro ao carregar a imagem:', error);
- 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() {
- try {
- const apiUrl = await getApiUrl();
- const token = getAuthToken();
- const response = await fetch(`${apiUrl}/mounting`, {
- method: 'GET',
- headers: {
- 'x-access-token': token ? token : ''
- }
- });
-
- if (!response.ok) {
- throw new Error('Erro ao carregar os dados: ' + response.statusText);
- }
-
- 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);
- }
-
- const blob = await fundoResponse.blob();
- const fundoUserUrl = URL.createObjectURL(blob);
-
- 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) {
- console.error('Erro ao carregar a imagem de fundo:', error);
- }
-}
-
-// Inicia o carregamento das imagens quando o script for carregado
-document.addEventListener('DOMContentLoaded', async () => {
- await criarBlocos();
- await loadBackgroundAndUpdateStyle();
-});
diff --git a/login.html b/login.html
index ae51013..e82d68b 100644
--- a/login.html
+++ b/login.html
@@ -69,7 +69,7 @@
+ placeholder="escreva sua senha" writingsuggestions="on" autocomplete="password">
+ 
+