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

Atualização 13 | Tornando a estrutura de configuração para ambientes dinâmica, além da construção de um POPs dedicado para todos os formulários e outro dedicado para todas as respostas do front-end ou back-end.

This commit is contained in:
daivid.alves 2024-11-22 17:39:44 -03:00
parent 15dadbe0f0
commit d3198cacd4
20 changed files with 799 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Css/page/Ambiente/Config/Ambientes/AmbientesConfig.css
View File

@ -9,5 +9,8 @@
@import url(../Ambientes/estrutura/Sec_Cap_2.css);
@import url(../Ambientes/estrutura/Sec_Cap_3.css);
@import url(../Ambientes/Painel/PopUp.css);
@import url(../Ambientes/Painel/Respostapopup.css);
@import url(../Ambientes/Painel/Painelpopup.css);
@import url(../Ambientes/Painel/EdicaoAmbientespop.css);
@import url(../Ambientes/Painel/tags.css);

32
Css/page/Ambiente/Config/Ambientes/Componentes/Ambientes.css
View File

@ -4,6 +4,7 @@
flex-direction: column;
align-items: center;
justify-content: start;
gap: 2vh;
}
@ -20,8 +21,8 @@
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .img {
width: 4vw;
height: 8vh;
width: 3.5vw;
height: 7vh;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_2_2);
display: flex;
@ -34,14 +35,14 @@
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .img img {
width: 3vw;
width: 2.5vw;
}
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .corpo {
width: 80%;
height: 8vh;
width: 70%;
height: 7vh;
display: flex;
flex-direction: row;
@ -53,6 +54,12 @@
}
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .titulo h2 {
font-family: var(--font_titulo);
font-size: 0.8vw;
color: var(--Matriz);
}
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .corpo .alinhamentos {
width: 50%;
@ -72,9 +79,7 @@
background-color: var(--Cor_Segundaria_5_1);
box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_5_2);
width: 40%;
height: 5vh;
padding: 5%;
display: flex;
flex-direction: row;
justify-content: space-around;
@ -82,19 +87,12 @@
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 1vw;
font-size: 0.7vw;
}
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .titulo h2 {
font-family: var(--font_titulo);
font-size: 1.4vw;
color: var(--Matriz);
}
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .edicao button {
background: none;
@ -105,7 +103,7 @@
box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_2_2);
width: 3vw;
height: 8vh;
height: 7vh;
display: flex;
flex-direction: row;

81
Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesAlertas.css
View File

@ -0,0 +1,81 @@
.subpainel_Status {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1vw;
}
.subpainel_Status .bloco_1 {
width: 25%;
height: 6vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
}
.subpainel_Status .bloco_2 {
width: 70%;
height: 6vh;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1vw;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
}
.subpainel_Status .bloco_1 .titulo {
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 0.5vw;
}
.subpainel_Status .bloco_2 .Mensagem_ambiente {
font-family: var(--font_titulo);
margin-left: 1vw;
color: var(--Matriz);
font-size: 1vw;
}
.subpainel_Status .bloco_2 .button_rel button {
background: none;
outline: none;
border: none;
}
.subpainel_Status .bloco_2 .button_rel img {
width: 1.6vw;
filter: drop-shadow(3px 3px 0px var(--Cor_Segundaria_2_2));
}
.subpainel_Status .bloco_2 .status_ambiente {
font-family: var(--font_titulo);
color: var(--Cor_Segundaria_5_1);
font-size: 0.7vw;
margin-right: 1vw;
background-color: var(--Matriz);
padding: 0.2vw;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2vw;
width: 4vw;
height: 3vh;
}

14
Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesRelatorios.css
View File

@ -0,0 +1,14 @@
.bloco_ambiente .coluna_2 .opicaoAmbie button {
outline: none;
background: none;
border: none;
width: 20vw;
height: 6vh;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 1.2vw;
}

234
Css/page/Ambiente/Config/Ambientes/Painel/EdicaoAmbientespop.css Normal file
View File

