fix telemetria

src/components/buttons/gradientButton/GradientButton.tsx

@@ -15,12 +15,12 @@ interface GradientButtonInterface {
 }
 
 export default function GradientButton({ title, description, orange, purple, green, onClick }: GradientButtonInterface) {
-  // function handleClick() {
+  function handleClick() {
-  //   onClick()
+    onClick()
-  // }
+  }
 
   return (
-    <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange' } >
+    <GradientButtonView color={orange? 'orange' : purple? 'purple' : green? 'green' : 'orange'} onClick={() => handleClick()}>
       <p>{title}</p>
       <p>{description}</p>
     </GradientButtonView>

src/components/header/Header.tsx

@@ -29,7 +29,7 @@ export default function Header({name, admin}: headerInterface) {
         !admin && profile_picture?
         <Image src={profile_picture} height={50} width={75}/>
         :
-        null
+        <Image src='https://kluppdevelopment.s3.sa-east-1.amazonaws.com/avatars/zcgw6O0FxZgxRmIs97WMcUddKurQJcIqSxBLStSc.png' height={50} width={75}/>
       }
     </HeaderView>
   )

src/components/header/HeaderView.ts

@@ -6,6 +6,8 @@ export const HeaderView = styled.header`
 
   width: 100%;
 
+  margin-bottom: 40px;
+
   .icon {
     display: flex;
     align-items: center;

src/pages/chartTelemetry.tsx

@@ -62,13 +62,13 @@ export default function chartTelemetry({userName}) {
 
   const router = useRouter()
 
-  const {startDate, endDate} = router.query
+  const {startDate, endDate, unity, discretization} = router.query
 
   async function getChartsData() {
     console.log(router.query)
     await api.post('/telemetry/powerFactor', {
       "filters": [
-        {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+        {"type" : "=", "field": discretization, "value": unity},
         {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
       ]
     }).then(res => {
@@ -80,8 +80,8 @@ export default function chartTelemetry({userName}) {
     await api.post('/telemetry/discretization', {
       "type": "5_min",
       "filters": [
-          {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+          {"type" : "=", "field": discretization, "value": unity},
-          {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
+          {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
         ]
     }).then(res => {
       setDiscretizedConsumptionDataReativa(res.data.data)
@@ -92,7 +92,7 @@ export default function chartTelemetry({userName}) {
   await api.post('/telemetry/discretization', {
     "type": "5_min",
     "filters": [
-        {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+        {"type" : "=", "field": discretization, "value": unity},
         {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
       ]
     }).then(res => {
@@ -103,7 +103,7 @@ export default function chartTelemetry({userName}) {
 
   await api.post('/telemetry/demand', {
     "filters": [
-      {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+      {"type" : "=", "field": discretization, "value": unity},
       {"type" : "between", "field": "dia_num", "value": [startDate, endDate]}
     ]
     }).then(res => {
@@ -113,8 +113,6 @@ export default function chartTelemetry({userName}) {
     })
   }
 
-
-
   useEffect(() => {
     getChartsData()
     console.log(fatorPotenciaData)

src/pages/resumoOperacao.tsx

@@ -95,10 +95,6 @@ export default function ResumoOperacao({tableData, clientsData, userName, client
     } else {
       setTableDataState(tableData)
     }
-
-    console.log(tableData)
-
-    console.log(month)
   }, [month, unidade])
 
   return (

src/pages/telemetria.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
-import router, { useRouter } from 'next/router'
 
 import Banner from '../components/banner/Banner';
 import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
@@ -17,26 +16,154 @@ import { FatorPotencia } from '../services/fatorPotencia';
 import RenderIf from '../utils/renderIf';
 import { GetServerSideProps } from 'next';
 import { parseCookies } from 'nookies';
+import { api } from '../services/api';
+import Snackbar from '@mui/material/Snackbar'
+import MuiAlert, { AlertProps } from '@mui/material/Alert'
+import getAPIClient from '../services/ssrApi';
 
-export default function Telemetria({userName}: any) {
+const style = {
+  position: 'absolute' as const,
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: 400,
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+  props,
+  ref
+) {
+  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+})
+
+export default function Telemetria({userName, clients}: any) {
   const [unity, setUnity] = useState('');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
   const [discretization, setDiscretization] = useState('');
 
+  const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
+  const [openSnackError, setOpenSnackError] = useState<boolean>(false)
+  const handleCloseSnack = (
+    event?: React.SyntheticEvent | Event,
+    reason?: string
+  ) => {
+    if (reason === 'clickaway') {
+      return
+    }
+
+    setOpenSnackError(false)
+    setOpenSnackSuccess(false)
+  }
+
+  function downloadCSVFile(csv, filename) {
+    const csv_file = new Blob([csv], {type: "text/csv"});
+
+    const download_link = document.createElement("a");
+
+    download_link.download = filename;
+
+    download_link.href = window.URL.createObjectURL(csv_file);
+
+    download_link.style.display = "none";
+
+    document.body.appendChild(download_link);
+
+    download_link.click();
+  }
+
+  function htmlToCSV(html, filename) {
+    const data = [];
+    const rows = document.querySelectorAll("table tr");
+
+    for (let i = 0; i < rows.length; i++) {
+      const row = [], cols: any = rows[i].querySelectorAll("td, th");
+
+      for (let j = 0; j < cols.length; j++) {
+        row.push(cols[j].innerText);
+      }
+
+      data.push(row.join(","));
+    }
+
+    downloadCSVFile(data.join("\n"), filename);
+  }
+
+  const [tableData, setTableData] = useState(null)
+
   const [date, setDate] = useState('');
 
   const [showChart, setShowChart] = useState(false);
 
-  const handleChange = (event: SelectChangeEvent) => {
+  const [exception, setException] = useState(false);
-    // setAge(event.target.value);
+  const [send, setSend] = useState(false);
-  };
+
+  const [open, setOpen] = useState(false);
+
+  async function getTableData() {
+    if (startDate!=='' && endDate!=='' && send)
+      setOpen(true)
+      await api.post('/telemetry/powerFactor', {
+        "type": "15_min",
+        "filters": [
+            {"type" : "=", "field": "med_5min.ponto", "value": "RSZFNAENTR101P"},
+            {"type" : "between", "field": "dia_num", "value": ["2022-01-03", "2022-01-03"]}
+          ]
+      }).then(res => {
+        setTableData(res.data.data)
+        setOpenSnackError(false)
+        setOpenSnackSuccess(true)
+        setOpen(false)
+      }).catch(res => {
+        setException(true)
+        setSend(false)
+        setOpenSnackError(true)
+        setOpenSnackSuccess(false)
+        console.log(res)
+      })
+  }
+
+  useEffect(() => {
+    setSend(false)
+  }, [startDate, endDate])
+
 
   return(
     <TelemetriaView>
       <Head>
         <title>Smart Energia - Telemetria</title>
       </Head>
+      <Snackbar
+        open={openSnackSuccess}
+        autoHideDuration={4000}
+        onClose={handleCloseSnack}
+      >
+        <Alert
+          onClose={handleCloseSnack}
+          severity="success"
+          sx={{ width: '100%' }}
+        >
+          Dados coletados com sucesso com Sucesso!
+        </Alert>
+      </Snackbar>
+      <Snackbar
+        open={openSnackError}
+        autoHideDuration={4000}
+        onClose={handleCloseSnack}
+      >
+        <Alert
+          onClose={handleCloseSnack}
+          severity="error"
+          sx={{ width: '100%' }}
+        >
+          Não foi possivel pegar os dados!
+        </Alert>
+      </Snackbar>
+
       <Header name={userName} />
       <Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia -
       SCDE da Câmara de Comercialização de Energia Elétrica - CCEE,
@@ -59,24 +186,24 @@ export default function Telemetria({userName}: any) {
               <MenuItem value="">
                 <em>Nenhum</em>
               </MenuItem>
+              <MenuItem value="RSZFNAENTR101P">RSZFNAENTR101P</MenuItem>
 
-              <MenuItem value={10}>Unidade 1</MenuItem>
+              {
-              <MenuItem value={20}>Unidade 2</MenuItem>
+                clients.map((value) => {
-              <MenuItem value={30}>Unidade 3</MenuItem>
+                  return <MenuItem key={1} value={value.codigo_scde}>{value.codigo_scde}</MenuItem>
-              <MenuItem value={30}>Unidade 4</MenuItem>
+                })
-              <MenuItem value={30}>Unidade 5</MenuItem>
+              }
             </Select>
           </FormControl>
         </div>
 
         <div className='select'>
           <p className='title' >Data inicial</p>
-          <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)}/>
+          <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={startDate} onChange={(value) => setStartDate(value.target.value)} onSelect={value => console.log(value)}/>
         </div>
 
         <div className='select'>
           <p className='title' >Data final</p>
-
           <input type="date" data-date="" data-date-format="DD MMMM YYYY" value={endDate} onChange={(value) => setEndDate(value.target.value)}/>
         </div>
 
@@ -95,11 +222,66 @@ export default function Telemetria({userName}: any) {
               <MenuItem value="">
                 <em>Nenhum</em>
               </MenuItem>
+              <MenuItem value="5_min">5 minutos</MenuItem>
+              <MenuItem value="15_min">15 minutos</MenuItem>
+              <MenuItem value="1_hora">1 hora</MenuItem>
+              <MenuItem value="1_dia">1 dia</MenuItem>
             </Select>
           </FormControl>
         </div>
+      <button className='sendButton' onClick={() => {
+        setSend(true)
+        getTableData()
+      }}>Enviar!</button>
       </section>
 
+      <RenderIf isTrue={startDate!=='' && endDate!=='' && tableData===null && exception === false && send}>
+        <div className='modal'>
+          <div id="preloader_1">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+          </div>
+        </div>
+      </RenderIf>
+      <RenderIf isTrue={startDate!=='' && endDate!=='' && tableData!==null}>
+        <table className="tg">
+          <thead>
+            <tr>
+              <th className='tg-8oo6'>Ponto</th>
+              <th className='tg-8oo6'>Numero do dia</th>
+              <th className='tg-8oo6'>Dia formatado</th>
+              <th className='tg-8oo6'>Hora</th>
+              <th className='tg-8oo6'>Minuto</th>
+              <th className='tg-8oo6'>Consumo</th>
+              <th className='tg-8oo6'>Reativa</th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              tableData!==null?
+              tableData?.map((value, index) => {
+                return <>
+                  <tr>
+                    <td key={index} className='tg-gceh'>{value.ponto}</td>
+                    <td key={index} className='tg-gceh'>{parseFloat(value.dia_num)}</td>
+                    <td key={index} className='tg-uulg'>{value.day_formatted}</td>
+                    <td key={index} className='tg-gceh'>{value.hora}</td>
+                    <td key={index} className='tg-gceh'>{value.minut}</td>
+                    <td key={index} className='tg-uulg'>{parseFloat(value.consumo).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                    <td key={index} className='tg-gceh'>{parseFloat(value.reativa).toLocaleString('pt-br',{style: 'currency', currency: 'BRL', minimumFractionDigits: 2})}</td>
+                  </tr>
+                </>
+              })
+              :
+              null
+            }
+          </tbody>
+        </table>
+      </RenderIf>
+
       <RenderIf isTrue={showChart}>
         <LineChart title='Fator de Potencia' subtitle='' data1={FatorPotencia.data} data2={FatorPotencia.data2} dataset1='Fator de Potencia' dataset2='Fator ref.' label={FatorPotencia.label1} />
       </RenderIf>
@@ -110,17 +292,20 @@ export default function Telemetria({userName}: any) {
           query: {
             startDate,
             endDate,
-            discretization
+            discretization: discretization==='5_min'? 'med_5min.ponto' : discretization==='15_min'? '15min.ponto' : discretization==='1_hora'? 'med_1hora.ponto' : discretization==='1_dia'? 'med_1dia.ponto' : 'med_5min.ponto',
+            unity
           },
         }} >
-          {/* <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange/> */}
           <button>
             <p>GRÁFICO</p>
             <p>Gerar gráficos com os dados selecionados</p>
           </button>
         </Link>
-        {/* <GradientButton title='GRÁFICO' description='Gerar gráficos com os dados selecionados' orange onClick={() => router.replace('/chartTelemetry')}/> */}
+        <GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple onClick={() => {
-        <GradientButton title='DOWNLOADS' description='DADOS BRUTOS SELECIONADOS' purple />
+          const html = document.querySelector("table").outerHTML;
+          htmlToCSV(html, "telemetria.csv");
+          console.log('clicando')
+        }}/>
         <GradientButton title='DADOS' description='hORÁRIOS DO MÊS ATUAL' onClick={() => setShowChart(!showChart)} green />
       </Buttons>
       <p className='paragraph'>
@@ -132,6 +317,7 @@ export default function Telemetria({userName}: any) {
           medição - Distribuidora.
         </i>
       </p>
+
     </TelemetriaView>
   )
 }
@@ -139,6 +325,22 @@ export default function Telemetria({userName}: any) {
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const { ['@smartAuth-token']: token } = parseCookies(ctx)
   const { ['user-name']: userName } = parseCookies(ctx)
+  const { ['user-client_id']: id } = parseCookies(ctx)
+  const apiClient = getAPIClient(ctx)
+
+  let clients = []
+
+  await apiClient.post('/units', {
+		"filters": [
+			{"type" : "=", "field": "dados_cadastrais.cod_smart_cliente", "value": id}
+		],
+		"fields": ["cod_smart_unidade", "codigo_scde"],
+		"distinct": true
+  }).then(res => {
+    clients = res.data.data
+  }).catch(res => {
+    console.log(res)
+  })
 
   if (!token) {
     return {
@@ -151,7 +353,8 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 
   return {
     props: {
-      userName
+      userName,
+      clients
     }
   }
 }

src/styles/layouts/ChatTelemetry/ChatTelemetryView.ts

@@ -29,7 +29,7 @@ export const ChatTelemetryView = styled.main`
     bottom:0px;
     width: 9px;
     height: 5px;
-    background:#9b59b6;
+    background:#254F7F;
     position:absolute;
     animation: preloader_1 1.5s  infinite ease-in-out;
   }

