Atualização 7 - Alinhando a estruturas do ambiente do usuário
This commit is contained in:
daivid.alves
parent
4c54f21b32
commit
7196ff16ef
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
|
|
@ -8,27 +8,32 @@
|
||||||
<meta http-equiv="Feature-Policy"
|
<meta http-equiv="Feature-Policy"
|
||||||
content="geolocation 'none'; microphone 'none'; camera 'none'; fullscreen 'none'; payment 'none'; vr 'none'; autoplay 'none'; accelerometer 'none'; ambient-light-sensor 'none'; gyroscope 'none'; magnetometer 'none';picture-in-picture 'none';sync-xhr 'none'; usb 'none';clipboard-write 'none'; clipboard-read 'none'; payments 'none'; ">
|
content="geolocation 'none'; microphone 'none'; camera 'none'; fullscreen 'none'; payment 'none'; vr 'none'; autoplay 'none'; accelerometer 'none'; ambient-light-sensor 'none'; gyroscope 'none'; magnetometer 'none';picture-in-picture 'none';sync-xhr 'none'; usb 'none';clipboard-write 'none'; clipboard-read 'none'; payments 'none'; ">
|
||||||
|
|
||||||
<link id="conexao" rel="stylesheet" href="../Css/page/Telas_acao/load.css">
|
<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="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
||||||
<link rel="stylesheet" href="./Css/page/Telas_acao/erro_404.css">
|
<link rel="stylesheet" href="./Css/page/Telas_acao/erro_404.css">
|
||||||
<style id="fundouser">
|
<style id="fundouser">
|
||||||
</style>
|
</style>
|
||||||
<title>Ambiente do Usuario</title>
|
<title>Ambiente do Usuario</title>
|
||||||
|
|
||||||
|
<script defer src="./js/Ambiente/Estrutura/load.js"></script>
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
|
||||||
|
|
||||||
|
<body class="estrutura">
|
||||||
|
|
||||||
|
<div id="entrada_2">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Seu conteúdo principal aqui -->
|
|
||||||
<main id="entrada_1">
|
<main id="entrada_1">
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
<!--padrao_A1 reponsavel ter toda a estrutura que aplicara o data na tela-->
|
<script defer src="./js/Ambiente/Estrutura/Estrutura_primaria.js"></script>
|
||||||
<script src="./js/padrao_A1.js"></script>
|
|
||||||
<script src="./js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js"></script>
|
|
||||||
<script src="./js/Ambiente/Estrutura/load.js"></script>
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -0,0 +1,12 @@
|
||||||
|
@import url(./estrutura_menu.css);
|
||||||
|
@import url(./menu_hover.css);
|
||||||
|
@import url(./sec_cap_1.css);
|
||||||
|
@import url(./sec_cap_2.css);
|
||||||
|
@import url(./tela_hover.css);
|
||||||
|
|
||||||
|
@import url(../../../../Css/global/import.css);
|
||||||
|
|
||||||
|
.estrutura {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,254 @@
|
||||||
|
.menu_lateral {
|
||||||
|
|
||||||
|
width: 3.6vw;
|
||||||
|
height: 100vh;
|
||||||
|
transition: 1s ease;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 {
|
||||||
|
width: 3.6vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: var(--Cor_Segundaria_5_1);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_1 {
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 10vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: start;
|
||||||
|
justify-content: center;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_1 .subcolunas_1 {
|
||||||
|
margin-top: 2vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_1 .subcolunas_1 img {
|
||||||
|
width: 2.3vw;
|
||||||
|
filter: drop-shadow(2px 5px 0px var(--Cor_Segundaria_5_2));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 {
|
||||||
|
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 90vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: 1s ease;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 1.8vw;
|
||||||
|
filter: drop-shadow(2px 5px 0px var(--Cor_Segundaria_5_2));
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 .subcolunas_1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 70vh;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 .subcolunas_2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 20vh;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_2 {
|
||||||
|
width: 0vw;
|
||||||
|
|
||||||
|
height: 100vh;
|
||||||
|
background-color: var(--Cor_Segundaria_5_1);
|
||||||
|
overflow: hidden;
|
||||||
|
transition: 1s ease;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 30vh;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
background-image: url(../../../../Acessts/Imagens/1605305486169.jpg);
|
||||||
|
background-position: center;
|
||||||
|
background-size: cover;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_1 .subcolunas_1 {
|
||||||
|
width: 25vw;
|
||||||
|
height: 30vh;
|
||||||
|
background-color: rgba(0, 0, 0, 0.341);
|
||||||
|
backdrop-filter: blur(3px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_1 .subcolunas_1 .filheira {
|
||||||
|
font-family: var(--font_titulo);
|
||||||
|
color: var(--Matriz);
|
||||||
|
font-size: 0vw;
|
||||||
|
filter: blur(5px);
|
||||||
|
|
||||||
|
|
||||||
|
opacity: 0;
|
||||||
|
text-align: center;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.seguimentacao_2 .subcolunas_1 .filheira img {
|
||||||
|
width: 0vw;
|
||||||
|
opacity: 0;
|
||||||
|
filter: blur(5px);
|
||||||
|
border-radius: 100%;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_1 .subcolunas_1 .filheira h2 {
|
||||||
|
margin-bottom: -2vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_1 .subcolunas_2 {
|
||||||
|
|
||||||
|
width: 5vw;
|
||||||
|
height: 30vh;
|
||||||
|
|
||||||
|
background-color: #12365552;
|
||||||
|
backdrop-filter: blur(8px);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: start;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.subcolunas_2 button {
|
||||||
|
background: none;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
margin-top: 2vh;
|
||||||
|
margin-right: 0.5vw;
|
||||||
|
background-color: #c6c6c6;
|
||||||
|
|
||||||
|
width: 3vw;
|
||||||
|
height: 4vh;
|
||||||
|
|
||||||
|
font-family: var(--font_titulo);
|
||||||
|
color: var(--Matriz);
|
||||||
|
font-size: 0.9vw;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
box-shadow: -5px 5px 0px 2px #9a9a9a;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgjust {
|
||||||
|
width: 1vw;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_2 {
|
||||||
|
width: 96.1%;
|
||||||
|
height: 70vh;
|
||||||
|
|
||||||
|
padding-left: 0.3vw;
|
||||||
|
padding-right: 0.5vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_2 .subcolunas_1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 50vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.filheira_a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--Matriz);
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 .subcolunas_1 .filheira {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 .subcolunas_1 .filheira,
|
||||||
|
.seguimentacao_2 .coluna_2 .subcolunas_1 .filheira {
|
||||||
|
width: 100%;
|
||||||
|
height: 4vh;
|
||||||
|
margin-top: 2vh;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
font-family: var(--font_titulo);
|
||||||
|
|
||||||
|
font-size: 0.6vw;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_2 .subcolunas_2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 20vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 .subcolunas_2 .filheira {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 .subcolunas_2 .filheira,
|
||||||
|
.seguimentacao_2 .coluna_2 .subcolunas_2 .filheira {
|
||||||
|
width: 100%;
|
||||||
|
height: 4vh;
|
||||||
|
margin-top: 2vh;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
font-family: var(--font_titulo);
|
||||||
|
|
||||||
|
font-size: 0.6vw;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,151 @@
|
||||||
|
.menu_lateral:hover {
|
||||||
|
|
||||||
|
width: 20vw;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
.seguimentacao_2 {
|
||||||
|
width: 17vw;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_1 {
|
||||||
|
height: 30vh;
|
||||||
|
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 {
|
||||||
|
height: 70vh;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 .subcolunas_1 {
|
||||||
|
height: 50vh;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 .subcolunas_2 {
|
||||||
|
height: 20vh;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_1 .subcolunas_1 .filheira {
|
||||||
|
|
||||||
|
font-size: 0.9vw;
|
||||||
|
opacity: 1;
|
||||||
|
filter: blur(0px);
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.seguimentacao_2 .subcolunas_1 .filheira img {
|
||||||
|
width: 6vw;
|
||||||
|
height: 10vh;
|
||||||
|
opacity: 1;
|
||||||
|
filter: blur(0px);
|
||||||
|
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.menu_lateral.expansao {
|
||||||
|
|
||||||
|
|
||||||
|
width: 20vw;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
.seguimentacao_2 {
|
||||||
|
width: 17vw;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_1 {
|
||||||
|
height: 30vh;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 {
|
||||||
|
height: 70vh;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 .subcolunas_1 {
|
||||||
|
height: 50vh;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_1 .coluna_2 .subcolunas_2 {
|
||||||
|
height: 20vh;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_1 .subcolunas_1 .filheira {
|
||||||
|
|
||||||
|
font-size: 0.9vw;
|
||||||
|
opacity: 1;
|
||||||
|
filter: blur(0px);
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.seguimentacao_2 .subcolunas_1 .filheira img {
|
||||||
|
width: 6vw;
|
||||||
|
height: 10vh;
|
||||||
|
opacity: 1;
|
||||||
|
filter: blur(0px);
|
||||||
|
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imgjust {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--Cor_Segundaria_5_1);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_2 .subcolunas_1 .filheira:hover {
|
||||||
|
|
||||||
|
background-color: var(--Matriz);
|
||||||
|
border-radius: 2vw 0vw 0vw 2vw;
|
||||||
|
padding-left: 2vw;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.seguimentacao_2 .coluna_2 .subcolunas_2 .filheira:hover {
|
||||||
|
|
||||||
|
background-color: var(--Matriz);
|
||||||
|
border-radius: 2vw 0vw 0vw 2vw;
|
||||||
|
padding-left: 2vw;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.subcolunas_2 button:hover {
|
||||||
|
margin-right: 1vw;
|
||||||
|
|
||||||
|
background-color: var(--Cor_Segundaria_2_1);
|
||||||
|
box-shadow: 5px 5px 0px 2px var(--Cor_Segundaria_2_2);
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
/* -------------------
|
||||||
|
Estrutura de apresentação, possuindo a tela iframe, e cabeçario com o logo e o logout
|
||||||
|
-------------------------- */
|
||||||
|
|
||||||
|
/* -------------------
|
||||||
|
Cabeçario da tela
|
||||||
|
-------------------------- */
|
||||||
|
|
||||||
|
|
||||||
|
.capitulo_1 {
|
||||||
|
width: 96.4vw;
|
||||||
|
height: 10vh;
|
||||||
|
background-color: var(--Cor_Segundaria_5_1);
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.companyLogo {
|
||||||
|
width: 14vw;
|
||||||
|
margin-left: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Bloco_subcab1_2 {
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
padding-right: 2vw;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.Bloco_subcab1_2 button {
|
||||||
|
width: 10vw;
|
||||||
|
height: 5vh;
|
||||||
|
font-family: var(--font_titulo);
|
||||||
|
font-size: 1vw;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
background-color: var(--Matriz);
|
||||||
|
color: var(--Cor_Segundaria_5_1);
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Bloco_subcab1_2 button:hover {
|
||||||
|
|
||||||
|
border-left: 0.2vw solid var(--Matriz);
|
||||||
|
border-right: 0.2vw solid var(--Matriz);
|
||||||
|
border-top: 0.2vw solid var(--Matriz);
|
||||||
|
border-bottom: 0.2vw solid var(--Matriz);
|
||||||
|
|
||||||
|
background-color: var(--Cor_Segundaria_5_1);
|
||||||
|
color: var(--Matriz);
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.cabecario_2 {
|
||||||
|
width: 73%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: var(--Matriz);
|
||||||
|
height: 10vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Bloco_subcab2_1 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 8vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Bloco_subcab2_1 .icon_subcab1_1 {
|
||||||
|
width: 3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.Bloco_subcab2_2 .icon_subcab2_1 {
|
||||||
|
width: 2.5vw;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
/*--------------
|
||||||
|
Tela de apresentação de conteudo
|
||||||
|
------------------*/
|
||||||
|
|
||||||
|
|
||||||
|
.capitulo_2 {
|
||||||
|
width: 96.4vw;
|
||||||
|
height: 90vh;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 10vh;
|
||||||
|
z-index: -1;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transmissão {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.Corpo_2 .Colunas_1 .transmissão.expansao {
|
||||||
|
|
||||||
|
width: 81vw;
|
||||||
|
height: 82vh;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
.capitulo_1.expansao {
|
||||||
|
width: 80vw;
|
||||||
|
z-index: 1;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capitulo_2.expansao {
|
||||||
|
width: 80vw;
|
||||||
|
z-index: 1;
|
||||||
|
transition: 1s ease;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
@import url(../../../global/import.css);
|
||||||
|
@import url(./sec_cap_1.css);
|
||||||
|
@import url(./sec_cap_2.css);
|
||||||
|
@import url(./pop_up.css);
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
.popup_contener {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
top: 10vh;
|
||||||
|
left: 20vw;
|
||||||
|
padding: 2vw;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
width: 50vw;
|
||||||
|
height: 70vh;
|
||||||
|
background-color: var(--Cor_Segundaria_5_1);
|
||||||
|
box-shadow: 10px 10px 0px var(--Cor_Segundaria_5_2);
|
||||||
|
animation: surgirpopupcenter 1s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes surgirpopupcenter {
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.colun_1 {
|
||||||
|
width: 50vw;
|
||||||
|
height: 8vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colun_1 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.colun_1 button:hover {
|
||||||
|
background-color: var(--Cor_Segundaria_2_1);
|
||||||
|
box-shadow: -5px 5px 0px var(--Cor_Segundaria_2_2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.colun_2 {
|
||||||
|
width: 50vw;
|
||||||
|
height: 62vh;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,62 @@
|
||||||
|
.capitulo_1 {
|
||||||
|
width: 100%;
|
||||||
|
height: 20vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: end;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
margin-bottom: 2vh;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.campo {
|
||||||
|
width: 70;
|
||||||
|
height: 10vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: end;
|
||||||
|
padding-right: 2vw;
|
||||||
|
gap: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.campo input {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: none;
|
||||||
|
|
||||||
|
|
||||||
|
border: 0.2vw solid var(--Cor_Segundaria_2_1);
|
||||||
|
box-shadow: 5px 5px 0px 2px var(--Cor_Segundaria_2_2);
|
||||||
|
font-size: 2vw;
|
||||||
|
color: var(--Cor_Segundaria_2_1);
|
||||||
|
padding-left: 1vw;
|
||||||
|
padding-right: 1vw;
|
||||||
|
|
||||||
|
width: 50vw;
|
||||||
|
height: 8vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.campo button {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
background: none;
|
||||||
|
background-color: #c6c6c6;
|
||||||
|
box-shadow: 5px 5px 0px #9a9a9a;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
width: 6vw;
|
||||||
|
height: 8vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.campo img {
|
||||||
|
width: 3vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.campo button:hover {
|
||||||
|
background-color: var(--Cor_Segundaria_2_1);
|
||||||
|
box-shadow: -5px 5px 0px 2px var(--Cor_Segundaria_2_2);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
.capitulo_2 {
|
||||||
|
width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.capitulo_2 .painel {
|
||||||
|
width: 20vw;
|
||||||
|
height: 40vh;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
background-color: #c6c6c6;
|
||||||
|
box-shadow: -5px 5px 0px #9a9a9a;
|
||||||
|
transition: 1s ease;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.capitulo_2 .painel:hover {
|
||||||
|
|
||||||
|
background-color: var(--Cor_Segundaria_5_1);
|
||||||
|
box-shadow: 10px 10px 0px var(--Cor_Segundaria_5_2);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.capitulo_2 .painel .Colun_1 img {
|
||||||
|
width: 8vw;
|
||||||
|
filter: drop-shadow(2px 2px 0px var(--Cor_Segundaria_2_1));
|
||||||
|
}
|
||||||
|
|
||||||
|
.capitulo_2 .painel .Colun_2 {}
|
||||||
|
|
||||||
|
|
||||||
|
.capitulo_2 .painel .Colun_2 h2 {
|
||||||
|
font-size: 1.3vw;
|
||||||
|
color: var(--Matriz);
|
||||||
|
font-family: var(--font_titulo);
|
||||||
|
}
|
||||||
|
|
@ -1,16 +1,27 @@
|
||||||
body,
|
@import url(../../global/import.css);
|
||||||
html {
|
|
||||||
margin: 0;
|
.teste {
|
||||||
padding: 0;
|
background-color: rgb(255, 255, 255);
|
||||||
height: 100%;
|
position: fixed;
|
||||||
width: 100%;
|
top: 0;
|
||||||
overflow: hidden;
|
left: 0;
|
||||||
background-color: #282c34;
|
z-index: 100000;
|
||||||
display: flex;
|
width: 100%;
|
||||||
justify-content: center;
|
height: 100vh;
|
||||||
align-items: center;
|
|
||||||
}
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
font-family: var(--font_titulo);
|
||||||
|
|
||||||
|
|
||||||
canvas {
|
|
||||||
border: 1px solid #fff;
|
border: 1px solid #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.teste canvas {
|
||||||
|
width: 40vw;
|
||||||
|
height: 40vh;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,209 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pt-br">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<title>Ambiente de teste</title>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta http-equiv="Feature-Policy"
|
||||||
|
content="geolocation 'none'; microphone 'none'; camera 'none'; fullscreen 'none'; payment 'none'; vr 'none'; autoplay 'none'; accelerometer 'none'; ambient-light-sensor 'none'; gyroscope 'none'; magnetometer 'none';picture-in-picture 'none';sync-xhr 'none'; usb 'none';clipboard-write 'none'; clipboard-read 'none'; payments 'none'; ">
|
||||||
|
|
||||||
|
<link id="conexao" rel="stylesheet" href="../../Css/page/Ambiente/Estrutura/estrutura.css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="./Acessts/Imagens/iT_Guys/logo1.png">
|
||||||
|
<style id="fundouser">
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="estrutura">
|
||||||
|
|
||||||
|
|
||||||
|
<nav>
|
||||||
|
<section class="menu_lateral">
|
||||||
|
|
||||||
|
<div class="seguimentacao_1">
|
||||||
|
<div class="coluna_1"> <!--imagem de fundo-->
|
||||||
|
<div class="subcolunas_1">
|
||||||
|
|
||||||
|
<div class="filheira">
|
||||||
|
<img src="../../Acessts/Imagens/iT_Guys/Logo_itGuys - Copia.png" alt="">
|
||||||
|
<!--Iconi da Itguys-->
|
||||||
|
</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><!--Home-->
|
||||||
|
|
||||||
|
<div class="filheira">
|
||||||
|
<img class="img" src="../../Acessts/Imagens/Iconis/monitor.png" alt="">
|
||||||
|
</div><!--Monitoramento-->
|
||||||
|
|
||||||
|
<div class="filheira">
|
||||||
|
<img class="img" src="../../Acessts/Imagens/Iconis/technical-support.png" alt="">
|
||||||
|
</div><!--Servicdesk-->
|
||||||
|
|
||||||
|
<div class="filheira">
|
||||||
|
<img class="img" src="../../Acessts/Imagens/Iconis/caixa-de-ferramentas.png" alt="">
|
||||||
|
</div><!--Ferramentas-->
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="subcolunas_2">
|
||||||
|
|
||||||
|
<div class="filheira">
|
||||||
|
<img class="img" src="../../Acessts/Imagens/Iconis/central-de-atendimento.png" alt="">
|
||||||
|
</div><!--Suporte-->
|
||||||
|
|
||||||
|
<div class="filheira">
|
||||||
|
<img class="img" src="../../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt="">
|
||||||
|
</div><!--Configurações-->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="seguimentacao_2">
|
||||||
|
|
||||||
|
<div class="coluna_1"> <!--imagem de fundo-->
|
||||||
|
<div class="subcolunas_1">
|
||||||
|
<div class="filheira">
|
||||||
|
<img src="../../Acessts/Imagens/Iconis/profile-user.png" alt=""> <!--Usuário de fundo-->
|
||||||
|
</div>
|
||||||
|
<div class="filheira">
|
||||||
|
<h2>Usuário</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="" class="filheira_a" target="frame">
|
||||||
|
<div class="filheira">
|
||||||
|
<h2>Home</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="" class="filheira_a" target="frame">
|
||||||
|
<div class="filheira">
|
||||||
|
|
||||||
|
<h2>Monitoramento</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="" class="filheira_a" target="frame">
|
||||||
|
<div class="filheira">
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Servicdesk</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="" class="filheira_a" target="frame">
|
||||||
|
<div class="filheira">
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Ferramentas</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="subcolunas_2">
|
||||||
|
|
||||||
|
<a href="" class="filheira_a" target="frame">
|
||||||
|
<div class="filheira">
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Suporte</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a href="" class="filheira_a">
|
||||||
|
<div class="filheira">
|
||||||
|
|
||||||
|
|
||||||
|
<h2>Configurações</h2>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Seu conteúdo principal aqui -->
|
||||||
|
<main class="apresentacao">
|
||||||
|
|
||||||
|
<section class="capitulo_1">
|
||||||
|
<div class="Bloco_subcab1_1">
|
||||||
|
<img src="../../Acessts/Imagens/iT_Guys/logo_flat.png" 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="../../Ambiente_Usuario_copy.html"
|
||||||
|
frameborder="0"></iframe>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var botao = document.querySelector('#id_ajuste')
|
||||||
|
var cabecario = document.querySelector('.capitulo_1')
|
||||||
|
var tela = document.querySelector('.capitulo_2')
|
||||||
|
var menu = document.querySelector('.menu_lateral')
|
||||||
|
//var temas = document.querySelectorAll('.item_menu')
|
||||||
|
|
||||||
|
|
||||||
|
//Aqui se aplica o evento de cliente, sobre afunção que aplica as classes no menu caberio e telas
|
||||||
|
botao.addEventListener('click', function () {
|
||||||
|
menu.classList.toggle('expansao');
|
||||||
|
cabecario.classList.toggle('expansao');
|
||||||
|
tela.classList.toggle('expansao');
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
function selectLink() {
|
||||||
|
temas.forEach((item) =>
|
||||||
|
item.classList.remove('ativo')
|
||||||
|
)
|
||||||
|
this.classList.add('ativo')
|
||||||
|
}
|
||||||
|
temas.forEach((item) =>
|
||||||
|
item.addEventListener('click', selectLink))
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pt-BR">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Formulário</title>
|
||||||
|
<link rel="stylesheet" href="../Css/page/Ambiente/Service/Ferramentas.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="capitulo_1">
|
||||||
|
<div class="campo">
|
||||||
|
<input type="text" id="pesquisa" placeholder="Pesquisar serviços...">
|
||||||
|
<button id="button_pesqui">
|
||||||
|
<img src="../Acessts/Imagens/Iconis/lupa.png" alt="">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="capitulo_2" id="saida"></section>
|
||||||
|
<div id="painel_Servico" class="popup_contener"></div>
|
||||||
|
<script src="../js/Ambiente/Service/Datas_service.js"></script>
|
||||||
|
<script src="../js/Ambiente/Service/Contrutor_Serviços.js"></script>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -1,120 +1,277 @@
|
||||||
|
|
||||||
|
|
||||||
//Varivel para valida a autenticação do usuário, se for true o ambiente é construido, se for false, um tela de erro é apresentada no lugar do ambiente, e caso a resposta demore para ser apresentada um tela de carregamento é apresentada.
|
|
||||||
var autenteticação = true;
|
|
||||||
|
|
||||||
//If que constrola o cenario de true
|
// Função para obter a URL base da API
|
||||||
if (autenteticação == true) {
|
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');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const Permissoes = {
|
||||||
|
visuMonitor: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
||||||
|
|
||||||
|
// Função para carregar e exibir as imagens protegidas
|
||||||
|
async function criarBlocos() {
|
||||||
|
try {
|
||||||
|
const apiUrl = await getApiUrl(); // Obtém a URL da API a partir do PHP
|
||||||
|
const token = getAuthToken(); // Obtém o token JWT do localStorage
|
||||||
|
|
||||||
|
// Faz uma requisição para obter os dados da rota /mounting
|
||||||
|
const response = await fetch(`${apiUrl}/mounting`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'x-access-token': token ? token : ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Erro na requisição: ' + response.statusText);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
// Agora acessa as propriedades do objeto
|
||||||
|
const nomeCompleto = data.usuario.nome; // Nome completo do usuário
|
||||||
|
const primeiroNome = nomeCompleto.split(' ')[0].substring(0, 10); // Pega o primeiro nome e limita a 10 caracteres // Limita a 10 caracteres;
|
||||||
|
const Empresa = data.empresa.nome;
|
||||||
|
const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
|
||||||
|
//const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
|
||||||
|
const logoEmpresa = `${apiUrl}${data.empresa.logo}`;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Exibe as imagens protegidas usando os URLs retornados pela API
|
||||||
|
loadImage(ImagemUser, 'profileImage');
|
||||||
|
//loadImage(ImagemUser2, 'profileImage'); // Imagem de perfil do usuário
|
||||||
|
loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
|
||||||
|
|
||||||
|
// Acessando o primeiro objeto do array retornado
|
||||||
|
|
||||||
|
console.log(data);
|
||||||
|
console.log(primeiroNome);
|
||||||
|
console.log(Empresa);
|
||||||
|
console.log(ImagemUser);
|
||||||
|
console.log(logoEmpresa);
|
||||||
|
|
||||||
|
|
||||||
|
//var visuMonitor = usuarioInfo.Permissoes_Monitor;
|
||||||
|
|
||||||
|
|
||||||
//constante que controla o estilo css que está estilizando todo o ambiente do usuário.
|
//constante que controla o estilo css que está estilizando todo o ambiente do usuário.
|
||||||
const estilos = document.getElementById('conexao');
|
const estilos = document.getElementById('conexao');
|
||||||
estilos.href = '../Css/global/Estrutura.css';
|
estilos.href = './Css/page/Ambiente/Estrutura/estrutura.css';
|
||||||
|
|
||||||
//variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
|
|
||||||
//Nome do usuário
|
|
||||||
//Nome da empresa
|
|
||||||
//Imagem do usuário
|
|
||||||
//Imagem de fundo do usuário
|
|
||||||
var Usuário = 'Daivid';
|
|
||||||
var Empresa = 'ItGuys';
|
|
||||||
var ImagemUser = '../Acessts/Imagens/1605305486169.jpg';
|
|
||||||
var imagemFun = 'url(../Acessts/Imagens/01160209321024.jpg)';
|
|
||||||
|
|
||||||
//Essa ultima variavel é dedicada ao controle de hiriaquia, caso alguem tenha permissão para visualizar essa categoria, será true, caso ela não tenha permissão, será false, e então toda essa categoria não será apresentada.
|
|
||||||
var visuMonitor = true;
|
|
||||||
|
|
||||||
|
|
||||||
//constante conectada com estilos internos dentro do próprio html, para trazer a capacidade de controlar a imagem que está no fundo do perfil do suário.
|
|
||||||
const fundouser = document.getElementById('fundouser');
|
|
||||||
|
|
||||||
fundouser.innerHTML =
|
|
||||||
'.Corpo_1 .Colunas_1 {'
|
|
||||||
+
|
|
||||||
'display: flex;'
|
|
||||||
+
|
|
||||||
'flex-direction: row;'
|
|
||||||
+
|
|
||||||
'background-image:' + imagemFun + ';'
|
|
||||||
+
|
|
||||||
'background-position: center;'
|
|
||||||
+
|
|
||||||
'background-size: cover;'
|
|
||||||
+
|
|
||||||
'width: 15vw;'
|
|
||||||
+
|
|
||||||
'height: 10vh;'
|
|
||||||
+
|
|
||||||
'overflow: hidden;'
|
|
||||||
+
|
|
||||||
'transition: 1s ease;'
|
|
||||||
;
|
|
||||||
|
|
||||||
//Constante de construção primira do ambiente do usuário, é aqui onde toda á página é construida, ao mesmo tempo que as variaveis mudificam certas informações.
|
|
||||||
const construtor_primario = document.getElementById('entrada_1');
|
const construtor_primario = document.getElementById('entrada_1');
|
||||||
|
|
||||||
construtor_primario.innerHTML =
|
construtor_primario.innerHTML =
|
||||||
'<section class="menu">'
|
'<nav>'
|
||||||
+
|
+
|
||||||
'<header class="cabecario_1">'
|
'<section class="menu_lateral">'
|
||||||
+
|
+
|
||||||
'<div class="Bloco_subcab1_1"><img src="../Acessts/Imagens/iT_Guys/logo_flat.png" alt="" class="icon_subcab1_1"></div>'
|
'<div class="seguimentacao_1">'
|
||||||
+
|
+
|
||||||
'<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
|
'<div class="coluna_1">'
|
||||||
+
|
+
|
||||||
'</header>'
|
'<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>' + primeiroNome + '</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>'
|
||||||
|
+
|
||||||
|
//Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
|
||||||
|
'<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>'
|
||||||
+
|
+
|
||||||
'</section>'
|
'</section>'
|
||||||
+
|
+
|
||||||
'<main class="matriz">'
|
'</nav>'
|
||||||
|
+
|
||||||
|
'<main class="apresentacao">'
|
||||||
+
|
+
|
||||||
'<section class="capitulo_1">'
|
'<section class="capitulo_1">'
|
||||||
+
|
+
|
||||||
'<div class="Corpo_1">'
|
'<div class="Bloco_subcab1_1">'
|
||||||
+
|
+
|
||||||
'<div class="Colunas_1">'
|
'<img class="companyLogo" alt="" class="icon_subcab1_1">'
|
||||||
+
|
|
||||||
'<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
|
|
||||||
+
|
|
||||||
'<div class="seguimentos_2">'
|
|
||||||
+
|
|
||||||
'<div class="user_1">'
|
|
||||||
+
|
|
||||||
'<img src="' + ImagemUser + '" alt="" class="icon_subcab2_2">'
|
|
||||||
+
|
|
||||||
'<img src="' + ImagemUser + '" alt="" class="icon_subcab2_1">'
|
|
||||||
+
|
+
|
||||||
'</div>'
|
'</div>'
|
||||||
+
|
+
|
||||||
'<div class="user_2"><p> <div id="User">' + Usuário + '</div><div id="Empresa">' + Empresa + '</div></p></div>'
|
'<div class="Bloco_subcab1_2">'
|
||||||
+
|
+
|
||||||
'</div>'
|
'<a href="https://dev.itguys.com.br/"><button>Logout</button></a>'
|
||||||
+
|
|
||||||
'</div>'
|
|
||||||
+
|
|
||||||
'<div class="Colunas_2">'
|
|
||||||
+
|
|
||||||
'<div class="seguimentos_1"></div>'
|
|
||||||
+
|
|
||||||
'<div class="seguimentos_2"><div class="sessao_1"><a href="./Home.html" target="frame">'
|
|
||||||
+
|
|
||||||
'<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
|
|
||||||
+
|
|
||||||
'<section class="forg">'
|
|
||||||
+
|
|
||||||
//Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
|
|
||||||
'<div id="sub_entrada"></div>'
|
|
||||||
+
|
|
||||||
'</section>'
|
|
||||||
+
|
|
||||||
'<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
|
|
||||||
+
|
|
||||||
'</div>'
|
|
||||||
+
|
|
||||||
'<div class="sessao_2">'
|
|
||||||
+
|
|
||||||
'<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
|
|
||||||
+
|
|
||||||
'<a href="./Config.html" ><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
|
|
||||||
+
|
+
|
||||||
'</div>'
|
'</div>'
|
||||||
+
|
+
|
||||||
|
|
@ -122,34 +279,62 @@ if (autenteticação == true) {
|
||||||
+
|
+
|
||||||
'<section class="capitulo_2">'
|
'<section class="capitulo_2">'
|
||||||
+
|
+
|
||||||
'<div class="Corpo_2">'
|
'<iframe id="test1" name="frame" class="transmissão" src="./html/Home.html"frameborder = "0" ></iframe > '
|
||||||
+
|
+
|
||||||
'<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "./Home.html"frameborder = "0" ></iframe ></div>'
|
'</section>'
|
||||||
+
|
|
||||||
'</div>'
|
|
||||||
+
|
+
|
||||||
'</main>'
|
'</main>'
|
||||||
|
|
||||||
|
const construido = true;
|
||||||
|
|
||||||
;
|
;
|
||||||
|
localStorage.setItem('construido', JSON.stringify(construido));
|
||||||
|
|
||||||
|
var botao = document.getElementById('id_ajuste');
|
||||||
|
var cabecario = document.querySelector('.capitulo_1');
|
||||||
|
var tela = document.querySelector('.capitulo_2');
|
||||||
|
var menu = document.querySelector('.menu_lateral');
|
||||||
|
|
||||||
|
if (botao) {
|
||||||
|
botao.addEventListener('click', function () {
|
||||||
|
console.log('Botão clicado!');
|
||||||
|
if (menu) menu.classList.toggle('expansao');
|
||||||
|
if (cabecario) cabecario.classList.toggle('expansao');
|
||||||
|
if (tela) tela.classList.toggle('expansao');
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.error('Botão não encontrado!');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
if (Permissoes.visuMonitor) {
|
||||||
|
const script2 = document.createElement('script');
|
||||||
|
script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
|
||||||
|
script2.setAttribute // Acessando a propriedade corretamente
|
||||||
|
document.body.appendChild(script2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Adiciona o listener de clique após a construção do HTML
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.
|
//Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.
|
||||||
|
|
||||||
//construtor da reação do menu sobre as interações do usuário
|
//construtor da reação do menu sobre as interações do usuário
|
||||||
const script1 = document.createElement('script');
|
|
||||||
script1.src = '../js/Ambiente/Estrutura/Reacao_menu.js';
|
|
||||||
document.body.appendChild(script1);
|
|
||||||
|
|
||||||
//construtor da sub camada de construção, alinhada sobre a condicional onde se a pessoa possui permisão para visualizar o monitoramente de sua empresa, visuMonitor será igual á true, enquanto se ela não tiver permissão para visualizar o visuMonitor será igual á false
|
|
||||||
if (visuMonitor == true) {
|
|
||||||
const script2 = document.createElement('script');
|
|
||||||
script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
|
|
||||||
document.body.appendChild(script2);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
//Else sendo a reação opostao ao do if, logo sendo esse o cenario onde a autenticação não seja valida.
|
|
||||||
else {
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
|
||||||
|
|
||||||
//Constante de controle sobre estilos css do painel de erro.
|
//Constante de controle sobre estilos css do painel de erro.
|
||||||
const estilos = document.getElementById('conexao');
|
const estilos = document.getElementById('conexao');
|
||||||
|
|
@ -159,9 +344,42 @@ else {
|
||||||
//o Status do erro
|
//o Status do erro
|
||||||
//Mensagem do erro
|
//Mensagem do erro
|
||||||
//Um mensagem complementar sobre o erro
|
//Um mensagem complementar sobre o erro
|
||||||
var Status = 'Erro 404';
|
|
||||||
|
|
||||||
|
const apiUrl = await getApiUrl(); // Obtém a URL da API a partir do PHP
|
||||||
|
const token = getAuthToken(); // Obtém o token JWT do localStorage
|
||||||
|
|
||||||
|
// Faz uma requisição para obter os dados da rota /mounting
|
||||||
|
const response = await fetch(`${apiUrl}/mounting`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'x-access-token': token ? token : ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const respostaserver = response.status
|
||||||
|
|
||||||
|
if (respostaserver == 401) {
|
||||||
|
|
||||||
|
var Status = 'Erro 401';
|
||||||
var mensagem = 'Desculpe mas sua página não foi encontrada';
|
var mensagem = 'Desculpe mas sua página não foi encontrada';
|
||||||
var sub_mensagem = 'Tente fazer seu, login novamente';
|
var sub_mensagem = 'Tente fazer seu, login novamente';
|
||||||
|
var button_info = 'Retorne';
|
||||||
|
var button_acao = '/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/login.html';
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if (respostaserver == 404) {
|
||||||
|
|
||||||
|
var Status = 'Erro 404';
|
||||||
|
var mensagem = 'Houve um problema com seu ambiente !!';
|
||||||
|
var sub_mensagem = 'Por favor contate o suporte suporte@itguys.com.br';
|
||||||
|
var button_info = 'Nós contate';
|
||||||
|
var button_acao = 'https://api.whatsapp.com/send?phone=5521966344698';
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
//Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
|
//Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
|
||||||
const erro = document.getElementById('entrada_1');
|
const erro = document.getElementById('entrada_1');
|
||||||
|
|
@ -174,7 +392,7 @@ else {
|
||||||
+
|
+
|
||||||
'<div class="cap"><h2>' + mensagem + '</h2><p>' + sub_mensagem + '</p></div>'
|
'<div class="cap"><h2>' + mensagem + '</h2><p>' + sub_mensagem + '</p></div>'
|
||||||
+
|
+
|
||||||
'<div class="cap_2"><a href="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/login.html"><button>Retornar</button></a></div>'
|
'<div class="cap_2"><a href="' + button_acao + '"><button>' + button_info + '</button></a></div>'
|
||||||
+
|
+
|
||||||
'</section>'
|
'</section>'
|
||||||
+
|
+
|
||||||
|
|
@ -192,25 +410,117 @@ else {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
console.error('Erro ao criar blocos:', error);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Event listener para o botão de logout
|
|
||||||
const logoutButton = document.getElementById('logoutButton');
|
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
||||||
if (logoutButton) {
|
|
||||||
logoutButton.addEventListener('click', function () {
|
async function loadImage(url, imgElementClass) {
|
||||||
// Limpar o token do localStorage ao clicar no botão de logout
|
try {
|
||||||
clearAuthToken();
|
const token = getAuthToken();
|
||||||
// Redirecionar para a página de login ou qualquer outra página desejada após o logout
|
console.log('Token:', token);
|
||||||
window.location.href = '../login.html';
|
console.log('URL da imagem:', url);
|
||||||
|
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'x-access-token': token ? token : ''
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Erro ao carregar a imagem: ' + response.statusText);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const blob = await response.blob();
|
||||||
|
const imageUrl = URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
// Seleciona todos os elementos com a classe
|
||||||
|
const imgElements = document.getElementsByClassName(imgElementClass);
|
||||||
|
if (imgElements.length > 0) {
|
||||||
|
for (let i = 0; i < imgElements.length; i++) {
|
||||||
|
imgElements[i].src = imageUrl;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.warn('Nenhum elemento encontrado com a classe:', imgElementClass);
|
||||||
|
}
|
||||||
|
|
||||||
|
return imageUrl; // Retorna a URL da imagem carregada
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao carregar a imagem:', error);
|
||||||
|
console.log('Classe do elemento:', imgElementClass);
|
||||||
|
return null; // Retorna null em caso de erro
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Função para carregar a imagem de fundo
|
||||||
|
async function loadBackgroundAndUpdateStyle() {
|
||||||
|
try {
|
||||||
|
const apiUrl = await getApiUrl();
|
||||||
|
const token = getAuthToken();
|
||||||
|
const response = await fetch(`${apiUrl}/mounting`, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'x-access-token': token ? token : ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Erro ao carregar os dados: ' + response.statusText);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
const imagemFun = `${apiUrl}${data.usuario.img_fundo}`;
|
||||||
|
|
||||||
|
const fundoResponse = await fetch(imagemFun, {
|
||||||
|
method: 'GET',
|
||||||
|
headers: {
|
||||||
|
'x-access-token': token ? token : ''
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!fundoResponse.ok) {
|
||||||
|
throw new Error('Erro ao carregar a imagem de fundo: ' + fundoResponse.statusText);
|
||||||
|
}
|
||||||
|
|
||||||
|
const blob = await fundoResponse.blob();
|
||||||
|
const fundoUserUrl = URL.createObjectURL(blob);
|
||||||
|
|
||||||
|
const fundouser = document.getElementById('fundouser');
|
||||||
|
fundouser.innerHTML =
|
||||||
|
'.seguimentacao_2 .coluna_1 {' +
|
||||||
|
'width: 100%;' +
|
||||||
|
'height: 30vh;' +
|
||||||
|
'display: flex;' +
|
||||||
|
'flex-direction: row;' +
|
||||||
|
'background-image: url("' + fundoUserUrl + '");' +
|
||||||
|
'background-position: center;'
|
||||||
|
'background-position: center;' +
|
||||||
|
'background-size: cover;' +
|
||||||
|
'overflow: hidden;' +
|
||||||
|
'transition: 1s ease;' +
|
||||||
|
'}';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
console.log('Imagem de fundo carregada e estilo aplicado com sucesso.');
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Erro ao carregar a imagem de fundo:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inicia o carregamento das imagens quando o script for carregado
|
||||||
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
|
|
||||||
|
await criarBlocos();
|
||||||
|
await loadBackgroundAndUpdateStyle();
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,216 @@
|
||||||
|
|
||||||
|
|
||||||
|
//Varivel para valida a autenticação do usuário, se for true o ambiente é construido, se for false, um tela de erro é apresentada no lugar do ambiente, e caso a resposta demore para ser apresentada um tela de carregamento é apresentada.
|
||||||
|
var autenteticação = true;
|
||||||
|
|
||||||
|
//If que constrola o cenario de true
|
||||||
|
if (autenteticação == true) {
|
||||||
|
|
||||||
|
//constante que controla o estilo css que está estilizando todo o ambiente do usuário.
|
||||||
|
const estilos = document.getElementById('conexao');
|
||||||
|
estilos.href = '../Css/global/Estrutura.css';
|
||||||
|
|
||||||
|
//variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
|
||||||
|
//Nome do usuário
|
||||||
|
//Nome da empresa
|
||||||
|
//Imagem do usuário
|
||||||
|
//Imagem de fundo do usuário
|
||||||
|
var Usuário = 'Daivid';
|
||||||
|
var Empresa = 'ItGuys';
|
||||||
|
var ImagemUser = '../Acessts/Imagens/1605305486169.jpg';
|
||||||
|
var imagemFun = 'url(../Acessts/Imagens/01160209321024.jpg)';
|
||||||
|
|
||||||
|
//Essa ultima variavel é dedicada ao controle de hiriaquia, caso alguem tenha permissão para visualizar essa categoria, será true, caso ela não tenha permissão, será false, e então toda essa categoria não será apresentada.
|
||||||
|
var visuMonitor = true;
|
||||||
|
|
||||||
|
|
||||||
|
//constante conectada com estilos internos dentro do próprio html, para trazer a capacidade de controlar a imagem que está no fundo do perfil do suário.
|
||||||
|
const fundouser = document.getElementById('fundouser');
|
||||||
|
|
||||||
|
fundouser.innerHTML =
|
||||||
|
'.Corpo_1 .Colunas_1 {'
|
||||||
|
+
|
||||||
|
'display: flex;'
|
||||||
|
+
|
||||||
|
'flex-direction: row;'
|
||||||
|
+
|
||||||
|
'background-image:' + imagemFun + ';'
|
||||||
|
+
|
||||||
|
'background-position: center;'
|
||||||
|
+
|
||||||
|
'background-size: cover;'
|
||||||
|
+
|
||||||
|
'width: 15vw;'
|
||||||
|
+
|
||||||
|
'height: 10vh;'
|
||||||
|
+
|
||||||
|
'overflow: hidden;'
|
||||||
|
+
|
||||||
|
'transition: 1s ease;'
|
||||||
|
;
|
||||||
|
|
||||||
|
//Constante de construção primira do ambiente do usuário, é aqui onde toda á página é construida, ao mesmo tempo que as variaveis mudificam certas informações.
|
||||||
|
const construtor_primario = document.getElementById('entrada_1');
|
||||||
|
|
||||||
|
construtor_primario.innerHTML =
|
||||||
|
'<section class="menu">'
|
||||||
|
+
|
||||||
|
'<header class="cabecario_1">'
|
||||||
|
+
|
||||||
|
'<div class="Bloco_subcab1_1"><img src="../Acessts/Imagens/iT_Guys/logo_flat.png" alt="" class="icon_subcab1_1"></div>'
|
||||||
|
+
|
||||||
|
'<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
|
||||||
|
+
|
||||||
|
'</header>'
|
||||||
|
+
|
||||||
|
'</section>'
|
||||||
|
+
|
||||||
|
'<main class="matriz">'
|
||||||
|
+
|
||||||
|
'<section class="capitulo_1">'
|
||||||
|
+
|
||||||
|
'<div class="Corpo_1">'
|
||||||
|
+
|
||||||
|
'<div class="Colunas_1">'
|
||||||
|
+
|
||||||
|
'<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
|
||||||
|
+
|
||||||
|
'<div class="seguimentos_2">'
|
||||||
|
+
|
||||||
|
'<div class="user_1">'
|
||||||
|
+
|
||||||
|
'<img src="' + ImagemUser + '" alt="" class="icon_subcab2_2">'
|
||||||
|
+
|
||||||
|
'<img src="' + ImagemUser + '" alt="" class="icon_subcab2_1">'
|
||||||
|
+
|
||||||
|
'</div>'
|
||||||
|
+
|
||||||
|
'<div class="user_2"><p> <div id="User">' + Usuário + '</div><div id="Empresa">' + Empresa + '</div></p></div>'
|
||||||
|
+
|
||||||
|
'</div>'
|
||||||
|
+
|
||||||
|
'</div>'
|
||||||
|
+
|
||||||
|
'<div class="Colunas_2">'
|
||||||
|
+
|
||||||
|
'<div class="seguimentos_1"></div>'
|
||||||
|
+
|
||||||
|
'<div class="seguimentos_2"><div class="sessao_1"><a href="./Home.html" target="frame">'
|
||||||
|
+
|
||||||
|
'<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
|
||||||
|
+
|
||||||
|
'<section class="forg">'
|
||||||
|
+
|
||||||
|
//Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
|
||||||
|
'<div id="sub_entrada"></div>'
|
||||||
|
+
|
||||||
|
'</section>'
|
||||||
|
+
|
||||||
|
'<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
|
||||||
|
+
|
||||||
|
'</div>'
|
||||||
|
+
|
||||||
|
'<div class="sessao_2">'
|
||||||
|
+
|
||||||
|
'<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
|
||||||
|
+
|
||||||
|
'<a href="./Config.html" ><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
|
||||||
|
+
|
||||||
|
' </div>'
|
||||||
|
+
|
||||||
|
'</section>'
|
||||||
|
+
|
||||||
|
'<section class="capitulo_2">'
|
||||||
|
+
|
||||||
|
'<div class="Corpo_2">'
|
||||||
|
+
|
||||||
|
'<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "./Home.html"frameborder = "0" ></iframe ></div>'
|
||||||
|
+
|
||||||
|
'</div>'
|
||||||
|
+
|
||||||
|
'</main>'
|
||||||
|
;
|
||||||
|
|
||||||
|
//Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.
|
||||||
|
|
||||||
|
//construtor da reação do menu sobre as interações do usuário
|
||||||
|
const script1 = document.createElement('script');
|
||||||
|
script1.src = '../js/Ambiente/Estrutura/Reacao_menu.js';
|
||||||
|
document.body.appendChild(script1);
|
||||||
|
|
||||||
|
//construtor da sub camada de construção, alinhada sobre a condicional onde se a pessoa possui permisão para visualizar o monitoramente de sua empresa, visuMonitor será igual á true, enquanto se ela não tiver permissão para visualizar o visuMonitor será igual á false
|
||||||
|
if (visuMonitor == true) {
|
||||||
|
const script2 = document.createElement('script');
|
||||||
|
script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
|
||||||
|
document.body.appendChild(script2);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//Else sendo a reação opostao ao do if, logo sendo esse o cenario onde a autenticação não seja valida.
|
||||||
|
else {
|
||||||
|
|
||||||
|
//Constante de controle sobre estilos css do painel de erro.
|
||||||
|
const estilos = document.getElementById('conexao');
|
||||||
|
estilos.href = '../Css/page/Telas_acao/erro_404.css';
|
||||||
|
|
||||||
|
//variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
|
||||||
|
//o Status do erro
|
||||||
|
//Mensagem do erro
|
||||||
|
//Um mensagem complementar sobre o erro
|
||||||
|
var Status = 'Erro 404';
|
||||||
|
var mensagem = 'Desculpe mas sua página não foi encontrada';
|
||||||
|
var sub_mensagem = 'Tente fazer seu, login novamente';
|
||||||
|
|
||||||
|
//Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
|
||||||
|
const erro = document.getElementById('entrada_1');
|
||||||
|
|
||||||
|
erro.innerHTML = '<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="https://dev.itguys.com.br/ambiente_do_usu%C3%A1rio/login.html"><button>Retornar</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>'
|
||||||
|
;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// Event listener para o botão de logout
|
||||||
|
const logoutButton = document.getElementById('logoutButton');
|
||||||
|
if (logoutButton) {
|
||||||
|
logoutButton.addEventListener('click', function () {
|
||||||
|
// Limpar o token do localStorage ao clicar no botão de logout
|
||||||
|
clearAuthToken();
|
||||||
|
// Redirecionar para a página de login ou qualquer outra página desejada após o logout
|
||||||
|
window.location.href = '../login.html';
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,33 +1,17 @@
|
||||||
|
|
||||||
//Função de adapitação do menu e da tela do ambiente do usuário, resumidamente ao apertar na seinha do menu, todo o ambiente do usuário é reajustado, enquanto da mesma forma ao pertar a setinha novamente todo o ambiente do usuário retornar ao seu laouyt tradicional
|
|
||||||
|
|
||||||
|
|
||||||
//Aqui são as variaveis que conectao todos esses elementos, dentre elas:
|
var botao = document.getElementById('id_ajuste');
|
||||||
//botão conecta o pontao de condicional da ação
|
var cabecario = document.querySelector('.capitulo_1');
|
||||||
//cabecario elemento pertencente da tela do usuário
|
var tela = document.querySelector('.capitulo_2');
|
||||||
//tela seria o iframe que apresenta todas as informações do ambiente do usuário
|
var menu = document.querySelector('.menu_lateral');
|
||||||
//menu seria os elementos visuais do usuário
|
|
||||||
//temas seria alguns elementos do proprio menu
|
|
||||||
var botao = document.querySelector('#menu')
|
|
||||||
var cabecario = document.querySelector('.cabecario_1')
|
|
||||||
var tela = document.querySelector('.transmissão')
|
|
||||||
var menu = document.querySelector('.capitulo_1')
|
|
||||||
var temas = document.querySelectorAll('.item_menu')
|
|
||||||
|
|
||||||
|
if (botao) {
|
||||||
//Aqui se aplica o evento de cliente, sobre afunção que aplica as classes no menu caberio e telas
|
|
||||||
botao.addEventListener('click', function () {
|
botao.addEventListener('click', function () {
|
||||||
menu.classList.toggle('expansao');
|
console.log('Botão clicado!');
|
||||||
cabecario.classList.toggle('expansao');
|
if (menu) menu.classList.toggle('expansao');
|
||||||
tela.classList.toggle('expansao');
|
if (cabecario) cabecario.classList.toggle('expansao');
|
||||||
|
if (tela) tela.classList.toggle('expansao');
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
function selectLink() {
|
console.error('Botão não encontrado!');
|
||||||
temas.forEach((item) =>
|
|
||||||
item.classList.remove('ativo')
|
|
||||||
)
|
|
||||||
this.classList.add('ativo')
|
|
||||||
}
|
}
|
||||||
temas.forEach((item) =>
|
|
||||||
item.addEventListener('click', selectLink))
|
|
||||||
|
|
@ -1,82 +1,86 @@
|
||||||
// Adiciona um ouvinte de evento para quando o conteúdo do DOM estiver completamente carregado
|
function verificarAmbiente() {
|
||||||
document.addEventListener("DOMContentLoaded", function () {
|
|
||||||
// Obtém o elemento com o ID 'entrada_1'
|
|
||||||
var main = document.getElementById("entrada_1");
|
var main = document.getElementById("entrada_1");
|
||||||
|
const tela_laod = document.getElementById('entrada_2');
|
||||||
|
let elemento_1;
|
||||||
|
let elemento_2;
|
||||||
|
|
||||||
// Verifica se a tag main está vazia
|
|
||||||
if (main.innerHTML.trim() === "") {
|
if (main.innerHTML.trim() === "") {
|
||||||
// Se a tag estiver vazia, obtém novamente o mesmo elemento
|
elemento_1 = 'Estamos carregando sua página';
|
||||||
const tela_laod = document.getElementById('entrada_1');
|
} else {
|
||||||
|
elemento_1 = 'Algo foi encontrado mas estamos preparando';
|
||||||
|
}
|
||||||
|
|
||||||
// Adiciona um elemento canvas ao conteúdo da tag main
|
elemento_2 = '<canvas id="animationCanvas"></canvas>';
|
||||||
tela_laod.innerHTML = '<canvas id="animationCanvas"></canvas>';
|
tela_laod.innerHTML = '<div class="teste"><h1>' + elemento_1 + '</h1> ' + elemento_2 + ' </div>';
|
||||||
|
}
|
||||||
|
|
||||||
// Obtém o contexto 2D do canvas para desenhar
|
function finalizar() {
|
||||||
|
const tela_laod = document.getElementById('entrada_2');
|
||||||
|
setTimeout(() => {
|
||||||
|
tela_laod.innerHTML = '';
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('DOMContentLoaded', iniciarAnimacao)
|
||||||
|
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
finalizar();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function iniciarAnimacao() {
|
||||||
const canvas = document.getElementById('animationCanvas');
|
const canvas = document.getElementById('animationCanvas');
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
// Define as dimensões do canvas para preencher a tela
|
|
||||||
canvas.width = window.innerWidth;
|
canvas.width = window.innerWidth;
|
||||||
canvas.height = window.innerHeight;
|
canvas.height = window.innerHeight;
|
||||||
|
|
||||||
// Define um objeto 'circle' que armazena as propriedades da animação
|
|
||||||
const circle = {
|
const circle = {
|
||||||
centerX: canvas.width / 2, // Centro do círculo no eixo X
|
centerX: canvas.width / 2,
|
||||||
centerY: canvas.height / 2, // Centro do círculo no eixo Y
|
centerY: canvas.height / 2,
|
||||||
radius: 150, // Raio do círculo
|
radius: 150,
|
||||||
rotationSpeed: 0.10, // Velocidade de rotação
|
rotationSpeed: 0.10,
|
||||||
angle: 0, // Ângulo atual
|
angle: 0,
|
||||||
linePath: [], // Armazena a trajetória do ponto
|
linePath: [],
|
||||||
maxPathLength: 350 // Comprimento máximo da trajetória
|
maxPathLength: 350
|
||||||
};
|
};
|
||||||
|
|
||||||
// Função para desenhar a trajetória circular
|
|
||||||
function drawCircularPath() {
|
function drawCircularPath() {
|
||||||
// Limpa o canvas antes de desenhar
|
|
||||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
|
||||||
// Calcula as coordenadas do ponto atual na trajetória circular
|
|
||||||
const pathX = circle.centerX + circle.radius * Math.cos(circle.angle);
|
const pathX = circle.centerX + circle.radius * Math.cos(circle.angle);
|
||||||
const pathY = circle.centerY + circle.radius * Math.sin(circle.angle);
|
const pathY = circle.centerY + circle.radius * Math.sin(circle.angle);
|
||||||
// Adiciona o ponto atual à trajetória
|
|
||||||
circle.linePath.push({ x: pathX, y: pathY });
|
circle.linePath.push({ x: pathX, y: pathY });
|
||||||
|
|
||||||
// Desenha a trajetória acumulada
|
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
for (let i = 0; i < circle.linePath.length - 1; i++) {
|
for (let i = 0; i < circle.linePath.length - 1; i++) {
|
||||||
ctx.moveTo(circle.linePath[i].x, circle.linePath[i].y);
|
ctx.moveTo(circle.linePath[i].x, circle.linePath[i].y);
|
||||||
ctx.lineTo(circle.linePath[i + 1].x, circle.linePath[i + 1].y);
|
ctx.lineTo(circle.linePath[i + 1].x, circle.linePath[i + 1].y);
|
||||||
}
|
}
|
||||||
ctx.strokeStyle = '#22c0a3'; // Define a cor da linha
|
ctx.strokeStyle = '#22c0a3';
|
||||||
ctx.lineWidth = 10; // Define a largura da linha
|
ctx.lineWidth = 10;
|
||||||
ctx.stroke(); // Desenha a linha no canvas
|
ctx.stroke();
|
||||||
|
|
||||||
// Limita o comprimento da trajetória
|
|
||||||
if (circle.linePath.length > circle.maxPathLength) {
|
if (circle.linePath.length > circle.maxPathLength) {
|
||||||
circle.linePath.shift(); // Remove o primeiro ponto do caminho
|
circle.linePath.shift();
|
||||||
// Reinicia a trajetória se um ciclo completo foi completado
|
if (circle.angle >= Math.PI * 2) {
|
||||||
if (circle.angle >= Math.PI * 2) { // Verifica se completou um ciclo
|
circle.angle = 0;
|
||||||
circle.angle = 0; // Reinicia o ângulo
|
circle.linePath = [];
|
||||||
circle.linePath = []; // Limpa a trajetória
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Função de animação que atualiza a posição do ponto e desenha a trajetória
|
|
||||||
function animate() {
|
function animate() {
|
||||||
circle.angle += circle.rotationSpeed; // Atualiza o ângulo
|
circle.angle += circle.rotationSpeed;
|
||||||
drawCircularPath(); // Desenha a trajetória atual
|
drawCircularPath();
|
||||||
requestAnimationFrame(animate); // Solicita a próxima animação
|
requestAnimationFrame(animate);
|
||||||
}
|
}
|
||||||
|
|
||||||
animate(); // Inicia a animação
|
animate();
|
||||||
|
|
||||||
// Ajusta o tamanho do canvas quando a janela é redimensionada
|
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
canvas.width = window.innerWidth; // Ajusta a largura
|
canvas.width = window.innerWidth;
|
||||||
canvas.height = window.innerHeight; // Ajusta a altura
|
canvas.height = window.innerHeight;
|
||||||
circle.centerX = canvas.width / 2; // Atualiza o centro X
|
circle.centerX = canvas.width / 2;
|
||||||
circle.centerY = canvas.height / 2; // Atualiza o centro Y
|
circle.centerY = canvas.height / 2;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,23 @@
|
||||||
// Verifica se a variável 'visuMonitor' é verdadeira
|
// Verifica se a variável 'visuMonitor' é verdadeira
|
||||||
|
|
||||||
|
|
||||||
if (Permissoes.visuMonitor) {
|
if (Permissoes.visuMonitor) {
|
||||||
// Obtém o elemento com o ID 'sub_entrada' para inserir o conteúdo
|
// Obtém o elemento com o ID 'sub_entrada' para inserir o conteúdo
|
||||||
const construtor_Secundarios_Monitoramento = document.getElementById('sub_entrada');
|
const construtor_Secundarios_Monitoramento_icon = document.getElementById('sub_entrada_moni_1');
|
||||||
|
const construtor_Secundarios_Monitoramento_button = document.getElementById('sub_entrada_moni_2');
|
||||||
|
|
||||||
// Define o conteúdo HTML a ser inserido no 'sub_entrada'
|
// Define o conteúdo HTML a ser inserido no 'sub_entrada'
|
||||||
construtor_Secundarios_Monitoramento.innerHTML =
|
construtor_Secundarios_Monitoramento_button.innerHTML =
|
||||||
'<div class="item_menu" id="testes"><img src="../Acessts/Imagens/Iconis/monitor.png" alt=""><p>Monitoramento</p></div>'
|
`<a href="" class="filheira_a" target="frame">
|
||||||
+ // Cria o item do menu "Monitoramento"
|
<div class="filheira">
|
||||||
'<div class="sub_menu" id="sub_menu">' // Cria um submenu
|
<h2>Monitoramento</h2>
|
||||||
+
|
</div>
|
||||||
// Cada link dentro do submenu, com imagem e texto
|
</a>`;
|
||||||
'<a href="./Monitoramento.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>iTGuys</p></div></a>'
|
|
||||||
+
|
construtor_Secundarios_Monitoramento_icon.innerHTML =
|
||||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Freguesia.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Freguesia</p></div></a>'
|
`<div class="filheira">
|
||||||
+
|
<img class="img" src="./Acessts/Imagens/Iconis/monitor.png" alt="">
|
||||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_GAU_Infantil.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Gau Infantil</p></div></a>'
|
</div>`;
|
||||||
+
|
|
||||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Sao_Fabiano.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>São Fabiano</p></div></a>'
|
|
||||||
+
|
|
||||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Itaguaí.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Itaguaí</p></div></a>'
|
|
||||||
+
|
|
||||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Recreio.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Unidade Recreio</p></div></a>'
|
|
||||||
+
|
|
||||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Enseg_Cliente_VPN.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/vpn.png" alt=""><p>Client Vpn</p></div></a>'
|
|
||||||
+
|
|
||||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Ferreira_Real.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Ferreira Real</p></div></a>'
|
|
||||||
+
|
|
||||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_Oeste_Pan.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>Oeste Pan</p></div></a>'
|
|
||||||
+
|
|
||||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_IBAP.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>IBAP</p></div></a>'
|
|
||||||
+
|
|
||||||
'<a href="./Tela_Monitoramento/Padrão/Monitoramento_IVVCG.html" target="frame"><div class="sub_item_1"><img src="../Acessts/Imagens/Iconis/hospital.png" alt=""><p>IVVCG</p></div></a>'
|
|
||||||
+
|
|
||||||
'</div>'; // Fecha o submenu
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,108 @@
|
||||||
|
const painel_serviços_icon = document.getElementById('saida');
|
||||||
|
|
||||||
|
function renderService(service) {
|
||||||
|
const { nome, Imagem, id_server, resposta_popup, resposta_script, resposta_estilo } = service;
|
||||||
|
const serviceDiv = document.createElement('div');
|
||||||
|
serviceDiv.classList.add('painel');
|
||||||
|
serviceDiv.id = id_server;
|
||||||
|
|
||||||
|
serviceDiv.innerHTML = `
|
||||||
|
<div class="Colun_1">
|
||||||
|
<img src="${Imagem}" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="Colun_2">
|
||||||
|
<h2>${nome}</h2>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
painel_serviços_icon.appendChild(serviceDiv);
|
||||||
|
|
||||||
|
serviceDiv.addEventListener('click', () => {
|
||||||
|
popup(resposta_popup, resposta_script, resposta_estilo);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderAllServices() {
|
||||||
|
painel_serviços_icon.innerHTML = '';
|
||||||
|
|
||||||
|
// Renderiza os serviços de Ser_Itguys
|
||||||
|
for (const service of Object.values(Data_Center.Ser_Itguys)) {
|
||||||
|
renderService(service);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Renderiza os serviços de Ser_User
|
||||||
|
for (const service of Object.values(Data_Center.Ser_User)) {
|
||||||
|
renderService(service);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Inicializa a renderização
|
||||||
|
renderAllServices();
|
||||||
|
|
||||||
|
function popup(resposta, script, estilo) {
|
||||||
|
const painel_serviços = document.getElementById('painel_Servico');
|
||||||
|
painel_serviços.innerHTML = `
|
||||||
|
<section>
|
||||||
|
<div class='colun_1'>
|
||||||
|
<button id='fechar'>
|
||||||
|
X
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class='colun_2'>
|
||||||
|
${resposta}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Remover estilos e scripts anteriores
|
||||||
|
const existingStyles = document.querySelectorAll('style');
|
||||||
|
existingStyles.forEach(style => style.remove());
|
||||||
|
const existingScripts = document.querySelectorAll('script[data-dynamic]');
|
||||||
|
existingScripts.forEach(script => script.remove());
|
||||||
|
|
||||||
|
// Injetar estilo se houver
|
||||||
|
if (estilo) {
|
||||||
|
const style = document.createElement('style');
|
||||||
|
style.innerHTML = estilo;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Injetar script se houver
|
||||||
|
if (script) {
|
||||||
|
const scriptElement = document.createElement('script');
|
||||||
|
scriptElement.setAttribute('data-dynamic', '');
|
||||||
|
scriptElement.src = script;
|
||||||
|
document.body.appendChild(scriptElement);
|
||||||
|
}
|
||||||
|
|
||||||
|
const button_servi = document.getElementById('fechar');
|
||||||
|
button_servi.addEventListener('click', fecharPopup);
|
||||||
|
|
||||||
|
function fecharPopup() {
|
||||||
|
painel_serviços.style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
painel_serviços.style.display = "flex";
|
||||||
|
}
|
||||||
|
|
||||||
|
const button_pesquisa = document.getElementById('button_pesqui');
|
||||||
|
const input_pesquisa = document.getElementById('pesquisa');
|
||||||
|
|
||||||
|
button_pesquisa.addEventListener('click', pesquisar);
|
||||||
|
input_pesquisa.addEventListener('keypress', function (event) {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
pesquisar();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function pesquisar() {
|
||||||
|
const query = input_pesquisa.value.toLowerCase();
|
||||||
|
painel_serviços_icon.innerHTML = '';
|
||||||
|
|
||||||
|
// Filtra e renderiza os serviços
|
||||||
|
for (const service of Object.values(Data_Center.Ser_Itguys).concat(Object.values(Data_Center.Ser_User))) {
|
||||||
|
if (service.nome.toLowerCase().includes(query)) {
|
||||||
|
renderService(service);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
const Data_Center = {
|
||||||
|
Ser_User: {},
|
||||||
|
Ser_Itguys: {}
|
||||||
|
};
|
||||||
|
|
||||||
|
const permissa_User = true;
|
||||||
|
|
||||||
|
if (permissa_User === true) {
|
||||||
|
Data_Center.Ser_User = {
|
||||||
|
resetar_senha: {
|
||||||
|
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_estilo: `document.body.style.backgroundColor = '#f0f0f0';`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const permissa_Itguys = true;
|
||||||
|
|
||||||
|
if (permissa_Itguys === true) {
|
||||||
|
Data_Center.Ser_Itguys = {
|
||||||
|
Gerador_de_arquivos_telefonia: {
|
||||||
|
nome: 'Configurador de Telefonia',
|
||||||
|
Imagem: '../../Acessts/Imagens/Iconis/ferramentas.png',
|
||||||
|
id_server: 'serv_gat_1',
|
||||||
|
resposta_popup: `
|
||||||
|
<form id="form" class='control'>
|
||||||
|
|
||||||
|
<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'>
|
||||||
|
<div class='formulario'></div>
|
||||||
|
<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>`,
|
||||||
|
resposta_script: '../js/Ambiente/Service/List/Gerador_XML_Telefonia.js',
|
||||||
|
resposta_estilo: `.control {width: 100%;display: flex;flex-direction: column;justify-content: center;align-content: center;align-items: center;}.formulario {width: 80%;display: flex;flex-direction: column;animation: surgirpopup 1s ease;}@keyframes surgirpopup {to {opacity: 1;transform: translateY(0);}from {opacity: 0;transform: translateY(40vw);}}.formulario input {border:none;outline: none;background: none;background-color: var(--Matriz);border: 0.2vw solid var(--Cor_Segundaria_2_1);box-shadow: 5px 5px 0px 2px var(--Cor_Segundaria_2_2);font-family: var(--font_titulo);font-size: 0.9vw;color: var(--Cor_Segundaria_2_1);padding-left: 1vw;padding-right: 1vw;width: 100%;height: 3vh;}.formulario label {font-family: var(--font_titulo);font-size: 1vw;color: var(--Matriz);}.formulario button {border: none;outline: none;background: none;font-family: var(--font_titulo);font-size: 1vw;color: var(--Matriz);background-color: #c6c6c6;box-shadow: -5px 5px 0px #9a9a9a;transition: 1s ease;width: 8vw;height: 4vh;}.formulario button:hover {background-color: var(--Cor_Segundaria_2_1);box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);};`
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,207 @@
|
||||||
|
|
||||||
|
function gerarArquivo() {
|
||||||
|
const macEquipamento = document.getElementById('mac_equipamento').value;
|
||||||
|
const nomeCliente = document.getElementById('nome_cliente').value;
|
||||||
|
const nomeSetor = document.getElementById('nome_setor').value;
|
||||||
|
const usuarioSip = document.getElementById('usuario_sip').value;
|
||||||
|
const senhaSip = document.getElementById('senha_sip').value;
|
||||||
|
|
||||||
|
let conteudo = `<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<device>
|
||||||
|
<deviceProtocol>SIP</deviceProtocol>
|
||||||
|
<sshUserId>admin</sshUserId>
|
||||||
|
<sshPassword>p06++kc37$6</sshPassword>
|
||||||
|
<devicePool>
|
||||||
|
<dateTimeSetting>
|
||||||
|
<dateTemplate>D/M/YY</dateTemplate>
|
||||||
|
<timeZone>E. South America Standard/Daylight Time</timeZone>
|
||||||
|
<ntps>
|
||||||
|
<ntp>
|
||||||
|
<name>200.160.0.8</name>
|
||||||
|
<ntpMode>Unicast</ntpMode>
|
||||||
|
</ntp>
|
||||||
|
</ntps>
|
||||||
|
</dateTimeSetting>
|
||||||
|
<callManagerGroup>
|
||||||
|
<members>
|
||||||
|
<member priority="0">
|
||||||
|
<callManager>
|
||||||
|
<ports>
|
||||||
|
<sipPort>5060</sipPort>
|
||||||
|
</ports>
|
||||||
|
<processNodeName>172.16.254.130</processNodeName>
|
||||||
|
</callManager>
|
||||||
|
</member>
|
||||||
|
</members>
|
||||||
|
</callManagerGroup>
|
||||||
|
</devicePool>
|
||||||
|
<sipProfile>
|
||||||
|
<sipProxies>
|
||||||
|
<backupProxy></backupProxy>
|
||||||
|
<backupProxyPort></backupProxyPort>
|
||||||
|
<outboundProxy></outboundProxy>
|
||||||
|
<outboundProxyPort></outboundProxyPort>
|
||||||
|
<registerWithProxy>true</registerWithProxy>
|
||||||
|
</sipProxies>
|
||||||
|
<sipCallFeatures>
|
||||||
|
<cnfJoinEnabled>true</cnfJoinEnabled>
|
||||||
|
<callForwardURI>x-cisco-serviceuri-cfwdall</callForwardURI>
|
||||||
|
<callPickupURI>x-cisco-serviceuri-pickup</callPickupURI>
|
||||||
|
<callPickupListURI>x-cisco-serviceuri-opickup</callPickupListURI>
|
||||||
|
<callPickupGroupURI>x-cisco-serviceuri-gpickup</callPickupGroupURI>
|
||||||
|
<meetMeServiceURI>x-cisco-serviceuri-meetme</meetMeServiceURI>
|
||||||
|
<abbreviatedDialURI>x-cisco-serviceuri-abbrdial</abbreviatedDialURI>
|
||||||
|
<rfc2543Hold>false</rfc2543Hold>
|
||||||
|
<callHoldRingback>2</callHoldRingback>
|
||||||
|
<localCfwdEnable>true</localCfwdEnable>
|
||||||
|
<semiAttendedTransfer>true</semiAttendedTransfer>
|
||||||
|
<anonymousCallBlock>2</anonymousCallBlock>
|
||||||
|
<callerIdBlocking>2</callerIdBlocking>
|
||||||
|
<dndControl>0</dndControl>
|
||||||
|
<remoteCcEnable>true</remoteCcEnable>
|
||||||
|
</sipCallFeatures>
|
||||||
|
<sipStack>
|
||||||
|
<sipInviteRetx>6</sipInviteRetx>
|
||||||
|
<sipRetx>10</sipRetx>
|
||||||
|
<timerInviteExpires>180</timerInviteExpires>
|
||||||
|
<timerRegisterExpires>3600</timerRegisterExpires>
|
||||||
|
<timerRegisterDelta>5</timerRegisterDelta>
|
||||||
|
<timerKeepAliveExpires>120</timerKeepAliveExpires>
|
||||||
|
<timerSubscribeExpires>120</timerSubscribeExpires>
|
||||||
|
<timerSubscribeDelta>5</timerSubscribeDelta>
|
||||||
|
<timerT1>500</timerT1>
|
||||||
|
<timerT2>4000</timerT2>
|
||||||
|
<maxRedirects>70</maxRedirects>
|
||||||
|
<remotePartyID>false</remotePartyID>
|
||||||
|
<userInfo>None</userInfo>
|
||||||
|
</sipStack>
|
||||||
|
<autoAnswerTimer>1</autoAnswerTimer>
|
||||||
|
<autoAnswerAltBehavior>false</autoAnswerAltBehavior>
|
||||||
|
<autoAnswerOverride>true</autoAnswerOverride>
|
||||||
|
<transferOnhookEnabled>false</transferOnhookEnabled>
|
||||||
|
<enableVad>false</enableVad>
|
||||||
|
<dtmfDbLevel>3</dtmfDbLevel>
|
||||||
|
<dtmfOutofBand>avt</dtmfOutofBand>
|
||||||
|
<alwaysUsePrimeLine>false</alwaysUsePrimeLine>
|
||||||
|
<alwaysUsePrimeLineVoiceMail>false</alwaysUsePrimeLineVoiceMail>
|
||||||
|
<kpml>3</kpml>
|
||||||
|
<natEnabled></natEnabled>
|
||||||
|
<natAddress></natAddress>
|
||||||
|
<phoneLabel>${nomeSetor}</phoneLabel>
|
||||||
|
<stutterMsgWaiting>1</stutterMsgWaiting>
|
||||||
|
<callStats>false</callStats>
|
||||||
|
<silentPeriodBetweenCallWaitingBursts>10</silentPeriodBetweenCallWaitingBursts>
|
||||||
|
<disableLocalSpeedDialConfig>false</disableLocalSpeedDialConfig>
|
||||||
|
<startMediaPort>16384</startMediaPort>
|
||||||
|
<stopMediaPort>32766</stopMediaPort>
|
||||||
|
<sipLines>
|
||||||
|
<line button="1">
|
||||||
|
<featureID>9</featureID>
|
||||||
|
<featureLabel>${nomeCliente}</featureLabel>
|
||||||
|
<proxy>USECALLMANAGER</proxy>
|
||||||
|
<port>5060</port>
|
||||||
|
<name>${usuarioSip}</name>
|
||||||
|
<firstname></firstname>
|
||||||
|
<lastname></lastname>
|
||||||
|
<displayName></displayName>
|
||||||
|
<autoAnswer>
|
||||||
|
<autoAnswerEnabled>2</autoAnswerEnabled>
|
||||||
|
</autoAnswer>
|
||||||
|
<callWaiting>3</callWaiting>
|
||||||
|
<authName>${usuarioSip}</authName>
|
||||||
|
<authPassword>${senhaSip}</authPassword>
|
||||||
|
<sharedLine>false</sharedLine>
|
||||||
|
<messageWaitingLampPolicy>1</messageWaitingLampPolicy>
|
||||||
|
<messagesNumber>voicemail extension</messagesNumber>
|
||||||
|
<ringSettingIdle>4</ringSettingIdle>
|
||||||
|
<ringSettingActive>5</ringSettingActive>
|
||||||
|
<contact>i${nomeCliente}</contact>
|
||||||
|
<forwardCallInfoDisplay>
|
||||||
|
<callerName>true</callerName>
|
||||||
|
<callerNumber>false</callerNumber>
|
||||||
|
<redirectedNumber>false</redirectedNumber>
|
||||||
|
<dialedNumber>true</dialedNumber>
|
||||||
|
</forwardCallInfoDisplay>
|
||||||
|
</line>
|
||||||
|
</sipLines>
|
||||||
|
<voipControlPort>5060</voipControlPort>
|
||||||
|
<dscpForAudio>184</dscpForAudio>
|
||||||
|
<ringSettingBusyStationPolicy>0</ringSettingBusyStationPolicy>
|
||||||
|
<dialTemplate>dialplan.xml</dialTemplate>
|
||||||
|
</sipProfile>
|
||||||
|
<commonProfile>
|
||||||
|
<phonePassword></phonePassword>
|
||||||
|
<backgroundImageAccess>true</backgroundImageAccess>
|
||||||
|
<callLogBlfEnabled>2</callLogBlfEnabled>
|
||||||
|
</commonProfile>
|
||||||
|
<loadInformation>sip78xx.14-2-1-0001-14</loadInformation>
|
||||||
|
<vendorConfig>
|
||||||
|
<disableSpeaker>false</disableSpeaker>
|
||||||
|
<disableSpeakerAndHeadset>false</disableSpeakerAndHeadset>
|
||||||
|
<pcPort>0</pcPort>
|
||||||
|
<settingsAccess>1</settingsAccess>
|
||||||
|
<garp>0</garp>
|
||||||
|
<voiceVlanAccess>0</voiceVlanAccess>
|
||||||
|
<videoCapability>0</videoCapability>
|
||||||
|
<autoSelectLineEnable>0</autoSelectLineEnable>
|
||||||
|
<sshAccess>0</sshAccess>
|
||||||
|
<sshPort>22</sshPort>
|
||||||
|
<webAccess>0</webAccess>
|
||||||
|
<webProtocol>0</webProtocol>
|
||||||
|
<webAdmin>1</webAdmin>
|
||||||
|
<adminPassword>cisco</adminPassword>
|
||||||
|
<daysDisplayNotActive>7</daysDisplayNotActive>
|
||||||
|
<displayOnTime>00:00</displayOnTime>
|
||||||
|
<displayOnDuration>00:00</displayOnDuration>
|
||||||
|
<displayIdleTimeout>00:00</displayIdleTimeout>
|
||||||
|
<daysBacklightNotActive>7</daysBacklightNotActive>
|
||||||
|
<backlightOnTime>00:00</backlightOnTime>
|
||||||
|
<backlightOnWhenIncomingCall>1</backlightOnWhenIncomingCall>
|
||||||
|
<spanToPCPort>1</spanToPCPort>
|
||||||
|
<loggingDisplay>1</loggingDisplay>
|
||||||
|
<loadServer></loadServer>
|
||||||
|
</vendorConfig>
|
||||||
|
<versionStamp>1143565489-a3cbf294-7526-4c29-8791-c4fce4ce4c42</versionStamp>
|
||||||
|
<capfAuthMode>0</capfAuthMode>
|
||||||
|
<capfList>
|
||||||
|
<capf>
|
||||||
|
<phonePort>3804</phonePort>
|
||||||
|
</capf>
|
||||||
|
</capfList>
|
||||||
|
<certHash></certHash>
|
||||||
|
<encrConfig>false</encrConfig>
|
||||||
|
</device>`;
|
||||||
|
|
||||||
|
async function criarArquivosZip(conteudo, macEquipamento) {
|
||||||
|
const zip = new JSZip();
|
||||||
|
|
||||||
|
// Adicionando o arquivo com conteúdo
|
||||||
|
zip.file(`SEP${macEquipamento.toUpperCase()}.cnf.xml`, conteudo);
|
||||||
|
|
||||||
|
// Adicionando arquivos vazios
|
||||||
|
zip.file(`CTLSEP${macEquipamento.toUpperCase()}.tlv`, '');
|
||||||
|
zip.file(`ITLSEP${macEquipamento.toUpperCase()}.tlv`, '');
|
||||||
|
|
||||||
|
// Gerando o arquivo ZIP
|
||||||
|
const zipContent = await zip.generateAsync({ type: 'blob' });
|
||||||
|
|
||||||
|
// Criando o link para download
|
||||||
|
const url = URL.createObjectURL(zipContent);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = `Arquivos_${macEquipamento.toUpperCase()}.zip`; // Nome do arquivo ZIP
|
||||||
|
document.body.appendChild(a);
|
||||||
|
a.click();
|
||||||
|
document.body.removeChild(a);
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Chame a função passando o conteúdo e o MAC do equipamento
|
||||||
|
criarArquivosZip(conteudo, macEquipamento);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const scriptElement = document.createElement('script');
|
||||||
|
scriptElement.src = 'https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js';
|
||||||
|
document.body.appendChild(scriptElement);
|
||||||
340
js/padrao_A1.js
340
js/padrao_A1.js
|
|
@ -1,340 +0,0 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 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');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
const Permissoes = {
|
|
||||||
visuMonitor: true,
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
|
||||||
|
|
||||||
// Função para carregar e exibir as imagens protegidas
|
|
||||||
async function criarBlocos() {
|
|
||||||
try {
|
|
||||||
const apiUrl = await getApiUrl(); // Obtém a URL da API a partir do PHP
|
|
||||||
const token = getAuthToken(); // Obtém o token JWT do localStorage
|
|
||||||
|
|
||||||
// Faz uma requisição para obter os dados da rota /mounting
|
|
||||||
const response = await fetch(`${apiUrl}/mounting`, {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'x-access-token': token ? token : ''
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('Erro na requisição: ' + response.statusText);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
|
|
||||||
// Agora acessa as propriedades do objeto
|
|
||||||
const nomeCompleto = data.usuario.nome; // Nome completo do usuário
|
|
||||||
const primeiroNome = nomeCompleto.split(' ')[0].substring(0, 10); // Pega o primeiro nome e limita a 10 caracteres // Limita a 10 caracteres;
|
|
||||||
const Empresa = data.empresa.nome;
|
|
||||||
const ImagemUser = `${apiUrl}${data.usuario.img_perfil}`;
|
|
||||||
//const ImagemUser2 = `${apiUrl}${data.usuario.img_perfil}`;
|
|
||||||
const logoEmpresa = `${apiUrl}${data.empresa.logo}`;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Exibe as imagens protegidas usando os URLs retornados pela API
|
|
||||||
loadImage(ImagemUser, 'profileImage');
|
|
||||||
//loadImage(ImagemUser2, 'profileImage'); // Imagem de perfil do usuário
|
|
||||||
loadImage(logoEmpresa, 'companyLogo'); // Logo da empresa
|
|
||||||
|
|
||||||
// Acessando o primeiro objeto do array retornado
|
|
||||||
|
|
||||||
console.log(data);
|
|
||||||
console.log(primeiroNome);
|
|
||||||
console.log(Empresa);
|
|
||||||
console.log(ImagemUser);
|
|
||||||
console.log(logoEmpresa);
|
|
||||||
|
|
||||||
|
|
||||||
//var visuMonitor = usuarioInfo.Permissoes_Monitor;
|
|
||||||
|
|
||||||
|
|
||||||
//constante que controla o estilo css que está estilizando todo o ambiente do usuário.
|
|
||||||
const estilos = document.getElementById('conexao');
|
|
||||||
estilos.href = './Css/global/Estrutura.css';
|
|
||||||
|
|
||||||
|
|
||||||
const construtor_primario = document.getElementById('entrada_1');
|
|
||||||
|
|
||||||
construtor_primario.innerHTML =
|
|
||||||
'<section class="menu">'
|
|
||||||
+
|
|
||||||
'<header class="cabecario_1">'
|
|
||||||
+
|
|
||||||
'<div class="Bloco_subcab1_1"><img alt="" class="icon_subcab1_1 companyLogo"></div>'
|
|
||||||
+
|
|
||||||
'<div class="Bloco_subcab1_2"><a href="https://dev.itguys.com.br/"><button>Logout</button></a></div>'
|
|
||||||
+
|
|
||||||
'</header>'
|
|
||||||
+
|
|
||||||
'</section>'
|
|
||||||
+
|
|
||||||
'<main class="matriz">'
|
|
||||||
+
|
|
||||||
'<section class="capitulo_1">'
|
|
||||||
+
|
|
||||||
'<div class="Corpo_1">'
|
|
||||||
+
|
|
||||||
'<div class="Colunas_1">'
|
|
||||||
+
|
|
||||||
'<div class="seguimentos_1"><button><img id="menu" src="../Acessts/Imagens/Iconis/seta-direita.png" alt=""></button></div>'
|
|
||||||
+
|
|
||||||
'<div class="seguimentos_2">'
|
|
||||||
+
|
|
||||||
'<div class="user_1">'
|
|
||||||
+
|
|
||||||
'<img alt="" class="icon_subcab2_2 profileImage">'
|
|
||||||
+
|
|
||||||
'<img alt="" class="icon_subcab2_1 profileImage">'
|
|
||||||
+
|
|
||||||
'</div>'
|
|
||||||
+
|
|
||||||
'<div class="user_2"><p> <div id="User">' + primeiroNome + '</div><div id="Empresa">' + Empresa + '</div></p></div>'
|
|
||||||
+
|
|
||||||
'</div>'
|
|
||||||
+
|
|
||||||
'</div>'
|
|
||||||
+
|
|
||||||
'<div class="Colunas_2">'
|
|
||||||
+
|
|
||||||
'<div class="seguimentos_1"></div>'
|
|
||||||
+
|
|
||||||
'<div class="seguimentos_2"><div class="sessao_1"><a href="./Home.html" target="frame">'
|
|
||||||
+
|
|
||||||
'<div class="item_menu"><img src="../Acessts/Imagens/Iconis/home.png" alt=""><p>Home</p></div></a>'
|
|
||||||
+
|
|
||||||
'<section class="forg">'
|
|
||||||
+
|
|
||||||
//Estrutura vaizia dedicada para aparesentação do painel de monitoramento caso o usuário tenha permissão para o visualizar.
|
|
||||||
'<div id="sub_entrada"></div>'
|
|
||||||
+
|
|
||||||
'</section>'
|
|
||||||
+
|
|
||||||
'<a href="http://10.10.253.111/"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/technical-support.png" alt=""><p>Servicedesk</p></div></a>'
|
|
||||||
+
|
|
||||||
'</div>'
|
|
||||||
+
|
|
||||||
'<div class="sessao_2">'
|
|
||||||
+
|
|
||||||
'<a href="https://api.whatsapp.com/send?phone=5521966344698"><div class="item_menu"><img src="../Acessts/Imagens/Iconis/central-de-atendimento.png" alt=""><p>Suporte</p></div></a>'
|
|
||||||
+
|
|
||||||
'<a href="./Config.html" ><div class="item_menu"><img src="../Acessts/Imagens/Iconis/engrenagem - Copia.png" alt=""><p>Configuracões</p></div></a>'
|
|
||||||
+
|
|
||||||
' </div>'
|
|
||||||
+
|
|
||||||
'</section>'
|
|
||||||
+
|
|
||||||
'<section class="capitulo_2">'
|
|
||||||
+
|
|
||||||
'<div class="Corpo_2">'
|
|
||||||
+
|
|
||||||
'<div class="Colunas_1"><iframe id = "test1" name = "frame" class="transmissão" src = "./Home.html"frameborder = "0" ></iframe ></div>'
|
|
||||||
+
|
|
||||||
'</div>'
|
|
||||||
+
|
|
||||||
'</main>'
|
|
||||||
;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//Construtores responsavels sobre a construção de alguns scripts que não são default, que só atendem o ambiente do usuário.
|
|
||||||
|
|
||||||
//construtor da reação do menu sobre as interações do usuário
|
|
||||||
const script1 = document.createElement('script');
|
|
||||||
script1.src = './js/Ambiente/Estrutura/Reacao_menu.js';
|
|
||||||
document.body.appendChild(script1);
|
|
||||||
|
|
||||||
|
|
||||||
if (Permissoes.visuMonitor) {
|
|
||||||
const script2 = document.createElement('script');
|
|
||||||
script2.src = './js/Ambiente/Monitoramento/Estrutura_Secundaria_Monitor.js';
|
|
||||||
script2.setAttribute // Acessando a propriedade corretamente
|
|
||||||
document.body.appendChild(script2);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
|
|
||||||
|
|
||||||
//Constante de controle sobre estilos css do painel de erro.
|
|
||||||
const estilos = document.getElementById('conexao');
|
|
||||||
estilos.href = '../Css/page/Telas_acao/erro_404.css';
|
|
||||||
|
|
||||||
//variaveis de conexão de informações, possuindo informações algumas informaçõe sendo elas:
|
|
||||||
//o Status do erro
|
|
||||||
//Mensagem do erro
|
|
||||||
//Um mensagem complementar sobre o erro
|
|
||||||
var Status = 'Erro 404';
|
|
||||||
var mensagem = 'Desculpe mas sua página não foi encontrada';
|
|
||||||
var sub_mensagem = 'Tente fazer seu, login novamente';
|
|
||||||
|
|
||||||
//Constante usada para a criação da estrutura, sendo usada para apresentar todo o painel
|
|
||||||
const erro = document.getElementById('entrada_1');
|
|
||||||
|
|
||||||
erro.innerHTML = '<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="/Sites/Site_ItGuys/ambiente_do_usu%C3%A1rio/login.html"><button>Retornar</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>'
|
|
||||||
;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
console.error('Erro ao criar blocos:', error);
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Função para carregar uma imagem protegida com token JWT e exibi-la
|
|
||||||
|
|
||||||
async function loadImage(url, imgElementClass) {
|
|
||||||
try {
|
|
||||||
const token = getAuthToken();
|
|
||||||
console.log('Token:', token);
|
|
||||||
console.log('URL da imagem:', url);
|
|
||||||
|
|
||||||
const response = await fetch(url, {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'x-access-token': token ? token : ''
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('Erro ao carregar a imagem: ' + response.statusText);
|
|
||||||
}
|
|
||||||
|
|
||||||
const blob = await response.blob();
|
|
||||||
const imageUrl = URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
// Seleciona todos os elementos com a classe
|
|
||||||
const imgElements = document.getElementsByClassName(imgElementClass);
|
|
||||||
if (imgElements.length > 0) {
|
|
||||||
for (let i = 0; i < imgElements.length; i++) {
|
|
||||||
imgElements[i].src = imageUrl;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.warn('Nenhum elemento encontrado com a classe:', imgElementClass);
|
|
||||||
}
|
|
||||||
|
|
||||||
return imageUrl; // Retorna a URL da imagem carregada
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Erro ao carregar a imagem:', error);
|
|
||||||
console.log('Classe do elemento:', imgElementClass);
|
|
||||||
return null; // Retorna null em caso de erro
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Função para carregar a imagem de fundo
|
|
||||||
async function loadBackgroundAndUpdateStyle() {
|
|
||||||
try {
|
|
||||||
const apiUrl = await getApiUrl();
|
|
||||||
const token = getAuthToken();
|
|
||||||
const response = await fetch(`${apiUrl}/mounting`, {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'x-access-token': token ? token : ''
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('Erro ao carregar os dados: ' + response.statusText);
|
|
||||||
}
|
|
||||||
|
|
||||||
const data = await response.json();
|
|
||||||
const imagemFun = `${apiUrl}${data.usuario.img_fundo}`;
|
|
||||||
|
|
||||||
const fundoResponse = await fetch(imagemFun, {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'x-access-token': token ? token : ''
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!fundoResponse.ok) {
|
|
||||||
throw new Error('Erro ao carregar a imagem de fundo: ' + fundoResponse.statusText);
|
|
||||||
}
|
|
||||||
|
|
||||||
const blob = await fundoResponse.blob();
|
|
||||||
const fundoUserUrl = URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
const fundouser = document.getElementById('fundouser');
|
|
||||||
fundouser.innerHTML =
|
|
||||||
'.Corpo_1 .Colunas_1 {' +
|
|
||||||
'display: flex;' +
|
|
||||||
'flex-direction: row;' +
|
|
||||||
'background-image: url("' + fundoUserUrl + '");' +
|
|
||||||
'background-position: center;' +
|
|
||||||
'background-size: cover;' +
|
|
||||||
'width: 15vw;' +
|
|
||||||
'height: 10vh;' +
|
|
||||||
'overflow: hidden;' +
|
|
||||||
'transition: 1s ease;' +
|
|
||||||
'}';
|
|
||||||
|
|
||||||
console.log('Imagem de fundo carregada e estilo aplicado com sucesso.');
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Erro ao carregar a imagem de fundo:', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Inicia o carregamento das imagens quando o script for carregado
|
|
||||||
document.addEventListener('DOMContentLoaded', async () => {
|
|
||||||
await criarBlocos();
|
|
||||||
await loadBackgroundAndUpdateStyle();
|
|
||||||
});
|
|
||||||
|
|
@ -69,7 +69,7 @@
|
||||||
|
|
||||||
<!--caixa de entrada para a senha do usuário, tendo a classe Senha_input para estilizar ela-->
|
<!--caixa de entrada para a senha do usuário, tendo a classe Senha_input para estilizar ela-->
|
||||||
<input class="Senha_input" type="password" name="senha" id="password"
|
<input class="Senha_input" type="password" name="senha" id="password"
|
||||||
placeholder="escreva sua senha" writingsuggestions="on" autocomplete="new-password">
|
placeholder="escreva sua senha" writingsuggestions="on" autocomplete="password">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="errorMessage" class="error-message"></div>
|
<div id="errorMessage" class="error-message"></div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue