Atualização 13 | Aplicação funcional do modulo de construção
This commit is contained in:
daivid.alves
parent
d3198cacd4
commit
62740b873f
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="ptbr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
|
@ -11,13 +11,22 @@
|
|||
<link id="conexao" rel="stylesheet" href="./Css/page/Telas_acao/erro_404.css">
|
||||
<link rel="stylesheet" href="./Css/page/Telas_acao/load.css">
|
||||
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
||||
<link rel="stylesheet" href="./Css/page/Telas_acao/erro_404.css">
|
||||
<script src="./js/global/Modulo_de_Comunicacao/Funcao/Comunicacao.js"></script>
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Autencacao.js"></script>
|
||||
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Controlador_telas.js"></script>
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/load.js"></script>
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Painel_Erro.js"></script>
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Html_erro.js"></script>
|
||||
|
||||
|
||||
|
||||
<style id="fundouser">
|
||||
</style>
|
||||
<title>Ambiente do Usuario</title>
|
||||
|
||||
<script defer src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/load.js"></script>
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Estrutura_primaria.js"></script>
|
||||
<!--<script defer src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/load.js"></script>
|
||||
<script src="./js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Estrutura_primaria.js"></script>-->
|
||||
|
||||
|
||||
|
||||
|
|
@ -34,6 +43,9 @@
|
|||
|
||||
</main>
|
||||
|
||||
<section id="scriptsConstructor"></section>
|
||||
<script src="./js/global/Modulo_de_Insercao_Html/Funcao/Inserirscripts.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,55 @@
|
|||
/* Estilo customizado para o scroll (somente no Webkit) */
|
||||
.capitulo_2 .painel_Cap::-webkit-scrollbar,
|
||||
.capitulo_3 .painel_Cap::-webkit-scrollbar,
|
||||
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2::-webkit-scrollbar
|
||||
|
||||
/*Scroll do pop up da edição de um Ambiente*/
|
||||
,
|
||||
.PopPainel.EdicaoAmbientes .CorpoPainel::-webkit-scrollbar,
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .PainelDasborhs .Coluna_2::-webkit-scrollbar,
|
||||
.PopPainel.CriacaoAmbientes #formulario::-webkit-scrollbar,
|
||||
.bloco_ambiente .coluna_2 .opicaoAmbie::-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 */
|
||||
.capitulo_2 .painel_Cap::-webkit-scrollbar-thumb,
|
||||
.capitulo_3 .painel_Cap::-webkit-scrollbar-thumb,
|
||||
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2::-webkit-scrollbar-thumb
|
||||
/*Scroll do pop up da edição de um Ambiente*/
|
||||
,
|
||||
.PopPainel.EdicaoAmbientes .CorpoPainel::-webkit-scrollbar-thumb
|
||||
|
||||
/*Scroll do painel de itens, dentro do pop up de edição para ambientes*/
|
||||
,
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .PainelDasborhs .Coluna_2::-webkit-scrollbar-thumb,
|
||||
.PopPainel.CriacaoAmbientes #formulario::-webkit-scrollbar-thumb,
|
||||
.bloco_ambiente .coluna_2 .opicaoAmbie::-webkit-scrollbar-thumb {
|
||||
background-color: var(--Matriz);
|
||||
/* Cor da parte da barra que você arrasta */
|
||||
border-radius: 1vw;
|
||||
/* Borda arredondada */
|
||||
/* Borda ao redor do polegar */
|
||||
}
|
||||
|
||||
/* Aumentando o tamanho do track (fundo da barra de rolagem) */
|
||||
.capitulo_2 .painel_Cap::-webkit-scrollbar-track,
|
||||
.capitulo_3 .painel_Cap::-webkit-scrollbar-track,
|
||||
.PopPainel.EdicaoAmbientes .CorpoPainel .PainelDasborhs .Coluna_2::-webkit-scrollbar-track,
|
||||
.PopPainel.EdicaoAmbientes .CorpoPainel::-webkit-scrollbar-track,
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .PainelDasborhs .Coluna_2::-webkit-scrollbar-track,
|
||||
.PopPainel.CriacaoAmbientes #formulario::-webkit-scrollbar-track,
|
||||
.bloco_ambiente .coluna_2 .opicaoAmbie::-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 */
|
||||
}
|
||||
|
|
@ -45,12 +45,13 @@ body {
|
|||
--Cor_Segundaria_5_1: #1478cf;
|
||||
|
||||
/*Paleta de cores padrão escuro*/
|
||||
--Cor_Segundaria_1_1: #115834;
|
||||
--Cor_Segundaria_1_2: #115834;
|
||||
--Cor_Segundaria_2_2: #125f51;
|
||||
--Cor_Segundaria_3_2: #1B7C8C;
|
||||
--Cor_Segundaria_4_2: #105018;
|
||||
--Cor_Segundaria_5_2: #123655;
|
||||
|
||||
/*Paleta de cores padrão ausencia*/
|
||||
--Vazio_Corpo: #c6c6c6;
|
||||
--Vazio_Fundo: #9a9a9a;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,16 +1,24 @@
|
|||
/*Elementos essencias para alinhamento da página*/
|
||||
@import url(../../../../global/import.css);
|
||||
@import url(../../../../global/Scroll.css);
|
||||
@import url(../Ambientes/estrutura/AmbienteEstruture.css);
|
||||
@import url(../Ambientes/Componentes/Aplicacoes.css);
|
||||
|
||||
/*Estrutura principal de componentes entre os paineis da tela de configuração*/
|
||||
@import url(../Ambientes/Componentes/Ambientes.css);
|
||||
@import url(../Ambientes/Componentes/AmbientesAlertas.css);
|
||||
@import url(../Ambientes/Componentes/AmbientesRelatorios.css);
|
||||
|
||||
/*Estrutura principal da tela de configuração*/
|
||||
@import url(../Ambientes/estrutura/Sec_Cap_1.css);
|
||||
@import url(../Ambientes/estrutura/Sec_Cap_2.css);
|
||||
@import url(../Ambientes/estrutura/Sec_Cap_3.css);
|
||||
|
||||
/*Estrutura de paineis que são apresentados*/
|
||||
@import url(../Ambientes/Painel/Respostapopup.css);
|
||||
@import url(../Ambientes/Painel/Painelpopup.css);
|
||||
@import url(../Ambientes/Painel/EdicaoAmbientespop.css);
|
||||
@import url(../Ambientes/Painel/CriacaoAmbientepop.css);
|
||||
@import url(../Ambientes/Painel/RelatoriosAmbientespop.css);
|
||||
|
||||
@import url(../Ambientes/Painel/tags.css);
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
/*Esse caminho de classe, aponta para a classe coluna_2, que por usa vez possui a responsabilidade de alinhar todos os elementos dentro dela.*/
|
||||
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -8,6 +9,8 @@
|
|||
|
||||
}
|
||||
|
||||
/* ========================= Imagem inicial do componente ============================== */
|
||||
|
||||
|
||||
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem {
|
||||
|
||||
|
|
@ -39,6 +42,11 @@
|
|||
|
||||
}
|
||||
|
||||
/* ================================= Fechamento ======================================== */
|
||||
|
||||
|
||||
|
||||
/* ============================ corpo do componente ==================================== */
|
||||
|
||||
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .corpo {
|
||||
width: 70%;
|
||||
|
|
@ -89,9 +97,19 @@
|
|||
color: var(--Matriz);
|
||||
font-size: 0.7vw;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
/* ================================= Fechamento ======================================== */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ============================ botão final do componente ============================== */
|
||||
|
||||
|
||||
|
||||
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_2 .painelItem .edicao button {
|
||||
|
||||
|
|
@ -115,5 +133,8 @@
|
|||
color: var(--Matriz);
|
||||
font-size: 2vw;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
/* ================================= Fechamento ======================================== */
|
||||
|
|
@ -54,6 +54,8 @@
|
|||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,67 @@
|
|||
.bloco_ambiente .coluna_2 .opicaoAmbie {
|
||||
|
||||
width: 100%;
|
||||
height: 25vh;
|
||||
padding-bottom: 2vh;
|
||||
padding-top: 2vh;
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
gap: 2vh;
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bloco_ambiente .coluna_2 .opicaoAmbie button {
|
||||
outline: none;
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
width: 20vw;
|
||||
height: 6vh;
|
||||
height: 3vh;
|
||||
padding: 1.8vw;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
font-family: var(--font_titulo);
|
||||
|
||||
color: var(--Matriz);
|
||||
font-size: 1.2vw;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bloco_ambiente .coluna_2 .opicaoAmbie.dinamico button {
|
||||
|
||||
background-color: var(--Cor_Segundaria_1_1);
|
||||
box-shadow: 5px 5px 0px var(--Cor_Segundaria_1_2);
|
||||
|
||||
}
|
||||
|
||||
.bloco_ambiente .coluna_2 .opicaoAmbie.RelatoriosON button {
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
.bloco_ambiente .coluna_2 .opicaoAmbie.RelatoriosERRO button {
|
||||
|
||||
background-color: red;
|
||||
box-shadow: 5px 5px 0px rgb(109, 0, 0);
|
||||
|
||||
}
|
||||
|
||||
.bloco_ambiente .coluna_2 .opicaoAmbie.RelatoriosOFF button {
|
||||
|
||||
background-color: var(--Vazio_Corpo);
|
||||
box-shadow: 5px 5px 0px var(--Vazio_Fundo);
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
/*========================================= Aplicações de tipo de estilos, para os botões OFF, ERRO e ON. ===============================================*/
|
||||
|
||||
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap .coluna_1 .desativado {
|
||||
|
||||
color: var(--Matriz);
|
||||
background-color: var(--Cor_Segundaria_2_1);
|
||||
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
|
||||
|
||||
}
|
||||
|
||||
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap .coluna_1 .Ativo {
|
||||
|
||||
color: var(--Cor_Segundaria_3_1);
|
||||
background-color: var(--Matriz);
|
||||
box-shadow: 5px 5px 0px var(--Cor_Segundaria_3_1);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*========================================= Fechamento das aaplicações de ERRO, OFF e ON ===============================================*/
|
||||
|
|
@ -0,0 +1,417 @@
|
|||
/*Aplicação de classe modificada, atrelando todas as modififcações, nos estilos dentro dessa div, somente quando a classe dela é alinhada com essa outra classe, utilizando ela como gatilho para montar todos os estilos desse pop up, definindo a autura e o posicionamneto do pop up*/
|
||||
.PopPainel.CriacaoAmbientes {
|
||||
height: 80vh;
|
||||
|
||||
top: 5vh;
|
||||
left: 40vw;
|
||||
|
||||
}
|
||||
|
||||
/*====================== Painel de encerramento =======================================*/
|
||||
|
||||
/*Aplica*/
|
||||
.PopPainel.CriacaoAmbientes .fecharPainel {
|
||||
width: 100%;
|
||||
height: 12vh;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes .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;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes .fecharPainel button:hover {
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
box-shadow: -5px 5px 0px var(--Cor_Segundaria_5_2);
|
||||
}
|
||||
|
||||
|
||||
/*====================== Fechamento ====================================================*/
|
||||
|
||||
|
||||
/*====================== Inicio do formulario =======================================*/
|
||||
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario {
|
||||
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
padding-top: 2vh;
|
||||
overflow-y: auto;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
|
||||
gap: 2vh;
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_1,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_2,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_3 {
|
||||
|
||||
width: 90%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
|
||||
gap: 2vh;
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_1 .TituloCampo,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_2 .TituloCampo,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_3 .TituloCampo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
|
||||
font-family: var(--font_titulo);
|
||||
color: var(--Matriz);
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_1 .TituloCampo h2,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_2 .TituloCampo h2,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_3 .TituloCampo h2 {
|
||||
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_5_2);
|
||||
padding: 1vw;
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_1 .Campo,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_2 .Campo,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_3 .Campo {
|
||||
width: 100%;
|
||||
height: 6vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_5_2);
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_1 .Campo label,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_2 .Campo label,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_3 .Campo label {
|
||||
|
||||
font-family: var(--font_titulo);
|
||||
color: var(--Matriz);
|
||||
font-size: 1.2vw;
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_1 .Campo input,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_2 .Campo input,
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_3 .Campo input {
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
height: 1vh;
|
||||
width: 70%;
|
||||
padding: 0.8vw;
|
||||
|
||||
background-color: var(--Matriz);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*====================== Fechamento ====================================================*/
|
||||
|
||||
|
||||
|
||||
/*====================== Configuração ES B1 ++++=======================================*/
|
||||
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_1 .Campolong {
|
||||
|
||||
width: 100%;
|
||||
padding-top: 2vh;
|
||||
padding-bottom: 2vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: start;
|
||||
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_5_2);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_1 .Campolong label {
|
||||
|
||||
font-family: var(--font_titulo);
|
||||
color: var(--Matriz);
|
||||
font-size: 1.2vw;
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_1 .Campolong textarea {
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
height: 14vh;
|
||||
width: 70%;
|
||||
padding: 0.8vw;
|
||||
|
||||
background-color: var(--Matriz);
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*====================== Fechamento ====================================================*/
|
||||
|
||||
|
||||
|
||||
/*====================== Configuração ES B2 ++++=======================================*/
|
||||
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_2 .CampoInsercao {
|
||||
|
||||
width: 100%;
|
||||
padding-top: 2vh;
|
||||
padding-bottom: 2vh;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_5_2);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_2 .CampoInsercao label {
|
||||
|
||||
font-family: var(--font_titulo);
|
||||
color: var(--Matriz);
|
||||
font-size: 1.2vw;
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes #formulario .Bloco_2 .CampoInsercao button {
|
||||
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
height: 8vh;
|
||||
width: 70%;
|
||||
padding: 0.8vw;
|
||||
|
||||
background-color: var(--Matriz);
|
||||
color: var(--Cor_Segundaria_5_1);
|
||||
|
||||
font-family: var(--font_titulo);
|
||||
color: var(--Cor_Segundaria_5_1);
|
||||
font-size: 1.6vw;
|
||||
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*====================== Fechamento ====================================================*/
|
||||
|
||||
|
||||
|
||||
/*====================== Configuração ES B3 =========================================*/
|
||||
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .PainelDasborhs {
|
||||
|
||||
width: 90%;
|
||||
padding: 2vw;
|
||||
margin-top: 0.8vh solid var(--Matriz);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_5_2);
|
||||
|
||||
margin-bottom: 2vh;
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .PainelDasborhs .Coluna_1 {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .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.CriacaoAmbientes .Bloco_3 .PainelDasborhs .Coluna_1 .PesquisaPopup {
|
||||
|
||||
width: 70%;
|
||||
height: 8vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .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_2_1);
|
||||
box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_2_2);
|
||||
|
||||
padding-left: 1vw;
|
||||
padding-right: 1vw;
|
||||
|
||||
font-size: 0.8vw;
|
||||
font-family: var(--font_titulo);
|
||||
color: var(--Cor_Segundaria_2_1);
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .PainelDasborhs .Coluna_1 .PesquisaPopup 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);
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .PainelDasborhs .Coluna_1 .PesquisaPopup img {
|
||||
width: 2vw;
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .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;
|
||||
}
|
||||
|
||||
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .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.CriacaoAmbientes .Bloco_3 .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;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.CriacaoAmbientes .Bloco_3 .PainelDasborhs .Coluna_2 .DashbordItem button:hover {
|
||||
background-color: var(--Cor_Segundaria_2_1);
|
||||
box-shadow: -5px 5px 0px var(--Cor_Segundaria_2_2);
|
||||
}
|
||||
|
||||
/*=============================== fechamento ===========================================*/
|
||||
|
|
@ -1,3 +1,11 @@
|
|||
.PopPainel.EdicaoAmbientes {
|
||||
height: 60vh;
|
||||
|
||||
top: 10vh;
|
||||
left: 40vw;
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.EdicaoAmbientes .fecharPainel {
|
||||
width: 100%;
|
||||
height: 12vh;
|
||||
|
|
@ -18,6 +26,8 @@
|
|||
font-size: 1vw;
|
||||
color: var(--Matriz);
|
||||
transition: 1s ease;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.PopPainel.EdicaoAmbientes .fecharPainel button:hover {
|
||||
|
|
@ -27,9 +37,9 @@
|
|||
|
||||
.PopPainel.EdicaoAmbientes .CorpoPainel {
|
||||
|
||||
width: 100%;
|
||||
width: 90%;
|
||||
padding: 2vw;
|
||||
height: 70vh;
|
||||
padding-top: 2vh;
|
||||
overflow-y: auto;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -159,40 +169,6 @@
|
|||
}
|
||||
|
||||
|
||||
/* 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;
|
||||
|
|
|
|||
|
|
@ -3,12 +3,9 @@
|
|||
background-color: var(--Cor_Segundaria_3_1);
|
||||
box-shadow: 5px 5px 0px 0px var(--Cor_Segundaria_3_2);
|
||||
width: 40vw;
|
||||
height: 60vh;
|
||||
padding: 2vw;
|
||||
|
||||
padding: 2vw;
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
left: 40vw;
|
||||
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,81 @@
|
|||
.PopPainel.VisualizacaoRelaotirio {
|
||||
height: 45vh;
|
||||
|
||||
top: 15vh;
|
||||
left: 40vw;
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.VisualizacaoRelaotirio .fecharPainel {
|
||||
width: 100%;
|
||||
height: 12vh;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.PopPainel.VisualizacaoRelaotirio .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;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.PopPainel.VisualizacaoRelaotirio .fecharPainel button:hover {
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
box-shadow: -5px 5px 0px var(--Cor_Segundaria_5_2);
|
||||
}
|
||||
|
||||
|
||||
.PopPainel.VisualizacaoRelaotirio .Titulo_Relatorio {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.PopPainel.VisualizacaoRelaotirio .Titulo_Relatorio h2 {
|
||||
width: 70%;
|
||||
height: 8vh;
|
||||
padding: 1.2vw;
|
||||
background-color: var(--Matriz);
|
||||
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
font-family: var(--font_titulo);
|
||||
font-size: 1.6vw;
|
||||
color: var(--Cor_Segundaria_5_1);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.PopPainel.VisualizacaoRelaotirio .Evento {
|
||||
width: 80%;
|
||||
height: 30vh;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
|
||||
|
||||
font-family: var(--font_titulo);
|
||||
font-size: 1.4vw;
|
||||
text-align: center;
|
||||
color: var(--Matriz);
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
/* Detalhe - Não é mencionado que todas as declarações CSS devem seguir esse mesmo padrão, onde a linha de classes declaradas segue a ordem das tags, indo da mais externa ("Quem inicia a linha") para a mais interna ("Quem dá o fim para a linha"). Seguindo esse modelo de declaração de classes, todos os elementos se tornam extremamente únicos, minimizando as chances de existir conflitos de classes. */
|
||||
|
||||
/* ========================================= Painel dedicado para estilizar os componentes de busca do capítulo 1 =============================================== */
|
||||
|
||||
/* Esta linha de classe aponta para a classe painel_Cap e define os alinhamentos principais de toda a estrutura. */
|
||||
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap {
|
||||
width: 80%;
|
||||
height: 74vh;
|
||||
|
|
@ -8,33 +13,42 @@
|
|||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
/* Esta linha de classe aponta para a classe coluna_1 e define as extensões máximas que devem ser obedecidas, enquanto ajusta os alinhamentos dinâmicos para que o painel se adapte, utilizando o modelo flex. */
|
||||
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 {
|
||||
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
/* Esta linha de classe aponta para estilizar um botão que está dentro de insercao_ambiente. */
|
||||
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .insercao_ambiente button {
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
width: 7vw;
|
||||
height: 6vh;
|
||||
|
||||
background-color: var(--Cor_Segundaria_2_1);
|
||||
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
|
||||
color: var(--Matriz);
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Esta linha de classe aponta para a classe pesquisa e define os limites de extensão, além de alinhar todos os elementos dentro dessas extensões. */
|
||||
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa {
|
||||
width: 70%;
|
||||
height: 8vh;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
/* Esta linha de classe aponta para estilizar um input que está dentro de pesquisa. */
|
||||
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa input {
|
||||
background: none;
|
||||
outline: none;
|
||||
|
|
@ -53,9 +67,9 @@
|
|||
font-size: 0.8vw;
|
||||
font-family: var(--font_titulo);
|
||||
color: var(--Cor_Segundaria_2_1);
|
||||
|
||||
}
|
||||
|
||||
/* Esta linha de classe aponta para estilizar um botão que está dentro de pesquisa. */
|
||||
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa button {
|
||||
background: none;
|
||||
outline: none;
|
||||
|
|
@ -67,10 +81,13 @@
|
|||
background-color: var(--Cor_Segundaria_2_1);
|
||||
box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_2_2);
|
||||
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Esta linha de classe aponta para estilizar uma imagem que está sendo usada como um pequeno detalhe no botão de pesquisa. */
|
||||
.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));
|
||||
}
|
||||
|
||||
/* ========================================= Fechamento do bloco de busca =============================================== */
|
||||
|
|
@ -1,6 +1,11 @@
|
|||
.bloco_ambiente .seguimento_2 .capitulo_2 .painel_Cap {
|
||||
/* Este caminho de classes aponta para a classe .painel_Cap, onde é determinada a estilização principal do painel. Além disso, ele alinha todos os elementos dentro dele e define um scroll vertical (overflow-y: auto), permitindo que, caso os elementos ultrapassem a altura do painel, um deslocamento seja criado para que o usuário consiga visualizar os itens além da altura do painel, sem sair da área do painel. */
|
||||
|
||||
.bloco_ambiente .seguimento_2 .capitulo_2 .painel_Cap {
|
||||
width: 90%;
|
||||
height: 20vh;
|
||||
padding: 2vh;
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
|
|
@ -9,38 +14,4 @@
|
|||
|
||||
gap: 1vw;
|
||||
overflow-y: auto;
|
||||
|
||||
padding: 2vh;
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
/* Estilo customizado para o scroll (somente no Webkit) */
|
||||
.capitulo_2 .painel_Cap::-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 */
|
||||
.capitulo_2 .painel_Cap::-webkit-scrollbar-thumb {
|
||||
background-color: var(--Matriz);
|
||||
/* 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) */
|
||||
.capitulo_2 .painel_Cap::-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 */
|
||||
}
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap {
|
||||
/* Detalhe - Não é mencionado que todas as declarações CSS seguem esse padrão, onde a linha de classes declaradas segue a ordem das tags, indo da mais externa ("Quem inicia a linha") para a mais interna ("Quem dá o fim para a linha"). Seguindo esse modelo de declaração de classes, todos os elementos se tornam extremamente únicos, minimizando as chances de existirem conflitos de classes. */
|
||||
|
||||
/* ========================================= Estrutura de decisão, para qual grupo de relatórios apresentar OFF, ON, ERRO =============================================== */
|
||||
|
||||
/* Este caminho de classes aponta para a classe .painel_Cap, onde é determinada a estilização principal do painel. Além disso, ele alinha todos os elementos dentro dele e define um scroll vertical (overflow-y: auto), permitindo que, caso os elementos ultrapassem a altura do painel, um deslocamento seja criado para que o usuário consiga visualizar os itens além da altura do painel, sem sair da área do painel. */
|
||||
|
||||
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap {
|
||||
width: 90%;
|
||||
height: 40vh;
|
||||
|
||||
|
|
@ -14,46 +19,18 @@
|
|||
|
||||
padding: 2vh;
|
||||
background-color: var(--Cor_Segundaria_5_1);
|
||||
|
||||
}
|
||||
|
||||
/* Estilo customizado para o scroll (somente no Webkit) */
|
||||
.capitulo_3 .painel_Cap::-webkit-scrollbar {
|
||||
width: 0.2vw;
|
||||
/* Largura da barra de rolagem */
|
||||
height: 0.2vw;
|
||||
/* Para scroll horizontal, se necessário */
|
||||
}
|
||||
/* Esta linha de classe aponta para a classe .coluna_1, onde ela é usada somente para alinhar os elementos dentro dela. */
|
||||
|
||||
/* Estilo para o polegar da barra de rolagem */
|
||||
.capitulo_3 .painel_Cap::-webkit-scrollbar-thumb {
|
||||
background-color: var(--Matriz);
|
||||
/* 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) */
|
||||
.capitulo_3 .painel_Cap::-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 */
|
||||
}
|
||||
|
||||
|
||||
.bloco_ambiente .coluna_1 {
|
||||
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap .coluna_1 {
|
||||
width: 100%;
|
||||
margin-bottom: 2vh;
|
||||
}
|
||||
|
||||
.bloco_ambiente .coluna_1 button {
|
||||
/* Esta linha de classe aponta para a tag button, com estilizações detalhadas para ela. */
|
||||
|
||||
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap .coluna_1 button {
|
||||
outline: none;
|
||||
background: none;
|
||||
border: none;
|
||||
|
|
@ -61,15 +38,17 @@
|
|||
width: 32.33%;
|
||||
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: 1vw;
|
||||
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.coluna_2 {
|
||||
/* ========================================= Fechamento da estrutura de decisão =============================================== */
|
||||
|
||||
/* Esta linha de classe aponta para a classe .coluna_2, onde ela é utilizada apenas para definir o alinhamento dos itens dentro dela, sendo os painéis de relatórios de cada um dos casos de escolha. */
|
||||
|
||||
.bloco_ambiente .seguimento_2 .capitulo_3 .painel_Cap .coluna_2 {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -140,6 +140,8 @@ body {
|
|||
align-content: center;
|
||||
gap: 0.5vw;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.contener_1 .opicao .retrato,
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #3586ff;
|
||||
background-color: #7235ff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
#cap .paineis_2 .cap_2 button:hover {
|
||||
|
||||
|
||||
color: #3586ff;
|
||||
color: #7235ff;
|
||||
|
||||
background-color: white;
|
||||
transition: ease 1s;
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
@import url(../../global/import.css);
|
||||
|
||||
#cap {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #359dff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#cap .paineis_1 .cap {
|
||||
height: 20vh;
|
||||
margin-top: 15vh;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#cap .paineis_1 .cap h1 {
|
||||
font-family: var(--font_titulo);
|
||||
color: white;
|
||||
font-size: 10vw;
|
||||
|
||||
}
|
||||
|
||||
#cap .paineis_2 .cap {
|
||||
height: 20vh;
|
||||
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
}
|
||||
|
||||
#cap .paineis_2 .cap h2 {
|
||||
|
||||
font-family: var(--font_titulo);
|
||||
color: white;
|
||||
font-size: 2vw;
|
||||
|
||||
}
|
||||
|
||||
#cap .paineis_2 .cap p {
|
||||
text-align: center;
|
||||
font-size: 2vw;
|
||||
font-family: var(--font_titulo);
|
||||
margin-top: 1vh;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
#cap .paineis_2 .cap a {
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#cap .paineis_2 .cap_2 {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#cap .paineis_2 .cap_2 button {
|
||||
|
||||
background: none;
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
margin-top: 1vh;
|
||||
color: white;
|
||||
font-size: 1.2vw;
|
||||
|
||||
border: 0.2vw solid white;
|
||||
padding: 2vh 2vw;
|
||||
transition: ease 1s;
|
||||
|
||||
}
|
||||
|
||||
|
||||
#cap .paineis_2 .cap_2 button:hover {
|
||||
|
||||
|
||||
color: #359dff;
|
||||
|
||||
background-color: white;
|
||||
transition: ease 1s;
|
||||
|
||||
}
|
||||
|
||||
#cap .wave {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 20vh;
|
||||
|
||||
background: url(../../../Acessts/Imagens/Utili/Sem\ título-2.png);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
#cap .wave.wave_1 {
|
||||
animation: animate 60s linear infinite;
|
||||
z-index: 1000;
|
||||
opacity: 1;
|
||||
animation-delay: 0s;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#cap .wave.wave_2 {
|
||||
animation: animate2 30s linear infinite;
|
||||
z-index: 1000;
|
||||
opacity: 0.5;
|
||||
animation-delay: -6s;
|
||||
bottom: 4px;
|
||||
}
|
||||
|
||||
#cap .wave.wave_3 {
|
||||
animation: animate 60s linear infinite;
|
||||
z-index: 998;
|
||||
opacity: 0.7;
|
||||
animation-delay: -2s;
|
||||
bottom: 6px;
|
||||
}
|
||||
|
||||
#cap .wave.wave_4 {
|
||||
animation: animate2 30s linear infinite;
|
||||
z-index: 1000;
|
||||
opacity: 0.7;
|
||||
animation-delay: -5s;
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
@keyframes animate {
|
||||
|
||||
0% {
|
||||
background-position-x: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 500vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@keyframes animate2 {
|
||||
|
||||
0% {
|
||||
background-position-x: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -500vw;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
|
||||
// Função para obter a URL base da API
|
||||
async function getApiUrl() {
|
||||
try {
|
||||
const response = await fetch('../../../Sites/Site_ItGuys/php/config_url.php'); // Solicita a URL base do PHP
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
const data = await response.json();
|
||||
return data.apiUrl; // Retorna a URL base
|
||||
} catch (error) {
|
||||
console.error('Error fetching API URL:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Função para obter o token do localStorage
|
||||
function getAuthToken() {
|
||||
return localStorage.getItem('x-access-token');
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
function loadScriptsSequentially(scripts, callback) {
|
||||
if (!scripts.length) {
|
||||
if (callback) callback();
|
||||
return;
|
||||
}
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.src = scripts[0];
|
||||
script.onload = () => loadScriptsSequentially(scripts.slice(1), callback);
|
||||
script.onerror = () => console.error(`Erro ao carregar o script: ${scripts[0]}`);
|
||||
document.getElementById('scriptsConstructor').appendChild(script);
|
||||
}
|
||||
|
||||
const scriptPaths = [
|
||||
'./js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Autencacao.js',
|
||||
'./js/global/Modulo_de_Comunicacao/Funcao/Comunicacao.js',
|
||||
'./js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Controlador_telas.js',
|
||||
'./js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Html_erro.js',
|
||||
'./js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Painel_Erro.js',
|
||||
];
|
||||
|
||||
loadScriptsSequentially(scriptPaths, () => {
|
||||
console.log('Todos os scripts foram carregados.');
|
||||
});
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
|
||||
|
||||
// Dados experimentais para exibir os itens na tela
|
||||
const dataAmbientes = {
|
||||
|
||||
// Lista de ambientes, com um nome associado a cada um
|
||||
itguys: {
|
||||
nome: 'ItGuys',
|
||||
},
|
||||
|
|
@ -14,42 +13,44 @@ const dataAmbientes = {
|
|||
Prolog: {
|
||||
nome: 'Prolog',
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Função de ancoragem, chamada no início do processo para alinhar e acionar subprocessos automaticamente quando um evento for disparado
|
||||
function AlinhamentoAmbientes() {
|
||||
|
||||
// Seleciona o elemento que vai receber os ambientes no painel
|
||||
const ListaAmbientes = document.getElementById('apresentarAmbientes');
|
||||
ListaAmbientes.innerHTML = ComponenteAmbientes();
|
||||
|
||||
// Insere o HTML gerado pela função ComponenteAmbientes dentro do painel
|
||||
ListaAmbientes.innerHTML = ComponenteAmbientes(); // Inserção de HTML
|
||||
|
||||
// Após um tempo (setTimeout), itera sobre os dados e chama funções específicas para cada ambiente
|
||||
setTimeout(() => {
|
||||
for (let ambiente in dataAmbientes) {
|
||||
const nome = dataAmbientes[ambiente].nome;
|
||||
FormeEditarAmbiente(nome); // Agora chamamos a função para associar o evento de clique
|
||||
for (let ambiente in dataAmbientes) { // Itera sobre os itens de ambientes definidos no objeto 'dataAmbientes'
|
||||
const nome = dataAmbientes[ambiente].nome; // Pega o nome de cada ambiente
|
||||
|
||||
// Chama a função 'FormeEditarAmbiente' passando o nome de cada ambiente
|
||||
FormeEditarAmbiente(nome);
|
||||
}
|
||||
}, 0);
|
||||
|
||||
|
||||
}, 0); // Executa o loop sem delay (imediatamente após a inserção de HTML)
|
||||
|
||||
// Chama a função para criar um novo ambiente
|
||||
FormeCriarAmbiente();
|
||||
|
||||
}
|
||||
|
||||
|
||||
// Função responsável por gerar o HTML com a estrutura dos ambientes
|
||||
function ComponenteAmbientes() {
|
||||
// Inicializa uma variável para armazenar o conteúdo HTML gerado
|
||||
let htmlContent = '';
|
||||
let htmlContent = ''; // Variável para armazenar o conteúdo HTML gerado
|
||||
|
||||
// Itera sobre as chaves de dataAmbientes (itguys, enseg, etc.)
|
||||
// Itera sobre os dados de ambientes e gera o HTML para cada um
|
||||
for (let ambiente in dataAmbientes) {
|
||||
const nome = dataAmbientes[ambiente].nome;
|
||||
|
||||
// Adiciona um painel para cada ambiente
|
||||
// Para cada ambiente, adiciona um painel com seu nome e um ícone
|
||||
htmlContent += `
|
||||
|
||||
<div class="painelItem" id="Painel_${nome}">
|
||||
<div class="painelItem">
|
||||
<div class="img">
|
||||
<img src="../Acessts/Imagens/iT_Guys/Logo 32x32.png" alt="Logo da Itguys">
|
||||
<img src="../Acessts/Imagens/Iconis/hospital.png" alt="Logo da ${nome}">
|
||||
</div>
|
||||
<div class="corpo">
|
||||
<div class="titulo">
|
||||
|
|
@ -61,101 +62,176 @@ function ComponenteAmbientes() {
|
|||
</div>
|
||||
</div>
|
||||
<div class="edicao">
|
||||
<button id="EdicacaoAmbiente_Itguys">:</button>
|
||||
<button id="Painel_${nome}">:</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
`
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
// Retorna o HTML completo
|
||||
// Retorna o conteúdo HTML gerado para ser inserido no DOM
|
||||
return htmlContent;
|
||||
// Chama a função para adicionar o evento de clique após o HTML ser inserido
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Função que permite a criação de um novo ambiente através de um painel
|
||||
function FormeCriarAmbiente() {
|
||||
const InsercaoAmbiente = document.getElementById('criarAmbiente')
|
||||
const InsercaoAmbiente = document.getElementById('criarAmbiente');
|
||||
|
||||
// Adiciona um ouvinte de evento para o botão de criação de ambiente
|
||||
InsercaoAmbiente.addEventListener('click', CriarAmbiente);
|
||||
|
||||
function CriarAmbiente() {
|
||||
const PainelCriacao = document.getElementById('PopPainel');
|
||||
PainelCriacao.style.display = 'flex'
|
||||
|
||||
// Exibe o painel de criação e aplica classes para estilizar
|
||||
PainelCriacao.style.display = 'flex';
|
||||
PainelCriacao.classList.add('CriacaoAmbientes');
|
||||
PainelCriacao.classList.remove('EdicaoAmbientes');
|
||||
|
||||
// Insere o conteúdo HTML do painel de criação de ambiente
|
||||
PainelCriacao.innerHTML = PainelAmbiente();
|
||||
|
||||
function PainelAmbiente() {
|
||||
// Chama a função de extras para configurar botões auxiliares no painel
|
||||
Extras();
|
||||
|
||||
// Função que retorna o HTML do painel de criação de ambiente
|
||||
function PainelAmbiente() {
|
||||
return `
|
||||
<div class='fecharPainel' id='FecharPainel'>
|
||||
<button>X</button>
|
||||
</div>
|
||||
|
||||
<div id='formulario'>
|
||||
|
||||
<div class='Bloco_1' >
|
||||
|
||||
<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">
|
||||
<input type="text" placeholder="Escreva o Dominio" id="pesquisarAmbiente">
|
||||
</div>
|
||||
|
||||
<div class='Campo'>
|
||||
<label>Nome</label>
|
||||
<input type="text" placeholder="Pesquise seu ambiente" id="pesquisarAmbiente">
|
||||
<input type="text" placeholder="Escreva o nome do Ambiente" id="pesquisarAmbiente">
|
||||
</div>
|
||||
|
||||
<div class='Campolong'>
|
||||
<label>Descrição</label>
|
||||
<textarea name="" id=""></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class='Bloco_2' >
|
||||
|
||||
<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">
|
||||
<input type="text" placeholder="Escreva o nome do cliente" id="pesquisarAmbiente">
|
||||
</div>
|
||||
|
||||
<div class='CampoInsercao'>
|
||||
<label>Nome</label>
|
||||
<button>+</button>
|
||||
|
||||
<label>Logo</label>
|
||||
<button id='ImagemEmpresa' onclick="document.getElementById('uploadImagem').click()">+</button>
|
||||
<input type="file" id="uploadImagem" style="display: none;" accept="image/*">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class='Bloco_3'>
|
||||
<div class='TituloCampo'>
|
||||
<h2>Alinhamento do Ambiente</h2>
|
||||
</div>
|
||||
<div class='PainelDasborhs'>
|
||||
<div class='Coluna_1'>
|
||||
<div class='TitutloPopup'>
|
||||
<h2>Dashbords</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='Bloco_3' >
|
||||
|
||||
|
||||
|
||||
<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</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>
|
||||
</div>
|
||||
|
||||
`;
|
||||
|
||||
}
|
||||
|
||||
// Função para alterar a imagem do botão de logo da empresa
|
||||
function alterarImagem() {
|
||||
const input = document.getElementById('uploadImagem');
|
||||
const button = document.getElementById('ImagemEmpresa');
|
||||
const file = input.files[0];
|
||||
|
||||
if (file) {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function (event) {
|
||||
// Aplica a imagem ao botão
|
||||
button.style.backgroundImage = `url(${event.target.result})`;
|
||||
button.style.backgroundSize = "contain";
|
||||
button.style.backgroundRepeat = "no-repeat";
|
||||
button.style.backgroundPosition = "center";
|
||||
button.style.height = '30vh';
|
||||
button.style.transition = '1s ease';
|
||||
button.textContent = ''; // Remove o texto '+' após a imagem ser carregada
|
||||
}
|
||||
|
||||
reader.readAsDataURL(file); // Lê a imagem como uma URL
|
||||
}
|
||||
}
|
||||
|
||||
// Função para tratar os botões auxiliares do painel
|
||||
function Extras() {
|
||||
fechar();
|
||||
|
||||
// Função de fechamento do painel
|
||||
function fechar() {
|
||||
const FecharPainelEdicao = document.getElementById('FecharPainel');
|
||||
FecharPainelEdicao.addEventListener('click', EncerrarTarefa);
|
||||
|
||||
// Função que fecha o painel e limpa o conteúdo
|
||||
function EncerrarTarefa() {
|
||||
PainelCriacao.style.display = 'none';
|
||||
PainelCriacao.classList.remove('CriacaoAmbientes');
|
||||
PainelCriacao.innerHTML = ``;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adiciona o listener para o evento de mudança no input de imagem
|
||||
const inputImagem = document.getElementById('uploadImagem');
|
||||
inputImagem.addEventListener('change', alterarImagem);
|
||||
}
|
||||
}
|
||||
|
||||
// Função responsável por editar o ambiente, chamada quando um painel de ambiente é clicado
|
||||
function FormeEditarAmbiente(Empresa) {
|
||||
const ItemAmbiente = document.getElementById(`Painel_${Empresa}`);
|
||||
ItemAmbiente.addEventListener('click', PaineldeEdicao);
|
||||
|
|
@ -163,7 +239,8 @@ function FormeEditarAmbiente(Empresa) {
|
|||
function PaineldeEdicao() {
|
||||
const PainelEdicao = document.getElementById('PopPainel');
|
||||
|
||||
PainelEdicao.style.display = 'flex'
|
||||
PainelEdicao.style.display = 'flex';
|
||||
PainelEdicao.classList.remove('CriacaoAmbientes');
|
||||
PainelEdicao.classList.add('EdicaoAmbientes');
|
||||
PainelEdicao.innerHTML = PainelAmbiente();
|
||||
|
||||
|
|
@ -171,8 +248,8 @@ function FormeEditarAmbiente(Empresa) {
|
|||
|
||||
function PainelAmbiente() {
|
||||
return `
|
||||
<div class='fecharPainel' >
|
||||
<button id='FecharPainel' >X</button>
|
||||
<div class='fecharPainel'>
|
||||
<button id='FecharPainel'>X</button>
|
||||
</div>
|
||||
<div class='CorpoPainel'>
|
||||
<div class='PainelDasborhs'>
|
||||
|
|
@ -192,9 +269,7 @@ function FormeEditarAmbiente(Empresa) {
|
|||
<h2>Nome da Dashbord</h2>
|
||||
<button id='DesvincularDashbord'>X</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class='PainelDasborhs'>
|
||||
|
|
@ -214,36 +289,27 @@ function FormeEditarAmbiente(Empresa) {
|
|||
<h2>Nome do Grupo</h2>
|
||||
<button id='DesvincularDashbord'>X</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
function Extras() {
|
||||
fechar();
|
||||
|
||||
|
||||
// Função de fechamento do painel de edição
|
||||
function fechar() {
|
||||
const FecharPainelEdicao = document.getElementById('FecharPainel');
|
||||
FecharPainelEdicao.addEventListener('click', EncerrarTarefa);
|
||||
|
||||
// Função para encerrar e limpar o painel de edição
|
||||
function EncerrarTarefa() {
|
||||
|
||||
PainelEdicao.style.display = 'none'
|
||||
PainelEdicao.style.display = 'none';
|
||||
PainelEdicao.classList.remove('EdicaoAmbientes');
|
||||
PainelEdicao.innerHTML = ``;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,43 +1,47 @@
|
|||
|
||||
// Função que alinha os ambientes e exibe os alertas na tela
|
||||
function AlinhamentoAmbientesAlertas() {
|
||||
|
||||
// Seleciona o elemento onde os alertas serão listados
|
||||
const ListaAmbientesAlertas = document.getElementById('ListadeAlertas');
|
||||
ListaAmbientesAlertas.innerHTML = ComponenteAmbientesAlertas();
|
||||
|
||||
// Insere o HTML gerado pela função ComponenteAmbientesAlertas dentro do elemento
|
||||
ListaAmbientesAlertas.innerHTML = ComponenteAmbientesAlertas();
|
||||
}
|
||||
|
||||
// Função responsável por gerar o HTML de um ambiente de alerta, com informações como nome da empresa, status e botão de exportação
|
||||
function ComponenteAmbientesAlertas() {
|
||||
|
||||
return `
|
||||
|
||||
<!-- Painel de status do ambiente -->
|
||||
<div class="subpainel_Status">
|
||||
|
||||
<!-- Bloco 1: Exibe o nome da empresa -->
|
||||
<div class="bloco_1">
|
||||
<div class="titulo">
|
||||
<h2>Nome da Empresa</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bloco 2: Exibe informações sobre o ambiente -->
|
||||
<div class="bloco_2">
|
||||
|
||||
<!-- Exibe a mensagem de status do ambiente -->
|
||||
<div class="Mensagem_ambiente" id="Mensagem_ambiente">
|
||||
<p>mensagem de status do ambiente</p>
|
||||
</div>
|
||||
|
||||
<!-- Botão de exportação (relacionado a uma possível ação de gerar relatório ou exportar informações) -->
|
||||
<div class="button_rel">
|
||||
<button id="Formulario">
|
||||
<img src="../Acessts/Imagens/Iconis/exportar.png" alt="">
|
||||
<img src="../Acessts/Imagens/Iconis/exportar.png" alt="Exportar">
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Exibe o status do ambiente (ON/OFF) -->
|
||||
<div class="status_ambiente" id="status_ambiente">
|
||||
<p>OFF</p>
|
||||
<p>OFF</p> <!-- Status inicial, que pode ser alterado dinamicamente -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
`
|
||||
|
||||
`;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,507 @@
|
|||
|
||||
// Função principal responsável por gerenciar o alinhamento dos ambientes e relatórios.
|
||||
function AlinhamentoAmbientesRelatorios() {
|
||||
|
||||
// Obtém o elemento HTML com o ID 'ListeRelatorios' onde os relatórios serão listados.
|
||||
const ListaAmbientesRelatorios = document.getElementById('ListeRelatorios');
|
||||
|
||||
// Insere o componente de relatórios dinâmicos na área do elemento 'ListeRelatorios'.
|
||||
ListaAmbientesRelatorios.innerHTML = ComponenteAmbientesRelatorios();
|
||||
|
||||
// Chama as funções que ativam, desativam e lidam com erros nos relatórios.
|
||||
Relatorios_on(); // Função que ativa a visualização de relatórios (ON).
|
||||
Relatorios_erro(); // Função que lida com os relatórios em erro.
|
||||
Relatorios_off(); // Função que desativa os relatórios (OFF).
|
||||
}
|
||||
|
||||
// Função responsável por retornar o HTML de um componente de relatórios dinâmico.
|
||||
function ComponenteAmbientesRelatorios() {
|
||||
|
||||
// Retorna uma string com a estrutura HTML do componente.
|
||||
return `
|
||||
<button>Nome da empresa</button>
|
||||
<div class="titulo_Cap">
|
||||
<!-- Título principal da seção de controle de ambiente -->
|
||||
<h2>Controle de Ambiente</h2>
|
||||
</div>
|
||||
|
||||
<div class="painel_Cap">
|
||||
<div class="coluna_1">
|
||||
<!-- Botões para controlar o estado dos relatórios (ON, OFF, ERRO) -->
|
||||
<button class="desativado" id="Relatorios_ON">ON</button>
|
||||
<button class="desativado" id="Relatorios_OFF">OFF</button>
|
||||
<button class="desativado" id="Relatorios_ERRO">ERRO</button>
|
||||
</div>
|
||||
|
||||
<div class="coluna_2">
|
||||
<!-- Área onde os relatórios dinâmicos serão listados -->
|
||||
<div class="opicaoAmbie dinamico" id="ListaRelatoriosDinamicos">
|
||||
<!-- Exemplo de botão de relatório dinâmico -->
|
||||
<button id='relatorio_1323'>Itguys</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`
|
||||
|
||||
}
|
||||
|
||||
// Função que é ativada quando o botão "ON" é clicado, permitindo visualizar os relatórios.
|
||||
function Relatorios_on() {
|
||||
|
||||
// Obtém o botão "ON" e adiciona um evento de clique.
|
||||
const ButtonON = document.getElementById('Relatorios_ON');
|
||||
ButtonON.addEventListener('click', ApresentarPainelON);
|
||||
|
||||
// Função que exibe os relatórios quando o botão "ON" é clicado.
|
||||
function ApresentarPainelON() {
|
||||
|
||||
// Dados dos relatórios que serão exibidos
|
||||
const DataRelatorios_ON = {
|
||||
Registro_1: {
|
||||
id_Registro: '543514',
|
||||
Ambiente: "Itguys",
|
||||
DatadoEvento: "(18:02 - 20/10/24)",
|
||||
Evento: "Um Relatório foi emitido, do gráfico da 104"
|
||||
},
|
||||
Registro_2: {
|
||||
id_Registro: '123214',
|
||||
Ambiente: "Enseg",
|
||||
DatadoEvento: "(12:02 - 21/08/24)",
|
||||
Evento: "Usuário Alan resetou sua senha"
|
||||
},
|
||||
Registro_3: {
|
||||
id_Registro: '3213214',
|
||||
Ambiente: "Itguys",
|
||||
DatadoEvento: "(14:02 - 21/12/24)",
|
||||
Evento: "Usuário João realizou modificações no Ramal do Dev"
|
||||
},
|
||||
Registro_4: {
|
||||
id_Registro: '4213214',
|
||||
Ambiente: "Prolog",
|
||||
DatadoEvento: "(12:02 - 10/06/24)",
|
||||
Evento: "Usuário Francisco puxou um relatório sobre a Starlink"
|
||||
},
|
||||
Registro_5: {
|
||||
id_Registro: '1230214',
|
||||
Ambiente: "Oest Pan",
|
||||
DatadoEvento: "(14:02 - 21/12/24)",
|
||||
Evento: "Usuário Ricardo realizou um reset em sua senha"
|
||||
}
|
||||
}
|
||||
|
||||
// Obtém o elemento onde os relatórios dinâmicos serão exibidos.
|
||||
const ListadeRelatorios = document.getElementById('ListaRelatoriosDinamicos');
|
||||
|
||||
// Altera as classes CSS para ativar a exibição dos relatórios.
|
||||
ListadeRelatorios.classList.add('RelatoriosON');
|
||||
ListadeRelatorios.classList.remove('RelatoriosERRO');
|
||||
ListadeRelatorios.classList.remove('RelatoriosOFF');
|
||||
ListadeRelatorios.classList.remove('dinamico');
|
||||
|
||||
// Ativa o botão "ON" e desativa os outros botões.
|
||||
const BotaoReferencial = document.getElementById('Relatorios_ON');
|
||||
BotaoReferencial.classList.add('Ativo');
|
||||
BotaoReferencial.classList.remove('desativado');
|
||||
|
||||
const RegrasaoExtra_1 = document.getElementById('Relatorios_ERRO');
|
||||
RegrasaoExtra_1.classList.remove('Ativo');
|
||||
RegrasaoExtra_1.classList.add('desativado');
|
||||
|
||||
const RegrasaoExtra_2 = document.getElementById('Relatorios_OFF');
|
||||
RegrasaoExtra_2.classList.remove('Ativo');
|
||||
RegrasaoExtra_2.classList.add('desativado');
|
||||
|
||||
// Gatilho para renderizar os relatórios na interface.
|
||||
ListadeRelatorios.innerHTML = GatilhodeRelatorios();
|
||||
|
||||
// Após um pequeno delay, exibe os relatórios, associando os eventos de clique.
|
||||
setTimeout(() => {
|
||||
for (let registrosOn in DataRelatorios_ON) {
|
||||
const code = DataRelatorios_ON[registrosOn].id_Registro;
|
||||
const ambiente = DataRelatorios_ON[registrosOn].Ambiente;
|
||||
const data = DataRelatorios_ON[registrosOn].DatadoEvento;
|
||||
const Evento = DataRelatorios_ON[registrosOn].Evento;
|
||||
|
||||
// Chama a função para associar o evento de clique em cada relatório.
|
||||
ViusalizadorRelatorioAmbiente(code, ambiente, data, Evento);
|
||||
}
|
||||
}, 0);
|
||||
|
||||
// Função que gera o HTML dos botões de relatórios.
|
||||
function GatilhodeRelatorios() {
|
||||
let htmlContent = '';
|
||||
|
||||
// Itera sobre os registros de relatório e gera um botão para cada um.
|
||||
for (let registrosOn in DataRelatorios_ON) {
|
||||
const code = DataRelatorios_ON[registrosOn].id_Registro;
|
||||
const ambiente = DataRelatorios_ON[registrosOn].Ambiente;
|
||||
const data = DataRelatorios_ON[registrosOn].DatadoEvento;
|
||||
|
||||
// Cria um botão para cada relatório.
|
||||
htmlContent += ` <button id='relatorio_ON_${ambiente}_${code}'>${ambiente} - ${data}</button>`;
|
||||
}
|
||||
|
||||
return htmlContent; // Retorna o HTML gerado com os botões.
|
||||
}
|
||||
|
||||
// Função que é chamada quando um relatório específico é clicado.
|
||||
function ViusalizadorRelatorioAmbiente(Id, Empresa, Data, Ocorrido) {
|
||||
const ItemAmbiente = document.getElementById(`relatorio_ON_${Empresa}_${Id}`);
|
||||
|
||||
// Adiciona um evento de clique para abrir a visualização do relatório.
|
||||
ItemAmbiente.addEventListener('click', PaineldeVisualizacao);
|
||||
|
||||
// Função que exibe o painel de visualização do relatório.
|
||||
function PaineldeVisualizacao() {
|
||||
const PainelVisualizacao = document.getElementById('PopPainel');
|
||||
|
||||
// Exibe o painel e ajusta suas classes para o modo de visualização.
|
||||
PainelVisualizacao.style.display = 'flex';
|
||||
PainelVisualizacao.classList.remove('CriacaoAmbientes');
|
||||
PainelVisualizacao.classList.remove('EdicaoAmbientes');
|
||||
PainelVisualizacao.classList.add('VisualizacaoRelaotirio');
|
||||
PainelVisualizacao.innerHTML = PainelRelatorio();
|
||||
|
||||
// Função para adicionar o botão de fechamento e lógica extra.
|
||||
Extras();
|
||||
|
||||
function PainelRelatorio() {
|
||||
return `
|
||||
<div class='fecharPainel'>
|
||||
<button id='FecharPainel'>X</button>
|
||||
</div>
|
||||
<div class='Titulo_Relatorio'>
|
||||
<h2>Relatório de Número - ${Id}</h2>
|
||||
</div>
|
||||
<div class='Evento'>
|
||||
<p>No Ambiente ${Empresa} - ${Ocorrido} às ${Data}<p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Função para adicionar a funcionalidade de fechar o painel.
|
||||
function Extras() {
|
||||
fechar();
|
||||
|
||||
function fechar() {
|
||||
const FecharPainelEdicao = document.getElementById('FecharPainel');
|
||||
FecharPainelEdicao.addEventListener('click', EncerrarTarefa);
|
||||
|
||||
function EncerrarTarefa() {
|
||||
PainelVisualizacao.style.display = 'none'; // Fecha o painel.
|
||||
PainelVisualizacao.classList.remove('VisualizacaoRelaotirio');
|
||||
PainelVisualizacao.innerHTML = ''; // Limpa o conteúdo do painel.
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Função que é ativada quando o botão "ERRO" é clicado, permitindo visualizar os relatórios de erro.
|
||||
function Relatorios_erro() {
|
||||
|
||||
// Obtém o botão "ERRO" e adiciona um evento de clique.
|
||||
const ButtonERRO = document.getElementById('Relatorios_ERRO');
|
||||
ButtonERRO.addEventListener('click', ApresentarPainelERRO);
|
||||
|
||||
// Função que exibe os relatórios de erro quando o botão "ERRO" é clicado.
|
||||
function ApresentarPainelERRO() {
|
||||
|
||||
// Dados dos relatórios de erro que serão exibidos
|
||||
const DataRelatorios_ERRO = {
|
||||
Registro_1: {
|
||||
id_Registro: '0913214',
|
||||
Ambiente: "Itguys",
|
||||
DatadoEvento: "(18:02 - 20/10/24)",
|
||||
Evento: "Houve um erro 2130, ao puxar o relatorio do grafico 1"
|
||||
},
|
||||
Registro_2: {
|
||||
id_Registro: '045314',
|
||||
Ambiente: "Prolog",
|
||||
DatadoEvento: "(11:02 - 01/08/24)",
|
||||
Evento: "Houve um erro sobre o resete de senha, do usuário/a Sonya"
|
||||
},
|
||||
Registro_3: {
|
||||
id_Registro: '3901214',
|
||||
Ambiente: "Oest Pan",
|
||||
DatadoEvento: "(18:02 - 02/11/24)",
|
||||
Evento: "Dashboard de máquina está com gráficos vazios"
|
||||
},
|
||||
Registro_4: {
|
||||
id_Registro: '91230214',
|
||||
Ambiente: "Anatram",
|
||||
DatadoEvento: "(16:02 - 11/06/24)",
|
||||
Evento: "Usuário Francisco originou erro 500 durante o reset de senha"
|
||||
},
|
||||
Registro_5: {
|
||||
id_Registro: '2130123',
|
||||
Ambiente: "Enseg",
|
||||
DatadoEvento: "(17:02 - 21/12/24)",
|
||||
Evento: "Usuário Ricardo originou um erro ao puxar o relatório dos ramais."
|
||||
}
|
||||
}
|
||||
|
||||
// Obtém o elemento onde os relatórios de erro serão exibidos.
|
||||
const ListadeRelatorios = document.getElementById('ListaRelatoriosDinamicos');
|
||||
|
||||
// Altera as classes CSS para ativar a exibição dos relatórios de erro.
|
||||
ListadeRelatorios.classList.add('RelatoriosERRO');
|
||||
ListadeRelatorios.classList.remove('RelatoriosON');
|
||||
ListadeRelatorios.classList.remove('RelatoriosOFF');
|
||||
ListadeRelatorios.classList.remove('dinamico');
|
||||
|
||||
// Ativa o botão "ERRO" e desativa os outros botões.
|
||||
const BotaoReferencial = document.getElementById('Relatorios_ERRO');
|
||||
BotaoReferencial.classList.add('Ativo');
|
||||
BotaoReferencial.classList.remove('desativado');
|
||||
|
||||
const RegrasaoExtra_1 = document.getElementById('Relatorios_ON');
|
||||
RegrasaoExtra_1.classList.remove('Ativo');
|
||||
RegrasaoExtra_1.classList.add('desativado');
|
||||
|
||||
const RegrasaoExtra_2 = document.getElementById('Relatorios_OFF');
|
||||
RegrasaoExtra_2.classList.remove('Ativo');
|
||||
RegrasaoExtra_2.classList.add('desativado');
|
||||
|
||||
// Gatilho para renderizar os relatórios na interface.
|
||||
ListadeRelatorios.innerHTML = GatilhodeRelatorios();
|
||||
|
||||
// Após um pequeno delay, exibe os relatórios de erro, associando os eventos de clique.
|
||||
setTimeout(() => {
|
||||
for (let registrosERRO in DataRelatorios_ERRO) {
|
||||
const code = DataRelatorios_ERRO[registrosERRO].id_Registro;
|
||||
const ambiente = DataRelatorios_ERRO[registrosERRO].Ambiente;
|
||||
const data = DataRelatorios_ERRO[registrosERRO].DatadoEvento;
|
||||
const Evento = DataRelatorios_ERRO[registrosERRO].Evento;
|
||||
|
||||
// Chama a função para associar o evento de clique em cada relatório.
|
||||
ViusalizadorRelatorioAmbiente(code, ambiente, data, Evento);
|
||||
}
|
||||
}, 0);
|
||||
|
||||
// Função que gera o HTML dos botões de relatórios de erro.
|
||||
function GatilhodeRelatorios() {
|
||||
let htmlContent = '';
|
||||
|
||||
// Itera sobre os registros de erro e gera um botão para cada um.
|
||||
for (let registrosERRO in DataRelatorios_ERRO) {
|
||||
const code = DataRelatorios_ERRO[registrosERRO].id_Registro;
|
||||
const ambiente = DataRelatorios_ERRO[registrosERRO].Ambiente;
|
||||
const data = DataRelatorios_ERRO[registrosERRO].DatadoEvento;
|
||||
|
||||
// Cria um botão para cada relatório de erro.
|
||||
htmlContent += ` <button id='relatorio_ERRO_${ambiente}_${code}'>${ambiente} - ${data}</button>`;
|
||||
}
|
||||
|
||||
return htmlContent; // Retorna o HTML gerado com os botões.
|
||||
}
|
||||
|
||||
// Função que é chamada quando um relatório específico de erro é clicado.
|
||||
function ViusalizadorRelatorioAmbiente(Id, Empresa, Data, Ocorrido) {
|
||||
const ItemAmbiente = document.getElementById(`relatorio_ERRO_${Empresa}_${Id}`);
|
||||
|
||||
// Adiciona um evento de clique para abrir a visualização do relatório de erro.
|
||||
ItemAmbiente.addEventListener('click', PaineldeVisualizacao);
|
||||
|
||||
// Função que exibe o painel de visualização do relatório de erro.
|
||||
function PaineldeVisualizacao() {
|
||||
const PainelVisualizacao = document.getElementById('PopPainel');
|
||||
|
||||
// Exibe o painel e ajusta suas classes para o modo de visualização.
|
||||
PainelVisualizacao.style.display = 'flex';
|
||||
PainelVisualizacao.classList.remove('CriacaoAmbientes');
|
||||
PainelVisualizacao.classList.remove('EdicaoAmbientes');
|
||||
PainelVisualizacao.classList.add('VisualizacaoRelaotirio');
|
||||
PainelVisualizacao.innerHTML = PainelRelatorio();
|
||||
|
||||
// Função para adicionar o botão de fechamento e lógica extra.
|
||||
Extras();
|
||||
|
||||
function PainelRelatorio() {
|
||||
return `
|
||||
<div class='fecharPainel'>
|
||||
<button id='FecharPainel'>X</button>
|
||||
</div>
|
||||
<div class='Titulo_Relatorio'>
|
||||
<h2>Relatório de Número - ${Id}</h2>
|
||||
</div>
|
||||
<div class='Evento'>
|
||||
<p>No Ambiente ${Empresa} - ${Ocorrido} às ${Data}<p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Função para adicionar a funcionalidade de fechar o painel.
|
||||
function Extras() {
|
||||
fechar();
|
||||
|
||||
function fechar() {
|
||||
const FecharPainelEdicao = document.getElementById('FecharPainel');
|
||||
FecharPainelEdicao.addEventListener('click', EncerrarTarefa);
|
||||
|
||||
function EncerrarTarefa() {
|
||||
PainelVisualizacao.style.display = 'none'; // Fecha o painel.
|
||||
PainelVisualizacao.classList.remove('VisualizacaoRelaotirio');
|
||||
PainelVisualizacao.innerHTML = ''; // Limpa o conteúdo do painel.
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Função que é ativada quando o botão "OFF" é clicado, permitindo visualizar os relatórios de desligamento.
|
||||
function Relatorios_off() {
|
||||
|
||||
// Obtém o botão "OFF" e adiciona um evento de clique.
|
||||
const ButtonOFF = document.getElementById('Relatorios_OFF');
|
||||
ButtonOFF.addEventListener('click', ApresentarPainelOFF);
|
||||
|
||||
// Função que exibe os relatórios de desligamento quando o botão "OFF" é clicado.
|
||||
function ApresentarPainelOFF() {
|
||||
|
||||
// Dados dos relatórios de desligamento que serão exibidos
|
||||
const DataRelatorios_OFF = {
|
||||
Registro_1: {
|
||||
id_Registro: '21984',
|
||||
Ambiente: "ItGuys",
|
||||
DatadoEvento: "(17:02 - 20/10/24)",
|
||||
Evento: "Ambiente foi desligado, pelo ADM Daivid, para realizar ajustes"
|
||||
},
|
||||
Registro_2: {
|
||||
id_Registro: '218784',
|
||||
Ambiente: "Enseg",
|
||||
DatadoEvento: "(13:02 - 01/08/24)",
|
||||
Evento: "Ambiente foi desligado, por conta de um erro interno, no reset de senhas."
|
||||
},
|
||||
Registro_3: {
|
||||
id_Registro: '25464514',
|
||||
Ambiente: "Prolog",
|
||||
DatadoEvento: "(15:02 - 02/11/24)",
|
||||
Evento: "Ambiente foi desligado temporariamente, por conta da invasão de usuário Rodrigo, sobre uma tela que ele não deveria acessar."
|
||||
},
|
||||
Registro_4: {
|
||||
id_Registro: '21334',
|
||||
Ambiente: "Enseg",
|
||||
DatadoEvento: "(11:02 - 11/06/24)",
|
||||
Evento: "Ambiente passou por desligamento para passar por uma atualização das suas dashboards"
|
||||
},
|
||||
Registro_5: {
|
||||
id_Registro: '213214',
|
||||
Ambiente: "Enseg",
|
||||
DatadoEvento: "(15:02 - 21/12/24)",
|
||||
Evento: "Ambiente foi desligado por conta de um erro no reset de senha do usuário, causando um travamento geral."
|
||||
}
|
||||
}
|
||||
|
||||
// Obtém o elemento onde os relatórios de desligamento serão exibidos.
|
||||
const ListadeRelatorios = document.getElementById('ListaRelatoriosDinamicos');
|
||||
|
||||
// Altera as classes CSS para ativar a exibição dos relatórios de desligamento.
|
||||
ListadeRelatorios.classList.add('RelatoriosOFF');
|
||||
ListadeRelatorios.classList.remove('RelatoriosERRO');
|
||||
ListadeRelatorios.classList.remove('RelatoriosON');
|
||||
ListadeRelatorios.classList.remove('dinamico');
|
||||
|
||||
// Ativa o botão "OFF" e desativa os outros botões.
|
||||
const BotaoReferencial = document.getElementById('Relatorios_OFF');
|
||||
BotaoReferencial.classList.add('Ativo');
|
||||
BotaoReferencial.classList.remove('desativado');
|
||||
|
||||
const RegrasaoExtra_1 = document.getElementById('Relatorios_ON');
|
||||
RegrasaoExtra_1.classList.remove('Ativo');
|
||||
RegrasaoExtra_1.classList.add('desativado');
|
||||
|
||||
const RegrasaoExtra_2 = document.getElementById('Relatorios_ERRO');
|
||||
RegrasaoExtra_2.classList.remove('Ativo');
|
||||
RegrasaoExtra_2.classList.add('desativado');
|
||||
|
||||
// Gatilho para renderizar os relatórios na interface.
|
||||
ListadeRelatorios.innerHTML = GatilhodeRelatorios();
|
||||
|
||||
// Após um pequeno delay, exibe os relatórios de desligamento e associa os eventos de clique.
|
||||
setTimeout(() => {
|
||||
for (let registrosOFF in DataRelatorios_OFF) {
|
||||
const code = DataRelatorios_OFF[registrosOFF].id_Registro;
|
||||
const ambiente = DataRelatorios_OFF[registrosOFF].Ambiente;
|
||||
const data = DataRelatorios_OFF[registrosOFF].DatadoEvento;
|
||||
const Evento = DataRelatorios_OFF[registrosOFF].Evento;
|
||||
|
||||
// Chama a função para associar o evento de clique em cada relatório.
|
||||
ViusalizadorRelatorioAmbiente(code, ambiente, data, Evento);
|
||||
}
|
||||
}, 0);
|
||||
|
||||
// Função que gera o HTML dos botões de relatórios de desligamento.
|
||||
function GatilhodeRelatorios() {
|
||||
let htmlContent = '';
|
||||
|
||||
// Itera sobre os registros de desligamento e gera um botão para cada um.
|
||||
for (let registrosOFF in DataRelatorios_OFF) {
|
||||
const code = DataRelatorios_OFF[registrosOFF].id_Registro;
|
||||
const ambiente = DataRelatorios_OFF[registrosOFF].Ambiente;
|
||||
const data = DataRelatorios_OFF[registrosOFF].DatadoEvento;
|
||||
|
||||
// Cria um botão para cada relatório de desligamento.
|
||||
htmlContent += ` <button id='relatorio_OFF_${ambiente}_${code}'> ${ambiente} - ${data}</button>`;
|
||||
}
|
||||
|
||||
return htmlContent; // Retorna o HTML gerado com os botões.
|
||||
}
|
||||
|
||||
// Função que é chamada quando um relatório específico de desligamento é clicado.
|
||||
function ViusalizadorRelatorioAmbiente(Id, Empresa, Data, Ocorrido) {
|
||||
const ItemAmbiente = document.getElementById(`relatorio_OFF_${Empresa}_${Id}`);
|
||||
|
||||
// Adiciona um evento de clique para abrir a visualização do relatório de desligamento.
|
||||
ItemAmbiente.addEventListener('click', PaineldeVisualizacao);
|
||||
|
||||
// Função que exibe o painel de visualização do relatório de desligamento.
|
||||
function PaineldeVisualizacao() {
|
||||
const PainelVisualizacao = document.getElementById('PopPainel');
|
||||
|
||||
// Exibe o painel e ajusta suas classes para o modo de visualização.
|
||||
PainelVisualizacao.style.display = 'flex';
|
||||
PainelVisualizacao.classList.remove('CriacaoAmbientes');
|
||||
PainelVisualizacao.classList.remove('EdicaoAmbientes');
|
||||
PainelVisualizacao.classList.add('VisualizacaoRelaotirio');
|
||||
PainelVisualizacao.innerHTML = PainelRelatorio();
|
||||
|
||||
// Função para adicionar o botão de fechamento e lógica extra.
|
||||
Extras();
|
||||
|
||||
function PainelRelatorio() {
|
||||
return `
|
||||
<div class='fecharPainel'>
|
||||
<button id='FecharPainel'>X</button>
|
||||
</div>
|
||||
<div class='Titulo_Relatorio'>
|
||||
<h2>Relatório de Número - ${Id}</h2>
|
||||
</div>
|
||||
<div class='Evento'>
|
||||
<p>No Ambiente ${Empresa} - ${Ocorrido} às ${Data}<p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Função para adicionar a funcionalidade de fechar o painel.
|
||||
function Extras() {
|
||||
fechar();
|
||||
|
||||
function fechar() {
|
||||
const FecharPainelEdicao = document.getElementById('FecharPainel');
|
||||
FecharPainelEdicao.addEventListener('click', EncerrarTarefa);
|
||||
|
||||
function EncerrarTarefa() {
|
||||
PainelVisualizacao.style.display = 'none'; // Fecha o painel.
|
||||
PainelVisualizacao.classList.remove('VisualizacaoRelaotirio');
|
||||
PainelVisualizacao.innerHTML = ''; // Limpa o conteúdo do painel.
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,21 @@
|
|||
|
||||
//Variavel botão 1 responsavel por inicar a função
|
||||
//Variavel botão, capaz de dar incio a todo o painel de configuração de ambientes, como modelo de seguraça pode ter um outro script que reconhece o usuário lirando ou não esse botão.
|
||||
var BotaoAmbienteConfig = document.getElementById('StatusAmbiente');
|
||||
BotaoAmbienteConfig.addEventListener('click', surgirAmbiente);
|
||||
|
||||
|
||||
//Nessa função o conteudo da tela é modificado e novas informaçõe são apresentadas 'lembre de alinhar o nome da função com o seu botão respecitivo, sendo essa do botão 1'
|
||||
//Nessa função, é inserido uma estrutura estatica da tela de congiguração para ambientes, sendo somente os pontos que não passam por auterações, também é definido o link css para estilizar toda essa estrutura.
|
||||
function surgirAmbiente() {
|
||||
|
||||
//Link css que será manipulado
|
||||
var estilo = document.getElementById('conexao');
|
||||
//Div que vai receber a estrutura html
|
||||
var painel = document.getElementById('preenchimento');
|
||||
|
||||
//Implementação de estrutura html e caminho de css
|
||||
estilo.href = '../Css/page/Ambiente/Config/Ambientes/AmbientesConfig.css';
|
||||
painel.innerHTML = EstruturaPrincipal();
|
||||
|
||||
//Alinhando funções importantes para a tela de ambientes
|
||||
|
||||
AlinhamentoAmbientesAlertas();
|
||||
AlinhamentoAmbientesRelatorios();
|
||||
|
|
@ -19,13 +23,13 @@ function surgirAmbiente() {
|
|||
}
|
||||
|
||||
|
||||
//Estrutura Html que está sendo usada
|
||||
function EstruturaPrincipal() {
|
||||
|
||||
return `
|
||||
|
||||
<main class="bloco_ambiente">
|
||||
|
||||
|
||||
<div class="seguimento_1">
|
||||
<section class="capitulo_1">
|
||||
<div class="titulo_Cap">
|
||||
|
|
@ -59,23 +63,8 @@ function EstruturaPrincipal() {
|
|||
<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">
|
||||
<section class="capitulo_3" id="ListeRelatorios">
|
||||
|
||||
<div class="opicaoAmbie" id="ListeRelatorios"></div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
@ -92,6 +81,8 @@ function EstruturaPrincipal() {
|
|||
|
||||
}
|
||||
|
||||
|
||||
//Implementando script responsavel pela construção de ambientes e das funções em volta desse componente
|
||||
var AmbientesCriador = document.createElement('script');
|
||||
AmbientesCriador.src = '../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes.js';
|
||||
AmbientesCriador.type = 'text/javascript';
|
||||
|
|
@ -99,12 +90,15 @@ AmbientesCriador.id = 'AmbientesCriador_11';
|
|||
document.body.appendChild(AmbientesCriador);
|
||||
|
||||
|
||||
//Implementando script responsavel pela construção de Alertas de ambientes e das funções em volta desse componente
|
||||
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);
|
||||
|
||||
//Implementando script responsavel pela construção de Relatorios de ambientes e das funções em volta desse componente
|
||||
|
||||
var AmbientesRelatorios = document.createElement('script');
|
||||
AmbientesRelatorios.src = '../js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesRelatorio.js';
|
||||
AmbientesRelatorios.type = 'text/javascript';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
async function Autenticao() {
|
||||
const apiUrl = await getApiUrl();
|
||||
const token = getAuthToken();
|
||||
|
||||
const response = await fetch(`${apiUrl}/mounting`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-access-token': token ? token : ''
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
return { response, apiUrl }; // Retorne um objeto com a resposta e apiUrl
|
||||
}
|
||||
|
|
@ -0,0 +1,404 @@
|
|||
// Função para carregar e exibir as imagens protegidas
|
||||
|
||||
|
||||
|
||||
async function criarBlocos() {
|
||||
|
||||
try {
|
||||
|
||||
|
||||
|
||||
const { response, apiUrl } = await Autenticao(); // Recebe o objeto com response e apiUrl
|
||||
const data = await response.json(); // Faz o parse do JSON retornado
|
||||
|
||||
// Agora acessa as propriedades do objeto
|
||||
const nomeCompleto = data.usuario.nome; // Nome completo do usuário
|
||||
|
||||
const Empresa = data.empresa.nome;
|
||||
const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
|
||||
//const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
|
||||
const logoEmpresa = `${apiUrl}${data.empresa.logo}`;
|
||||
|
||||
// Exibe as imagens protegidas usando os URLs retornados pela API
|
||||
loadImage(ImagemUser, 'profileImage');
|
||||
//loadImage(ImagemUser2, 'profileImage'); // Imagem de perfil do usuário
|
||||
loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
|
||||
|
||||
// Acessando o primeiro objeto do array retornado
|
||||
console.log(data);
|
||||
console.log(nomeCompleto);
|
||||
console.log(Empresa);
|
||||
console.log('Link da imagem de perfil -' + ImagemUser);
|
||||
console.log('Link da Logo -' + logoEmpresa);
|
||||
|
||||
EstruturaEsqueleto();
|
||||
|
||||
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 construtor_primario = document.getElementById('entrada_1');
|
||||
|
||||
//Estrutura Html que será apresentada sobre a tela
|
||||
construtor_primario.innerHTML = InterfaceAmbiente();
|
||||
Interatividade();
|
||||
|
||||
function InterfaceAmbiente() {
|
||||
return `
|
||||
<nav>
|
||||
|
||||
<section class="menu_lateral">
|
||||
|
||||
<div class="seguimentacao_1">
|
||||
|
||||
<div class="coluna_1">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img src="./Acessts/Imagens/iT_Guys/Logo_itGuys - Copia.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="coluna_2">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/home.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div id="sub_entrada_moni_1"></div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/technical-support.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subcolunas_2">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/central-de-atendimento.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="img" src="./Acessts/Imagens/Iconis/engrenagem - Copia.png" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="seguimentacao_2">
|
||||
|
||||
<div class="coluna_1">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<img class="profileImage" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2> ${nomeCompleto} </h2>
|
||||
|
||||
<h2> ${Empresa} </h2>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subcolunas_2">
|
||||
|
||||
<button class="id_ajuste" id="id_ajuste">
|
||||
|
||||
<img class="imgjust" src="./Acessts/Imagens/Iconis/seta-direita.png" alt="">
|
||||
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="coluna_2">
|
||||
|
||||
<div class="subcolunas_1">
|
||||
|
||||
<a href="./html/Home.html" class="filheira_a" target="frame">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Home</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
<div id="sub_entrada_moni_2"></div>
|
||||
|
||||
<a href="https://suporte.itguys.com.br/" class="filheira_a" target="frame">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Servicdesk</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
<a href="./html/projetos_itguys.html" class="filheira_a" target="frame">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Ferramentas</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="subcolunas_2">
|
||||
|
||||
<a href="https://api.whatsapp.com/send?phone=5521966344698" class="filheira_a" target="black_">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Suporte</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
<a href="./html/Config.html" class="filheira_a">
|
||||
|
||||
<div class="filheira">
|
||||
|
||||
<h2>Configurações</h2>
|
||||
|
||||
</div>
|
||||
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</nav>
|
||||
|
||||
<main class="apresentacao">
|
||||
|
||||
<section class="capitulo_1">
|
||||
|
||||
<div class="Bloco_subcab1_1">
|
||||
|
||||
<img class="companyLogo" alt="" class="icon_subcab1_1">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="Bloco_subcab1_2">
|
||||
|
||||
<a href="https://dev.itguys.com.br/"><button>Logout</button></a>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="capitulo_2">
|
||||
|
||||
<iframe id="test1" name="frame" class="transmissão" src="./html/Home.html"frameborder = "0" ></iframe >
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
function Interatividade() {
|
||||
|
||||
var botao = document.getElementById('id_ajuste');
|
||||
var cabecario = document.querySelector('.capitulo_1');
|
||||
var tela = document.querySelector('.capitulo_2');
|
||||
var menu = document.querySelector('.menu_lateral');
|
||||
|
||||
if (botao) {
|
||||
botao.addEventListener('click', function () {
|
||||
console.log('Botão clicado!');
|
||||
if (menu) menu.classList.toggle('expansao');
|
||||
if (cabecario) cabecario.classList.toggle('expansao');
|
||||
if (tela) tela.classList.toggle('expansao');
|
||||
});
|
||||
} else {
|
||||
console.error('Botão não encontrado!');
|
||||
}
|
||||
|
||||
|
||||
/*if (Permissoes.visuMonitor) {
|
||||
const script2 = document.createElement('script');
|
||||
script2.src = './js/page/Ambiente/Monitoramento/Modulo_Construcao/Funcao/Estrutura_Secundaria_Monitor.js';
|
||||
script2.setAttribute // Acessando a propriedade corretamente
|
||||
document.body.appendChild(script2);
|
||||
}*/
|
||||
|
||||
// Adiciona o listener de clique após a construção do HTML
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function ApresentarTelas() { }
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
} catch (error) {
|
||||
|
||||
await CasodeErro();
|
||||
console.error('Erro ao criar blocos:', error);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
||||
|
||||
async function loadImage(url, imgElementClass) {
|
||||
try {
|
||||
const token = getAuthToken();
|
||||
console.log('Token:', token);
|
||||
console.log('URL da imagem:', url);
|
||||
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-access-token': token ? token : ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erro ao carregar a imagem: ' + response.statusText);
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const imageUrl = URL.createObjectURL(blob);
|
||||
|
||||
// Seleciona todos os elementos com a classe
|
||||
const imgElements = document.getElementsByClassName(imgElementClass);
|
||||
if (imgElements.length > 0) {
|
||||
for (let i = 0; i < imgElements.length; i++) {
|
||||
imgElements[i].src = imageUrl;
|
||||
}
|
||||
} else {
|
||||
console.warn('Nenhum elemento encontrado com a classe:', imgElementClass);
|
||||
}
|
||||
|
||||
return imageUrl; // Retorna a URL da imagem carregada
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar a imagem:', error);
|
||||
console.log('Classe do elemento:', imgElementClass);
|
||||
return null; // Retorna null em caso de erro
|
||||
}
|
||||
}
|
||||
// Função para carregar a imagem de fundo
|
||||
async function loadBackgroundAndUpdateStyle() {
|
||||
try {
|
||||
const apiUrl = await getApiUrl();
|
||||
const token = getAuthToken();
|
||||
const response = await fetch(`${apiUrl}/mounting`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-access-token': token ? token : ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erro ao carregar os dados: ' + response.statusText);
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
const imagemFun = `${apiUrl}${data.usuario.img_fundo}`;
|
||||
|
||||
const fundoResponse = await fetch(imagemFun, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-access-token': token ? token : ''
|
||||
}
|
||||
});
|
||||
|
||||
if (!fundoResponse.ok) {
|
||||
throw new Error('Erro ao carregar a imagem de fundo: ' + fundoResponse.statusText);
|
||||
}
|
||||
|
||||
const blob = await fundoResponse.blob();
|
||||
const fundoUserUrl = URL.createObjectURL(blob);
|
||||
|
||||
const fundouser = document.getElementById('fundouser');
|
||||
fundouser.innerHTML =
|
||||
'.seguimentacao_2 .coluna_1 {' +
|
||||
'width: 100%;' +
|
||||
'height: 30vh;' +
|
||||
'display: flex;' +
|
||||
'flex-direction: row;' +
|
||||
'background-image: url("' + fundoUserUrl + '");' +
|
||||
'background-position: center;'
|
||||
'background-position: center;' +
|
||||
'background-size: cover;' +
|
||||
'overflow: hidden;' +
|
||||
'transition: 1s ease;' +
|
||||
'}';
|
||||
|
||||
|
||||
|
||||
|
||||
console.log('Imagem de fundo carregada e estilo aplicado com sucesso.');
|
||||
} catch (error) {
|
||||
console.error('Erro ao carregar a imagem de fundo:', error);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Aguarda o carregamento completo do DOM
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
setTimeout(async () => {
|
||||
await criarBlocos();
|
||||
await loadBackgroundAndUpdateStyle();
|
||||
setTimeout(localStorage.setItem('Carregou', 'true'), 500) // Salva um valor no localStorage
|
||||
}, 3000); // Executa as funções 3 segundos após o carregamento do DOM
|
||||
});
|
||||
|
||||
|
|
@ -29,6 +29,10 @@ const Permissoes = {
|
|||
|
||||
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Função para carregar e exibir as imagens protegidas
|
||||
async function criarBlocos() {
|
||||
try {
|
||||
|
|
@ -55,7 +59,7 @@ async function criarBlocos() {
|
|||
|
||||
// Agora acessa as propriedades do objeto
|
||||
const nomeCompleto = data.usuario.nome; // Nome completo do usuário
|
||||
const primeiroNome = nomeCompleto.split(' ')[0].substring(0, 10); // Pega o primeiro nome e limita a 10 caracteres // Limita a 10 caracteres;
|
||||
|
||||
const Empresa = data.empresa.nome;
|
||||
const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
|
||||
//const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
|
||||
|
|
@ -72,10 +76,10 @@ async function criarBlocos() {
|
|||
// Acessando o primeiro objeto do array retornado
|
||||
|
||||
console.log(data);
|
||||
console.log(primeiroNome);
|
||||
console.log(nomeCompleto);
|
||||
console.log(Empresa);
|
||||
console.log('teste -' + ImagemUser);
|
||||
console.log(logoEmpresa);
|
||||
console.log('Link da imagem de perfil -' + ImagemUser);
|
||||
console.log('Link da Logo -' + logoEmpresa);
|
||||
|
||||
|
||||
//var visuMonitor = usuarioInfo.Permissoes_Monitor;
|
||||
|
|
@ -170,7 +174,7 @@ async function criarBlocos() {
|
|||
|
||||
<div class="filheira">
|
||||
|
||||
<h2> ${primeiroNome} </h2>
|
||||
<h2> ${nomeCompleto} </h2>
|
||||
|
||||
<h2> ${Empresa} </h2>
|
||||
|
||||
|
|
@ -288,7 +292,7 @@ async function criarBlocos() {
|
|||
`
|
||||
const construido = true;
|
||||
|
||||
;
|
||||
|
||||
localStorage.setItem('construido', JSON.stringify(construido));
|
||||
|
||||
var botao = document.getElementById('id_ajuste');
|
||||
|
|
@ -326,20 +330,12 @@ async function criarBlocos() {
|
|||
|
||||
//construtor da reação do menu sobre as interações do usuário
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
} catch (error) {
|
||||
|
||||
|
||||
//Constante de controle sobre estilos css do painel de erro.
|
||||
const estilos = document.getElementById('conexao');
|
||||
estilos.href = '../Css/page/Telas_acao/erro_404.css';
|
||||
|
||||
|
||||
//variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
|
||||
//o Status do erro
|
||||
|
|
@ -361,26 +357,51 @@ async function criarBlocos() {
|
|||
|
||||
const respostaserver = response.status
|
||||
|
||||
|
||||
let Status = 'Erro 404';
|
||||
let mensagem = 'Desculpe mas sua página não foi encontrada';
|
||||
let sub_mensagem = 'Tente fazer seu, login novamente';
|
||||
let button_info = 'Retorne';
|
||||
let button_acao = '/Sites/Site_ItGuys/ambiente_do_usuário/login.html';
|
||||
let estilo = './Css/page/Telas_acao/erro_404_Front.css';
|
||||
|
||||
|
||||
|
||||
if (respostaserver == 401) {
|
||||
|
||||
var Status = 'Erro 401';
|
||||
var mensagem = 'Desculpe mas sua página não foi encontrada';
|
||||
var sub_mensagem = 'Tente fazer seu, login novamente';
|
||||
var button_info = 'Retorne';
|
||||
var button_acao = '/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/login.html';
|
||||
Status = 'Erro 404';
|
||||
mensagem = 'Desculpe mas sua página não foi encontrada';
|
||||
sub_mensagem = 'Tente fazer seu, login novamente';
|
||||
button_info = 'Retorne';
|
||||
button_acao = '/Sites/Site_ItGuys/ambiente_do_usuário/login.html';
|
||||
estilo = './Css/page/Telas_acao/erro_404_Front.css';
|
||||
|
||||
}
|
||||
|
||||
if (respostaserver == 502) {
|
||||
|
||||
Status = 'Erro 404';
|
||||
mensagem = 'Estamos realizando manutenções';
|
||||
sub_mensagem = 'Tente fazer seu, login um outro momento';
|
||||
button_info = 'Retorne';
|
||||
button_acao = '/Sites/Site_ItGuys/ambiente_do_usuário/login.html';
|
||||
estilo = './Css/page/Telas_acao/erro_404_Back.css';
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (respostaserver == 404) {
|
||||
|
||||
var Status = 'Erro 404';
|
||||
var mensagem = 'Houve um problema com seu ambiente !!';
|
||||
var sub_mensagem = 'Por favor contate o suporte suporte@itguys.com.br';
|
||||
var button_info = 'Nós contate';
|
||||
var button_acao = 'https://api.whatsapp.com/send?phone=5521966344698';
|
||||
Status = 'Erro 404';
|
||||
mensagem = 'Houve um problema inesperado';
|
||||
sub_mensagem = 'Por favor contate o suporte suporte@itguys.com.br';
|
||||
button_info = 'Nós contate';
|
||||
button_acao = 'https://api.whatsapp.com/send?phone=5521966344698';
|
||||
estilo = './Css/page/Telas_acao/erro_404_Front.css';
|
||||
|
||||
}
|
||||
|
||||
estilos.href = estilo;
|
||||
|
||||
//Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
|
||||
const erro = document.getElementById('entrada_1');
|
||||
|
|
@ -515,12 +536,14 @@ async function loadBackgroundAndUpdateStyle() {
|
|||
console.error('Erro ao carregar a imagem de fundo:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Inicia o carregamento das imagens quando o script for carregado
|
||||
document.addEventListener('DOMContentLoaded', async () => {
|
||||
// Aguarda o carregamento completo do DOM
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
setTimeout(async () => {
|
||||
await criarBlocos();
|
||||
await loadBackgroundAndUpdateStyle();
|
||||
|
||||
setTimeout(localStorage.setItem('Carregou', 'true'), 500) // Salva um valor no localStorage
|
||||
}, 3000); // Executa as funções 3 segundos após o carregamento do DOM
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
function TeladeErro(Status, mensagem, sub_mensagem, button_info, button_acao) {
|
||||
|
||||
return `
|
||||
<section class="matriz_404" id="cap">'
|
||||
|
||||
<section class="paineis_1"><div class="cap"><h1>${Status}</h1></div></section>
|
||||
|
||||
<section class="paineis_2">
|
||||
|
||||
<div class="cap"><h2> ${mensagem}</h2><p> ${sub_mensagem} </p></div>
|
||||
|
||||
<div class="cap_2"><a href=" ${button_acao}"><button>${button_info}</button></a></div>
|
||||
|
||||
</section>
|
||||
|
||||
<div class="wave wave_1"></div>
|
||||
|
||||
<div class="wave wave_2"></div>
|
||||
|
||||
<div class="wave wave_3"></div>
|
||||
|
||||
<div class="wave wave_4"></div>
|
||||
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
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)
|
||||
|
||||
|
||||
let Status = 'Erro 404';
|
||||
let mensagem = 'Desculpe mas sua página não foi encontrada';
|
||||
let sub_mensagem = 'Tente fazer seu, login novamente';
|
||||
let button_info = 'Retorne';
|
||||
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';
|
||||
mensagem = 'Desculpe mas sua página não foi encontrada';
|
||||
sub_mensagem = 'Tente fazer seu, login novamente';
|
||||
button_info = 'Retorne';
|
||||
button_acao = '/Sites/Site_ItGuys/ambiente_do_usuário/login.html';
|
||||
estilo = './Css/page/Telas_acao/erro_404_Front.css';
|
||||
|
||||
}
|
||||
|
||||
if (Resposta == 502) {
|
||||
|
||||
Status = 'Erro 404';
|
||||
mensagem = 'Estamos realizando manutenções';
|
||||
sub_mensagem = 'Tente fazer seu, login um outro momento';
|
||||
button_info = 'Retorne';
|
||||
button_acao = '/Sites/Site_ItGuys/ambiente_do_usuário/login.html';
|
||||
estilo = './Css/page/Telas_acao/erro_404_Back.css';
|
||||
|
||||
}
|
||||
|
||||
|
||||
if (Resposta == 404) {
|
||||
|
||||
Status = 'Erro 404';
|
||||
mensagem = 'Houve um problema inesperado';
|
||||
sub_mensagem = 'Por favor contate o suporte suporte@itguys.com.br';
|
||||
button_info = 'Nós contate';
|
||||
button_acao = 'https://api.whatsapp.com/send?phone=5521966344698';
|
||||
estilo = './Css/page/Telas_acao/erro_404_Front.css';
|
||||
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,51 +1,16 @@
|
|||
async function respostaServer() {
|
||||
// Função para obter a URL base da API
|
||||
async function getApiUrl() {
|
||||
try {
|
||||
const response = await fetch('../../../Sites/Site_ItGuys/php/config_url.php');
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
const data = await response.json();
|
||||
return data.apiUrl;
|
||||
} catch (error) {
|
||||
console.error('Error fetching API URL:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Função para obter o token do localStorage
|
||||
function getAuthToken() {
|
||||
return localStorage.getItem('x-access-token');
|
||||
}
|
||||
|
||||
// Obtenha a URL da API e o token
|
||||
const apiUrl = await getApiUrl();
|
||||
const token = getAuthToken();
|
||||
|
||||
return { apiUrl, token }; // Retorne os valores
|
||||
}
|
||||
|
||||
// Função para verificar o ambiente do usuário
|
||||
async function verificarAmbiente() {
|
||||
|
||||
|
||||
try {
|
||||
const { apiUrl, token } = await respostaServer(); // Desestruture a resposta
|
||||
|
||||
const response = await fetch(`${apiUrl}/mounting`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-access-token': token || '' // Use um fallback para token
|
||||
}
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erro na requisição: ' + response.statusText);
|
||||
}
|
||||
const { response } = await Autenticao(); // Recebe o objeto com response e apiUrl
|
||||
const data = await response.json(); // Faz o parse do JSON retornado
|
||||
|
||||
const data = await response.json();
|
||||
const nameuser = data.usuario.nome || 'Visitante'; // Fallback caso o nome não esteja definido
|
||||
const primeiroNomeuser = nameuser.split(' ')[0].substring(0, 10);
|
||||
// Verifica se data.usuario.nome existe
|
||||
const nameuser = data?.usuario?.nome;
|
||||
|
||||
const main = document.getElementById("entrada_1");
|
||||
const tela_laod = document.getElementById('entrada_2');
|
||||
|
|
@ -54,9 +19,12 @@ async function verificarAmbiente() {
|
|||
let elemento_2;
|
||||
|
||||
if (main.innerHTML.trim() === "") {
|
||||
elemento_1 = 'Estamos carregando sua página';
|
||||
// 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 = 'Seja bem-vindo, ' + primeiroNomeuser; // Corrigido para concatenar corretamente
|
||||
elemento_1 = 'Carregando....'; // Caso o nome seja nulo ou indefinido
|
||||
}
|
||||
}
|
||||
|
||||
elemento_2 = '<canvas id="animationCanvas"></canvas>';
|
||||
|
|
@ -73,10 +41,16 @@ async function verificarAmbiente() {
|
|||
}
|
||||
|
||||
function finalizar() {
|
||||
const interval = setInterval(() => {
|
||||
const tela_laod = document.getElementById('entrada_2');
|
||||
setTimeout(() => {
|
||||
tela_laod.innerHTML = '';
|
||||
}, 3000);
|
||||
const carregou = localStorage.getItem('Carregou');
|
||||
|
||||
if (carregou === 'true') {
|
||||
tela_laod.innerHTML = ''; // Limpa o conteúdo do elemento
|
||||
localStorage.removeItem('Carregou'); // Remove o item do localStorage
|
||||
clearInterval(interval); // Para de verificar
|
||||
}
|
||||
}, 3500); // Verifica a cada 500ms
|
||||
}
|
||||
|
||||
function iniciarAnimacao() {
|
||||
|
|
|
|||
|
|
@ -58,13 +58,48 @@ function setupUserServices(Data_Center) {
|
|||
nome: 'Resetar senha',
|
||||
imagem: '../../Acessts/Imagens/Iconis/ferramentas.png',
|
||||
id_server: 'serv_gat_2',
|
||||
resposta_popup: '<h1>Olá do Resetar Senha!</h1>',
|
||||
resposta_script: `console.log('Script para Resetar Senha');`,
|
||||
resposta_popup: createFormeZabix(),
|
||||
resposta_script: `../js/page/Ambiente/Service/List/teste.js`,
|
||||
resposta_estilo: `document.body.style.backgroundColor = '#f0f0f0';`
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function createFormeZabix() {
|
||||
return `
|
||||
<form id="form" class='control'>
|
||||
<div class='formulario'>
|
||||
<h2>Preencha o Formulario</h2>
|
||||
</div>
|
||||
<div class='formulario'>
|
||||
<label for="mac_equipamento">MAC Equipamento:</label>
|
||||
<input type="text" id="mac_equipamento" name="mac_equipamento" required><br>
|
||||
</div>
|
||||
<div class='formulario'>
|
||||
<label for="nome_cliente">Nome do Cliente:</label>
|
||||
<input type="text" id="nome_cliente" name="nome_cliente" required><br>
|
||||
</div>
|
||||
<div class='formulario'>
|
||||
<label for="nome_setor">Nome do Setor:</label>
|
||||
<input type="text" id="nome_setor" name="nome_setor" required><br>
|
||||
</div>
|
||||
<div class='formulario'>
|
||||
<label for="usuario_sip">Usuário SIP:</label>
|
||||
<input type="text" id="usuario_sip" name="usuario_sip" required><br>
|
||||
</div>
|
||||
<div class='formulario'>
|
||||
<label for="senha_sip">Senha SIP:</label>
|
||||
<input type="password" id="senha_sip" name="senha_sip" required><br>
|
||||
</div>
|
||||
<div class='formulario'>
|
||||
<button type="button" onclick="gerarArquivo()">Gerar Arquivo</button>
|
||||
</div>
|
||||
</form>`;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function createService({ nome, imagem, id_server, resposta_popup, resposta_script, resposta_estilo }) {
|
||||
return {
|
||||
nome,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
async function criarBlocos() {
|
||||
|
||||
|
||||
|
||||
|
||||
// Função para obter a URL base da API
|
||||
async function getApiUrl() {
|
||||
try {
|
||||
const response = await fetch('../../../Site_ItGuys/php/config_url.php'); // Solicita a URL base do PHP
|
||||
if (!response.ok) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
const data = await response.json();
|
||||
return data.apiUrl; // Retorna a URL base
|
||||
} catch (error) {
|
||||
console.error('Error fetching API URL:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Função para obter o token do localStorage
|
||||
function getAuthToken() {
|
||||
return localStorage.getItem('x-access-token');
|
||||
}
|
||||
|
||||
try {
|
||||
// Obtém a URL da API e o token JWT
|
||||
const apiUrl = await getApiUrl();
|
||||
const token = getAuthToken();
|
||||
|
||||
// Faz a requisição para obter os dados da rota /tickets
|
||||
const response = await fetch(`${apiUrl}/tickets`, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-access-token': token ? token : ''
|
||||
},
|
||||
});
|
||||
|
||||
// Verifica se a resposta foi bem-sucedida
|
||||
if (!response.ok) {
|
||||
console.log("Seu token tenha uma boa tarefa - " + token)
|
||||
throw new Error(`Erro na requisição: ${response.status} - ${response.statusText}`);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// Converte a resposta para JSON
|
||||
const data = await response.json();
|
||||
|
||||
// Log ou manipulação dos dados retornados
|
||||
console.log('Requisição bem-sucedida:', data);
|
||||
} catch (error) {
|
||||
// Tratamento de erros
|
||||
console.error('Erro ao executar a requisição:', error.message);
|
||||
// Aqui você pode adicionar lógica adicional, como exibir uma mensagem de erro no front-end
|
||||
}
|
||||
}
|
||||
|
||||
// Chama a função para criar os blocos
|
||||
criarBlocos();
|
||||
Loading…
Reference in New Issue