diff --git a/Acessts/Imagens/Iconis/engrenagem - Line.png b/Acessts/Imagens/Iconis/engrenagem - Line.png new file mode 100644 index 0000000..1ad7673 Binary files /dev/null and b/Acessts/Imagens/Iconis/engrenagem - Line.png differ diff --git a/Acessts/Imagens/Iconis/group.png b/Acessts/Imagens/Iconis/group.png new file mode 100644 index 0000000..4705703 Binary files /dev/null and b/Acessts/Imagens/Iconis/group.png differ diff --git a/Ambiente_Usuario.html b/Ambiente_Usuario.html index 1b88b03..5741b04 100644 --- a/Ambiente_Usuario.html +++ b/Ambiente_Usuario.html @@ -1,5 +1,5 @@ - + @@ -11,13 +11,22 @@ - + + + + + + + + + + Ambiente do Usuario - - + @@ -34,6 +43,9 @@ +
+ + diff --git a/Css/global/Scroll.css b/Css/global/Scroll.css new file mode 100644 index 0000000..813d6d4 --- /dev/null +++ b/Css/global/Scroll.css @@ -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 */ +} \ No newline at end of file diff --git a/Css/global/import.css b/Css/global/import.css index 96eade1..f098f0f 100644 --- a/Css/global/import.css +++ b/Css/global/import.css @@ -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; diff --git a/Css/page/Ambiente/Config/Ambientes/AmbientesConfig.css b/Css/page/Ambiente/Config/Ambientes/AmbientesConfig.css index 3c6432d..4982e58 100644 --- a/Css/page/Ambiente/Config/Ambientes/AmbientesConfig.css +++ b/Css/page/Ambiente/Config/Ambientes/AmbientesConfig.css @@ -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); \ No newline at end of file diff --git a/Css/page/Ambiente/Config/Ambientes/Componentes/Ambientes.css b/Css/page/Ambiente/Config/Ambientes/Componentes/Ambientes.css index a6e3d35..bf1fd48 100644 --- a/Css/page/Ambiente/Config/Ambientes/Componentes/Ambientes.css +++ b/Css/page/Ambiente/Config/Ambientes/Componentes/Ambientes.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; -} \ No newline at end of file +} + +/* ================================= Fechamento ======================================== */ \ No newline at end of file diff --git a/Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesAlertas.css b/Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesAlertas.css index 6e7fbe1..15d5d4e 100644 --- a/Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesAlertas.css +++ b/Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesAlertas.css @@ -54,6 +54,8 @@ background: none; outline: none; border: none; + + cursor: pointer; } diff --git a/Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesRelatorios.css b/Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesRelatorios.css index 9c0fc41..10ad6dc 100644 --- a/Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesRelatorios.css +++ b/Css/page/Ambiente/Config/Ambientes/Componentes/AmbientesRelatorios.css @@ -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); } \ No newline at end of file diff --git a/Css/page/Ambiente/Config/Ambientes/Componentes/Aplicacoes.css b/Css/page/Ambiente/Config/Ambientes/Componentes/Aplicacoes.css new file mode 100644 index 0000000..dbcc94e --- /dev/null +++ b/Css/page/Ambiente/Config/Ambientes/Componentes/Aplicacoes.css @@ -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 ===============================================*/ \ No newline at end of file diff --git a/Css/page/Ambiente/Config/Ambientes/Painel/CriacaoAmbientepop.css b/Css/page/Ambiente/Config/Ambientes/Painel/CriacaoAmbientepop.css new file mode 100644 index 0000000..10cc806 --- /dev/null +++ b/Css/page/Ambiente/Config/Ambientes/Painel/CriacaoAmbientepop.css @@ -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 ===========================================*/ \ No newline at end of file diff --git a/Css/page/Ambiente/Config/Ambientes/Painel/EdicaoAmbientespop.css b/Css/page/Ambiente/Config/Ambientes/Painel/EdicaoAmbientespop.css index bac05dc..9332d52 100644 --- a/Css/page/Ambiente/Config/Ambientes/Painel/EdicaoAmbientespop.css +++ b/Css/page/Ambiente/Config/Ambientes/Painel/EdicaoAmbientespop.css @@ -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; diff --git a/Css/page/Ambiente/Config/Ambientes/Painel/Painelpopup.css b/Css/page/Ambiente/Config/Ambientes/Painel/Painelpopup.css index 614d055..9327429 100644 --- a/Css/page/Ambiente/Config/Ambientes/Painel/Painelpopup.css +++ b/Css/page/Ambiente/Config/Ambientes/Painel/Painelpopup.css @@ -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; diff --git a/Css/page/Ambiente/Config/Ambientes/Painel/RelatoriosAmbientespop.css b/Css/page/Ambiente/Config/Ambientes/Painel/RelatoriosAmbientespop.css new file mode 100644 index 0000000..9c89e61 --- /dev/null +++ b/Css/page/Ambiente/Config/Ambientes/Painel/RelatoriosAmbientespop.css @@ -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); + + +} \ No newline at end of file diff --git a/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_1.css b/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_1.css index 375db01..d77f79c 100644 --- a/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_1.css +++ b/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_1.css @@ -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)); -} \ No newline at end of file +} + +/* ========================================= Fechamento do bloco de busca =============================================== */ \ No newline at end of file diff --git a/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_2.css b/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_2.css index 23c6bf1..ef49ea7 100644 --- a/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_2.css +++ b/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_2.css @@ -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 */ } \ No newline at end of file diff --git a/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_3.css b/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_3.css index 027f80c..7c16cdb 100644 --- a/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_3.css +++ b/Css/page/Ambiente/Config/Ambientes/estrutura/Sec_Cap_3.css @@ -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; diff --git a/Css/page/Ambiente/Config/Estrutura/menu.css b/Css/page/Ambiente/Config/Estrutura/menu.css index d075577..d0de881 100644 --- a/Css/page/Ambiente/Config/Estrutura/menu.css +++ b/Css/page/Ambiente/Config/Estrutura/menu.css @@ -140,6 +140,8 @@ body { align-content: center; gap: 0.5vw; + cursor: pointer; + } .contener_1 .opicao .retrato, diff --git a/Css/page/Telas_acao/erro_404.css b/Css/page/Telas_acao/erro_404_Back.css similarity index 97% rename from Css/page/Telas_acao/erro_404.css rename to Css/page/Telas_acao/erro_404_Back.css index f7f4a32..70ff67a 100644 --- a/Css/page/Telas_acao/erro_404.css +++ b/Css/page/Telas_acao/erro_404_Back.css @@ -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; diff --git a/Css/page/Telas_acao/erro_404_Front.css b/Css/page/Telas_acao/erro_404_Front.css new file mode 100644 index 0000000..d23bbd9 --- /dev/null +++ b/Css/page/Telas_acao/erro_404_Front.css @@ -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; + } + +} \ No newline at end of file diff --git a/js/global/Modulo_de_Comunicacao/Funcao/Comunicacao.js b/js/global/Modulo_de_Comunicacao/Funcao/Comunicacao.js new file mode 100644 index 0000000..685ce54 --- /dev/null +++ b/js/global/Modulo_de_Comunicacao/Funcao/Comunicacao.js @@ -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'); +} diff --git a/js/global/Modulo_de_Insercao_Html/Funcao/Inserirscripts.js b/js/global/Modulo_de_Insercao_Html/Funcao/Inserirscripts.js new file mode 100644 index 0000000..613922b --- /dev/null +++ b/js/global/Modulo_de_Insercao_Html/Funcao/Inserirscripts.js @@ -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.'); +}); diff --git a/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes.js b/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes.js index ea52c19..bb21d08 100644 --- a/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes.js +++ b/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes.js @@ -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,148 +13,225 @@ 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 += ` - -
-
- Logo da Itguys -
-
-
-

${nome}

-
-
- - -
-
-
- -
-
- -` +
+
+ Logo da ${nome} +
+
+
+