src/styles/layouts/Telemetria/TelemetriaView.ts

@@ -1,9 +1,67 @@
 import styled from 'styled-components';
 
 export const TelemetriaView = styled.main`
-  padding: 20px ;
+  padding: 20px;
   width: 100%;
 
+  .modal {
+    position: absolute;
+
+    background: rgba( 255, 255, 255, 0.25 );
+    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
+    backdrop-filter: blur( 4px );
+    -webkit-backdrop-filter: blur( 4px );
+    border-radius: 10px;
+    border: 1px solid rgba( 255, 255, 255, 0.18 );
+
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100vh;
+
+    z-index: 999;
+  }
+
+  #preloader_1{
+    position:absolute;
+    top: 50%;
+    left: 50%;
+  }
+  #preloader_1 span{
+    display:block;
+    bottom:0px;
+    width: 9px;
+    height: 5px;
+    background:#254F7F;
+    position:absolute;
+    animation: preloader_1 1.5s  infinite ease-in-out;
+  }
+
+  #preloader_1 span:nth-child(2){
+    left:11px;
+    animation-delay: .2s;
+
+  }
+  #preloader_1 span:nth-child(3){
+    left:22px;
+    animation-delay: .4s;
+  }
+  #preloader_1 span:nth-child(4){
+    left:33px;
+    animation-delay: .6s;
+  }
+  #preloader_1 span:nth-child(5){
+    left:44px;
+    animation-delay: .8s;
+  }
+  @keyframes preloader_1 {
+    0% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
+    25% {height:30px;transform:translateY(15px);background:#254F7F;}
+    50% {height:5px;transform:translateY(0px);background:rgb(231,153,47);}
+    100% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
+  }
+
   .title {
     color: black;
     font-weight: 600;
@@ -12,6 +70,105 @@ export const TelemetriaView = styled.main`
     margin: 0 0 0 10px;
   }
 
