Smart/smartEnergyView-frontend
2
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'fix/chartsFixs' into 'dev'

Browse Source 
more fixes

See merge request kluppsoftware/smart-energia-web!105
This commit is contained in:
José Corte 2022-07-08 20:22:08 +00:00
commit ad8b9bb2c8
11 changed files with 188 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/sidebar/Sidebar.tsx
View File

@ -12,18 +12,21 @@ import { AuthContext } from '../../contexts/AuthContext';
import { api } from '../../services/api';
import RenderIf from '../../utils/renderIf';
import { SidebarView } from './SidebarView'
import { ModalContainer, SidebarView } from './SidebarView'
const style = {
position: 'absolute' as const,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: 400,
height: 500,
width: 680,
bgcolor: 'background.paper',
border: '2px solid #000',
boxShadow: 24,
p: 4,
borderRadius: 1
};
export default function Sidebar() {
@ -127,11 +130,16 @@ export default function Sidebar() {
aria-describedby="modal-modal-description"
>
<Box sx={style}>
<ModalContainer>
<Image src='/assets/marca1.png' width={250} height={200}/>
<Typography id="modal-modal-title" variant="h6" component="h2">
Deseja realmente sair ?
</Typography>
<Link href='/'><Button variant="contained" onClick={() => signOut()} sx={{mt:5}}>Sim</Button></Link>
<Button variant="contained" onClick={handleClose} color="error" sx={{mt:5 ,ml:1}}>Não</Button>
<article>
<Link href='/'><button onClick={() => signOut()}>Sair</button></Link>
<button onClick={handleClose} color="error">Voltar</button>
</article>
</ModalContainer>
</Box>
</Modal>
</ul>

41
src/components/sidebar/SidebarView.ts
View File

@ -236,3 +236,44 @@ export const SidebarView = styled.nav<SidebarViewInterface>`
}
}
`
export const ModalContainer = styled.div`
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
article {
display: flex;
justify-content: space-around;
align-items: center;
width: 50%;
margin-top: 4em;
button {
width: 10em;
height: 4em;
cursor: pointer;
background: #254F7F;
border-radius: 8px;
border-style: none;
font-family: 'Poppins';
font-size: 90%;
transition: all 350ms ease-in;
:hover {
transform: scale(1.02);
opacity: 0.9;
box-shadow: rgb(0, 0, 0, 0.2) 0px 2px 4px -1px;
}
color: #FFFFFF;
}
}
`

2
src/contexts/AuthContext.tsx
View File

@ -40,7 +40,7 @@ export function AuthProvider({children}: {children: React.ReactNode}) {
}
async function signIn({email, password}: SignInData) {
await signOut()
signOut()
const { token, user, exception }: any = await signInRequest({
email,

151
src/pages/chartTelemetry/index.tsx
View File

@ -1,45 +1,23 @@
import React, { useEffect, useState } from 'react'
import { SingleBar } from '../../components/graph/SingleBar'
import { ChatTelemetryView } from '../../styles/layouts/ChatTelemetry/ChatTelemetryView'
// import router, { useRouter } from 'next/router'
import { FatorPotencia } from '../../services/fatorPotencia'
import { ConsumoDecretizadoBar } from '../../services/consumoDiscretizadoBar'
import { ConsumoDecretizadoLine } from '../../services/consumoDiscretizadoLine'
import LineChart from '../../components/graph/LineChart'
import { LineBarChart } from '../../components/graph/LineBarChart'
import Header from '../../components/header/Header'
import PageTitle from '../../components/pageTitle/PageTitle'
import Head from 'next/head'
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import { GetServerSideProps } from 'next'
import { parseCookies } from 'nookies'
import getAPIClient from '../../services/ssrApi'
import { api } from '../../services/api'
import FatorPotenciaChart from '../../components/graph/fatorPotenciaChart'
// import { DemRegXDemConChart } from '../components/graph/demRegXDemConChart'
import { DiscretizedConsumptionChart } from '../../components/graph/DiscretizedConsumptionChart'
import DiscretizedConsumptionChartLine from '../../components/graph/DiscretizedConsumptionChartLine'
import router, { useRouter } from 'next/router'
import { useRouter } from 'next/router'
import { DemRegXDemConChart } from '../../components/graph/DemRegXDemConChart'
import RenderIf from '../../utils/renderIf'
const style = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
position: 'absolute' as const,
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
width: '80%',
bgcolor: 'white',
p: 5,
};
import { getPowerFactorData } from '../../services/charts/telemetry/getPowerFactor'
import { getDemand } from '../../services/charts/telemetry/getDemand'
import { getDiscretization } from '../../services/charts/telemetry/getDiscretization'
export default function chartTelemetry({userName}) {
const [fatorPotenciaData, setFatorPotenciaData] = useState(null);
@ -53,109 +31,30 @@ export default function chartTelemetry({userName}) {
const {startDate, endDate, unity, discretization} = router.query
// async function getChartsData() {
// await api.post('/telemetry/powerFactor', {
// "filters": [
// {"type" : "=", "field": "med_5min.ponto", "value": unity},
// {"type" : "between", "field": "dia_num", "value": ["2022-04-01", "2022-04-28"]}
// ]
// }).then(res => {
// console.log(res.data.data)
const { '@smartAuth-token': token } = parseCookies()
function getChartsData() {
console.log(token)
getPowerFactorData("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
.then(result => setFatorPotenciaData(result))
.catch(exception => console.log(exception))
getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
.then(result => setDiscretizedConsumptionDataReativa(result))
.catch(exception => console.log(exception))
getDiscretization("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
.then(result => setDiscretizedConsumptionData(result))
.catch(exception => console.log(exception))
getDemand("PRAXCUENTR101P", "2022-01-01", "2022-01-31", "med_5min")
.then(result => setDemRegXDemCon(result))
.catch(exception => console.log(exception))
// setFatorPotenciaData(res.data.data)
// }).catch(res => {
// // console.log(res)
// router.push('/telemetria')
// })
// await api.post('/telemetry/discretization', {
// "type": discretization? discretization : "5_min",
// "filters": [
// {"type" : "=", "field": "med_5min.ponto", "value": unity},
// {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
// ]
// }).then(res => {
// setDiscretizedConsumptionDataReativa(res.data.data)
// }).catch(res => {
// // console.log(res)
// router.push('/telemetria')
// })
// await api.post('/telemetry/discretization', {
// "type": discretization? discretization : "5_min",
// "filters": [
// {"type" : "=", "field": "med_5min.ponto", "value": unity},
// {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
// ]
// }).then(res => {
// setDiscretizedConsumptionData(res.data.data)
// }).catch(res => {
// // console.log(res)
// router.push('/telemetria')
// })
// await api.post('/telemetry/demand', {
// "filters": [
// {"type" : "=", "field": "med_5min.ponto", "value": unity},
// {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
// ]
// }).then(res => {
// setDemRegXDemCon(res.data.data)
// }).catch(res => {
// // console.log(res)
// router.push('/telemetria')
// })
// }
async function getChartsData() {
await api.post('/telemetry/powerFactor', {
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"},
{"type" : "between", "field": "dia_num", "value": ["2022-01-01", "2022-01-31"]}
]
}).then(res => {
console.log(res.data.data)
setFatorPotenciaData(res.data.data)
}).catch(res => {
console.log(res)
// router.push('/telemetria')
})
await api.post('/telemetry/discretization', {
"type": "1_mes",
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
]
}
).then(res => {
setDiscretizedConsumptionDataReativa(res.data.data)
}).catch(res => {
console.log(res)
// router.push('/telemetria')
})
await api.post('/telemetry/discretization', {
"type": "1_mes",
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"}
]
}
).then(res => {
setDiscretizedConsumptionData(res.data.data)
}).catch(res => {
console.log(res)
// router.push('/telemetria')
})
await api.post('/telemetry/demand', {
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
{"type" : "between", "field": ["dia_num"], "value": ["2022-01-03", "2022-01-03"]}
]
}).then(res => {
setDemRegXDemCon(res.data.data)
}).catch(res => {
console.log(res)
// router.push('/telemetria')
})
}
useEffect(() => {

26
src/pages/resumoOperacao/index.tsx
View File

@ -100,6 +100,8 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
<article>
<h3>Filtrar por Unidade e/ou Mês</h3>
<div className='select'>
<div>
<p>Selecionar unidade:</p>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-labels">Unidades</InputLabel>
<Select
@ -108,6 +110,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
value={unidade}
label="Unidade"
onChange={handleChangeUnidade}
fullWidth
>
<MenuItem key={1} value={''}>Todas</MenuItem>
{
@ -117,8 +120,11 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
}
</Select>
</FormControl>
</div>
<FormControl fullWidth sx={{ml: 2}}>
<div>
<p>Selecionar mês:</p>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Mês</InputLabel>
<Select
labelId="demo-simple-select-label"
@ -126,6 +132,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
value={month}
label="Month"
onChange={handleChangeMonth}
fullWidth
>
<MenuItem value={''}>Todos</MenuItem>
{
@ -136,6 +143,7 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
</Select>
</FormControl>
</div>
</div>
</article>
<article>
<BasicButton title='Baixar CSV' onClick={() => {
@ -198,18 +206,24 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
// console.log(res)
})
await apiClient.post('/operation', {
"filters": [],
"fields": ["cod_smart_unidade"],
await apiClient.post('/units', {
"filters": [
{"type" : "not_in", "field": "dados_cadastrais.codigo_scde", "value":["0P"]},
{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
],
"fields": ["cod_smart_unidade", "codigo_scde"],
"distinct": true
}).then(res => {
console.log(res.data.data)
clientsData = res.data.data
}).catch(res => {
// console.log(res)
console.log(res)
})
await apiClient.post('/operation', {
"filters": [],
"filters": [
{"type" : ">=", "field":"dados_te.mes", "value":1, "interval": "year"}
],
"fields": ["mes"],
"distinct": true
}).then(res => {

10
src/services/charts/telemetry/getDemand.ts
View File

@ -1,4 +1,5 @@
import { api } from "../../api"
import axios from "axios"
import { parseCookies } from "nookies"
export async function getDemand(
unity: string,
@ -6,11 +7,16 @@ export async function getDemand(
endDate: string,
discretization: string
) {
const { data } = await api.post('/telemetry/demand', {
const { '@smartAuth-token': token } = parseCookies()
const { data } = await axios.post('https://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
"filters": [
{"type" : "=", "field": `${discretization}.ponto`, "value": unity},
{"type" : "between", "field": ["dia_num"], "value": [startDate, endDate]}
]
}, {
headers: {
'Authorization': `Bearer ${token}`
}
})
return data.data

10
src/services/charts/telemetry/getDiscretization.ts
View File

@ -1,4 +1,5 @@
import { api } from "../../api"
import axios from "axios"
import { parseCookies } from "nookies"
export async function getDiscretization(
unity: string,
@ -6,11 +7,16 @@ export async function getDiscretization(
endDate: string,
discretization: string
) {
const { data } = await api.post('/telemetry/discretization', {
const { '@smartAuth-token': token } = parseCookies()
const { data } = await axios.post('https://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
"type": discretization,
"filters": [
{"type" : "=", "field": "med_5min.ponto", "value": unity}
]
}, {
headers: {
'Authorization': `Bearer ${token}`
}
}
)

16
src/services/charts/telemetry/getPowerFactor.ts
View File

@ -1,4 +1,5 @@
import { api } from "../../api"
import axios from "axios"
import { parseCookies } from "nookies"
export async function getPowerFactorData(
unity: string,
@ -6,12 +7,17 @@ export async function getPowerFactorData(
endDate: string,
discretization: string
) {
const { data } = await api.post('/telemetry/powerFactor', {
const { '@smartAuth-token': token } = parseCookies()
console.log(token.replace(/"/g, ''))
const { data } = await axios.post('https://smart-energia-api.herokuapp.com/api/telemetry/powerFactor', {
"filters": [
{"type" : "=", "field": `${discretization}.ponto`, "value": unity},
{"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
{"type" : "=", "field": "med_5min.ponto", "value": "PRAXCUENTR101P"},
{"type" : "between", "field": "dia_num", "value": ["2022-01-01", "2022-01-31"]}
]
}, {
headers: {
'Authorization': `Bearer ${token}`
}
})
return data.data
}

11
src/styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
View File

@ -138,9 +138,20 @@ export const TableHeader = styled.section`
.select{
display: flex;
justify-content: space-between;
flex-direction: row;
width: 30rem;
div {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column;
width: 95%;
}
}
`

10
src/styles/layouts/pld/PldView.ts
View File

@ -118,6 +118,16 @@ export const PldTableView = styled.main`
color: black!important;
}
table, th:last-child{
border: transparent;
border-top-right-radius: 20px;
}
table, th:first-child {
border: transparent;
border-top-left-radius: 20px;
}
h3{
font-weight: 600;
font-size: 22px;