${nome}

+
+
+ + +
+
+
+ +
+
+ `; } - - // 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 `
- -
- +

Informações do Ambiente

-
- +
-
- +
-
- -
- + +

Informações do Cliente

-
- +
-
- - - + + +
- -
- -
- - - + +
+
+

Alinhamento do Ambiente

+
+
+
+
+

Dashbords

+
+
+ + +
+
+ +
+
+

Nome da Dashbord

+ +
+
+
+ +
+
+
+

Grupos

+
+
+ + +
+
+
+
+

Nome da Dashbord

+ +
+
+
-
- `; - } + // 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 ` -
- +
+
@@ -192,9 +269,7 @@ function FormeEditarAmbiente(Empresa) {

Nome da Dashbord

-
-
@@ -214,36 +289,27 @@ function FormeEditarAmbiente(Empresa) {

Nome do Grupo

-
-
-
- `; } 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 = ``; - - } - - } - } } } diff --git a/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesAlertas.js b/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesAlertas.js index 7b996bf..311301c 100644 --- a/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesAlertas.js +++ b/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesAlertas.js @@ -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'); + + // 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 ` + +
-
+ +
+
+

Nome da Empresa

+
+
+ + +
-
-
-

Nome da Empresa

-
-
- -
+ +
+

mensagem de status do ambiente

+
+ + +
+ +
-
-

mensagem de status do ambiente

-
- -
- -
+ +
+

OFF

+
-
-

OFF

-
- -
- -
- -` +
+
+ `; } diff --git a/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesRelatorio.js b/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesRelatorio.js index 95e2a88..3bbbf81 100644 --- a/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesRelatorio.js +++ b/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/AmbientesRelatorio.js @@ -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 ` - +
+ +

Controle de Ambiente

+
+
+
+ + + + +
+ +
+ +
+ + +
+
+ +
` - +} + +// 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 += ` `; + } + + 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 ` +
+ +
+
+