@ -0,0 +1,234 @@
.PopPainel.EdicaoAmbientes .fecharPainel {
width: 100%;
height: 12vh;
display: flex;
justify-content: start;
align-items: center;
}
.PopPainel.EdicaoAmbientes .fecharPainel button {
background: none;
border: none;
outline: none;
width: 8vw;
height: 5vh;
background-color: #c6c6c6;
box-shadow: 5px 5px 0px #9a9a9a;
font-size: 1vw;
color: var(--Matriz);
transition: 1s ease;
}
.PopPainel.EdicaoAmbientes .fecharPainel button:hover {
background-color: var(--Cor_Segundaria_5_1);
box-shadow: -5px 5px 0px var(--Cor_Segundaria_5_2);
}
.PopPainel.EdicaoAmbientes .CorpoPainel {
width: 100%;
height: 70vh;
padding-top: 2vh;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
gap: 2vh;
}
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs {
width: 100%;
padding-top: 2vh;
margin-top: 0.8vh solid var(--Matriz);
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
margin-bottom: 2vh;
}
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 .TitutloPopup {
width: 40%;
height: 8vh;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 1vw;
}
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 .PesquisaPopup {
width: 70%;
height: 8vh;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 .PesquisaPopup input {
background: none;
outline: none;
border: none;
width: 15vw;
height: 4vh;
background-color: var(--Matriz);
border: 0.4vw solid var(--Cor_Segundaria_5_1);
box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_5_2);
padding-left: 1vw;
padding-right: 1vw;
font-size: 0.8vw;
font-family: var(--font_titulo);
color: var(--Cor_Segundaria_5_1);
}
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 .PesquisaPopup button {
background: none;
outline: none;
border: none;
width: 4vw;
height: 6vh;
background-color: var(--Cor_Segundaria_5_1);
box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_5_2);
}
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_1 .PesquisaPopup img {
width: 2vw;
}
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2 {
width: 100%;
height: 30vh;
margin-top: 2vh;
padding-top: 2vh;
overflow-y: auto;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
align-content: center;
background-color: var(--Matriz);
gap: 1vw;
}
/* Estilo customizado para o scroll (somente no Webkit) */
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2::-webkit-scrollbar,
.PopPainel.EdicaoAmbientes .CorpoPainel::-webkit-scrollbar {
width: 0.2vw;
/* Largura da barra de rolagem */
height: 0.2vw;
/* Para scroll horizontal, se necessário */
}
/* Estilo para o polegar da barra de rolagem */
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2::-webkit-scrollbar-thumb,
.PopPainel.EdicaoAmbientes .CorpoPainel::-webkit-scrollbar-thumb {
background-color: var(--Cor_Segundaria_5_1);
/* Cor da parte da barra que você arrasta */
border-radius: 10px;
/* Borda arredondada */
/* Borda ao redor do polegar */
}
/* Aumentando o tamanho do track (fundo da barra de rolagem) */
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2::-webkit-scrollbar-track,
.PopPainel.EdicaoAmbientes .CorpoPainel::-webkit-scrollbar-track {
background-color: var(--Cor_Segundaria_5_2);
/* Cor do fundo do scroll */
border-radius: 10px;
/* Borda arredondada */
/* Usar diretamente a largura ou altura aqui para aumentar o track */
width: 1vw;
/* Aumentando a largura do track para o scroll vertical */
height: 1vw;
/* Aumentando a altura do track para o scroll horizontal */
}
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2 .DashbordItem {
width: 18vw;
height: 8vh;
display: flex;
align-items: center;
justify-content: space-around;
align-content: center;
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 0.6vw;
background-color: var(--Cor_Segundaria_5_1);
box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_5_2);
}
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2 .DashbordItem button {
background: none;
border: none;
outline: none;
width: 6vw;
height: 3vh;
background-color: #c6c6c6;
box-shadow: 5px 5px 0px #9a9a9a;
font-size: 1vw;
color: var(--Matriz);
transition: 1s ease;
}
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2 .DashbordItem button:hover {
background-color: var(--Cor_Segundaria_2_1);
box-shadow: -5px 5px 0px var(--Cor_Segundaria_2_2);
}

