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

🔖 Merge branch 'release/0.1.0' into 'main'

Browse Source 
Release/0.1.0

See merge request kluppsoftware/smart-energia-web!35
This commit is contained in:
José Corte 2022-05-12 14:22:25 +00:00
commit 583c2f8b12
17 changed files with 219 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
pages/_app.tsx
View File

@ -11,14 +11,7 @@ import '../styles/nprogress/nprogress.css'
import '../styles/globals.ts' import '../styles/globals.ts'
import Home from '.' import Home from '.'
<<<<<<< HEAD
function MyApp({ Component, pageProps }: AppProps) {
const [ auth, setAuth ] = useState(false)
=======
import Head from 'next/head' import Head from 'next/head'
>>>>>>> d76992f98de0130492c71a92530d12b04793ecac
function MyApp({ Component, pageProps }: AppProps) { function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter() const router = useRouter()
@ -64,4 +57,4 @@ function MyApp({ Component, pageProps }: AppProps) {
) )
} }
export default MyApp export default MyApp;

9
pages/_document.tsx
View File

@ -41,16 +41,7 @@ export default class MyDocument extends Document {
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin='true' />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
<<<<<<< HEAD
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Lobster&family=Poppins:ital,wght@0,500;0,600;0,800;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Lobster&family=Poppins:ital,wght@0,500;0,600;0,800;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" />
=======
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400&family=Lobster&family=Poppins:ital,wght@0,500;0,600;0,800;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" />
>>>>>>> d76992f98de0130492c71a92530d12b04793ecac
</Head> </Head>
<body> <body>
<Main /> <Main />

8
pages/index.tsx
View File

@ -13,18 +13,16 @@ import TextField from '@mui/material/TextField';
import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai'; import {AiOutlineEyeInvisible, AiOutlineEye} from 'react-icons/ai';
import { LoginView, LoginContainer} from '../styles/layouts/Login/LoginView'; import { LoginView, LoginContainer } from '../styles/layouts/login/LoginView';
export default function Home() { export default function Home() {
const [state, setstate]=useState(false); const [state, setstate]=useState(false);
const toggleBtn = ()=> { const toggleBtn = ()=> {
setstate(prevState => !prevState); setstate(prevState => !prevState);
} }
const [values, setValues] = React.useState({ const [values, setValues] = React.useState({
amount: '',
password: '', password: '',
weight: '',
weightRange: '',
showPassword: false, showPassword: false,
}); });
@ -78,9 +76,7 @@ export default function Home() {
</FormControl> </FormControl>
<span>Esqueceu a senha ?</span> <span>Esqueceu a senha ?</span>
<Link href='/dashboard' >
<LoginButton title='ENTRAR' /> <LoginButton title='ENTRAR' />
</Link>
<fieldset className="line"> <fieldset className="line">
<legend className="text">Ou</legend> <legend className="text">Ou</legend>

44
pages/news.tsx Normal file
View File

@ -0,0 +1,44 @@
import React from 'react'
import Banner from '../src/components/banner/Banner'
import Header from '../src/components/header/Header'
import BasicButton from '../src/components/buttons/basicButton/BasicButton';
import { NewsView, Button } from '../styles/layouts/news/NewsView'
export default function aboutUs() {
return (
<NewsView>
<Header name='' />
<Banner title='Notícias' subtitle='Tudo de importante no setor de energia' imgSource='/assets/banners/news.png' />
<section>
<h2>19 Abril 2022</h2>
<strong>ANEEL APROVA REAJUSTE TARIFÁRIO ANUAL DA ENERGISA SERGIPE DE 16,46 % PARA O CONSUMIDOR RESIDENCIAL</strong>
<br />
<br />
<p>A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE).
As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para
o consumidor residencial. <br />
Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
<Button>
<fieldset>
<legend> <BasicButton title='Ver Mais...' /></legend>
</fieldset>
</Button>
<h2>19 Abril 2022</h2>
<strong>NEEL APROVA REAJUSTE MÉDIO DE 20,36% NA TARIFA DE ENERGIA NO RN</strong>
<br />
<br />
<p>A Agência Nacional de Energia Elétrica (ANEEL) aprovou, nesta terça-feira (19/04) o reajuste tarifário anual da Energisa Sergipe – Distribuidora de Energia S.A (ESE).
As novas tarifas da empresa, que atende cerca de e 825 mil unidades consumidoras no Sergipe, entram em vigor nesta sexta, 22/04, com reajuste de 16,46 % para
o consumidor residencial. <br />
Os itens que mais impactaram a correção foram os encargos setoriais, os custos de distribuição, a retirada dos componentes financeiros..</p>
<Button>
<fieldset>
<legend> <BasicButton title='Ver Mais...' /></legend>
</fieldset>
</Button>
</section>
</NewsView>
)
}

87
pages/resumoOperacao.tsx
View File

@ -1,13 +1,10 @@
import React from 'react'; import React from 'react';
<<<<<<< HEAD
import BasicButton from '../src/components/buttons/basicButton/BasicButton';
=======
import Header from '../src/components/header/Header'; import Header from '../src/components/header/Header';
import PageTitle from '../src/components/pageTitle/PageTitle'; import PageTitle from '../src/components/pageTitle/PageTitle';
>>>>>>> d76992f98de0130492c71a92530d12b04793ecac import BasicButton from '../src/components/buttons/basicButton/BasicButton';
import Sidebar from '../src/components/sidebar/Sidebar'; import Sidebar from '../src/components/sidebar/Sidebar';
import { TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView'; import { Pagination, TableView } from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
export default function ResumoOperacao() { export default function ResumoOperacao() {
return( return(
@ -17,76 +14,6 @@ export default function ResumoOperacao() {
<h3>Seletor Mês</h3> <h3>Seletor Mês</h3>
<table className="tg"> <table className="tg">
<<<<<<< HEAD
<thead>
<tr>
<th className='tg-8oo6'>Unidade </th>
<th className='tg-8oo6'>Operação</th>
<th className='tg-8oo6'>Montante (MWh)</th>
<th className='tg-8oo6'>Contraparte</th>
<th className='tg-8oo6'>Preço(R$/MWh)</th>
<th className='tg-8oo6'>ValorNF/Crédito(R$)</th>
</tr>
</thead>
<tbody>
<tr>
<td className='tg-gceh'>Unidade - 9500130</td>
<td className='tg-uulg'>Compra</td>
<td className='tg-gceh'>122,269</td>
<td className='tg-gceh'>COPEL COM I5</td>
<td className='tg-uulg'>234,67</td>
<td className='tg-gceh'>38.257,15</td>
</tr>
<tr>
<td className='tg-hq65'>Unidade - 9500130</td>
<td className='tg-0tzy'>Compra</td>
<td className='tg-hq65'>110,348</td>
<td className='tg-hq65'>EMEWE I5</td>
<td className='tg-0tzy'>190,16</td>
<td className='tg-hq65'>27.978,37</td>
</tr>
<tr>
<td className="tg-gceh">Unidade - 9500130</td>
<td className="tg-uulg">Compra</td>
<td className="tg-gceh">13,074</td>
<td className="tg-gceh">PACTO COMERCIALIZADORA I5</td>
<td className="tg-gceh">300,36</td>
<td className="tg-gceh">5.235,88</td>
</tr>
<tr>
<td className='tg-hq65'>Unidade - 9500130</td>
<td className='tg-0tzy'>Compra</td>
<td className='tg-hq65'>133,117</td>
<td className='tg-hq65'>COPEL COM I5</td>
<td className='tg-0tzy'>300,36</td>
<td className='tg-hq65'>41.651,42</td>
</tr>
<tr>
<td className='tg-gceh'>Unidade - 9500130</td>
<td className='tg-uulg'>Compra</td>
<td className='tg-gceh'>120,138</td>
<td className='tg-gceh'>EMEWE I5</td>
<td className='tg-uulg'>234,67</td>
<td className='tg-gceh'>30.460,59</td>
</tr>
<tr>
<td className='tg-hq65'>Unidade - 9500130</td>
<td className='tg-0tzy'>Compra</td>
<td className='tg-hq65'>14,897</td>
<td className='tg-hq65'>PACTO COMERCIALIZADORA I5</td>
<td className='tg-0tzy'>300,36</td>
<td className='tg-hq65'>5.965,95</td>
</tr>
</tbody>
</table>
<BasicButton title='Enviar PDF' />
<p>Mostando de 1 a 10 de 30 Entradas</p>
</TableView>
=======
<thead> <thead>
<tr> <tr>
<th className='tg-8oo6'>Unidade </th> <th className='tg-8oo6'>Unidade </th>
@ -148,7 +75,15 @@ export default function ResumoOperacao() {
</tr> </tr>
</tbody> </tbody>
</table> </table>
<BasicButton title='Baixar PDF' />
<Pagination>
<p>Mostrando 1 a 10 de 30 Entradas</p>
<p >Anterior <span className='number'>01</span> <span className='numberColor'>02 .. 05</span> <span className='number'>Proxima</span> </p>
</Pagination>
</TableView> </TableView>
>>>>>>> d76992f98de0130492c71a92530d12b04793ecac
) )
} }

2
pages/telemetria.tsx
View File

@ -23,7 +23,7 @@ export default function Telemetria() {
return( return(
<TelemetriaView> <TelemetriaView>
<Header name='' /> <Header name='' />
<Banner title ='Telemetria' subtitle='Dados Coletados do Sistema de Coleta de Dados de Energia - <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, 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 sendo que as quantidades aqui informadas são de responsabilidade do agente de medição

BIN
public/assets/banners/news.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 588 KiB

4
src/components/banner/BannerView.ts
View File

@ -45,8 +45,4 @@ export const BannerView = styled.div`
@media (max-width: 1008px) { @media (max-width: 1008px) {
font-size: 170%; font-size: 170%;
} }
` `

39
src/components/buttonGroup/ButtonGroup.tsx Normal file
View File

@ -0,0 +1,39 @@
import React from 'react'
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { ButtonGroupView } from './ButtonGroupView';
export default function ButtonGroup() {
const [timeCourse, setTimeCourse] = React.useState<string | null>('Mensal');
const handleAlignment = (
event: React.MouseEvent<HTMLElement>,
newTimeCourse: string | null,
) => {
setTimeCourse(newTimeCourse);
};
return (
<ButtonGroupView timeCourse={timeCourse} >
<ToggleButtonGroup
value={timeCourse}
exclusive
onChange={handleAlignment}
aria-label="time course"
className='groupButton'
style={{backgroundColor: 'transparent'}}
>
<div className='switch' />
<ToggleButton value="Mensal" aria-label="Mensal" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
Mensal
</ToggleButton>
<ToggleButton value="Semanal" aria-label="Semanal" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
Semanal
</ToggleButton>
<ToggleButton value="Hoje" aria-label="Hoje" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
Hoje
</ToggleButton>
</ToggleButtonGroup>
</ButtonGroupView>
)
}

26
src/components/buttonGroup/ButtonGroupView.ts Normal file
View File

@ -0,0 +1,26 @@
import { ButtonBaseClassKey } from "@mui/material";
import styled from "styled-components";
interface ButtonGroupViewInterface {
timeCourse: string | any;
}
export const ButtonGroupView = styled.div<ButtonGroupViewInterface>`
background-color: #F4F5F9;
border-radius: 10px;
.switch {
position: absolute;
width: 85px;
height: 40px;
margin-top: 3.5px;
transform: translateX(${props => props.timeCourse=='Mensal'? '4px' : props.timeCourse=='Semanal'? '94px' : '181px'});
transition-duration: 0.5s;
transition-delay: 0s;
border-radius: 8px;
background: #fff;
}
`

3
src/components/buttons/basicButton/BasicButtonView.ts
View File

@ -4,8 +4,9 @@ export const BasicButtonView = styled.button`
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin-top: 10px;
width: 120px; width: 140px;
height: 45px; height: 45px;
cursor: pointer; cursor: pointer;
background: #254F7F; background: #254F7F;

9
src/components/buttons/loginButton/LoginButton.tsx
View File

@ -1,3 +1,4 @@
import Link from 'next/link'
import React from 'react' import React from 'react'
import { LoginButtonView } from './LoginButtonView' import { LoginButtonView } from './LoginButtonView'
@ -7,8 +8,10 @@ interface LoginButtonInterface {
export default function LoginButton({ title }: LoginButtonInterface) { export default function LoginButton({ title }: LoginButtonInterface) {
return ( return (
<LoginButtonView> <Link href='/dashboard' >
{title} <LoginButtonView>
</LoginButtonView> {title}
</LoginButtonView>
</Link>
) )
} }

19
src/components/graph/graphCard/ChartCard.tsx
View File

@ -6,6 +6,7 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { ChartCardView } from './ChartCardView'; import { ChartCardView } from './ChartCardView';
import Chart from '../Chart'; import Chart from '../Chart';
import ButtonGroup from '../../buttonGroup/ButtonGroup';
interface ChartCardInterface { interface ChartCardInterface {
title: string, title: string,
@ -32,23 +33,7 @@ export default function ChartCard({ title, subtitle, consumption, className }: C
<h2>{title}</h2> <h2>{title}</h2>
<span>{subtitle}</span> <span>{subtitle}</span>
</div> </div>
<ToggleButtonGroup <ButtonGroup />
value={timeCourse}
exclusive
onChange={handleAlignment}
aria-label="text alignment"
className='groupButton'
>
<ToggleButton value="left" aria-label="left aligned">
Mensal
</ToggleButton>
<ToggleButton value="center" aria-label="centered">
Semanal
</ToggleButton>
<ToggleButton value="right" aria-label="right aligned">
Hoje
</ToggleButton>
</ToggleButtonGroup>
</div> </div>
{ {
consumption? consumption?

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

@ -35,7 +35,7 @@ export default function Sidebar() {
<Link href='/estimatedCost'><li>Custo Estimado</li></Link> <Link href='/estimatedCost'><li>Custo Estimado</li></Link>
<Link href='/costIndicator'><li>Custo R/MWh</li></Link> <Link href='/costIndicator'><li>Custo R/MWh</li></Link>
</div> </div>
<Link href='#'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link> <Link href='/news'><li className={router.pathname=='/news'? 'actualPath' : null}><Image src='/assets/sidebar/newsIcon.svg' width={25} height={25} />{'Notícias >'}</li></Link>
<Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link> <Link href='#'><li className={router.pathname=='/sectorialInfo'? 'actualPath' : null}><Image src='/assets/sidebar/sectorialInfoIcon.svg' width={25} height={25} />{'Info Setorial >'}</li></Link>
<Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link> <Link href='/faq'><li className={router.pathname=='/faq'? 'actualPath' : null}><Image src='/assets/sidebar/saqIcon.svg' width={25} height={25} />{'FAQ >'}</li></Link>
<Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link> <Link href='/aboutUs'><li className={router.pathname=='/aboutUs'? 'actualPath' : null}><Image src='/assets/sidebar/dashboardIcon.svg' width={25} height={25} />{'Sobre Nós >'}</li></Link>

0
src/txt.txt Normal file
View File

21
styles/layouts/ResumoOperacao/ResumoOperacaoView.ts
View File

@ -139,9 +139,24 @@ export const TableView = styled.div`
color: #254F7F; color: #254F7F;
} }
p{
margin-top: 4rem; .pagination{
}
`;
export const Pagination = styled.div`
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.number{
color: #2E5581;
}
.numberColor{
color: #ABAFB3;
} }
`; `;

66
styles/layouts/news/NewsView.ts Normal file
View File

@ -0,0 +1,66 @@
import styled from "styled-components";
export const NewsView = styled.main`
width: 100%;
p {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
font-size: 17px;
line-height: 26px;
}
h2{
color: #254F7F;
}
ul {
list-style: none;
li {
display: flex;
margin-bottom: 8px;
}
}
section {
article {
display: flex;
justify-content: flex-end;
align-items: center;
aside {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
flex-direction: column;
}
}
}`;
export const Button = styled.div`
display: flex;
justify-content: center;
fieldset {
border-top: 0.7px solid #E1E1E1;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
width: 100%;
}
fieldset legend {
padding: 25px 4px;
color: #ABB3BB;
font-size: 14px;
}
`;