Relatório de Número - ${Id}

+
+
+

No Ambiente ${Empresa} - ${Ocorrido} às ${Data}

+

+ `; + } + + // 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 += ` `; + } + + 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 ` +
+ +
+
+

Relatório de Número - ${Id}

+
+
+

No Ambiente ${Empresa} - ${Ocorrido} às ${Data}

+

+ `; + } + + // 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 += ` `; + } + + 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 ` +
+ +
+
+

Relatório de Número - ${Id}

+
+
+

No Ambiente ${Empresa} - ${Ocorrido} às ${Data}

+

+ `; + } + + // 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. + } + } + } + } + } + } } diff --git a/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes_Root.js b/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes_Root.js index 3f00b7d..60ba2a8 100644 --- a/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes_Root.js +++ b/js/page/Ambiente/Config/Estrutural_config/Modulo_Construcao/Funcao/Ambientes_Root.js @@ -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,12 +23,12 @@ function surgirAmbiente() { } +//Estrutura Html que está sendo usada function EstruturaPrincipal() { return ` -
- +
@@ -59,23 +63,8 @@ function EstruturaPrincipal() {
-
-
-

Controle de Ambiente

-
-
-
- - - -
-
- -
- - -
-
+
+
@@ -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'; diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Autencacao.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Autencacao.js new file mode 100644 index 0000000..9c4ed22 --- /dev/null +++ b/js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Autencacao.js @@ -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 +} diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Controlador_telas.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Controlador_telas.js new file mode 100644 index 0000000..8949d72 --- /dev/null +++ b/js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Controlador_telas.js @@ -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 ` + + +
+ +
+ +
+ + + +
+ +
+ + + +
+ +
+ +
+ + + +
+ +
+ + `; + } + + + 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 +}); + diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Estrutura_primaria.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Estrutura_primaria.js index b25254f..a360c25 100644 --- a/js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Estrutura_primaria.js +++ b/js/page/Ambiente/Estrutura/Modulo_Construcao/Funcao/Estrutura_primaria.js @@ -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() {
-

${primeiroNome}

+

${nomeCompleto}

${Empresa}

@@ -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 () => { - await criarBlocos(); - await loadBackgroundAndUpdateStyle(); - +// 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 }); + diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Html_erro.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Html_erro.js new file mode 100644 index 0000000..4c54a10 --- /dev/null +++ b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Html_erro.js @@ -0,0 +1,26 @@ +function TeladeErro(Status, mensagem, sub_mensagem, button_info, button_acao) { + + return ` +
' + +

${Status}

+ +
+ +

${mensagem}

${sub_mensagem}

+ + + +
+ +
+ +
+ +
+ +
+ +
+ `; +} \ No newline at end of file diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Painel_Erro.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Painel_Erro.js new file mode 100644 index 0000000..e640c14 --- /dev/null +++ b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Erro/Painel_Erro.js @@ -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); + +} + diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Estrutura/Estrutura.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Estrutura/Estrutura.js new file mode 100644 index 0000000..e69de29 diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Estrutura/Html_estrutura.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Estrutura/Html_estrutura.js new file mode 100644 index 0000000..e69de29 diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Home/Func_Home.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Home/Func_Home.js new file mode 100644 index 0000000..e69de29 diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Home/Html_Home.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Home/Html_Home.js new file mode 100644 index 0000000..e69de29 diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Monitoramento/Func_Moni.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Monitoramento/Func_Moni.js new file mode 100644 index 0000000..e69de29 diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Monitoramento/Html_Moni.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/Monitoramento/Html_Moni.js new file mode 100644 index 0000000..e69de29 diff --git a/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/load.js b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/load.js index fb988cd..9a93ab2 100644 --- a/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/load.js +++ b/js/page/Ambiente/Estrutura/Modulo_Construcao/Painel/load.js @@ -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'; - } else { - elemento_1 = 'Seja bem-vindo, ' + primeiroNomeuser; // Corrigido para concatenar corretamente + // Verificação para saber se o nome existe + if (nameuser) { + elemento_1 = 'Seja bem-vindo, ' + nameuser; // Se o nome estiver disponível + } else { + elemento_1 = 'Carregando....'; // Caso o nome seja nulo ou indefinido + } } elemento_2 = ''; @@ -73,10 +41,16 @@ async function verificarAmbiente() { } function finalizar() { - const tela_laod = document.getElementById('entrada_2'); - setTimeout(() => { - tela_laod.innerHTML = ''; - }, 3000); + const interval = setInterval(() => { + const tela_laod = document.getElementById('entrada_2'); + 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() { diff --git a/js/page/Ambiente/Service/Datas_service.js b/js/page/Ambiente/Service/Datas_service.js index 15f84a7..ac2f92c 100644 --- a/js/page/Ambiente/Service/Datas_service.js +++ b/js/page/Ambiente/Service/Datas_service.js @@ -58,13 +58,48 @@ function setupUserServices(Data_Center) { nome: 'Resetar senha', imagem: '../../Acessts/Imagens/Iconis/ferramentas.png', id_server: 'serv_gat_2', - resposta_popup: '

Olá do Resetar Senha!

', - 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 ` +
+
+

Preencha o Formulario

+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
`; +} + + + + function createService({ nome, imagem, id_server, resposta_popup, resposta_script, resposta_estilo }) { return { nome, diff --git a/js/page/Ambiente/Service/List/teste.js b/js/page/Ambiente/Service/List/teste.js new file mode 100644 index 0000000..c2dd4ef --- /dev/null +++ b/js/page/Ambiente/Service/List/teste.js @@ -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();