18
Css/page/Ambiente/Config/Ambientes/Painel/Painelpopup.css Normal file
View File

@ -0,0 +1,18 @@
.PopPainel {
background-color: var(--Cor_Segundaria_3_1);
box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_3_2);
width: 40vw;
height: 60vh;
padding: 2vw;
position: absolute;
top: 10vh;
left: 40vw;
display: none;
flex-direction: column;
align-items: center;
justify-content: start;
}

0
Css/page/Ambiente/Config/Ambientes/Painel/PopUp.css → Css/page/Ambiente/Config/Ambientes/Painel/Respostapopup.css
View File

28
Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_1.css
View File

@ -1,5 +1,5 @@
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap {
width: 90%;
width: 80%;
height: 74vh;
padding: 2vw;
@ -22,16 +22,17 @@
}
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .insercao_ambiente button {
width: 14vw;
width: 7vw;
height: 6vh;
}
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa {
width: 60%;
width: 70%;
height: 8vh;
display: flex;
justify-content: space-between;
align-items: center;
}
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa input {
@ -39,7 +40,7 @@
outline: none;
border: none;
width: 15vw;
width: 13vw;
height: 4vh;
background-color: var(--Matriz);
@ -54,3 +55,22 @@
color: var(--Cor_Segundaria_2_1);
}
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa button {
background: none;
outline: none;
border: none;
width: 4vw;
height: 6vh;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_2_2);
}
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa img {
width: 2vw;
filter: drop-shadow(2px 2px 0px var(--Cor_Segundaria_2_2));
}

84
Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_2.css
View File

@ -44,87 +44,3 @@
height: 1vw;
/* Aumentando a altura do track para o scroll horizontal */
}
.subpainel_Status {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 1vw;
}
.subpainel_Status .bloco_1 {
width: 25%;
height: 6vh;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
}
.subpainel_Status .bloco_2 {
width: 70%;
height: 6vh;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1vw;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
}
.subpainel_Status .bloco_1 .titulo {
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 0.6vw;
}
.subpainel_Status .bloco_2 .Mensagem_ambiente {
font-family: var(--font_titulo);
margin-left: 1vw;
color: var(--Matriz);
font-size: 1vw;
}
.subpainel_Status .bloco_2 .button_rel button {
background: none;
outline: none;
border: none;
}
.subpainel_Status .bloco_2 .button_rel img {
width: 1.6vw;
filter: drop-shadow(3px 3px 0px var(--Cor_Segundaria_2_2));
}
.subpainel_Status .bloco_2 .status_ambiente {
font-family: var(--font_titulo);
color: var(--Cor_Segundaria_5_1);
font-size: 0.7vw;
margin-right: 1vw;
background-color: var(--Matriz);
padding: 0.2vw;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2vw;
width: 4vw;
height: 3vh;
}

15
Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_3.css
View File

@ -75,18 +75,3 @@
flex-direction: column;
align-items: center;
}
.opicao button {
outline: none;
background: none;
border: none;
width: 20vw;
height: 6vh;
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
font-family: var(--font_titulo);
color: var(--Matriz);
font-size: 1.2vw;
}

2
Css/page/Ambiente/Config/Estrutura/estrutura_config.css
View File

@ -1,3 +1,5 @@
@import url(../../../../global/import.css);
@import url(./menu.css);
@import url(./tela.css);
@import url(./menu_houver.css);

4
Css/page/Ambiente/Config/Estrutura/menu.css
View File

