From ff53d07abfc3baa4f5ec45476ee57dea31f33885 Mon Sep 17 00:00:00 2001
From: Alex Santos <alex.santos@klupp.tech>
Date: Tue, 10 May 2022 15:07:33 -0300
Subject: [PATCH] =?UTF-8?q?:sparkles:=20Implementa=C3=A7=C3=A3o=20tela=20d?=
 =?UTF-8?q?e=20telemetria?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/telemetria.tsx                        | 105 ++++++++++++--
 styles/layouts/Telemetria/TelemetriaView.ts | 151 +++++++++++++++-----
 2 files changed, 211 insertions(+), 45 deletions(-)

diff --git a/pages/telemetria.tsx b/pages/telemetria.tsx
index 4a6c890..ddf29fa 100644
--- a/pages/telemetria.tsx
+++ b/pages/telemetria.tsx
@@ -1,30 +1,113 @@
 import React from 'react';
-import Image from 'next/image';
-import BasicButton from '../src/components/buttons/basicButton/BasicButton'
 
-import { TelemetriaView} from  '../styles/layouts/telemetria/TelemetriaView';
+import Banner from '../src/components/banner/Banner';
+
+ import { TelemetriaView, Buttons} from '../styles/layouts/Telemetria/TelemetriaView';
+
+
+
+import MenuItem from '@mui/material/MenuItem';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import Select, { SelectChangeEvent } from '@mui/material/Select';
+
 
 
 
 export default function Telemetria() {
+
+  const [age, setAge] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setAge(event.target.value);
+  };
+
+
+
   return(
+
     <TelemetriaView>
 
-        <section className="container">
-        <Image src='/assets/graphical.png' width={970} height={200} layout='fixed'/>
+      <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,
+              sendo que as quantidades aqui informadas são de responsabilidade do agente de medição
+              - Distribuidora.' imgSource='/assets/graphical.png' />
 
 
-        </section>
-        <BasicButton title='texto'/>
-
+      <FormControl sx={{  width: 250,  mt:10 , pl:8}} style={{}}>
+      <FormHelperText   style={{}}>Unidade</FormHelperText>
+        <Select
+          value={age}
+          onChange={handleChange}
+          displayEmpty
+          inputProps={{ 'aria-label': 'Without label' }}
+        >
+          <MenuItem value="">
+            <em>Filial 3</em>
+          </MenuItem>
+          <MenuItem value={10}>Filial 3</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
 
+      </FormControl>
 
+      <FormControl sx={{ width: 240, mt:10 , pl:8}} >
+        <FormHelperText>Data Final</FormHelperText>
+        <Select
+          value={age}
+          onChange={handleChange}
+          displayEmpty
+          inputProps={{ 'aria-label': 'Without label' }}
+         >
+          <MenuItem value="">
+            <em>07/09/2021</em>
+          </MenuItem>
+          <MenuItem value={10}>Filial 3</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
 
+      <FormControl sx={{ width: 240, mt:10 , pl:8}} >
+        <FormHelperText>Data Final</FormHelperText>
+        <Select
+          value={age}
+          onChange={handleChange}
+          displayEmpty
+          inputProps={{ 'aria-label': 'Without label' }}
+         >
+          <MenuItem value="">
+            <em>07/09/2021</em>
+          </MenuItem>
+          <MenuItem value={10}>Filial 3</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
 
+      <FormControl sx={{ width: 240, mt:10 , pl:8}} >
+        <FormHelperText  >Discretização</FormHelperText>
+        <Select
+          value={age}
+          onChange={handleChange}
+          displayEmpty
+          inputProps={{ 'aria-label': 'Without label' }}
+         >
+          <MenuItem value="">
+            <em>60 min</em>
+          </MenuItem>
+          <MenuItem value={10}>Filial 3</MenuItem>
+          <MenuItem value={20}>Twenty</MenuItem>
+          <MenuItem value={30}>Thirty</MenuItem>
+        </Select>
+      </FormControl>
 
+        <Buttons>
+           <button className='btnGrafico'> <p>GRÁFICOS</p> <br /> GERAR GRÁFICOS COM OS DADOS SELECIONADOS</button>
+           <button className='btndownload'> <p>DOWNLOADS</p> <br /> DADOS BRUTOS SELECIONADOS</button>
+            <button className='btnDados'> <p>DADOS</p> <br /> HORÁRIOS DO MÊS ATUAL</button>
+        </Buttons>
     </TelemetriaView>
-
-
-
   )
 }