+  .sendButton {
+    width: 60px;
+    height: 40px;
+
+    background:#254F7F;
+    color: white;
+
+    border: none;
+    border-radius: 8px;
+
+    font-family: 'Poppins';
+    font-size: 14px;
+
+    color: #FFFFFF;
+
+    margin-top: 20px;
+  }
+
+  table {
+    display: none;
+  }
+
+  .tg{
+    border-collapse:collapse;
+    border-spacing:0;
+    font-family:Poppins;
+    width: 100%;
+  }
+
+  .tg td{
+    border-color:#DDDFE1;
+    border-style:solid;
+    border-width:1px;
+    font-family:Poppins;
+    font-size: 10px;
+    overflow:hidden;
+    padding:17px 30px;
+    word-break:normal;
+  }
+
+  .tg th{
+    border-color:#DDDFE1;
+    border-style:solid;
+    border-width:1px;
+    font-family:Poppins;
+    font-size:10px;
+    font-weight:500;
+    overflow:hidden;
+    padding:10px 5px;
+    word-break:normal;
+  }
+  .tg .tg-8oo6{
+    color:#464a53;
+    font-size:13px;
+    text-align:center;
+    vertical-align:top;
+    padding: 10px 18px;
+    text-align: center;
+  }
+  .tg .tg-uulg{
+    background-color:#efefef;
+    color:#abafb3;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-gceh{
+    background-color:#efefef;
+    color:#6a707e;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-0tzy{
+    color:#abafb3;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-hq65{color:#6a707e;
+    font-size:14px;
+    text-align:center;
+    vertical-align:top
+  }
+
+  .tg .tg-baqh{
+    text-align:center;
+    vertical-align:top
+  }
+  .tg .tg-0lax{
+    text-align:left;
+    vertical-align:top
+  }
+  .tg .tg-womg{
+    background-color:#dddfe1;
+    text-align:center;
+    vertical-align:top
+  }
+
   input {
     width: 15rem;
     height: 2.5rem;
@@ -132,6 +289,57 @@ export const Buttons = styled.div`
     }
   }
 
+  #preloader_1{
+    position:absolute;
+    top: 50%;
+    left: 50%;
+  }
+  #preloader_1 span{
+    display:block;
+    bottom:0px;
+    width: 9px;
+    height: 5px;
+    background:#254F7F;
+    position:absolute;
+    animation: preloader_1 1.5s  infinite ease-in-out;
+  }
+
+  #preloader_1 span:nth-child(2){
+    left:11px;
+    animation-delay: .2s;
+
+  }
+  #preloader_1 span:nth-child(3){
+    left:22px;
+    animation-delay: .4s;
+  }
+  #preloader_1 span:nth-child(4){
+    left:33px;
+    animation-delay: .6s;
+  }
+  #preloader_1 span:nth-child(5){
+    left:44px;
+    animation-delay: .8s;
+  }
+  @keyframes preloader_1 {
+    0% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
+    25% {height:30px;transform:translateY(15px);background:#254F7F;}
+    50% {height:5px;transform:translateY(0px);background:rgb(231,153,47);}
+    100% {height:5px;transform:translateY(0px);background:rgb(1,138,138);}
+  }
+
+  .loadingTable {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+
+    z-index: 9999999;
+
+    background-color: #FFFFFF;
+  }
+
   @media (max-width: 942px) {
     align-items: center;
     justify-content: center;