@ -62,7 +62,7 @@ body {
/* Estilo para o polegar da barra de rolagem */
.menu::-webkit-scrollbar-thumb {
background-color: var(--Matriz);
background-color: var(--Cor_Segundaria_3_1);
/* Cor da parte da barra que você arrasta */
border-radius: 10px;
/* Borda arredondada */
@ -71,7 +71,7 @@ body {
/* Aumentando o tamanho do track (fundo da barra de rolagem) */
.menu::-webkit-scrollbar-track {
background-color: var(--Cor_Segundaria_5_2);
background-color: var(--Cor_Segundaria_3_2);
/* Cor do fundo do scroll */
border-radius: 10px;
/* Borda arredondada */

2
Css/page/Ambiente/Config/Estrutura/menu_houver.css
View File

@ -48,7 +48,7 @@
}
to {
width: 20vw;
width: 25vw;
}
}

3
Css/page/Ambiente/Config/Estrutura/tela.css Normal file
View File

@ -0,0 +1,3 @@
.telaConfig {
width: 75vw;
}

6
html/Config.html
View File

@ -12,7 +12,7 @@
<nav class="menu">
<a class="voltar" href="../Ambiente_Usuario_copy.html">
<a class="voltar" href="../Ambiente_Usuario.html">
<img class="retrato_A" src="../Acessts/Imagens/Iconis/seta-esquerda.png" alt="">
<p class="escrita_A">Retorne ao seu ambiente</p>
</a>
@ -35,7 +35,7 @@
<h2>Ambiente</h2>
</div>
<ul>
<li class="opicao"><button id="opicao_2">
<li class="opicao"><button id="StatusAmbiente">
<img class="retrato" src="../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
<p class="escrita">Status de ambientes</p>
</button></li>
@ -68,7 +68,7 @@
</nav>
<div id="preenchimento"></div>
<div class="telaConfig" id="preenchimento"></div>

249
js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes.js Normal file
View File

@ -0,0 +1,249 @@
const dataAmbientes = {
itguys: {
nome: 'ItGuys',
},
enseg: {
nome: 'Enseg',
},
OestPan: {
nome: 'OestPan',
},
Prolog: {
nome: 'Prolog',
}
}
function AlinhamentoAmbientes() {
const ListaAmbientes = document.getElementById('apresentarAmbientes');
ListaAmbientes.innerHTML = ComponenteAmbientes();
setTimeout(() => {
for (let ambiente in dataAmbientes) {
const nome = dataAmbientes[ambiente].nome;
FormeEditarAmbiente(nome); // Agora chamamos a função para associar o evento de clique
}
}, 0);
FormeCriarAmbiente();
}
function ComponenteAmbientes() {
// Inicializa uma variável para armazenar o conteúdo HTML gerado
let htmlContent = '';
// Itera sobre as chaves de dataAmbientes (itguys, enseg, etc.)
for (let ambiente in dataAmbientes) {
const nome = dataAmbientes[ambiente].nome;
// Adiciona um painel para cada ambiente
htmlContent += `
<div class="painelItem" id="Painel_${nome}">
<div class="img">
<img src="../Acessts/Imagens/iT_Guys/Logo 32x32.png" alt="Logo da Itguys">
</div>
<div class="corpo">
<div class="titulo">
<h2>${nome}</h2>
</div>
<div class="alinhamentos">
<button id="AtreladorDashbord">Dashbords</button>
<button id="AtreladorGrupos">Grupos</button>
</div>
</div>
<div class="edicao">
<button id="EdicacaoAmbiente_Itguys">:</button>
</div>
</div>
`
}
// Retorna o HTML completo
return htmlContent;
// Chama a função para adicionar o evento de clique após o HTML ser inserido
}
function FormeCriarAmbiente() {
const InsercaoAmbiente = document.getElementById('criarAmbiente')
InsercaoAmbiente.addEventListener('click', CriarAmbiente);
function CriarAmbiente() {
const PainelCriacao = document.getElementById('PopPainel');
PainelCriacao.style.display = 'flex'
PainelCriacao.classList.add('CriacaoAmbientes');
PainelCriacao.innerHTML = PainelAmbiente();
function PainelAmbiente() {
return `
<div class='fecharPainel' id='FecharPainel'>
<button>X</button>
</div>
<div id='formulario'>
<div class='Bloco_1' >
<div class='TituloCampo'>
<h2>Informações do Ambiente</h2>
</div>
<div class='Campo'>
<label>Dominio</label>
<input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
</div>
<div class='Campo'>
<label>Nome</label>
<input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
</div>
<div class='Campolong'>
<label>Descrição</label>
<textarea name="" id=""></textarea>
</div>
</div>
<div class='Bloco_2' >
<div class='TituloCampo'>
<h2>Informações do Cliente</h2>
</div>
<div class='Campo'>
<label>Nome</label>
<input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
</div>
<div class='CampoInsercao'>
<label>Nome</label>
<button>+</button>
</div>
</div>
<div class='Bloco_3' >
</div>
</div>
`;
}
}
}
function FormeEditarAmbiente(Empresa) {
const ItemAmbiente = document.getElementById(`Painel_${Empresa}`);
ItemAmbiente.addEventListener('click', PaineldeEdicao);
function PaineldeEdicao() {
const PainelEdicao = document.getElementById('PopPainel');
PainelEdicao.style.display = 'flex'
PainelEdicao.classList.add('EdicaoAmbientes');
PainelEdicao.innerHTML = PainelAmbiente();
Extras();
function PainelAmbiente() {
return `
<div class='fecharPainel' >
<button id='FecharPainel' >X</button>
</div>
<div class='CorpoPainel'>
<div class='PainelDasborhs'>
<div class='Coluna_1'>
<div class='TitutloPopup'>
<h2>Dashbords ${Empresa}</h2>
</div>
<div class='PesquisaPopup'>
<input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
<button id="pesquisa">
<img src="../Acessts/Imagens/Iconis/lupa.png">
</button>
</div>
</div>
<div class='Coluna_2'>
<div class='DashbordItem'>
<h2>Nome da Dashbord</h2>
<button id='DesvincularDashbord'>X</button>
</div>
</div>
</div>
<div class='PainelDasborhs'>
<div class='Coluna_1'>
<div class='TitutloPopup'>
<h2>Grupos ${Empresa}</h2>
</div>
<div class='PesquisaPopup'>
<input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
<button id="pesquisa">
<img src="../Acessts/Imagens/Iconis/lupa.png">
</button>
</div>
</div>
<div class='Coluna_2'>
<div class='DashbordItem'>
<h2>Nome do Grupo</h2>
<button id='DesvincularDashbord'>X</button>
</div>
</div>
</div>
</div>
`;
}
function Extras() {
fechar();
function fechar() {
const FecharPainelEdicao = document.getElementById('FecharPainel');
FecharPainelEdicao.addEventListener('click', EncerrarTarefa);
function EncerrarTarefa() {
PainelEdicao.style.display = 'none'
PainelEdicao.classList.remove('EdicaoAmbientes');
PainelEdicao.innerHTML = ``;
}
}
}
}
}

43
js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesAlertas.js Normal file
View File

@ -0,0 +1,43 @@
function AlinhamentoAmbientesAlertas() {
const ListaAmbientesAlertas = document.getElementById('ListadeAlertas');
ListaAmbientesAlertas.innerHTML = ComponenteAmbientesAlertas();
}
function ComponenteAmbientesAlertas() {
return `
<div class="subpainel_Status">
<div class="bloco_1">
<div class="titulo">
<h2>Nome da Empresa</h2>
</div>
</div>
<div class="bloco_2">
<div class="Mensagem_ambiente" id="Mensagem_ambiente">
<p>mensagem de status do ambiente</p>
</div>
<div class="button_rel">
<button id="Formulario">
<img src="../Acessts/Imagens/Iconis/exportar.png" alt="">
</button>
</div>
<div class="status_ambiente" id="status_ambiente">
<p>OFF</p>
</div>
</div>
</div>
`
}

16
js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesRelatorio.js Normal file
View File

@ -0,0 +1,16 @@
function AlinhamentoAmbientesRelatorios() {
const ListaAmbientesRelatorios = document.getElementById('ListeRelatorios');
ListaAmbientesRelatorios.innerHTML = ComponenteAmbientesRelatorios();
}
function ComponenteAmbientesRelatorios() {
return `
<button>Nome da empresa</button>
`
}

89
js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes_Root.js
View File

@ -1,6 +1,6 @@
//Variavel botão 1 responsavel por inicar a função
var BotaoAmbienteConfig = document.getElementById('opicao_1');
var BotaoAmbienteConfig = document.getElementById('StatusAmbiente');
BotaoAmbienteConfig.addEventListener('click', surgirAmbiente);
@ -9,8 +9,13 @@ function surgirAmbiente() {
var estilo = document.getElementById('conexao');
var painel = document.getElementById('preenchimento');
estilo.href = 'ola';
estilo.href = '../Css/page/Ambiente/Config/Ambientes/AmbientesConfig.css';
painel.innerHTML = EstruturaPrincipal();
AlinhamentoAmbientesAlertas();
AlinhamentoAmbientesRelatorios();
AlinhamentoAmbientes();
}
@ -18,6 +23,67 @@ function EstruturaPrincipal() {
return `
<main class="bloco_ambiente">
<div class="seguimento_1">
<section class="capitulo_1">
<div class="titulo_Cap">
<h2>Ambientes</h2>
</div>
<div class="painel_Cap">
<div class="coluna_1">
<div class="insercao_ambiente">
<button id="criarAmbiente">+</button>
</div>
<div class="pesquisa">
<input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
<button id="pesquisa">
<img src="../Acessts/Imagens/Iconis/lupa.png">
</button>
</div>
</div>
<div class="coluna_2" id="apresentarAmbientes"></div>
</div>
</section>
</div>
<div class="seguimento_2">
<section class="capitulo_2">
<div class="titulo_Cap">
<h2>Status dos Ambientes</h2>
</div>
<div class="painel_Cap" id="ListadeAlertas"></div>
</section>
<section class="capitulo_3">
<div class="titulo_Cap">
<h2>Controle de Ambiente</h2>
</div>
<div class="painel_Cap">
<div class="coluna_1">
<button>ON</button>
<button>OFF</button>
<button>ERRO</button>
</div>
<div class="coluna_2">
<div class="opicaoAmbie" id="ListeRelatorios"></div>
</div>
</div>
</section>
</div>
<div class="PopResposta" id="PopResposta"></div>
<div class="PopPainel" id="PopPainel"></div>
</main>
`;
@ -25,3 +91,22 @@ function EstruturaPrincipal() {
}
var AmbientesCriador = document.createElement('script');
AmbientesCriador.src = '../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes.js';
AmbientesCriador.type = 'text/javascript';
AmbientesCriador.id = 'AmbientesCriador_11';
document.body.appendChild(AmbientesCriador);
var AmbientesAlertas = document.createElement('script');
AmbientesAlertas.src = '../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesAlertas.js';
AmbientesAlertas.type = 'text/javascript';
AmbientesAlertas.id = 'AmbientesAlertas_11';
document.body.appendChild(AmbientesAlertas);
var AmbientesRelatorios = document.createElement('script');
AmbientesRelatorios.src = '../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesRelatorio.js';
AmbientesRelatorios.type = 'text/javascript';
AmbientesRelatorios.id = 'AmbientesRelatoriso_11';
document.body.appendChild(AmbientesRelatorios);

2
js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/config.js
View File

@ -1,7 +1,7 @@
//Variavel botão 2 responsavel por inicar a função
var botao_2 = document.getElementById('opicao_2');
var botao_2 = document.getElementById('opicao_1');
botao_2.addEventListener('click', surgir2);
//Variavel botão 3 responsavel por inicar a função