diff --git a/styles/layouts/Telemetria/TelemetriaView.ts b/styles/layouts/Telemetria/TelemetriaView.ts
index 765928d..e6b5add 100644
--- a/styles/layouts/Telemetria/TelemetriaView.ts
+++ b/styles/layouts/Telemetria/TelemetriaView.ts
@@ -2,41 +2,124 @@
 import styled from 'styled-components';
 
 
-export const TelemetriaView = styled.div`
-    display: flex;
-    padding-left: 11rem;
-    align-items: center;
-    justify-content: flex-start;
-    background-color: #000;
-    height: 100vh;
-    width: 100%;
-
-  .container{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-
-    background-image: linear-gradient(to right, #254F7F 10%, #888888 100%);
-    width: 60rem;
-
-
-  }
-
-
-  .main{
-    display: flex;
-    justify-content: flex-start;
-    width: 70%;
-
-
-
-
-
-    margin-top: 25rem;
-
-  }
+export const TelemetriaView = styled.main`
+   padding: 20px ;
+   width: 100%;
 
 
 
 `;
+
+export const Buttons = styled.div`
+   display: flex;
+   min-width: 10rem;
+   cursor: pointer;
+   margin-top: 8rem;
+   justify-content: space-around;
+   flex-direction: row;
+
+   height: 6rem;
+   /* flex-direction: column; */
+/*
+   .btnSucess{
+     font-size: 10px;
+     cursor: pointer;
+     background-color: #F48665;
+     border: none;
+   } */
+
+   .btnGrafico {
+	box-shadow:inset 0px 34px 0px -15px #F48665;
+	background-color:#F48665;
+	border:none;
+  border-radius: 2px;
+  max-width: 17rem;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Arial;
+	font-size:8px;
+	font-weight:900;
+	padding:9px 20px;
+	text-decoration:none;
+	text-shadow:0px -1px 0px #7a2a1d;
+
+}
+p{
+  font-size:20px;
+}
+.myButton:hover {
+	background-color:#F48665;
+}
+.myButton:active {
+	position:relative;
+	top:1px;
+}
+
+.btndownload{
+  box-shadow:inset 0px 34px 0px -15px #9A56FF;
+	background-color:#9A56FF;
+	border:none;
+  border-radius: 2px;
+	display:inline-block;
+	cursor:pointer;
+  width: 17rem;
+	color:#ffffff;
+	font-family:Arial;
+	font-size:9px;
+	font-weight:900;
+	padding:9px 20px;
+	text-decoration:none;
+	text-shadow:0px -1px 0px #7a2a1d;
+
+}
+p{
+  font-size: 12px;
+}
+.myButton:hover {
+	background-color:#D78AFD;
+}
+.myButton:active {
+	position:relative;
+  /* justify-content: space-between; */
+	top:1px;
+
+
+}
+
+.btnDados{
+  box-shadow:inset 100% #23BDB8;
+	background-color:#23BDB8;
+	border:none;
+  border-radius: 2px;
+	display:inline-block;
+  width: 17rem;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Arial;
+	font-size:9px;
+	font-weight:900;
+	padding:9px 20px;
+	text-decoration:none;
+	text-shadow:0px -1px 0px #7a2a1d;
+
+}
+p{
+  font-size: 12px;
+}
+.myButton:hover {
+	background-color:#23BDB8;
+}
+.myButton:active {
+	position:relative;
+  /* justify-content: space-between; */
+	top:1px;
+}
+
+
+`;
+
+
+
+
+