teste
/
testes
Template
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

Atualização 17 | Implementação da tela de monitoramento, e estilização dela, além de implementação das telas de carregamento

This commit is contained in:
daivid.alves 2025-02-20 18:16:47 -03:00
parent 56447df38d
commit 43f6b5ca73
41 changed files with 1872 additions and 495 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Acessts/Imagens/Iconis/User 1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
Acessts/Imagens/Iconis/User 2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
Acessts/Imagens/Iconis/Zammad_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
Acessts/Imagens/Iconis/o-email.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 12 KiB

BIN
Acessts/Imagens/Utili/Tela_Marca White.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

9
Css/global/Scroll.css
View File

@ -1,5 +1,6 @@
/* Estilo customizado para o scroll (somente no Webkit) */
.Capitulo_1 .linha_1 .Corpo::-webkit-scrollbar {
.Capitulo_1 .linha_1 .Corpo::-webkit-scrollbar,
.capitulo_2 .PainelConteudo_Moni .PainelHostsAlinhamento .PainelHostsItens::-webkit-scrollbar-thumb {
width: 0.2vw;
/* Largura da barra de rolagem */
height: 0.2vw;
@ -7,7 +8,8 @@
}
.Capitulo_1 .linha_1 .Corpo::-webkit-scrollbar-thumb {
.Capitulo_1 .linha_1 .Corpo::-webkit-scrollbar-thumb,
.capitulo_2 .PainelConteudo_Moni .PainelHostsAlinhamento .PainelHostsItens::-webkit-scrollbar-thumb {
background-color: var(--Cor_Segundaria_2_1);
/* Cor da parte da barra que você arrasta */
border-radius: 1vw;
@ -16,7 +18,8 @@
}
/* Aumentando o tamanho do track (fundo da barra de rolagem) */
.Capitulo_1 .linha_1 .Corpo::-webkit-scrollbar-track {
.Capitulo_1 .linha_1 .Corpo::-webkit-scrollbar-track,
.capitulo_2 .PainelConteudo_Moni .PainelHostsAlinhamento .PainelHostsItens::-webkit-scrollbar-thumb {
background-color: var(--Cor_Segundaria_5_2);
/* Cor do fundo do scroll */
border-radius: 10px;

390
Css/page/Ambiente/Config/pop.css
View File

@ -2,43 +2,61 @@
.Pop_up_Config.PainelEstilo .Pop_up_Config.PainelUser {
color: #000;
/*define a cor */
}
.Pop_up_Config.PainelEstilo {
display: none;
/* define o display como none*/
border: none;
/*retira a borda padrao do html*/
flex-direction: column;
/*define a direção dos itens na div*/
width: 40vw;
/*define largura*/
height: 70vh;
/*Define altura*/
border-radius: 3vw;
/*define tamanho da borda*/
position: absolute;
/*define se que o elemento ta solto*/
top: 10vh;
/*define o quao pra cima vai estar o objeto*/
left: 30vw;
/*define o qual para esquerda o objeto vai estar */
background-color: #D9D9D9;
/*define a cor de fundo*/
}
.Pop_up_Config.PainelEstilo .PainelFechar button {
border: none;
/*tira a borda do html*/
background: none;
/*tira o backgrond*/
outline: none;
/*tira a borda de foco*/
width: 2vw;
/*define largura*/
height: 2vw;
/*define altura*/
margin-left: 1vw;
/*define a margin da esquerda*/
margin-top: 1vw;
/*define a margin de cima*/
color: var(--Matriz);
/* Cor do texto do botão */
background-color: var(--Cor_Segundaria_5_1);
/* Cor de fundo do botão */
border-radius: 12vh;
/*define aredondamento da borda*/
transition: 1s ease;
/* Transição suave de 1 segundo */
font-family: var(--Cor_Segundaria_5_1);
font-family: var(--font_conteudo);
/*define a fonte */
font-size: 0.8vw;
/*define tamanho*/
}
.Pop_up_Config.PainelEstilo .PainelFechar button:hover {
@ -49,67 +67,109 @@
transition: 1s ease;
/* Transição suave de 1 segundo */
font-family: var(--font_titulo);
/*define a fonte usada*/
}
.Pop_up_Config.PainelEstilo .PainelFechar .TituloPopup img {
width: 2vw;
/*define largura*/
height: 2vw;
/*define altura*/
font-size: 0.8vw;
/*define tamanho da fonte*/
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Perfil button {
color: var(--Cor_Segundaria_5_1);
/* Muda a cor do texto */
background: none;
/*deixa sem background*/
outline: none;
/*tira a borda de foco*/
border: none;
/*tira a borda*/
background-color: var(--Matriz);
/* Muda a cor de fundo */
width: 10vw;
/*define a laregura*/
height: 20vh;
/*define a altura*/
border-radius: 12vh;
font-size: 0.8vw;
/*define o quao arredondado fica a borda*/
font-size: 2.5vw;
/*define o tamanho da fonte*/
justify-content: center;
/* Alinha os itens horizontalmente no centro do container */
align-items: center;
/* Alinha os itens verticalmente no centro do container */
font-family: var(--font_titulo);
/* Define a fonte para o título, utilizando uma variável CSS */
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Fundo button {
color: var(--Cor_Segundaria_5_1);
/* Muda a cor do texto */
background: none;
/* Remove o fundo do elemento */
outline: none;
/* Remove a borda de foco (outline) */
border: none;
/* Remove a borda do elemento */
background-color: var(--Matriz);
/* Muda a cor de fundo */
width: 10vw;
/* Define a largura do elemento como 10% da largura da janela de visualização */
height: 20vh;
/* Define a altura do elemento como 20% da altura da janela de visualização */
justify-content: center;
/* Alinha os itens horizontalmente no centro do container */
align-items: center;
/* Alinha os itens verticalmente no centro do container */
font-family: var(--font_titulo);
font-size: 0.8vw;
/* Define a fonte para o título, utilizando uma variável CSS */
font-size: 2.5vw;
/* Define o tamanho da fonte como 0.8% da largura da janela de visualização */
}
.Pop_up_Config.PainelManual {
display: none;
/* Esconde o elemento da página (não será exibido) */
width: 40vw;
/* Define a largura do elemento como 40% da largura da janela de visualização */
height: 70vh;
/* Define a altura do elemento como 70% da altura da janela de visualização */
margin: 1vh;
/* Adiciona uma margem de 1% da altura da janela de visualização */
position: absolute;
/* Posiciona o elemento de forma absoluta em relação ao contêiner mais próximo */
top: 10vh;
/* Define a distância do topo do contêiner (10% da altura da janela de visualização) */
left: 30vw;
/* Define a distância da esquerda do contêiner (30% da largura da janela de visualização) */
background-color: black;
/* Define o fundo do elemento com cor preta */
}
.Pop_up_Config.PainelEstilo .PainelFechar .TituloPopup h2 {
font-family: var(--font_titulo);
/* Define a fonte para o título, utilizando uma variável CSS */
color: rgb(0, 55, 100);
/* Define a cor do texto usando valores RGB (azul escuro) */
font-size: 3vh;
/* Define o tamanho da fonte como 3% da altura da janela de visualização */
}
@ -117,86 +177,169 @@
.Pop_up_Config.PainelEstilo .PainelFechar {
width: 100%;
/* Define a largura do elemento como 100% da largura do contêiner pai */
align-items: center;
/* Alinha os itens verticalmente no centro do container (quando usando flexbox) */
font-family: var(--font_titulo);
/* Define a fonte para o título, utilizando uma variável CSS */
display: flex;
/* Define o layout como flexbox, permitindo o uso das propriedades de alinhamento e direção */
flex-direction: row;
/* Define a direção dos itens dentro do flexbox como linha (horizontal) */
height: 10%;
/* Define a altura do elemento como 10% da altura do contêiner pai */
}
.Pop_up_Config.PainelEstilo .PainelFechar .TituloPopup {
margin-top: 2vh;
/* Adiciona uma margem no topo do elemento equivalente a 2% da altura da janela de visualização */
width: 80%;
/* Define a largura do elemento como 80% da largura do contêiner pai */
display: flex;
/* Define o layout como flexbox, permitindo o uso das propriedades de alinhamento e direção */
align-items: center;
/* Alinha os itens verticalmente no centro do container (quando usando flexbox) */
justify-content: center;
/* Alinha os itens horizontalmente no centro do container (quando usando flexbox) */
flex-direction: row;
/* Define a direção dos itens dentro do flexbox como linha (horizontal) */
gap: 0.8vw;
/* Define o espaço entre os itens dentro do container como 0.8% da largura da janela de visualização */
height: 15%;
/* Define a altura do elemento como 15% da altura do contêiner pai */
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Perfil label {
font-family: var(--font_conteudo);
/* define a fonte*/
color: rgb(0, 55, 100);
/* define a cor */
font-size: 1.8vw;
/* define tamanho*/
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Fundo label {
font-family: var(--font_conteudo);
/* define a fonte*/
color: rgb(0, 55, 100);
/* define a cor */
font-size: 1.8vw;
/* define tamanho*/
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Perfil {
margin-top: 2vh;
/*define a margin de cima*/
width: 100%;
/*largura*/
display: flex;
/*define o dysplay */
align-items: center;
/*alinhar os itens no eixo transversal */
justify-content: center;
/*para alinhar os itens ao longo do eixo principal */
flex-direction: column;
/* alterar a direção do eixo principal dentro de um contêiner flexível.*/
height: 30%;
/*definir a altura de um elemento como uma porcentagem em relação à altura do seu elemento pai.*/
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Fundo {
margin-top: 2vh;
/* Dá uma margem superior de 2% da altura da janela de visualização */
width: 100%;
/* Define a largura do elemento para 100% da largura do seu contêiner pai */
display: flex;
/* Define o contêiner como um flexbox para controlar o layout dos filhos */
align-items: center;
/* Alinha os itens ao longo do eixo transversal (horizontal) no centro */
justify-content: center;
/* Alinha os itens ao longo do eixo principal (vertical, já que o flex-direction está em coluna) no centro */
flex-direction: column;
/* Define que o eixo principal do layout será vertical (os itens serão organizados em uma coluna) */
height: 30%;
/* Define a altura do elemento para 30% da altura do seu contêiner pai */
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Enviar {
margin-top: 2vh;
/* Define uma margem superior de 2% da altura da janela de visualização (a altura da tela) */
height: 5%;
/* Define a altura do elemento como 5% da altura do seu contêiner pai */
display: flex;
/* Define o contêiner como um flexbox, permitindo controlar o layout dos itens filhos de forma flexível */
align-items: center;
/* Alinha os itens ao longo do eixo transversal (horizontal) no centro do contêiner */
justify-content: center;
/* Alinha os itens ao longo do eixo principal (vertical, no caso de flex-direction ser o padrão, que é horizontal) no centro */
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Enviar button {
margin-top: 1vh;
/* Define uma margem superior de 1% da altura da janela de visualização (altura da tela) */
border: none;
/* Remove qualquer borda do elemento (como se fosse um botão, por exemplo) */
background: none;
/* Remove qualquer fundo anterior, deixando o fundo transparente (pode ser redundante com o background-color) */
outline: none;
/* Remove a linha de foco ao clicar no elemento (geralmente usada em botões ou links) */
width: 12vw;
height: 8vh;
/* Define a largura do elemento como 12% da largura da janela de visualização (tela) */
height: 5vh;
/* Define a altura do elemento como 8% da altura da janela de visualização (tela) */
font-size: 0.8vw;
/* Define o tamanho da fonte como 0.8% da largura da janela de visualização, ajustando o texto de acordo com o tamanho da tela */
color: #D9D9D9;
/* Muda a cor do texto */
/* Define a cor do texto para um cinza claro (#D9D9D9) */
background-color: var(--Cor_Segundaria_5_1);
/* Cor de fundo do botão */
/* Define a cor de fundo usando uma variável CSS personalizada (substituída por um valor real da variável) */
border-radius: 12vh;
/* Define um raio de borda grande, criando bordas arredondadas com um valor proporcional à altura da tela */
transition: 1s ease;
/* Transição suave de 1 segundo */
/* Adiciona uma transição suave de 1 segundo, com um efeito de suavização "ease" (transição mais natural) */
font-family: var(--font_conteudo);
/* Define a fonte do texto usando uma variável CSS personalizada para a família de fontes (substituída pelo valor real da variável) */
font-size: 0.8vw;
/* Define novamente o tamanho da fonte, repetindo a linha anterior */
}
@ -213,33 +356,62 @@
/*pop user*/
.Pop_up_Config.PainelUser .PainelConteudo .TituloPopup img {
width: 3vw;
/* Define a largura do elemento como 3% da largura da janela de visualização (tela) */
height: 3vw;
/* Define a altura do elemento como 3% da largura da janela de visualização (tela) */
font-size: 1.8vw;
/* Define o tamanho da fonte como 1.8% da largura da janela de visualização (tela), ajustando o texto de acordo com a largura da tela */
}
.Pop_up_Config.PainelUser {
display: none;
/* Oculta o elemento, fazendo com que ele não seja exibido na página. (Se for necessário exibir o elemento, você pode usar display: block ou outro valor adequado) */
flex-direction: column;
/* Define que o layout do contêiner flex será em coluna, organizando os itens de cima para baixo (funciona somente se o elemento for um contêiner flex). */
width: 40vw;
/* Define a largura do elemento como 40% da largura da janela de visualização (tela). */
height: 80vh;
/* Define a altura do elemento como 80% da altura da janela de visualização (tela). */
margin: 1vh;
/* Define uma margem ao redor do elemento de 1% da altura da janela de visualização (tela). Isso cria um espaço ao redor do elemento. */
position: absolute;
/* Define que o elemento será posicionado de forma absoluta em relação ao seu contêiner pai mais próximo com position relativa ou ao documento, se não houver um contêiner com position relativa. */
top: 10vh;
/* Define a posição do topo do elemento a 10% da altura da janela de visualização (tela), movendo o elemento para baixo em relação ao seu contêiner pai ou ao documento. */
left: 30vw;
/* Define a posição do lado esquerdo do elemento a 30% da largura da janela de visualização (tela), movendo o elemento para a direita em relação ao seu contêiner pai ou ao documento. */
border-radius: 3vw;
/* Define bordas arredondadas com um raio de 3% da largura da janela de visualização, criando bordas suavemente arredondadas. */
background-color: #D9D9D9;
/* Define a cor de fundo do elemento como um tom de cinza claro (#D9D9D9). */
border: 0.2vw solid var(--Cor_Segundaria_5_1);
/* Define uma borda de 0.2% da largura da janela de visualização, com uma cor sólida baseada em uma variável CSS personalizada chamada --Cor_Segundaria_5_1. */
}
.Pop_up_Config.PainelUser .TituloPopup {
display: flex;
/* Define o contêiner como um flexbox, permitindo organizar os itens dentro dele de maneira flexível. */
flex-direction: row;
/* Organiza os itens dentro do contêiner de forma **horizontal** (na linha), ou seja, os itens serão dispostos da esquerda para a direita. */
}
@ -247,44 +419,65 @@
.Pop_up_Config.PainelUser .PainelFechar button {
background: none;
/* Remove qualquer fundo do elemento, deixando-o transparente ou sem qualquer imagem/fundo definido. */
outline: none;
/* Remove a linha de contorno que aparece ao clicar no elemento (geralmente usada para mostrar o foco, como em botões ou links). */
border: none;
/* Remove qualquer borda do elemento, tornando-o sem borda visível. */
color: #D9D9D9;
/* Define a cor do texto como um tom de cinza claro (#D9D9D9). */
width: 2vw;
/* Define a largura do elemento como 2% da largura da janela de visualização (tela). */
height: 4vh;
/* Muda a cor do texto */
/* Define a altura do elemento como 4% da altura da janela de visualização (tela). */
background-color: var(--Cor_Segundaria_5_1);
/* Cor de fundo do botão */
/* Define a cor de fundo do elemento usando uma variável CSS personalizada (no caso, a variável --Cor_Segundaria_5_1, que será substituída pelo valor real da variável). */
border-radius: 12vh;
/* Define bordas arredondadas com um valor de 12% da altura da tela (o que cria um formato bem arredondado, quase circular dependendo das proporções da tela). */
transition: 1s ease;
/* Transição suave de 1 segundo */
/* Define uma transição suave de 1 segundo, com um efeito de suavização "ease" (transição gradual que começa mais devagar, acelera no meio e desacelera no final). */
font-family: var(--font_conteudo);
/* Define a fonte do texto utilizando uma variável CSS personalizada para a família de fontes (será substituída pelo valor real da variável). */
font-size: 0.8vw;
/* Arredondar completamente */
/* Define o tamanho da fonte como 0.8% da largura da janela de visualização (tela), fazendo com que o texto seja responsivo e se ajuste ao tamanho da tela. */
}
#VoltarPopup {
background: none;
/* Remove qualquer fundo do elemento (sem cor ou imagem de fundo) */
outline: none;
/* Remove a linha de contorno que aparece ao focar o elemento (geralmente ao clicar em botões ou links) */
border: none;
/* Remove qualquer borda visível do elemento */
color: #D9D9D9;
/* Define a cor do texto para um tom de cinza claro (#D9D9D9) */
width: 7vw;
/* Define a largura do elemento como 7% da largura da janela de visualização (tela), ajustando-se automaticamente ao tamanho da tela */
height: 4vh;
/* Muda a cor do texto */
/* Define a altura do elemento como 4% da altura da janela de visualização (tela), ajustando-se automaticamente ao tamanho da tela */
background-color: var(--Cor_Segundaria_5_1);
/* Cor de fundo do botão */
/* Define a cor de fundo do elemento utilizando uma variável CSS personalizada chamada --Cor_Segundaria_5_1, que será substituída pelo valor da variável */
border-radius: 12vh;
/* Define bordas arredondadas com um valor de 12% da altura da tela, criando bordas muito arredondadas, quase circulares */
transition: 1s ease;
/* Transição suave de 1 segundo */
/* Adiciona uma transição suave de 1 segundo, com um efeito de suavização "ease" (transição gradual que acelera e desacelera de forma natural) */
font-family: var(--font_conteudo);
/* Arredondar completamente */
/* Define a fonte do texto usando uma variável CSS personalizada chamada --font_conteudo, que será substituída pelo valor real da variável */
font-size: 0.8vw;
/* Define o tamanho da fonte como 0.8% da largura da janela de visualização, fazendo o texto responsivo e ajustando automaticamente ao tamanho da tela */
}
@ -311,53 +504,85 @@
.Pop_up_Config.PainelUser .PainelFechar {
border-radius: 12vh;
/* Define bordas arredondadas no elemento com um raio de 12% da altura da tela, criando bordas muito arredondadas, quase circulares. */
transition: 1s ease;
/* Transição suave de 1 segundo */
/* Aplica uma transição suave de 1 segundo, com um efeito de suavização "ease", o que significa que a mudança ocorrerá lentamente no início e no final da animação. */
font-family: var(--font_conteudo);
font-size: 0.8vw;
align-items: end;
/* Define a fonte do texto usando uma variável CSS personalizada chamada --font_conteudo, permitindo flexibilidade na escolha da fonte. */
font-size: 0.8vw;
/* Define o tamanho da fonte como 0.8% da largura da janela de visualização, tornando o texto responsivo ao tamanho da tela. */
align-items: end;
/* Alinha os itens dentro do contêiner flex ao **final** do eixo transversal (em um contêiner com `flex-direction: row`, o eixo transversal é vertical). Ou seja, os itens são alinhados na parte inferior. */
display: flex;
/* Define o elemento como um contêiner flexível, permitindo que você organize os itens dentro dele usando as propriedades flexbox. */
flex-direction: row;
/* Organiza os itens dentro do contêiner de forma **horizontal** (em uma linha), ou seja, os itens serão dispostos da esquerda para a direita. Esse é o comportamento padrão de um contêiner flex. */
margin-top: 1vw;
/* Adiciona uma margem superior de 1% da largura da janela de visualização, criando um espaço acima do elemento. */
margin-left: 1vw;
/* Adiciona uma margem à esquerda do elemento de 1% da largura da janela de visualização, criando espaço à esquerda do elemento. */
margin-right: 1vw;
/* Adiciona uma margem à direita do elemento de 1% da largura da janela de visualização, criando espaço à direita do elemento. */
justify-content: space-between;
/* Define que os itens dentro do contêiner flex serão distribuídos ao longo do eixo principal (horizontal, neste caso), com espaço igual entre eles, deixando o primeiro item no início e o último no final do contêiner. */
}
.Pop_up_Config.PainelUser .PainelConteudo .TituloPopup {
gap: 1vw;
/* Define um espaço de 1% da largura da janela de visualização entre os itens dentro do contêiner flexível. Essa propriedade cria um espaço igual entre os elementos filhos do contêiner. */
width: 100%;
/* Define a largura do contêiner como 100% da largura da janela de visualização, fazendo com que ele ocupe toda a largura disponível da tela. */
display: flex;
/* Define o contêiner como um **flexbox**, permitindo usar as propriedades do flexbox para organizar os itens dentro dele de maneira flexível. */
align-items: center;
/* Alinha os itens dentro do contêiner **verticalmente** no centro do contêiner (no eixo transversal, ou seja, o eixo perpendicular à direção principal). */
justify-content: center;
/* Alinha os itens dentro do contêiner **horizontalmente** no centro do contêiner (ao longo do eixo principal, ou seja, o eixo de distribuição). */
font-family: var(--font_titulo);
/* Define a fonte do texto dentro do contêiner como uma variável CSS personalizada chamada --font_titulo. O valor real da variável será substituído, permitindo flexibilidade na escolha da fonte. */
}
.Pop_up_Config.PainelUser .PainelConteudo .TituloPopup {
color: var(--Cor_Segundaria_5_1);
/*define a cor com uma variavel no css*/
font-family: var(--font_titulo);
/* Define a fonte do texto dentro do contêiner como uma variável CSS personalizada chamada --font_titulo. O valor real da variável será substituído, permitindo flexibilidade na escolha da fonte. */
}
.Pop_up_Config.PainelUser .PainelConteudo {
flex-direction: column;
/* Define a direção dos itens dentro do contêiner flex como **coluna**, ou seja, os itens serão organizados **verticalmente** (um embaixo do outro). */
width: 100%;
/* Define a largura do contêiner como **100% da largura da janela de visualização**, fazendo com que o contêiner ocupe toda a largura disponível na tela. */
display: flex;
/* Define o elemento como um **contêiner flexível**, permitindo usar o layout flexbox para organizar os itens de forma dinâmica e flexível. */
align-items: center;
/* Alinha os itens **verticalmente** no centro do contêiner (no eixo transversal). Isso é útil quando os itens têm alturas variadas e você quer que eles fiquem centralizados na área disponível. */
justify-content: center;
/* Alinha os itens **horizontalmente** no centro do contêiner (ao longo do eixo principal, ou seja, o eixo de distribuição). Isso garante que os itens sejam centralizados na tela ou no contêiner disponível. */
}
@ -365,62 +590,87 @@
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao h2 {
font-family: var(--font_titulo);
/* Define a **família de fontes** do texto dentro do elemento utilizando uma variável CSS personalizada chamada --font_titulo. O valor real dessa variável será substituído, permitindo flexibilidade na escolha da fonte. */
color: rgb(0, 55, 100);
/* Define a **cor do texto** utilizando o modelo de cor RGB (vermelho, verde, azul). Neste caso, o texto será da cor **azul escuro**, com 0 de vermelho, 55 de verde e 100 de azul. */
font-size: 3vh;
/* Define o **tamanho da fonte** como 3% da altura da janela de visualização. Isso significa que o tamanho da fonte será adaptado com base na altura da tela, tornando o texto responsivo. */
width: 25vw;
height: 5vh;
/* Define a **largura** do elemento como 25% da largura da janela de visualização. Isso faz com que o elemento ocupe uma fração da largura da tela. */
height: 5vh;
/* Define a **altura** do elemento como 5% da altura da janela de visualização. Isso faz com que a altura do elemento seja adaptável ao tamanho da tela. */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao {
display: flex;
/* Define o elemento como um **contêiner flexível**, permitindo usar o layout flexbox para organizar os itens dentro dele de maneira flexível. */
align-items: center;
/* Alinha os itens **verticalmente** no centro do contêiner (no eixo transversal). Isso garante que, independentemente das alturas dos itens, todos fiquem centralizados no contêiner. */
justify-content: center;
/* Alinha os itens **horizontalmente** no centro do contêiner (ao longo do eixo principal). Isso garante que os itens sejam centralizados ao longo da linha ou coluna do contêiner flexível. */
flex-direction: column;
/* Define a direção dos itens dentro do contêiner flex como **coluna**. Isso significa que os itens serão organizados **verticalmente** (um embaixo do outro), ao invés de ficarem lado a lado, como é o padrão. */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao select {
width: 25vw;
/* Define a **largura** do elemento como 25% da **largura da janela de visualização** (tela). Isso faz com que o elemento ocupe uma fração da largura da tela, adaptando-se ao tamanho da janela. */
height: 4vh;
/* Define a **altura** do elemento como 4% da **altura da janela de visualização**. Isso significa que a altura do elemento será proporcional à altura da tela, tornando o layout responsivo. */
font-family: var(--font_conteudo);
/* Define a **família de fontes** do texto dentro do elemento usando uma variável CSS personalizada chamada `--font_conteudo`. Essa variável pode ser definida em outro lugar no código, permitindo flexibilidade no uso de fontes. */
font-size: 1vw;
/* Define o **tamanho da fonte** como 1% da **largura da janela de visualização**. Isso torna o tamanho do texto responsivo ao tamanho da tela, adaptando-se conforme a largura da janela. */
color: var(--Cor_Segundaria_5_1);
/* Define a **cor do texto** utilizando uma variável CSS personalizada chamada `--Cor_Segundaria_5_1`. A cor será substituída pela definição da variável em outro lugar no código. */
border-radius: 12vh;
/* Define o **raio de borda** como 12% da **altura da janela de visualização**, criando bordas **muito arredondadas**. Isso torna a borda do elemento extremamente curvada, criando um efeito de bordas quase circulares. */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao_criar button {
background: none;
outline: none;
border: none;
width: 25vw;
/* Define a **largura** do elemento como 25% da **largura da janela de visualização** (tela). Isso faz com que o elemento ocupe uma fração da largura da tela, adaptando-se ao tamanho da janela. */
color: #D9D9D9;
height: 4vh;
/* Define a **altura** do elemento como 4% da **altura da janela de visualização**. Isso significa que a altura do elemento será proporcional à altura da tela, tornando o layout responsivo. */
/* Muda a cor do texto */
background-color: var(--Cor_Segundaria_5_1);
/* Cor de fundo do botão */
border-radius: 12vh;
transition: 1s ease;
/* Transição suave de 1 segundo */
font-family: var(--font_conteudo);
/* Arredondar completamente */
width: 8vw;
height: 3vh;
font-size: 0.8vw;
/* Define a **família de fontes** do texto dentro do elemento usando uma variável CSS personalizada chamada `--font_conteudo`. Essa variável pode ser definida em outro lugar no código, permitindo flexibilidade no uso de fontes. */
font-size: 1vw;
/* Define o **tamanho da fonte** como 1% da **largura da janela de visualização**. Isso torna o tamanho do texto responsivo ao tamanho da tela, adaptando-se conforme a largura da janela. */
color: var(--Cor_Segundaria_5_1);
/* Define a **cor do texto** utilizando uma variável CSS personalizada chamada `--Cor_Segundaria_5_1`. A cor será substituída pela definição da variável em outro lugar no código. */
border-radius: 12vh;
/* Define o **raio de borda** como 12% da **altura da janela de visualização**, criando bordas **muito arredondadas**. Isso torna a borda do elemento extremamente curvada, criando um efeito de bordas quase circulares. */
margin-right: 5vw;
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao_criar button:hover {
color: var(--Cor_Segundaria_5_1);
color: white;
/* Muda a cor do texto */
background-color: white;
background-color: var(--Cor_Segundaria_5_1);
/* Muda a cor de fundo */
transition: 1s ease;
/* Transição suave de 1 segundo */
@ -430,36 +680,68 @@
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao input {
background: none;
/* Remove o **fundo** do elemento, ou seja, o elemento não terá cor de fundo, imagem ou gradiente. Isso pode ser útil quando você não quer que o fundo do elemento sobrescreva outros estilos. */
outline: none;
/* Remove o **contorno** do elemento, geralmente usado para remover o contorno que aparece quando o elemento recebe foco, como no caso de campos de formulário. */
border: none;
/* Remove qualquer **borda** do elemento, deixando-o sem bordas visíveis. Isso é útil se você não quiser bordas padrão nos elementos. */
font-family: var(--font_conteudo);
/* Define a **família de fontes** do texto dentro do elemento usando uma variável CSS personalizada chamada `--font_conteudo`. A fonte será adaptada de acordo com a variável definida em outro lugar no código. */
border-bottom: 0.2vw solid var(--Cor_Segundaria_5_1);
/* Adiciona uma **borda inferior** ao elemento com espessura de **0.2% da largura da janela** (usando `vw`) e uma cor definida pela variável CSS `--Cor_Segundaria_5_1`. Isso cria uma linha na parte inferior do elemento, normalmente usada para campos de texto ou links. */
color: var(--Cor_Segundaria_5_1);
/* Define a **cor do texto** utilizando a variável CSS personalizada `--Cor_Segundaria_5_1`. O valor real dessa cor será substituído pela variável em outro lugar do código. */
font-size: var(--Matriz);
/* Define o **tamanho da fonte** utilizando uma variável CSS personalizada chamada `--Matriz`. Isso permite que o tamanho da fonte seja ajustado conforme o valor dessa variável em outro lugar do código. */
width: 25vw;
/* Define a **largura** do elemento como 25% da **largura da janela de visualização** (tela), o que faz o elemento se adaptar à largura da tela. */
height: 7vh;
/* Define a **altura** do elemento como 7% da **altura da janela de visualização** (tela), fazendo com que o elemento seja adaptável ao tamanho da tela. */
font-size: 1.8vw;
/* Define o **tamanho da fonte** como 1.8% da **largura da janela de visualização** (tela), tornando o tamanho da fonte responsivo. */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao_criar {
display: flex;
/* Define o elemento como um **contêiner flexível**, permitindo o uso do layout flexbox para organizar os itens dentro dele de maneira flexível e dinâmica. */
align-items: end;
/* Alinha os itens **ao final** do eixo transversal (vertical), ou seja, coloca os itens na **parte inferior** do contêiner se o `flex-direction` for `column`. Caso contrário, no eixo horizontal, eles seriam alinhados à direita. */
justify-content: center;
/* Alinha os itens **ao centro** ao longo do eixo principal (horizontal ou vertical, dependendo de `flex-direction`). No caso de `flex-direction: column`, isso significa que os itens serão centralizados verticalmente no contêiner. */
flex-direction: column;
/* Define que os itens dentro do contêiner flex serão organizados em **coluna**, ou seja, um embaixo do outro. Se fosse `row`, os itens seriam organizados horizontalmente, da esquerda para a direita. */
width: 35vw;
/* Define a **largura** do elemento como 35% da **largura da janela de visualização**. Isso faz com que o elemento ocupe uma parte proporcional da largura da tela, adaptando-se ao tamanho da janela. */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao p {
background: none;
/* Remove qualquer **fundo** do elemento, ou seja, o elemento não terá cor de fundo, imagem ou gradiente. Isso pode ser útil quando você não quer que o fundo do elemento sobrescreva outros estilos. */
outline: none;
/* Remove o **contorno** do elemento, que geralmente aparece quando um campo de formulário ou botão é selecionado ou recebe o foco. Isso pode ser usado para melhorar a aparência visual do elemento, especialmente quando não se deseja um contorno. */
border: none;
/* Remove qualquer **borda** visível do elemento, deixando-o sem bordas. Isso é útil quando você deseja um visual limpo e sem elementos de contorno padrão, como no caso de botões ou campos de texto. */
font-family: var(--font_conteudo);
/* Define a **família de fontes** do texto dentro do elemento utilizando uma variável CSS personalizada chamada `--font_conteudo`. Isso permite alterar facilmente a fonte de todo o projeto, utilizando um valor variável em vez de uma fonte fixa. */
color: var(--Cor_Segundaria_5_1);
/* Define a **cor do texto** utilizando uma variável CSS personalizada chamada `--Cor_Segundaria_5_1`. Isso permite controlar a cor do texto centralmente no projeto, alterando a variável em vez de ajustar cada instância de cor individualmente. */
font-size: var(--Matriz);
/* Define o **tamanho da fonte** utilizando uma variável CSS personalizada chamada `--Matriz`. Assim, o tamanho da fonte será adaptado conforme o valor dessa variável, facilitando ajustes de estilo em todo o projeto. */
font-size: 0.8vw;
/* Define o **tamanho da fonte** como 0.8% da **largura da janela de visualização** (tela). Isso torna o tamanho da fonte **responsivo**, adaptando-se ao tamanho da tela, o que é útil em layouts fluidos e adaptáveis a diferentes dispositivos. */
}

2
Css/page/Ambiente/Estrutura/estrutura_menu.css
View File

@ -96,7 +96,7 @@
display: flex;
flex-direction: row;
background-image: url(../../../../Acessts/Imagens/1605305486169.jpg);
background-image: url(../../../../Acessts/Imagens/Utili/Tela_Marca\ White.jpg);
background-position: center;
background-size: cover;

40
Css/page/Ambiente/Estrutura/menu_hover.css
View File

@ -5,32 +5,32 @@
z-index: 10;
left: 0;
top: 0;
transition: 1s ease;
transition: 0.2s ease;
.seguimentacao_2 {
width: 17vw;
transition: 1s ease;
transition: 0.2s ease;
}
.seguimentacao_1 .coluna_1 {
height: 30vh;
transition: 1s ease;
transition: 0.2s ease;
}
.seguimentacao_1 .coluna_2 {
height: 70vh;
transition: 1s ease;
transition: 0.2s ease;
}
.seguimentacao_1 .coluna_2 .subcolunas_1 {
height: 50vh;
transition: 1s ease;
transition: 0.2s ease;
}
.seguimentacao_1 .coluna_2 .subcolunas_2 {
height: 20vh;
transition: 1s ease;
transition: 0.2s ease;
}
.seguimentacao_2 .coluna_1 .subcolunas_1 .filheira {
@ -38,7 +38,7 @@
font-size: 0.9vw;
opacity: 1;
filter: blur(0px);
transition: 1s ease;
transition: 0.2s ease;
}
@ -49,7 +49,7 @@
opacity: 1;
filter: blur(0px);
transition: 1s ease;
transition: 0.2s ease;
}
@ -60,31 +60,31 @@
width: 20vw;
transition: 1s ease;
transition: 0.2s ease;
.seguimentacao_2 {
width: 17vw;
transition: 1s ease;
transition: 0.2s ease;
}
.seguimentacao_1 .coluna_1 {
height: 30vh;
transition: 1s ease;
transition: 0.2s ease;
}
.seguimentacao_1 .coluna_2 {
height: 70vh;
transition: 1s ease;
transition: 0.2s ease;
}
.seguimentacao_1 .coluna_2 .subcolunas_1 {
height: 50vh;
transition: 1s ease;
transition: 0.2s ease;
}
.seguimentacao_1 .coluna_2 .subcolunas_2 {
height: 20vh;
transition: 1s ease;
transition: 0.2s ease;
}
.seguimentacao_2 .coluna_1 .subcolunas_1 .filheira {
@ -92,7 +92,7 @@
font-size: 0.9vw;
opacity: 1;
filter: blur(0px);
transition: 1s ease;
transition: 0.2s ease;
}
@ -103,12 +103,12 @@
opacity: 1;
filter: blur(0px);
transition: 1s ease;
transition: 0.2s ease;
}
.imgjust {
transform: rotate(180deg);
transition: 1s ease;
transition: 0.2s ease;
}
@ -125,7 +125,7 @@ a:hover,
background-color: var(--Matriz);
border-radius: 2vw 0vw 0vw 2vw;
padding-left: 2vw;
transition: 1s ease;
transition: 0.2s ease;
}
@ -136,7 +136,7 @@ a:hover,
background-color: var(--Matriz);
border-radius: 2vw 0vw 0vw 2vw;
padding-left: 2vw;
transition: 1s ease;
transition: 0.2s ease;
@ -147,5 +147,5 @@ a:hover,
background-color: var(--Cor_Segundaria_5_1);
box-shadow: 5px 5px 0px 2px var(--Cor_Segundaria_5_2);
transition: 1s ease;
transition: 0.2s ease;
}

42
Css/page/Ambiente/Estrutura/tela_hover.css
View File

@ -1,38 +1,40 @@
.capitulo_1.expansao {
width: 80vw;
z-index: 1;
transition: 1s ease;
transition: 0.2s ease;
}
.capitulo_2.expansao {
width: 80vw;
z-index: 1;
transition: 1s ease;
transition: 0.2s ease;
.Capitulo_1 .linha_1 {
width: 25vw;
transition: 1s ease;
width: 29.2vw;
transition: 0.2s ease;
}
.Capitulo_1 .linha_1 .painel {
width: 25vw;
transition: 1s ease;
width: 29.2vw;
transition: 0.2s ease;
}
.Capitulo_1 .linha_1 .Corpo {
width: 25vw;
transition: 1s ease;
width: 29.2vw;
transition: 0.2s ease;
}
.Capitulo_1 .linha_1 .cap {
width: 25vw;
transition: 1s ease;
width: 29.2vw;
transition: 0.2s ease;
}
@ -41,7 +43,7 @@
width: 15vw;
transition: 1s ease;
transition: 0.2s ease;
}
@ -51,14 +53,14 @@
width: 15vw;
transition: 1s ease;
transition: 0.2s ease;
}
.Capitulo_1 .linha_2 .Corpo_1 {
width: 15vw;
transition: 1s ease;
transition: 0.2s ease;
}
@ -66,14 +68,14 @@
width: 15vw;
height: 8vh;
transition: 1s ease;
transition: 0.2s ease;
}
.Capitulo_1 .linha_2 .cap {
width: 15vw;
transition: 1s ease;
transition: 0.2s ease;
}
@ -81,7 +83,7 @@
width: 1.6vw;
height: 4vh;
font-size: 0.6vw;
transition: 1s ease;
transition: 0.2s ease;
}
@ -89,7 +91,13 @@
.Capitulo_1 .linha_2 .Corpo_1 .linhaMes_1 .vazio {
width: 1.6vw;
height: 4vh;
transition: 1s ease;
transition: 0.2s ease;
}
.PopUpHome.Chamado {
top: 10vh;
/* Define a distância entre a parte esquerda do elemento e o lado esquerdo da viewport (60% da largura da tela) */
left: 40vh;
}
}

12
Css/page/Ambiente/Home/Aplicacoes.css
View File

@ -24,6 +24,12 @@
border: 0.2vw solid #ffa600;
}
.Capitulo_1 .linha_1 .Corpo .IconChamado.Atencao {
border: 0.2vw solid red;
}
/*Pop Home */
.PainelEstado.Solucionado_Fechado h2 {
@ -53,6 +59,12 @@
/*muda a cor do status do objeto*/
}
.PainelEstado.Atencao h2 {
color: red;
/*muda a cor do status do objeto*/
}
.Capitulo_2 .painel .Corpo .Mes_financeiro.Desativado button {

76
Css/page/Ambiente/Home/Item_servico.css
View File

@ -1,58 +1,104 @@
.Corpo .ItemServicos img {
width: 1.5vw;
/*modifica a largura */
height: 3vh;
/*modifica a altura*/
}
.Corpo .ItemServicos .PainelTexto {
display: flex;
/*define o display como flex*/
flex-direction: row;
/* definir a direção dos itens dentro do contêiner */
gap: 1vw;
/*define um espaco entre os blocos*/
width: 85%;
/*define largura*/
height: 5vh;
/*define altura*/
border-radius: 1.5vw;
/*define o tamanho da borda*/
padding-right: 1.5vw;
/*define espaco da direita */
padding-left: 1.5vw;
/*define espaço da esquerda*/
background-color: var(--Cor_Segundaria_5_1);
/*define a cor de fundo atraves de uma variavel*/
color: var(--Cor_Segundaria_5_1);
/*define a cor atraves de uma variavel*/
font-family: var(--font_titulo);
/*define a fonte usada*/
font-size: 1vw;
/*define o tamanho da letra*/
align-items: center;
/* Alinha os itens no centro ao longo do eixo vertical (eixo transversal), ou seja, centraliza os itens dentro do contêiner de acordo com o eixo oposto ao principal. */
justify-content: center;
/* Alinha os itens no centro ao longo do eixo horizontal (eixo principal), ou seja, centraliza os itens dentro do contêiner, distribuindo-os de maneira equidistante. */
}
.Corpo .ItemServicos p {
font-family: var(--font_conteudo);
/*define a fonte */
color: white;
/*define a cor */
}
.Corpo .ItemServicos {
display: flex;
/*define o display*/
flex-direction: row;
/*define a direção dos itens dentro do conteiner*/
gap: 1vw;
/*define os espaoços dos itens */
width: 85%;
/*define o display*/
height: 5vh;
/*define a direção orizontal*/
border-radius: 1.5vw;
/*define o tamanho da borda*/
padding-right: 1.5vw;
/*define um espaço ah direita*/
padding-left: 1.5vw;
/*define espaço a esquerda*/
background-color: var(--Cor_Segundaria_5_1);
/*define a cor de fundo*/
color: var(--Cor_Segundaria_5_1);
/*define a cor*/
font-family: var(--font_titulo);
/*define a fonte */
font-size: 1vw;
/*define o tamanho da fonte*/
align-items: center;
/*define os itens no centro*/
justify-content: start;
/* Alinha os itens ao início do container */
}
.capitulo_2 .CorpoArtificial .Capitulo_1 .linha_1 .painel .Corpo .Corpo_erro {
display: flex;
/*define o display como flex*/
align-items: center;
/* Alinha os itens no centro ao longo do eixo vertical (eixo transversal), ou seja, centraliza os itens dentro do contêiner de acordo com o eixo oposto ao principal. */
justify-content: center;
/* Alinha os itens no centro ao longo do eixo horizontal (eixo principal), ou seja, centraliza os itens dentro do contêiner, distribuindo-os de maneira equidistante. */
flex-direction: column;
/*define a direção dos itens dentro do conteiner*/
}
.capitulo_2 .CorpoArtificial .Capitulo_1 .linha_1 .painel .Corpo .Corpo_erro p {
color: var(--Cor_Segundaria_5_1);
/*define a cor */
font-size: 1.5vw;
/*define o tamanho da fonte*/
font-family: var(--font_titulo);
}
.capitulo_2 .CorpoArtificial .Capitulo_1 .linha_1 .painel .Corpo .Corpo_erro h2 {
color: var(--Cor_Segundaria_5_1);
/*define a cor */
font-size: 1.3vw;
/*define o tamanho da fonte*/
font-family: var(--font_titulo);
}

5
Css/page/Ambiente/Home/Iten_chamados.css
View File

@ -103,6 +103,7 @@
/*alinha onde fica o objeto*/
align-items: center;
/*alinha onde fica o objeto*/
font-size: 1.2vw;
}
.PopUpHome.Chamado .PainelFechar {
@ -147,10 +148,11 @@
width: 2vw;
/* Define a largura do botão como 1.5% da largura da viewport (tela) */
height: 2vw;
height: 4.5vh;
/* Define a altura do botão como 1.5% da largura da viewport (tela) */
/* Alinha o conteúdo do botão (texto ou elementos) no centro, horizontalmente */
display: flex;
justify-content: center;
font-size: 1.2vw;
/* Alinha o conteúdo do botão (texto ou elementos) no centro, verticalmente */
@ -173,6 +175,7 @@
font-family: var(--font_titulo);
/* Define a fonte do texto com a variável --font_titulo */
height: 20%;
/* Define a altura do elemento como 20% da altura do elemento pai */

2
Css/page/Ambiente/Home/Iten_dia.css
View File

@ -84,7 +84,7 @@
.Capitulo_1 .linha_2 .Corpo_1 .linhaMes_1 .vazio {
width: 2.3vw;
height: 3.5vh;
margin-top: -1.8vh;
margin-top: -1.5vh;
display: flex;
justify-content: center;

92
Css/page/Ambiente/Home/item_Financeiro.css
View File

@ -1,65 +1,131 @@
.Capitulo_2 .painel .Corpo {
display: flex;
/*muda o display para flex*/
font-family: var(--font_titulo);
/*define a fonte atraves de uma variavel*/
flex-direction: column;
/*define a direção das informações*/
}
.Capitulo_2 .painel .Corpo .Mes_financeiro {
display: flex;
/*muda o display para flex*/
font-family: var(--font_titulo);
/*define a fonte atraves de uma variavel */
flex-direction: row;
/*define a direção das informações */
width: 95%;
/*define a largura */
height: 7vh;
/*define a altura*/
align-items: center;
/*alinha os itens no centro de cima para baixo*/
justify-content: space-between;
/*alinha deixando cada um pra um lado*/
border-bottom: 0.5vh solid var(--Cor_Segundaria_5_1);
/*define a borda e o tamanho*/
}
.Capitulo_2 .painel .Corpo .Mes_financeiro .MesBoleto {
width: 15.3%;
/*define largura*/
}
.Capitulo_2 .painel .Corpo .Mes_financeiro p {
.Capitulo_2 .painel .Corpo .Mes_financeiro .MesBoleto p {
background: none;
/*retira a estilização padrao do html do backgrond*/
outline: none;
/* remover a borda de foco */
border: none;
/*tira a estilização da borda */
color: var(--Cor_Segundaria_5_1);
font-size: 1.8vw;
/*modifica a cor*/
font-size: 1.3vw;
/*define o tamanho da fonte */
}
.Capitulo_2 .painel .Corpo .Mes_financeiro.Ativado button {
.Capitulo_2 .painel .Corpo .Mes_financeiro.Ativado .GerarBoletoFinanceiro {
width: 11.3%;
/*define largura*/
}
.Capitulo_2 .painel .Corpo .Mes_financeiro.Ativado .GerarBoletoFinanceiro button {
background: none;
/*retira a estilização padrao do html do backgrond*/
outline: none;
/* remover a borda de foco */
border: none;
/*tira a estilização da borda */
color: #a9a9a9;
/* Muda a cor do texto */
background-color: var(--Cor_Segundaria_5_1);
/* Cor de fundo do botão */
border-radius: 12vh;
/*define o tamanho das bordas */
transition: 1s ease;
/* Transição suave de 1 segundo */
font-family: var(--font_conteudo);
/* Arredondar completamente */
width: 10vw;
/*define a largura*/
height: 3vh;
/*define a altura */
font-size: 0.8vw;
/*define o tamanho da fonte*/
margin: end;
}
.Capitulo_2 .painel .Corpo .Mes_financeiro.Ativado button:hover {
.Capitulo_2 .painel .Corpo .Mes_financeiro.Ativado .GerarBoletoFinanceiro button:hover {
color: var(--Cor_Segundaria_5_1);
/* Muda a cor do texto */
background-color: white;
/* Muda a cor de fundo */
transition: 1s ease;
/* Transição suave de 1 segundo */
}
.Capitulo_2 .painel .Corpo .Mes_financeiro.Desativado .StatusFinanceiro {
width: 12.3%;
margin-right: 4vw;
/*define largura*/
}
.Capitulo_2 .painel .Corpo .Mes_financeiro.Desativado .StatusFinanceiro p {
background: none;
/*retira a estilização padrao do html do backgrond*/
outline: none;
/* remover a borda de foco */
border: none;
/*tira a estilização da borda */
color: var(--Cor_Segundaria_5_1);
/*modifica a cor*/
font-size: 1.3vw;
/*define o tamanho da fonte */
text-align: center;
}
.Capitulo_2 .painel .Corpo .Mes_financeiro.Ativado .StatusFinanceiro p {
background: none;
/*retira a estilização padrao do html do backgrond*/
outline: none;
/* remover a borda de foco */
border: none;
/*tira a estilização da borda */
color: var(--Cor_Segundaria_5_1);
/*modifica a cor*/
font-size: 1.3vw;
/*define o tamanho da fonte */
text-align: center;
}
.Capitulo_2 .painel .Corpo .Mes_financeiro.Ativado .StatusFinanceiro {
width: 12.3%;
margin-right: 4vw;
/*define largura*/
}

27
Css/page/Ambiente/Home/tela.css
View File

@ -1,14 +1,10 @@
/* Estilo para a seção CorpoArtificial dentro do capítulo 2 */
.capitulo_2 .CorpoArtificial {
width: 89.6%;
width: 100%;
/* Largura da seção CorpoArtificial, ocupando 89.6% da largura do seu contêiner */
height: 88vh;
/* Altura da seção CorpoArtificial, ocupando 88% da altura da janela de visualização */
padding-top: 2vw;
/* Espaçamento superior de 2% da largura da janela */
padding-left: 5vw;
/* Espaçamento à esquerda de 5% da largura da janela */
padding-right: 5vw;
/* Espaçamento à direita de 5% da largura da janela */
background-color: #D9D9D9;
/* Cor de fundo branco */
@ -39,7 +35,7 @@
/* Estilo para a primeira linha no Capítulo 1 */
.Capitulo_1 .linha_1 {
width: 30vw;
width: 34.8vw;
/* Largura de 30% da largura da janela */
display: flex;
/* Flexbox para layout */
@ -55,7 +51,7 @@
/* Estilo para o painel dentro da linha 1 no Capítulo 1 */
.Capitulo_1 .linha_1 .painel {
width: 30vw;
width: 34.8vw;
/* Largura de 30% da largura da janela */
display: flex;
/* Flexbox para layout */
@ -69,7 +65,7 @@
/* Estilo para a seção Corpo dentro do painel da linha 1 no Capítulo 1 */
.Capitulo_1 .linha_1 .Corpo {
width: 30vw;
width: 34.8vw;
/* Largura de 30% da largura da janela */
height: 47vh;
/* Altura de 47% da altura da janela */
@ -104,11 +100,12 @@
font-size: 1vw;
/* Tamanho de fonte de 1% da largura da janela */
font-size: 1vw;
/*define o tamanho da fonte*/
}
/* Estilo para a seção 'cap' dentro da linha 1 no Capítulo 1 */
.Capitulo_1 .linha_1 .cap {
width: 30vw;
width: 34.8vw;
/* Largura de 30% da largura da janela */
height: 5vh;
/* Altura de 5% da altura da janela */
@ -127,6 +124,7 @@
transition: 1s ease;
/* Transição suave de 1 segundo */
font-size: 1vw;
/*define o tamanho da fonte*/
}
/* Estilo para a segunda linha no Capítulo 1 */
@ -182,6 +180,7 @@
overflow: hidden;
/* Impede o transbordamento de conteúdo */
font-size: 1vw;
/*define o tamanho da fonte*/
}
/* Estilo para o botão dentro da cap na linha 2 do Capítulo 1 */
@ -221,6 +220,7 @@
justify-content: center;
/* Alinha os itens ao centro horizontalmente */
font-size: 1vw;
/*define o tamanho da fonte*/
}
/* Estilo para o botão dentro da cap na linha 2 do Capítulo 1 */
@ -246,6 +246,7 @@
overflow: hidden;
/* Impede o transbordamento de conteúdo */
font-size: 1vw;
/*define o tamanho da fonte*/
}
/* Estilos do painel no Capítulo 2 */
@ -275,7 +276,7 @@
justify-content: center;
/* Alinha os itens à direita */
font-size: 1vw;
/*define o tamanho da fonte*/
}
/* Estilo para a coluna 1 dentro da cap do Capítulo 2 */
@ -297,6 +298,7 @@
justify-content: center;
/* Alinha os itens à direita */
font-size: 1vw;
/*define o tamanho da fonte*/
}
/* Estilo para a coluna 2 dentro da cap do Capítulo 2 */
@ -320,6 +322,7 @@
padding-left: 10vw;
/* Espaçamento à esquerda de 10% da largura da janela */
font-size: 1vw;
/*define o tamanho da fonte*/
}
/* Estilo para o botão dentro da coluna 2 no Capítulo 2 */
@ -337,7 +340,7 @@
transition: 1s ease;
/* Transição suave de 1 segundo */
font-size: 1vw;
/*define o tamanho da fonte*/
}
/* Efeito de hover no botão da coluna 2 do Capítulo 2 */
@ -370,5 +373,5 @@
/* Alinha os itens ao centro horizontalmente */
/* Tamanho da fonte de 2.2% da largura da janela */
font-size: 1vw;
/*define o tamanho da fonte*/
}

34
Css/page/Ambiente/Monitoramento/Aplicacoes_moni.css Normal file
View File

@ -0,0 +1,34 @@
.disk-container {
width: 300px;
/* Largura total do retângulo */
height: 30px;
background-color: #ddd;
/* Cor de fundo (disco total) */
border: 2px solid #000;
position: relative;
}
.disk-usage {
height: 100%;
background-color: #4caf50;
/* Cor do uso (verde) */
}
.capitulo_2 .PainelConteudo_Moni .PainelHostsAlinhamento .PainelHostsItens .HostCapa .Ativado {
border-radius: 100%;
border: 0.4vw solid #3056ff;
width: 1vw;
height: 1.4vh;
}
.capitulo_2 .PainelConteudo_Moni .PainelHostsAlinhamento .PainelHostsItens.HostCapa .Desativado {
border-radius: 100%;
border: 0.4vw solid #ffffff;
width: 1vw;
height: 1.4vh;
}

0
Css/page/Ambiente/Monitoramento/sec_cap_2.css → Css/page/Ambiente/Monitoramento/ItemHost.css
View File

6
Css/page/Ambiente/Monitoramento/Monitor.css
View File

@ -1,3 +1,5 @@
@import url(../../../global/import.css);
@import url(./sec_cap_1.css);
@import url(./sec_cap_2.css);
@import url(./ItemHost.css);
@import url(./TelaMonitoramento.css);
@import url(./Aplicacoes_moni.css);

125
Css/page/Ambiente/Monitoramento/TelaMonitoramento.css Normal file
View File

@ -0,0 +1,125 @@
.capitulo_2 .PainelTitulo_Moni {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 2vw;
font-family: var(--font_titulo);
font-size: 1.5vw;
color: var(--Cor_Segundaria_5_1);
}
.capitulo_2 .PainelTitulo_Moni select {
background: none;
border: none;
outline: none;
border-bottom: solid 0.8vh var(--Cor_Segundaria_5_1);
height: 8vh;
width: 20vw;
font-family: var(--font_titulo);
font-size: 1.2vw;
color: var(--Cor_Segundaria_5_1);
}
.capitulo_2 .PainelConteudo_Moni .PainelHostsAlinhamento .PainelHostsItens {
width: 100%;
height: 80vh;
display: flex;
border-top: solid 0.2vh var(--Cor_Segundaria_5_1);
align-items: center;
justify-content: center;
align-content: center;
flex-direction: row;
/* Evita que conteúdos internos quebrem linha */
gap: 1vw;
}
.capitulo_2 .PainelConteudo_Moni .PainelHostsAlinhamento .PainelHostsItens .Alerta {
color: var(--Cor_Segundaria_5_1);
font-family: var(--font_titulo);
font-size: 1.2vw;
}
.capitulo_2 .PainelConteudo_Moni .PainelHostsAlinhamento .PainelHostsItens .HostCapa {
display: flex;
flex-direction: column;
justify-content: center;
align-content: start;
align-items: center;
width: 80%;
gap: 1vh;
height: 80vh;
overflow-y: auto;
}
.capitulo_2 .PainelConteudo_Moni .PainelHostsAlinhamento .PainelHostsItens .HostCorpo {
display: flex;
flex-direction: column;
width: 20%;
height: 78vh;
padding-top: 2vh;
background-color: var(--Cor_Segundaria_5_1);
display: flex;
align-items: center;
justify-content: start;
gap: 1vw;
font-family: var(--font_titulo);
font-size: 1.3vw;
color: var(--Matriz);
}
.capitulo_2 .PainelConteudo_Moni .PainelHostsAlinhamento .PainelHostsItens .HostCapa .CPU,
.capitulo_2 .PainelConteudo_Moni .PainelHostsAlinhamento .PainelHostsItens .HostCapa .Ram {
padding: 3vw;
border-radius: 2vw;
display: flex;
justify-content: center;
align-content: center;
font-size: 1.7vw;
font-family: var(--font_titulo);
/* Define a fonte do texto com a variável --font_titulo */
background-color: var(--Cor_Segundaria_5_1);
color: var(--Matriz);
/* Define a cor do texto com a variável --Cor_Segundaria_5_1 */
}

69
Css/page/Ambiente/Monitoramento/sec_cap_1.css
View File

@ -1,69 +0,0 @@
.carrossel_host {
width: 100%;
height: 20vh;
display: flex;
align-items: center;
position: relative;
}
.carrossel_host .list {
overflow: hidden;
width: 100%;
height: 15vh;
scroll-behavior: smooth;
padding: 1vw;
display: flex;
align-items: center;
gap: 2vw;
}
.carrossel_host .list .item button {
background: none;
border: none;
outline: none;
width: 12vw;
height: 5vh;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2vw;
background-color: var(--Cor_Segundaria_5_1);
padding: 2vw;
color: var(--Matriz);
font-family: var(--font_titulo);
font-size: 1vw;
}
.carrossel_host .button button {
background: none;
outline: none;
border: none;
padding: 0.5vw;
border-radius: 0.5vw;
backdrop-filter: blur(2px);
background-color: #00000070;
}
.carrossel_host .button img {
width: 2vw;
}
#next {
position: absolute;
right: 1vw;
top: 15vh;
}
#prev {
position: absolute;
left: 1vw;
top: 15vh;
}

19
Css/page/Telas_acao/load.css
View File

@ -16,11 +16,28 @@
align-content: center;
font-family: var(--font_titulo);
font-size: 1.8vw;
font-size: 1vw;
color: var(--Cor_Segundaria_5_1);
border: 1px solid #fff;
transition: 1s ease;
animation: MudançaNome 3s ease;
}
@keyframes MudançaNome {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.teste canvas {

4
js/global/Modulo_de_Comunicacao/Funcao/Comunicacao.js
View File

@ -18,7 +18,3 @@ async function getApiUrl() {
function getAuthToken() {
return localStorage.getItem('x-access-token');
}
function getAuthDomain() {
return localStorage.getItem('Id_Cliente');
}

1
js/page/Modulo_Autenticacao/Funcao/login.js
View File

@ -52,6 +52,7 @@ document.getElementById("formLogin").addEventListener("submit", async function (
}
// Função principal para enviar dados criptografados para o backend
errorMessageElement.innerHTML = '<p> Carregando...</p>';
try {

65
js/page/Modulo_Autenticacao/Painel/Repostas.js
View File

@ -28,18 +28,20 @@ async function RespostasErro(comunica, response, errorMessageElement, usernameEl
/*Caso erro, onde o email usado é invalido*/
if (comunica === 400) {
// Aplicação do texto dentro do elemento
errorMessageElement.innerHTML = `<p>O E-mail usado é invalido, o formato esperado é "usuario@domino.com.br"</p>`;
// Aplicação de uma classe especial
errorMessageElement.classList.add('Status_400')
// Aplicações de tamanho e definição de opacidade
errorMessageElement.style.height = '10vh';
errorMessageElement.style.opacity = '1';
usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
// Aplica coloração vermelha e uma transição suave
usernameElement.style.borderColor = 'red';
errorMessageElement.style.transition = ' 1s ease';
// Retirar todas as aplicações antes definidas
const tempoDeExibicao = 5000;
setTimeout(() => {
@ -55,51 +57,54 @@ async function RespostasErro(comunica, response, errorMessageElement, usernameEl
/*Caso erro, quando há um erro na autenticação com o banco de dados*/
if (comunica === 401) {
// Aplicação do texto dentro do elemento
errorMessageElement.innerHTML = `<p>Erro na autenticação, informe ao suporte, no e-mail suporte@itguys.com.br</p>`;
// Aplicação de uma classe especial
errorMessageElement.classList.add('Status_401')
// Aplicações de tamanho e definição de opacidade
errorMessageElement.style.height = '10vh';
errorMessageElement.style.opacity = '1';
// Aplica uma transição suave
errorMessageElement.style.transition = ' 1s ease';
// Retirar todas as aplicações antes definidas
const tempoDeExibicao = 5000;
setTimeout(() => {
errorMessageElement.classList.remove('Status_401')
errorMessageElement.classList.remove('Status_401');
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
errorMessageElement.style.opacity = '0';
errorMessageElement.style.transition = ' 1s ease';
errorMessageElement.style.transition = '1s ease';
}, tempoDeExibicao);
}
/*Caso erro, onde o usuário ou senha podem estar incorretos*/
if (comunica === 404) {
// Aplicação do texto dentro do elemento
errorMessageElement.innerHTML = `<p>Usuário ou Senha, estão incorretos</p>`;
// Aplicações de tamanho e definição de opacidade
errorMessageElement.style.height = '10vh';
errorMessageElement.style.opacity = '1';
errorMessageElement.classList.add('Status_404')
// Aplicação de uma classe especial
errorMessageElement.classList.add('Status_404');
usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
passwordElement.style.borderColor = 'red'; // Marca o campo da senha com erro
// Aplica uma transição suave
errorMessageElement.style.transition = ' 1s ease';
// Retirar todas as aplicações antes definidas
const tempoDeExibicao = 5000;
setTimeout(() => {
errorMessageElement.classList.remove('Status_404')
usernameElement.style.borderColor = '#1478cf'; // Marca o campo do usuário com erro
passwordElement.style.borderColor = '#1478cf'; // Marca o campo da senha com erro
usernameElement.style.borderColor = '#1478cf'; // Desmarca o campo do usuário com erro
passwordElement.style.borderColor = '#1478cf'; // Desmarca o campo da senha com erro
errorMessageElement.style.height = '0vh'; // Oculta a mensagem
errorMessageElement.style.opacity = '0';
errorMessageElement.style.transition = ' 1s ease';
@ -109,20 +114,22 @@ async function RespostasErro(comunica, response, errorMessageElement, usernameEl
/*Caso erro, onde o usuário ou senha podem estar incorretos*/
if (comunica === 500) {
// Aplicação do texto dentro do elemento
errorMessageElement.innerHTML = `<p>Estamos enfrentando dificuldades técnicas no momento. Por favor, tente novamente mais tarde.</p>`;
// Aplicações de tamanho e definição de opacidade
errorMessageElement.style.height = '10vh';
errorMessageElement.style.opacity = '1';
// Aplicação de uma classe especial
errorMessageElement.classList.add('Status_500')
usernameElement.style.borderColor = 'red'; // Marca o campo do usuário com erro
passwordElement.style.borderColor = 'red'; // Marca o campo da senha com erro
// Aplica uma transição suave
errorMessageElement.style.transition = ' 1s ease';
// Retirar todas as aplicações antes definidas
const tempoDeExibicao = 5000;
setTimeout(() => {
@ -137,20 +144,19 @@ async function RespostasErro(comunica, response, errorMessageElement, usernameEl
}
/*Caso de erro especial, que é apresentado em um pop up, essa estrutura pega a informações da resposta em json e os apresenta sobre o pop up na tela*/
/*Caso de erro, onde acontece um problema na comunicação com o proprio servidor*/
if (comunica === 503) {
// Aplicação do texto dentro do elemento
errorMessageElement.innerHTML = `<p>Estamos realizando manutenções necessárias. Agradecemos por sua compreensão.</p>`;
// Aplicações de tamanho e definição de opacidade
errorMessageElement.style.height = '15vh';
errorMessageElement.style.opacity = '1';
// Aplicação de uma classe especial
errorMessageElement.classList.add('Status_503')
// Aplica uma transição suave
errorMessageElement.style.transition = ' 1s ease';
// Retirar todas as aplicações antes definidas
const tempoDeExibicao = 5000;
setTimeout(() => {
@ -165,16 +171,17 @@ async function RespostasErro(comunica, response, errorMessageElement, usernameEl
/*Caso de erro, onde acontece um problema na comunicação com o proprio servidor*/
if (comunica === 502) {
// Aplicação do texto dentro do elemento
errorMessageElement.innerHTML = `<p> Houve um problema ao processar sua solicitação. Estamos trabalhando para corrigir a situação. </p>`;
// Aplicações de tamanho e definição de opacidade
errorMessageElement.style.height = '15vh';
errorMessageElement.style.opacity = '1';
// Aplicação de uma classe especial
errorMessageElement.classList.add('Status_502')
// Aplica uma transição suave
errorMessageElement.style.transition = ' 1s ease';
// Retirar todas as aplicações antes definidas
const tempoDeExibicao = 5000;
setTimeout(() => {

221
js/page/Modulo_Construcao/Funcao/Config/Ambiente/PopAmbientes_Func.js
View File

@ -0,0 +1,221 @@
// Pop up desenvolvido para alinhar os Grupos de usuário de um ambiente respectivamente
// Pop up dedicado para direcionar o manual do ambiente do usuário
InicializandoPopUser();
function InicializandoPopUser() {
const interval_ConfigUser = 500; // Tempo em milissegundos (1 segundo)
try {
const checkElements_ConfigUser = setInterval(() => {
try {
const ConfigUserConstruida = document.getElementById('EstruturaUser');
if (ConfigUserConstruida) {
const IntegridadePopUp = document.getElementById('Pop_up_Config');
let TelaHtmlRecor = null;
PainelApresentacao()
function PainelApresentacao() {
let TelaHtmlRecor = "Apresentacao";
SeletorEmpresa(TelaHtmlRecor);
function ApresentacaoUser() { }
}
async function PainelCricao() {
let TelaHtmlRecor = "Criacao";
IntegridadePopUp.innerHTML = Estrututura_html_User_Criacao();
SeletorEmpresa(TelaHtmlRecor);
const SeletorEmpresaElement = document.getElementById('SeletorEmpresa');
const ButtoEnviarUser = document.getElementById('CriarUsuario');
const DominioEmpresaElement = document.getElementById('DominioEmpresa');
await Empresasconsulta();
let dominio_empresa = 'Vazio';
async function Empresasconsulta() {
const { Empresinhas } = await ConsultasEmpresas();
const EmpresinhasPDf = await Empresinhas.json();
console.log(EmpresinhasPDf);
let htmlContentConfig = '';
htmlContentConfig += `<option value="0"> Escolha uma empresa</option>`
const seletorEmpresa = document.getElementById('SeletorEmpresa');
for (let EstadoEmpresa of EmpresinhasPDf) {
const Empresas = EstadoEmpresa.nome; // "2025-01-14"
const IdEmpresas = EstadoEmpresa.idempresa;
const Dominio = EstadoEmpresa.dominio;
htmlContentConfig += `<option value="${IdEmpresas}" data-dominio="${Dominio}" > ${Empresas}</option>`;
}
seletorEmpresa.innerHTML = htmlContentConfig;
// Evento para atualizar o domínio ao mudar a seleção
seletorEmpresa.addEventListener('change', function () {
const selectedOption = seletorEmpresa.options[seletorEmpresa.selectedIndex];
const dominio = selectedOption.getAttribute('data-dominio') || 'Dominio';
DominioEmpresaElement.textContent = dominio;
dominio_empresa = dominio;
});
}
ButtoEnviarUser.addEventListener('click', CapitacaodeInformacao);
async function CapitacaodeInformacao() {
const NomeCompletoElement = document.getElementById('NomeUser');
const UsuarioADElement = document.getElementById('UserAdUser');
const values = [
NomeCompletoElement, UsuarioADElement, SeletorEmpresaElement
];
// Verifica se todos os elementos existem, meio que uma validação de todos as informações do formulario estão sendo enviadas.
for (const el of values) {
if (!el) {
console.error('Elemento não encontrado:', el);
alert('Um ou mais elementos não foram encontrados.');
return;
}
}
// Alinhar cada um dos campos do formulario á sua variavel, para receber os dados que estão sendo prenchidos
const nome_completo = NomeCompletoElement.value.trim(); // Alinha o valor de um input
const usuario_ad = UsuarioADElement.value.trim();
const id_empresa = SeletorEmpresaElement.value;
// Valida se todos os capos foram preenchidos
if (!nome_completo || !usuario_ad || id_empresa === '0') {
alert('Por favor, preencha todos os campos obrigatórios corretamente!');
return;
}
// Criação do objeto json do extintor, será enviado para o back end
const novoUser = {
nome_completo,
usuario_ad,
id_empresa,
dominio_empresa
};
console.log(novoUser)
EnvioInformacao(novoUser)
}
async function EnvioInformacao(novoUser) {
try {
await NovoUser(novoUser);
alert('usuário criado com sucesso');
} catch (error) {
console.error('Erro:', error);
alert('Erro ao criar ao usuário. Tente novamente mais tarde.');
}
}
}
function PainelEdicao() {
let TelaHtmlRecor = "Edicao";
SeletorEmpresa(TelaHtmlRecor);
}
function SeletorEmpresa(Seletor) {
if (Seletor == "Criacao") {
const ButtonRetornarUser = document.getElementById('VoltarPopup');
const ButtonFecharUser = document.getElementById('EncerrarPopup');
ButtonRetornarUser.addEventListener('click', Retonar);
ButtonFecharUser.addEventListener('click', Fechar);
}
if (Seletor == "Apresentacao") {
const ButtonFecharUser = document.getElementById('EncerrarPopup');
const ButtonCriarUser = document.getElementById('NovoUsuarioPopup');
const ButtonEditarUser = document.getElementById('');
ButtonCriarUser.addEventListener('click', PainelCricao);
ButtonFecharUser.addEventListener('click', Fechar);
}
if (Seletor == "Edicao") {
const ButtonRetornarUser = document.getElementById('VoltarPopup');
const ButtonFecharUser = document.getElementById('EncerrarPopup');
ButtonRetornarUser.addEventListener('click', Retonar);
ButtonFecharUser.addEventListener('click', Fechar);
}
function Retonar() {
IntegridadePopUp.innerHTML = Estrututura_html_User_home();
PainelApresentacao();
}
function Fechar() {
IntegridadePopUp.style.display = "none"
IntegridadePopUp.innerHTML = '';
}
}
clearInterval(checkElements_ConfigUser); // Para o setInterval
}
} catch (error) {
console.error('Houve algo inesperado dentro da tela home' + error)
clearInterval(checkElements_ConfigUser); // Para o setInterval
return false
}
}, interval_ConfigUser);
} catch (error) {
console.error('Houve algo inesperado fora da tela home' + error)
}
}

100
js/page/Modulo_Construcao/Funcao/Config/Estrutura/config.js
View File

@ -2,11 +2,38 @@
setTimeout(async () => {
const ApresentarTeladeConfiguracao = localStorage.getItem('Iniciar_Config')
if (ApresentarTeladeConfiguracao === "true") {
const ConfigLoad = document.getElementById('entrada_2');
localStorage.removeItem('Iniciar_Config', 'true')
if (ConfigLoad) {
// Verifica se o conteúdo do elemento não está vazio
if (ConfigLoad.innerHTML.trim() !== "") {
const estilos_config = document.getElementById('conexao');
const estilos_config_tela = document.getElementById('conexao_tela');
estilos_config_tela.href = '';
estilos_config.href = './Css/page/Ambiente/Config/Config.css';
InteracoesTelas_Config();
}
} else {
console.error("Elemento 'entrada_2' não encontrado.");
}
setTimeout(ConfigLoad == null, 500) // Salva um valor no localStorage
}
}, 300); // Executa as funções 3 segundos após o carregamento do DOM
async function InteracoesTelas_Config() {
let usuariConfig = null
try {
// Conexção com o script de Comunicacao.js para se utilizar da função de autenticação com a rota mouten, para puxar a const response e apiURL
const { response, apiUrl } = await Autenticao();
//Essa constante faz um tratamento sobre a response retirando o json para armazenar nesse data
@ -33,12 +60,26 @@ async function InteracoesTelas_Config() {
// Adiciona eventos para alternar entre as telas
Voltar_home.addEventListener('click', () => carregarTela_config('RetornarHome'));
Manual_button.addEventListener('click', () => carregarTela_config('PainelManual'));
// Manual_button.addEventListener('click', () => carregarTela_config('PainelManual'));
Perfil_button.addEventListener('click', () => carregarTela_config('PainelEstilo'));
localStorage.setItem('Carregou_tela_config', 'true');
} catch (error) {
const ConfigErro = document.getElementById('entrada_2');
ConfigErro.innerHTML = ""
await criarBlocos();
localStorage.setItem('Carregou_tela_config', 'true');
setTimeout(() => {
localStorage.removeItem('Carregou_tela_config');
}, 100);
console.error("Erro na tela de configuração" + error)
}
}
async function carregarTela_config(tela) {
@ -62,6 +103,11 @@ async function carregarTela_config(tela) {
html: './js/page/Modulo_Construcao/Painel/Config/Manual/PopManual_html.js',
mensagem: 'Carregando ...',
},
PainelAmbiente: {
func: './js/page/Modulo_Construcao/Funcao/Config/Ambiente/PopAmbientes_Func.js',
html: './js/page/Modulo_Construcao/Painel/Config/Ambiente/PopAmbientes_html.js',
mensagem: 'Carregando ...',
},
RetornarHome: {
func: './js/page/Modulo_Construcao/Funcao/Config/Estrutura/config.js',
html: './js/page/Modulo_Construcao/Painel/Config/Estrutura/Estrutura_Config_Html.js',
@ -114,14 +160,22 @@ async function carregarTela_config(tela) {
atualizarClasse('PainelManual');
}
// Estrutura html de monitoramento
if (tela === 'Painel_configuracao' && typeof estruturaHtml_Home === 'function') {
scriptPaths[tela].mensagem = Estrututura_html_Ambiente_home();
telaVisualizacao.style.display = "flex"
atualizarClasse('Painel_configuracao');
}
// Estrutura html de configuração
if (tela === 'RetornarHome' && typeof estruturaHtml_Home === 'function') {
// Verifica se a função EstruturaEsqueleto existe antes de chamar
localStorage.setItem('Carregou_tela_config_New', 'true');
const fimPainel = document.getElementById('entrada_2')
fimPainel.innerHTML = '';
CarregamentoLoad();
await criarBlocos();
//console.log('config')
@ -164,34 +218,18 @@ function ControladorDeVisualizacao_config(InfoGeral) {
<p>Usuário</p>
</div>`;
EstruraDinamicadeConfiguracao.innerHTML += `
<div class="element_1" id="Ambiente_config">
<img src="./Acessts/Imagens/Iconis/ferramentas copiar.png" alt="" >
<p>Ambiente</p>
</div>`;
const User_button = document.getElementById('User_config');
User_button.addEventListener('click', () => carregarTela_config('PainelUser'));
const Ambiente_button = document.getElementById('Ambiente_config');
Ambiente_button.addEventListener('click', () => carregarTela_config('PainelAmbiente'));
}
}
setTimeout(async () => {
const ConfigLoad = document.getElementById('entrada_2');
if (ConfigLoad) {
// Verifica se o conteúdo do elemento não está vazio
if (ConfigLoad.innerHTML.trim() !== "") {
const estilos_config = document.getElementById('conexao');
const estilos_config_tela = document.getElementById('conexao_tela');
estilos_config_tela.href = '';
estilos_config.href = './Css/page/Ambiente/Config/Config.css';
InteracoesTelas_Config();
}
} else {
console.error("Elemento 'entrada_2' não encontrado.");
}
setTimeout(ConfigLoad == null, 500) // Salva um valor no localStorage
}, 300); // Executa as funções 3 segundos após o carregamento do DOM

45
js/page/Modulo_Construcao/Funcao/Config/Perfil/PopPerfil_Func.js
View File

@ -55,34 +55,43 @@ function InicializandoPopPerfil() {
function capiturarInfos() {
//const formularioPerfil = document.getElementById('formularioPerfil')
// Adiciona eventos para mudar a imagem quando o usuário seleciona um arquivo
const values = [
inputPerfil, inputFundo
];
// Verifica se todos os elementos existem, meio que uma validação de todos as informações do formulario estão sendo enviadas.
for (const el of values) {
if (!el) {
console.error('Elemento não encontrado:', el);
alert('Um ou mais elementos não foram encontrados.');
// Verifica se os inputs existem
if (!inputPerfil || !inputFundo) {
console.error('Um ou mais elementos do formulário não foram encontrados.');
alert('Erro interno: Elementos do formulário não encontrados.');
return;
}
}
const perfil = inputPerfil.files[0];
const foto_fundo = inputFundo.files[0];
// Valida se todos os capos foram preenchidos
// Validação de preenchimento
if (!perfil || !foto_fundo) {
alert('Por favor, preencha todos os campos obrigatórios corretamente!');
alert('Por favor, selecione ambas as imagens antes de continuar.');
return;
}
// Define limites de tamanho e formato
const tamanhoMaximo = 150 * 1024 * 1024; // 150MB em bytes
const extensoesPermitidas = ["image/jpeg", "image/jpg"];
// Função para validar arquivo
function validarArquivo(arquivo, nomeCampo) {
if (!extensoesPermitidas.includes(arquivo.type)) {
alert(`O arquivo selecionado para ${nomeCampo} não é um JPG válido.`);
return false;
}
if (arquivo.size > tamanhoMaximo) {
alert(`O arquivo selecionado para ${nomeCampo} excede o limite de 150MB.`);
return false;
}
return true;
}
// Valida ambos os arquivos
if (!validarArquivo(perfil, "Perfil") || !validarArquivo(foto_fundo, "Fundo")) {
return; // Interrompe o envio se houver erro
}
const formData = new FormData();

14
js/page/Modulo_Construcao/Funcao/Config/User/PopUser_Func.js
View File

@ -50,7 +50,7 @@ function InicializandoPopUser() {
const EmpresinhasPDf = await Empresinhas.json();
//console.log(EmpresinhasPDf);
console.log(EmpresinhasPDf);
let htmlContentConfig = '';
htmlContentConfig += `<option value="0"> Escolha uma empresa</option>`
const seletorEmpresa = document.getElementById('SeletorEmpresa');
@ -58,11 +58,11 @@ function InicializandoPopUser() {
for (let EstadoEmpresa of EmpresinhasPDf) {
const Empresas = EstadoEmpresa.nome; // "2025-01-14"
const IdEmpresas = EstadoEmpresa.idempresae;
const IdEmpresas = EstadoEmpresa.idempresa;
const Dominio = EstadoEmpresa.dominio;
htmlContentConfig += `<option value="${Empresas}" data-dominio="${Dominio}" > ${Empresas}</option>`;
htmlContentConfig += `<option value="${IdEmpresas}" data-dominio="${Dominio}" > ${Empresas}</option>`;
}
@ -105,12 +105,12 @@ function InicializandoPopUser() {
// Alinhar cada um dos campos do formulario á sua variavel, para receber os dados que estão sendo prenchidos
const nome_completo = NomeCompletoElement.value.trim(); // Alinha o valor de um input
const usuario_ad = UsuarioADElement.value.trim();
const empresa = SeletorEmpresaElement.value;
const id_empresa = SeletorEmpresaElement.value;
// Valida se todos os capos foram preenchidos
if (!nome_completo || !usuario_ad || empresa === '0') {
if (!nome_completo || !usuario_ad || id_empresa === '0') {
alert('Por favor, preencha todos os campos obrigatórios corretamente!');
return;
@ -120,11 +120,11 @@ function InicializandoPopUser() {
const novoUser = {
nome_completo,
usuario_ad,
empresa,
id_empresa,
dominio_empresa
};
//console.log(novoUser)
console.log(novoUser)
EnvioInformacao(novoUser)
}

102
js/page/Modulo_Construcao/Funcao/Estrutura/Autencacao.js
View File

@ -13,8 +13,10 @@ async function Autenticao() {
}
});
let ResponseAutenticao = response.status;
return { response, apiUrl }; // Retorne um objeto com a resposta e apiUrl
return { response, apiUrl, ResponseAutenticao }; // Retorne um objeto com a resposta e apiUrl
}
@ -42,7 +44,7 @@ async function IntegracaoZamade() {
async function IntegracaoBoleto() {
async function IntegracaoBoleto_Conect() {
const apiUrl = await getApiUrl();
const token = getAuthToken();
@ -51,9 +53,8 @@ async function IntegracaoBoleto() {
throw new Error("Erro: Parâmetros obrigatórios ausentes (apiUrl, token ou domain)");
}
await fetch(`${apiUrl}/boletos`, { method: 'OPTIONS' });
const Boleto = await fetch(`${apiUrl}/boletos`, {
// Requisição POST com as opções corretas
const Response_Conect = await fetch(`${apiUrl}/boletos`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@ -61,14 +62,92 @@ async function IntegracaoBoleto() {
}
});
const Boleto_Conect = await fetch(`${apiUrl}/boletos`, {
method: 'OPTIONS',
headers: {
'Content-Type': 'application/json',
'x-access-token': token
}
});
if (!Boleto.ok) {
throw new Error(`Erro na API de geração de boletos: ${Boleto.status} - ${Boleto.statusText}`);
if (!Boleto_Conect.ok) {
throw new Error(`Erro na API de geração de boletos: ${Boleto_Conect.status} - ${Boleto_Conect.statusText}`);
}
return { Boleto, apiUrl }; // Retorna a resposta e a URL
return { Boleto_Conect, Response_Conect, apiUrl }; // Retorna a resposta e a URL
}
async function IntegracaoBoleto_Alinhamento() {
const apiUrl = await getApiUrl();
const token = getAuthToken();
if (!apiUrl || !token) {
throw new Error("Erro: Parâmetros obrigatórios ausentes (apiUrl, token ou domain)");
}
// Requisição POST com as opções corretas
await fetch(`${apiUrl}/<codigo_solicitacao>`, {
method: 'GET',
headers: { 'x-access-token': token }
});
const Boleto_Aline = await fetch(`${apiUrl}/<codigo_solicitacao>`, {
method: 'OPTIONS',
headers: {
'Content-Type': 'application/json',
'x-access-token': token
}
});
if (!Boleto_Aline.ok) {
throw new Error(`Erro na API de geração de boletos: ${Boleto_Aline.status} - ${Boleto_Aline.statusText}`);
}
return { Boleto_Aline, apiUrl }; // Retorna a resposta e a URL
}
async function IntegracaoBoleto_GerarPDF() {
const apiUrl = await getApiUrl();
const token = getAuthToken();
if (!apiUrl || !token) {
throw new Error("Erro: Parâmetros obrigatórios ausentes (apiUrl, token ou domain)");
}
// Requisição POST com as opções corretas
await fetch(`${apiUrl}/<codigo_solicitacao>/pdf`, {
method: 'GET',
headers: { 'x-access-token': token }
});
const Boleto_PDF = await fetch(`${apiUrl}/<codigo_solicitacao>/pdf`, {
method: 'OPTIONS',
headers: {
'Content-Type': 'application/json',
'x-access-token': token
}
});
if (!Boleto_PDF.ok) {
throw new Error(`Erro na API de geração de boletos: ${Boleto_PDF.status} - ${Boleto_PDF.statusText}`);
}
return { Boleto_PDF, apiUrl }; // Retorna a resposta e a URL
}
@ -105,12 +184,9 @@ async function IntegracaoZabix() {
const token = getAuthToken();
if (!apiUrl || !token) {
throw new Error("Erro: Parâmetros obrigatórios ausentes (apiUrl, token ou domain)");
}
const Zabix = await fetch(`${apiUrl}/zabbix/hosts`, {
method: 'GET',
const Zabix = await fetch(`${apiUrl}/metrics`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-access-token': token,

22
js/page/Modulo_Construcao/Funcao/Estrutura/Controlador_telas.js
View File

@ -24,7 +24,7 @@ async function criarBlocos() {
try {
// Conexção com o script de Comunicacao.js para se utilizar da função de autenticação com a rota mouten, para puxar a const response e apiURL
const { response, apiUrl } = await Autenticao();
const { response, apiUrl, ResponseAutenticao } = await Autenticao();
//Essa constante faz um tratamento sobre a response retirando o json para armazenar nesse data
const data = await response.json();
@ -37,19 +37,11 @@ async function criarBlocos() {
logoEmpresa: `${apiUrl}${data.empresa.logo}`
};
//Consoles para validar a chegada das informações, e se estão sendo usadas corretamento
//console.log('Data config' + usuarioData);
//console.log(usuarioData.nomeCompleto);
//console.log(usuarioData.Empresa);
// Inicia a função insercaoFunc_Estrutura
await insercaoFunc_Estrutura();
@ -85,8 +77,8 @@ async function criarBlocos() {
async function EstruturaEsqueleto() {
//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 estilos_Estrutura = document.getElementById('conexao');
estilos_Estrutura.href = './Css/page/Ambiente/Estrutura/estrutura.css';
const construtor_primario = document.getElementById('entrada_1');
@ -99,6 +91,7 @@ async function criarBlocos() {
// Aplica as funções para carregamento das imagens, os alinhando com classe para a aplicação dentro do html.
loadImage(usuarioData.ImagemUser, 'profileImage');
loadImage(usuarioData.logoEmpresa, 'companyLogo');
await loadBackgroundAndUpdateStyle()
//console.log('Link da imagem de perfil -' + usuarioData.ImagemUser);
//console.log('Link da Logo -' + usuarioData.logoEmpresa);
Interatividade();
@ -111,15 +104,19 @@ async function criarBlocos() {
}
setTimeout(localStorage.setItem('Carregou', 'true'), 500)
}
// Cenario de erro completo da estrutura
} catch (error) {
localStorage.removeItem('Carregou');
// Inicialização da função insercaoFunc_Erro
insercaoFunc_Erro();
// Função similiar de inserção de scripts para o ambiente do usuário, porem nesse caso sendo para a tela de erro.
function insercaoFunc_Erro() {
@ -260,8 +257,7 @@ async function loadBackgroundAndUpdateStyle() {
document.addEventListener('DOMContentLoaded', async () => {
setTimeout(async () => {
await criarBlocos();
await loadBackgroundAndUpdateStyle();
setTimeout(localStorage.setItem('Carregou', 'true'), 500) // Salva um valor no localStorage
// Salva um valor no localStorage
}, 3000); // Executa as funções 3 segundos após o carregamento do DOM
});

134
js/page/Modulo_Construcao/Funcao/Estrutura/Estrutura.js
View File

@ -1,23 +1,27 @@
// Função responsavel por aplicar a funcionalidade de ajuste da tela
function Interatividade() {
//Delcaração das variaveis que serão usadas
var botao = document.getElementById('id_ajuste');
var cabecario = document.querySelector('.capitulo_1');
var tela = document.querySelector('.capitulo_2');
var menu = document.querySelector('.menu_lateral');
//Condicional de existencia do elemento da variavel botao
if (botao) {
//Evento de click
botao.addEventListener('click', function () {
//console.log('Botão clicado!');
//console.log('Botão clicado!'); // Console para validar a aplicação do botão pois na epoca tinha conflitos dessa função ser usada ao mesmo tempo que seu elemento estava construido sobre a tela
//Aplicações de classes que pode ser retiradas e aplicadas novamente usando o toggle
if (menu) menu.classList.toggle('expansao');
if (cabecario) cabecario.classList.toggle('expansao');
if (tela) tela.classList.toggle('expansao');
});
} else {
//Caso de erro para caso o botão não seja encontrados
console.error('Botão não encontrado!');
}
// Função que foi desutilizada
/*if (Permissoes.visuMonitor) {
const script2 = document.createElement('script');
script2.src = './js/page/Ambiente/Monitoramento/Modulo_Construcao/Funcao/Estrutura_Secundaria_Monitor.js';
@ -25,47 +29,36 @@ function Interatividade() {
document.body.appendChild(script2);
}*/
// Adiciona o listener de clique após a construção do HTML
}
// Função para gerar controladores, permitem cada uma das telas do sistema serem apresentadas diante ao sistema.
async function ApresentarTelas(InfoGeral) {
// Inicialização da função InteraçõesTelas
InteracoesTelas();
// Essa função possui a resposabilidade de alinhar todas const de todas as telas e chamamento de suas funções respectivas
function InteracoesTelas() {
ControladorDeVisualizacao(InfoGeral);
// Alinhamento de todas as consts
const Config_texts = document.getElementById('Configuracao_1');
const Config_icon = document.getElementById('Configuracao_2');
const Home_texts = document.getElementById('Home_1');
const Home_icon = document.getElementById('Home_2');
const Logou_texts = document.getElementById('EncerrarSessao_1')
const Logou_icon = document.getElementById('EncerrarSessao_2')
// Adiciona eventos para alternar entre as telas
Config_texts.addEventListener('click', () => carregarTela('config'));
Config_icon.addEventListener('click', () => carregarTela('config'));
Home_texts.addEventListener('click', () => carregarTela('home'));
Home_icon.addEventListener('click', () => carregarTela('home'));
const Logou_texts = document.getElementById('EncerrarSessao_1');
const Logou_icon = document.getElementById('EncerrarSessao_2');
const PainelMoniIcon = document.getElementById('sub_entrada_moni_1');
const PainelMoniButton = document.getElementById('sub_entrada_moni_2');
// Adiciona eventos para alternar entre as telas cada resposta para o função carregar tela inicia um evento definido mais afrente
Config_texts.addEventListener('click', () => carregarTela('config'));
Config_icon.addEventListener('click', () => carregarTela('config'));
Home_texts.addEventListener('click', () => carregarTela('home'));
Home_icon.addEventListener('click', () => carregarTela('home'));
PainelMoniButton.addEventListener('click', () => carregarTela('moni'));
PainelMoniIcon.addEventListener('click', () => carregarTela('moni'));
// Evento de logout
Logou_texts.addEventListener('click', EncerrarSessaAm);
Logou_icon.addEventListener('click', EncerrarSessaAm);
@ -75,32 +68,38 @@ async function ApresentarTelas(InfoGeral) {
}
}
// Função responsavel por inicializar cada uma das telas do sistema apartir do evento condicional
async function carregarTela(tela) {
//Alinhamento da inserção estrutural inicial para ser usada dentro da tela de visualização
const telaVisualizacao = document.getElementById('TelaVisualizacao');
telaVisualizacao.innerHTML = EstrutraPrimaria();
// Função que insere base estrutura de visualização, levantando a subEntrada_1 ser a estrutura para a tela de carregamento, enquanto subEntrada_2 é a estrutura que aparesenta toda a tela respectiva.
function EstrutraPrimaria() {
return `
<div id="subEntrada_1" ></div>
<div id="subEntrada_2" ></div>
`;
}
// Inicializa a função de TeladeCarregamento
TeladeCarregamento();
// Função responsavel por apresentar a tela de carregamento
function TeladeCarregamento() {
// Conexão com a subentrada_1
const Subentrada1 = document.getElementById('subEntrada_1');
// Inicialização de carregamento da função InciandoCarregamento
InciandoCarregamento();
// Inserção da estrutura de carregamento
function InciandoCarregamento() {
Subentrada1.innerHTML = estruraAnimiada();
//Inserção html do load
function estruraAnimiada() {
return `
<div id="Painel_loading" class="Painel_loading">
@ -115,24 +114,45 @@ async function ApresentarTelas(InfoGeral) {
}
// Inicializa a função de FinalizandoCarregamento
FinalizandoCarregamento();
}
// Essa realiza o processo de finalização da tela de carregamento
function FinalizandoCarregamento() {
//Aplica intevalo de verificações para capitar se foi incluido carregou dentro de localstorage, uma vez encotrado um if busca a resposta para validar se ele é true, ele executa o if.
const interval = setInterval(() => {
const Subtela_laod = document.getElementById('subEntrada_1');
const SubPaine_load = document.getElementById('Painel_loading')
const Subcarregou = localStorage.getItem('Carregou_tela');
const Subcarregou_Moni = localStorage.getItem('Carregou_tela_Moni');
const Subcarregou_Home = localStorage.getItem('Carregou_tela_Home');
// primeiro caso desenvolvido para capitar a conclusão de carregamento da tela de monitoramento
if (SubPaine_load && Subtela_laod) { // Verifica se os elementos existem
if (Subcarregou === 'true') {
if (Subcarregou_Moni === 'true') {
SubPaine_load.style.opacity = "0";
// Aplica um delei no carregamento para para deixar a a animação suave
setTimeout(() => {
Subtela_laod.innerHTML = ''; // Limpa o conteúdo do elemento do load
localStorage.removeItem('Carregou_tela_Moni'); // Remove o item do localStorage
clearInterval(interval); // Para de verificar
}, 1000);
}
} else {
clearInterval(interval); // Para de verificar se os elementos não existem
}
// Aplica um delei no carregamento para para deixar a a animação suave
if (SubPaine_load && Subtela_laod) { // Verifica se os elementos existem
if (Subcarregou_Home === 'true') {
SubPaine_load.style.opacity = "0";
setTimeout(() => {
Subtela_laod.innerHTML = ''; // Limpa o conteúdo do elemento do load
localStorage.removeItem('Carregou_tela'); // Remove o item do localStorage
localStorage.removeItem('Carregou_tela_Home'); // Remove o item do localStorage
clearInterval(interval); // Para de verificar
}, 1000);
}
@ -145,9 +165,10 @@ async function ApresentarTelas(InfoGeral) {
}
// Conexão com a segunda estrutura
const Subentrada2 = document.getElementById('subEntrada_2');
//Data como o formulario que cada tela precisa possuir para ser incializada, script de html, script de função e mensagem.
const scriptPaths = {
//Alinhamento das telas por datas, aqui são organizadas das possiveis respostas de cada botão e os caminhos scripts cada uma delas necessita para o seu funcionamento.
@ -201,7 +222,7 @@ async function ApresentarTelas(InfoGeral) {
const Tela_homelink = document.getElementById('conexao_tela');
Tela_homelink.href = "./Css/page/Ambiente/Monitoramento/Monitor.css";
localStorage.setItem('Carregou_tela', 'true')
}
// Estrutura html de configuração
@ -209,8 +230,8 @@ async function ApresentarTelas(InfoGeral) {
const novatela = document.getElementById('entrada_2')
const antigatela = document.getElementById('entrada_1')
localStorage.setItem('Carregou_tela', 'true')
Carregar_Configuracoes();
localStorage.setItem('Iniciar_Config', 'true')
function Carregar_Configuracoes() {
@ -250,10 +271,10 @@ async function ApresentarTelas(InfoGeral) {
Subtela_laodConfig.innerHTML = ''; // Limpa o conteúdo do elemento do load
localStorage.removeItem('Carregou_tela_config'); // Remove o item do localStorage
clearInterval(intervalConfig); // Para de verificar
}, 1000);
}, 500);
}
}, 3500); // Verifica a cada 500ms
}, 1500); // Verifica a cada 500ms
}
@ -307,8 +328,41 @@ async function ApresentarTelas(InfoGeral) {
// Carrega a tela 'home' automaticamente ao iniciar
carregarTela('home');
const TElaConfig_new = localStorage.getItem('Carregou_tela_config_New');
if (TElaConfig_new === "true") {
console.log('home');
localStorage.setItem('Carregou_Novamente', 'true');
localStorage.removeItem('Carregou_tela_config_New'); // Remove o item do localStorage
}
// Controlador de visualização sobre as opições que existem dentro do ambiente do usuário
function ControladorDeVisualizacao(InfoGeral) {
if (InfoGeral.Empresa == "itguys.com.br") {
const PainelMoniIcon = document.getElementById('sub_entrada_Zammad_1');
const PainelMoniButton = document.getElementById('sub_entrada_Zammad_2');
PainelMoniButton.innerHTML = `
<a href="https://zammad.itguys.com.br/" class="filheira_a" target="black_">
<div class="filheira">
<h2>Zammad</h2>
</div>
</a>`;
PainelMoniIcon.innerHTML = `
<div class="filheira">
<img class="img" src="./Acessts/Imagens/Iconis/Zammad_logo.png" alt="">
</div>
`;
}
}
}

20
js/page/Modulo_Construcao/Funcao/Estrutura/Painel_Erro.js
View File

@ -1,11 +1,12 @@
async function CasodeErro() {
const { response } = await Autenticao(); // Recebe o objeto com response e apiUrl
//Constante de controle sobre estilos css do painel de erro.
const estilos = document.getElementById('conexao');
const respostaserver = response.status
//console.log(respostaserver)
@ -17,10 +18,13 @@ async function CasodeErro() {
let button_acao = '/Sites/Site_ItGuys/ambiente_do_usuário/login.html';
let estilo = './Css/page/Telas_acao/erro_404_Front.css';
Interpretador(respostaserver, Status, mensagem, sub_mensagem, button_info, button_acao, estilo);
function Interpretador(Resposta, Status, mensagem, sub_mensagem, button_info, button_acao, estilo) {
if (Resposta == 401) {
Status = 'Erro 404';
@ -30,6 +34,7 @@ async function CasodeErro() {
button_acao = '/Sites/Site_ItGuys/ambiente_do_usuário/login.html';
estilo = './Css/page/Telas_acao/erro_404_Front.css';
}
if (Resposta == 502) {
@ -65,14 +70,19 @@ async function CasodeErro() {
}
estilos.href = estilo;
estilos.href = estilo;
}
//Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
const erro = document.getElementById('entrada_1');
erro.innerHTML = TeladeErro(Status, mensagem, sub_mensagem, button_info, button_acao);
setTimeout(localStorage.setItem('Carregou', 'true'), 500)
const TElaConfig_new = localStorage.getItem('Carregou_tela_config_New');
if (TElaConfig_new === "true") {
console.log('home');
localStorage.setItem('Carregou_Novamente', 'true');
localStorage.removeItem('Carregou_tela_config_New'); // Remove o item do localStorage
}
}
document.body.style.backgroundColor = 'red'

114
js/page/Modulo_Construcao/Funcao/Home/Func_Home.js
View File

@ -37,35 +37,44 @@ function IniciandoTelaHome() {
function RespostasServiHome(ResutadosES, paineServicos) {
if (ResutadosES === 500) {
if (ResutadosES === 500) {/*status 500 leia pfrrrrr*/
paineServicos.innerHTML = `
<h2>Statues 404</h2>
<p>Sem serviços no momento</p>`
<div class='Corpo_erro'>
<p>Sem serviços no momento</p>
<h2>Status 404</h2>
</div>`
throw new Error(`Erro na API dos Serviços: ${ResutadosES}`);
}
if (ResutadosES === 404) {
paineServicos.innerHTML = `
<h2>Statues 404</h2>
<p>Nenhum serviço encontrado</p>`
<div class='Corpo_erro'>
<h2>Status 404</h2>
<p>Nenhum serviço encontrado</p>
</div>`
throw new Error(`Erro na API dos Serviços: ${ResutadosES}`);
}
if (ResutadosES === 401) {
paineServicos.innerHTML = `
<h2>Statues 404</h2>
<p>Usuário não autenticado!</p>`
<div class='Corpo_erro'>
<h2>Status 404</h2>
<p>Usuário não autenticado!</p>
</div>`
throw new Error(`Erro na API dos Serviços: ${ResutadosES} `);
}
if (ResutadosES === 502) {
paineServicos.innerHTML = `
<h2>Statues 404</h2>
<p>Estamos realizando manutenções, volte mais tarde</p>`
<div class='Corpo_erro'>
<h2>Status 404</h2>
<p>Estamos realizando manutenções, volte mais tarde</p>
</div>`
throw new Error(`Erro na API dos Serviços: ${ResutadosES} `);
}
@ -98,6 +107,7 @@ function IniciandoTelaHome() {
async function Chamados_home(dia, pesquisaValor = '') {
const { Chamados, ResutadosChamados } = await IntegracaoZamade();
const dataZam = await Chamados.json();
console.log(dataZam)
const ListadeChamados = document.getElementById('ChamadosDominio');
@ -108,38 +118,42 @@ function IniciandoTelaHome() {
if (ResutadosChamados === 500) {
ListadeChamados.innerHTML = `
<h2>Statues 404</h2>
<h2>Status 404</h2>
<p>Sem serviços no momento</p>`
throw new Error(`Erro na API dos Serviços: ${ResutadosChamados}`);
throw new Error(`Erro na API dos Chamados: ${ResutadosChamados}`);
}
if (ResutadosChamados === 404) {
ListadeChamados.innerHTML = `
<h2>Statues 404</h2>
<h2>Status 404</h2>
<p>Nenhum serviço encontrado</p>`
throw new Error(`Erro na API dos Serviços: ${ResutadosChamados}`);
throw new Error(`Erro na API dos Chamados: ${ResutadosChamados}`);
}
if (ResutadosChamados === 401) {
ListadeChamados.innerHTML = `
<h2>Statues 404</h2>
<h2>Status 404</h2>
<p>Usuário não autenticado!</p>`
throw new Error(`Erro na API dos Serviços: ${ResutadosChamados}`);
throw new Error(`Erro na API dos Chamados: ${ResutadosChamados}`);
}
if (ResutadosChamados === 405) {
ListadeChamados.innerHTML = `
<h2>Nenhum ticket encontrado nos últimos 30 dias.</h2>`;
throw new Error(`Erro na API dos Chamados: ${ResutadosChamados}`);
}
if (ResutadosChamados === 502) {
ListadeChamados.innerHTML = `
<h2>Statues 404</h2>
<h2>Status 404</h2>
<p>Estamos realizando manutenções, volte mais tarde</p>`
throw new Error(`Erro na API dos Serviços: ${ResutadosChamados} `);
throw new Error(`Erro na API dos Chamados: ${ResutadosChamados} `);
}
}
let htmlContent = '';
@ -178,7 +192,11 @@ function IniciandoTelaHome() {
case 2: EstadosChamado = 'Aberto_Em_Análise'; break;
case 3: EstadosChamado = 'Aguardando_Retorno'; break;
case 4: EstadosChamado = 'Solucionado_Fechado'; break;
case 5: EstadosChamado = 'Atencao'; break;
case 6: EstadosChamado = 'Em_Andamento'; break;
case 7: EstadosChamado = 'Atencao'; break;
case 8: EstadosChamado = 'Atencao'; break;
}
htmlContent += `
@ -226,7 +244,10 @@ function IniciandoTelaHome() {
case 2: StadoChamado = 'Aberto Em Análise'; break;
case 3: StadoChamado = 'Aguardando Retorno'; break;
case 4: StadoChamado = 'Solucionado Fechado'; break;
case 5: StadoChamado = 'Atenção'; break;
case 6: StadoChamado = 'Em Andamento'; break;
case 7: StadoChamado = 'Atenção'; break;
case 8: StadoChamado = 'Atenção'; break;
}
let StadoChamadoClass = 0;
@ -235,7 +256,10 @@ function IniciandoTelaHome() {
case 2: StadoChamadoClass = 'Aberto_Em_Analise'; break;
case 3: StadoChamadoClass = 'Aguardando_Retorno'; break;
case 4: StadoChamadoClass = 'Solucionado_Fechado'; break;
case 5: StadoChamadoClass = 'Atencao'; break;
case 6: StadoChamadoClass = 'Em_Andamento'; break;
case 7: StadoChamadoClass = 'Atencao'; break;
case 8: StadoChamadoClass = 'Atencao'; break;
}
@ -540,13 +564,14 @@ function IniciandoTelaHome() {
let nomeMes = nomesMeses[mes];
// 🔴 O botão SÓ fica ativo se estivermos DENTRO do mês respectivo E entre os dias 1 e 12
let botaoAtivo = ano === anoAtual && mes === mesAtual && diaAtual >= 1 && diaAtual <= 13;
let botaoAtivo = ano === anoAtual && mes === mesAtual && diaAtual >= 1 && diaAtual <= 20;
console.log(botaoAtivo);
if (botaoAtivo == false) {
meses.push(`
<div class="Mes_financeiro Desativado">
<div class="MesBoleto Ativado">
<div class="MesBoleto Desativado">
<p>${nomeMes} - ${ano}</p>
</div>
<div class="StatusFinanceiro">
@ -563,6 +588,7 @@ function IniciandoTelaHome() {
}
if (botaoAtivo == true) {
meses.push(`
<div class="Mes_financeiro Ativado">
@ -585,37 +611,33 @@ function IniciandoTelaHome() {
}
BolotosAvencer.innerHTML = meses.join('');
const ButtoaoGerarBoleto = document.getElementById('Gerar');
if (ButtoaoGerarBoleto) {
ButtoaoGerarBoleto.addEventListener('click', gerarBoleto);
}
async function GerarPDF() {
const { PDF } = await IntegracaoPDF();
const dataPDf = await PDF.json();
//console.log(dataPDf);
}
async function gerarBoleto() {
const { Boleto } = await IntegracaoBoleto();
const { Boleto_Conect, Response_Conect } = await IntegracaoBoleto_Conect();
//const { Boleto_Aline } = await IntegracaoBoleto_Alinhamento();
//const { Boleto_PDF } = await IntegracaoBoleto_GerarPDF();
const dataBole = await Boleto.json();
const dataBole_Conect = await Boleto_Conect.json();
//const dataBole_Aline = await Boleto_Aline.json();
//const dataBole_PDF = await Boleto_PDF.json();
//console.log(dataBole);
const Alinhamento_Pdf = await Response_Conect.blob();
console.log("Resposta da conexão", dataBole_Conect, Alinhamento_Pdf);
// console.log("Resposta do Alinhamento", dataBole_Aline);
// console.log("Resposta da Geração de PDF", dataBole_PDF);
const pdfUrl = URL.createObjectURL(Alinhamento_Pdf);
window.open(pdfUrl, '_blank');
}
}
clearInterval(checkElements_home); // Para o setInterval
@ -626,7 +648,7 @@ function IniciandoTelaHome() {
//console.log(respostaLoad)
function respotadeCarregamento() {
return localStorage.setItem('Carregou_tela', 'true')
return localStorage.setItem('Carregou_tela_Home', 'true')
}
}

258
js/page/Modulo_Construcao/Funcao/Monitoramento/Func_Moni.js
View File

@ -1,58 +1,272 @@
MonitoramentoIniciar();
function MonitoramentoIniciar() {
const interval_Moni = 500; // Tempo em milissegundos (1 segundo)
const interval_Moni = 500; // Tempo em milissegundos (1 segundo)
try {
try {
const checkElements_Moni = setInterval(() => {
try {
const moniConstruida = document.getElementById('Monitoramento');
if (moniConstruida) {
let Preinfo = "<div class='Alerta'><h2>Carregando ...</h2></div>";
const HostsPainel = document.getElementById('ItensHosts');
HostsPainel.innerHTML = Preinfo;
const monitoramento = document.getElementById('Monitoramento')
monitoramento.addEventListener('click', monitoramentoIniciar)
monitoramentoIniciar();
async function monitoramentoIniciar() {
const { Zabix, ResutadosZabix } = await IntegracaoZabix();
const dataZabix = await Zabix.json();
RespostasZabixMonitoramento(ResutadosZabix, HostsPainel);
const dataZabix = await Zabix.json();
const ElementosZabix = dataZabix.data[0].hosts;
ApresentarHosts(ElementosZabix);
console.log(ElementosZabix)
}
function RespostasZabixMonitoramento(ResutadosZabix, Elementohost) {
if (ResutadosZabix === 500) {
alert(`Erro na API do Zabix: ${Zabix.status} - ${Zabix.statusText}`)
throw new Error(`Erro na API do Zabix: ${Zabix.status} - ${Zabix.statusText}`);
Elementohost.innerHTML = `
<div class='Alerta'>
<h2>Status 404</h2>
<p>Sem serviços no momento</p>
</div>`;
throw new Error(`Erro na API dos Chamados: ${ResutadosZabix}`);
}
if (ResutadosZabix === 404) {
alert(`Erro na API do Zabix: ${Zabix.status} - ${Zabix.statusText}`)
throw new Error(`Erro na API do Zabix: ${Zabix.status} - ${Zabix.statusText}`);
Elementohost.innerHTML = `
<div class='Alerta'>
<h2>Status 404</h2>
<p>Nenhum serviço encontrado</p>
</div>`;
throw new Error(`Erro na API dos Chamados: ${ResutadosZabix}`);
}
if (ResutadosZabix === 401) {
Elementohost.innerHTML = `
<div class='Alerta'>
<h2>Status 404</h2>
<p>Usuário não autenticado!</p>
</div>`;
throw new Error(`Erro na API dos Chamados: ${ResutadosZabix}`);
}
if (ResutadosZabix === 502) {
Elementohost.innerHTML = `
<div class='Alerta'>
<h2>Status 404</h2>
<p>Estamos realizando manutenções, volte mais tarde</p>
</div>`;
throw new Error(`Erro na API dos Chamados: ${ResutadosZabix} `);
}
if (ResutadosZabix === 504) {
Elementohost.innerHTML = `
<div class='Alerta'>
<h2>Status 404</h2>
<p>Estamos realizando manutenções, volte mais tarde</p>
</div>`;
throw new Error(`Erro na API dos Chamados: ${ResutadosZabix} `);
}
}
function ApresentarHosts(hosts) {
const filteredHosts = hosts.filter(host =>
host.metrics.some(metric => metric.key === "system.hostname")
);
const seletorEnseg = document.getElementById('Hostes');
const hostsPainel = document.getElementById('ItensHosts');
if (!seletorEnseg) return;
// Evita múltiplos eventos sendo adicionados ao select
seletorEnseg.innerHTML = `<option value="">Disponiveis</option>`;
filteredHosts.forEach(host => {
let hostName = host.metrics.find(metric => metric.key === "system.hostname")?.value || "Desconhecido";
seletorEnseg.innerHTML += `<option value="${hostName}">${hostName}</option>`;
});
Preinfo = "<div class='Alerta'><h2>Selecione um Host</h2></div>";
HostsPainel.innerHTML = Preinfo;
// Removendo eventos anteriores antes de adicionar um novo
seletorEnseg.replaceWith(seletorEnseg.cloneNode(true));
document.getElementById('Hostes').addEventListener('change', function () {
const selectedHostName = this.value;
hostsPainel.innerHTML = ""; // Limpa o painel
const selectedHost = filteredHosts.find(host =>
host.metrics.some(metric => metric.key === "system.hostname" && metric.value === selectedHostName)
);
if (!selectedHost) return;
let hostContentPainelFixo = "";
let hostContentPainelMovel = "";
selectedHost.metrics.forEach(metric => {
if (metric.key === "icmpping") {
const valor = metric.value;
if (valor == 0) {
hostContentPainelFixo += `<div class="Desativado"> Host Desativado</div>`; // Aplicação do Desativado dentro do item host
}
// Reação de aplicação de inserção para o caso do ping for 1
if (valor == 1) {
hostContentPainelFixo += `<div class="Ativado"> Host Ativado </div>`; // Aplicação do ativo dentro do item host
}
}
clearInterval(checkElements_Moni); // Para o setInterval
if (metric.key === "vm.memory.size[total]") {
const valorMemoria = metric.value;
const totalGB = (valorMemoria / Math.pow(1024, 3)).toFixed(2);
hostContentPainelFixo += `<div class="Total_Memorias">Total de Ram ${totalGB} GB</div>`
}
let hostContentArmazen = ""
// Suponha que metric.key pode ter diferentes letras de unidade
if (metric.key.startsWith("vfs.fs.dependent.size[")) {
// Expressão regular para capturar a letra da unidade
const match = metric.key.match(/vfs\.fs\.dependent\.size\[([A-Z]):,total\]/);
if (match) {
const driveLetter = match[1]; // Captura a letra do drive
const valorDisco = metric.value;
const totalGB = (valorDisco / Math.pow(1024, 3)).toFixed(2);
hostContentArmazen += `<div class="Total_Memorias_disco">Disco de Total - ${driveLetter}: ${totalGB} GB</div>`;
}
}
// Suponha que metric.key pode ter diferentes letras de unidade
if (metric.key.startsWith("vfs.fs.dependent.size[")) {
// Expressão regular para capturar a letra da unidade
const match = metric.key.match(/vfs\.fs\.dependent\.size\[([A-Z]):,used\]/);
if (match) {
const driveLetter = match[1]; // Captura a letra do drive
const valorDisco = metric.value;
const usedGB = (valorDisco / Math.pow(1024, 3)).toFixed(2);
hostContentArmazen += `<div class="Total_Uso_Memorias_disco">Disco em uso - ${driveLetter}: ${usedGB} GB</div>`;
}
}
hostContentPainelFixo += hostContentArmazen;
if (metric.key === "system.cpu.util") {
let Alinhadocpu = Math.floor(metric.value);
hostContentPainelMovel += `<div class="CPU"><p id="ElementosUtili_CPU_${Alinhadocpu}">CPU ${Alinhadocpu}%</p></div>`;
setTimeout(() => {
const Elementoshost_CPU = document.getElementById(`ElementosUtili_CPU_${Alinhadocpu}`);
if (Alinhadocpu == 100) {
Elementoshost_CPU.classList.add('Consumo_Limite');
}
//Maior ou igual á 75 ou Menor ou igual á 99
if (Alinhadocpu >= 75 && Alinhadocpu <= 99) {
Elementoshost_CPU.classList.add('Consumo_Alto');
}
//Maior ou igual á 30 ou Menor ou igual á 74
if (Alinhadocpu >= 30 && Alinhadocpu <= 74) {
Elementoshost_CPU.classList.add('Consumo_Medio');
}
if (Alinhadocpu >= 0 && Alinhadocpu <= 29) {
Elementoshost_CPU.classList.add('Consumo_Baixo');
}
}, 1);
}
if (metric.key === "vm.memory.util") {
let AlinhadoMemory = Math.floor(metric.value);
hostContentPainelMovel += `<div class="Ram"><p id="ElementosUtili_Memory_${AlinhadoMemory}">Ram ${AlinhadoMemory}%</p></div>`;
setTimeout(() => {
const Elementoshost_Memory = document.getElementById(`ElementosUtili_Memory_${AlinhadoMemory}`);
if (AlinhadoMemory == 100) {
Elementoshost_Memory.classList.add('Consumo_Limite');
}
//Maior ou igual á 75 ou Menor ou igual á 99
if (AlinhadoMemory >= 75 && AlinhadoMemory <= 99) {
Elementoshost_Memory.classList.add('Consumo_Alto');
}
//Maior ou igual á 30 ou Menor ou igual á 74
if (AlinhadoMemory >= 30 && AlinhadoMemory <= 74) {
Elementoshost_Memory.classList.add('Consumo_Medio');
}
if (AlinhadoMemory >= 0 && AlinhadoMemory <= 29) {
Elementoshost_Memory.classList.add('Consumo_Baixo');
}
}, 1);
}
});
hostsPainel.innerHTML = `
<div class="HostCapa">${hostContentPainelMovel}</div>
<div class="HostCorpo">${hostContentPainelFixo}</div>
`;
});
}
localStorage.setItem('Carregou_tela_Moni', 'true');
clearInterval(checkElements_Moni);
}
} catch (error) {
console.error('Houve algo inesperado dentro da tela home' + error)
clearInterval(checkElements_Moni); // Para o setInterval
console.error('Erro dentro da tela home:', error);
clearInterval(checkElements_Moni);
}
}, interval_Moni);
} catch (error) {
console.error('Erro fora da tela home:', error);
}
}, interval_Moni);
} catch (error) {
console.error('Houve algo inesperado fora da tela home' + error)
}

106
js/page/Modulo_Construcao/Painel/Config/Ambiente/PopAmbientes_html.js
View File

@ -1 +1,107 @@
// dedicado para atender as estrutura html desse pop up do ambiente do usuário
//
function Estrututura_html_Ambiente_home() {
return `
<div class="PainelFechar">
<button id="EncerrarPopup">X</button>
<button id="NovoUsuarioPopup">+</button>
</div>
<div class="PainelConteudo" id="EstruturaUser">
<div class="TituloPopup">
<img src="./Acessts/Imagens/Iconis/group.png" alt="">
<h2>Usuários</h2>
</div>
<div class="Forme" id='ApresentarUser'>
</div>
</div>
`;
}
function Estrututura_html_Ambiente_Criacao() {
return `
<div class="PainelFechar">
<button id="VoltarPopup">< voltar</button>
<button id="EncerrarPopup">X</button>
</div>
<div class="PainelConteudo">
<div class="TituloPopup">
<img src="./Acessts/Imagens/Iconis/group.png" alt="">
<h2>Usuários</h2>
</div>
<div class="Forme" id='formularioPerfil'>
<div class='CampoInsercao'>
<h2>Ficha do Usuário</h2>
<input type="text" placeholder="Nome Completo" id="NomeUser">
<input type="text" placeholder="Usuário do Ad" id="UserAdUser">
</div>
<div class='CampoInsercao'>
<h2>Alinhamento de Empresa</h2>
<select name="" id="SeletorEmpresa">
<option value="0">Vazio</option>
</select>
<p id="DominioEmpresa">Dominio</p>
</div>
<div class='CampoInsercao_criar'>
<button id="CriarUsuario">Criar</button>
</div>
</div>
</div>
`;
}
function Estrututura_html_User_edicao() {
return `
<div class="PainelFechar">
<button id="VoltarPopup">< voltar</button>
<button id="EncerrarPopup">X</button>
</div>
<div class="PainelConteudo">
<div class="TituloPopup">
<h2>Usuários</h2>
<img src="./Acessts/Imagens/Iconis/group.png" alt="">
</div>
<div class="Forme" id='formularioPerfil'>
<div class='CampoInsercao'>
<h2>Ficha do Usuário</h2>
<input type="text" placeholder="Nome Completo" id="NomeUser">
<input type="text" placeholder="Usuário do Ad" id="UserAdUser">
</div>
<div class='CampoInsercao'>
<h2>Alinhamento de Empresa</h2>
<select name="" id="SeletorEmpresa">
<option value="0">Vazio</option>
</select>
<p id="DominioEmpresa">Dominio</p>
</div>
<div class='CampoInsercao'>
<button id="AtualizarrUsuario">Atualizar<button>
</div>
<div class='CampoInsercao'>
<button id="ExcluirUsuario">Excluir<button>
</div>
</div>
</div>
`;
}

4
js/page/Modulo_Construcao/Painel/Config/Estrutura/Estrutura_Config_Html.js
View File

@ -20,12 +20,12 @@ function estruturaHtml_Config() {
<!--<div class="element_1" id="Ambiente_config">
<img src="./Acessts/Imagens/Iconis/ferramentas copiar.png" alt="" >
<p>Ambiente</p>
</div>-->
</div>
<div class="element_1" id="Manual_config">
<img src="./Acessts/Imagens/Iconis/abra-o-livro copiar.png" alt="">
<p>Manual do Usuário</p>
</div>
</div>-->
</section>
<div class="Pop_up_Config" id="Pop_up_Config"></div>
`;

1
js/page/Modulo_Construcao/Painel/Config/User/PopUser_html.js
View File

@ -1,3 +1,4 @@
//
function Estrututura_html_User_home() {
return `
<div class="PainelFechar">

25
js/page/Modulo_Construcao/Painel/Estrutura/Html_estrutura.js
View File

@ -1,3 +1,5 @@
// Inserção do esqueleto principal do projeto.
function InterfaceAmbiente(nomeCompleto, Empresa) {
return `
<nav>
@ -43,6 +45,15 @@ function InterfaceAmbiente(nomeCompleto, Empresa) {
</div>
<div class="filheira">
<img class="img" src="./Acessts/Imagens/Iconis/o-email.png" alt="">
</div>
<div id="sub_entrada_Zammad_1"></div>
</div>
<div class="subcolunas_2">
@ -55,7 +66,7 @@ function InterfaceAmbiente(nomeCompleto, Empresa) {
<div id="Configuracao_1" class="filheira">
<img class="img" src="./Acessts/Imagens/Iconis/engrenagem - Copia.png" alt="">
<img class="img" src="./Acessts/Imagens/Iconis/engrenagem - Line.png" alt="">
</div>
@ -65,6 +76,7 @@ function InterfaceAmbiente(nomeCompleto, Empresa) {
</div>
</div>
</div>
@ -129,6 +141,17 @@ function InterfaceAmbiente(nomeCompleto, Empresa) {
</a>
<a href="https://webmail.itguys.com.br/owa" class="filheira_a" target="black_">
<div class="filheira">
<h2>Webmail</h2>
</div>
</a>
<div id="sub_entrada_Zammad_2"></div>
<!-- <div class="filheira">
<h2>Ferramentas</h2>

78
js/page/Modulo_Construcao/Painel/Estrutura/load.js
View File

@ -3,6 +3,17 @@
async function verificarAmbiente() {
const tela_laod = document.getElementById('entrada_2');
let elemento_1 = "Carregando..."
let elemento_2;
elemento_2 = '<canvas id="animationCanvas"></canvas>';
tela_laod.innerHTML = '<div class="teste"><h1>' + elemento_1 + '</h1>' + elemento_2 + '</div>';
// Inicia a animação após configurar o canvas
iniciarAnimacao();
try {
@ -12,27 +23,26 @@ async function verificarAmbiente() {
// Verifica se data.usuario.nome existe
const nameuser = data?.usuario?.nome;
const main = document.getElementById("entrada_1");
const tela_laod = document.getElementById('entrada_2');
let elemento_1;
let elemento_2;
const main = document.getElementById("entrada_1");
if (main.innerHTML.trim() === "") {
// Verificação para saber se o nome existe
if (nameuser) {
elemento_1 = 'Seja bem-vindo, ' + nameuser; // Se o nome estiver disponível
} else {
elemento_1 = 'Carregando....'; // Caso o nome seja nulo ou indefinido
elemento_1 = 'Algo Inesperado Aconteceu !!'; // Caso o nome seja nulo ou indefinido
}
}
elemento_2 = '<canvas id="animationCanvas"></canvas>';
tela_laod.innerHTML = '<div class="teste"><h1>' + elemento_1 + '</h1>' + elemento_2 + '</div>';
// Inicia a animação após configurar o canvas
iniciarAnimacao();
// Inicia a contagem para limpar a tela após 3 segundos
finalizar();
} catch (error) {
@ -45,7 +55,7 @@ async function verificarAmbiente() {
if (main.innerHTML.trim() === "") {
elemento_1 = 'Carregando....'; // Caso o nome seja nulo ou indefinido
elemento_1 = 'Algo Inesperado Aconteceu !!'; // Caso o nome seja nulo ou indefinido
}
@ -59,6 +69,7 @@ async function verificarAmbiente() {
finalizar();
console.error('Erro ao verificar o ambiente:', error);
} finally {
}
}
@ -73,7 +84,7 @@ function finalizar() {
localStorage.removeItem('Carregou'); // Remove o item do localStorage
clearInterval(interval); // Para de verificar
}
}, 3500); // Verifica a cada 500ms
}, 4500); // Verifica a cada 500ms
}
// Função responsavel por inicar animação de load da tela de carreagamento.
@ -167,3 +178,54 @@ function iniciarAnimacao() {
// Executa verificarAmbiente apenas uma vez após o carregamento total da página
window.addEventListener('DOMContentLoaded', verificarAmbiente);
function CarregamentoLoad() {
const antigatelaconfi_new = document.getElementById('entrada_2')
InciandoCarregamento_Config(antigatelaconfi_new)
function InciandoCarregamento_Config(antigatelaconfi) {
antigatelaconfi.innerHTML = estruraAnimiadaConfig();
function estruraAnimiadaConfig() {
return `
<div id="Painel_loading" class="Painel_loadingConfig">
<div class="loading">
<span></span>
<span></span>
<span></span>
</div>
</div>
`;
}
FinalizandoCarregamento_Config();
}
function FinalizandoCarregamento_Config() {
//Aplica intevalo de verificações para capitar se foi incluido carregou dentro de localstorage, uma vez encotrado um if busca a resposta para validar se ele é true, ele executa o if.
const intervalConfig_new = setInterval(() => {
const Subtela_laodConfig_new = document.getElementById('entrada_2');
const SubPaine_loadConfig_new = document.getElementById('Painel_loading')
const SubcarregouConfig_new = localStorage.getItem('Carregou_Novamente');
if (SubcarregouConfig_new === 'true') {
SubPaine_loadConfig_new.style.opacity = "0";
setTimeout(() => {
Subtela_laodConfig_new.innerHTML = ''; // Limpa o conteúdo do elemento do load
localStorage.removeItem('Carregou_Novamente'); // Remove o item do localStorage
clearInterval(intervalConfig_new); // Para de verificar
}, 500);
}
}, 1500); // Verifica a cada 500ms
}
}

13
js/page/Modulo_Construcao/Painel/Monitoramento/Html_Moni.js
View File

@ -1,8 +1,17 @@
function estruturaHtml_Moni() {
return `
<h1>ola Monitoramento</h1>
<button id="Monitoramento">AQUIIIIIII VITORIAAAAAAAAAAAAAAAA</button>
<div class="PainelTitulo_Moni">
<h1>Hosts -</h1>
<select name="" id="Hostes">
<option value="">Analisando...</option>
</select>
</div>
<div class="PainelConteudo_Moni">
<div id="Monitoramento" class="PainelHostsAlinhamento">
<div class="PainelHostsItens" id="ItensHosts"></div>
</div>
</div>
`;
}