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

Merge branch 'feature/loginStyledComponents' into 'dev'

Browse Source 
Adicionado Reponsividade no login

See merge request kluppsoftware/smart-energia-web!13
This commit is contained in:
Alex Da Silva Santos 2022-05-07 00:10:57 +00:00
commit 8a0636abee
9 changed files with 318 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -29,6 +29,7 @@
"react": "18.1.0",
"react-chartjs-2": "^4.1.0",
"react-dom": "18.1.0",
"react-icons": "^4.3.1",
"styled-components": "^5.3.5"
},
"devDependencies": {

39
pages/index.tsx
View File

@ -1,10 +1,49 @@
import React from 'react'
import Image from 'next/image';
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Input from '@mui/material/Input';
import FilledInput from '@mui/material/FilledInput';
import OutlinedInput from '@mui/material/OutlinedInput';
import InputLabel from '@mui/material/InputLabel';
import InputAdornment from '@mui/material/InputAdornment';
import FormHelperText from '@mui/material/FormHelperText';
import FormControl from '@mui/material/FormControl';
import { LoginView} from '../styles/layouts/Login/LoginView';
export default function Home() {
// interface State {
// amount: string;
// password: string;
// weight: string;
// weightRange: string;
// showPassword: boolean;
// }
// const [values, setValues] = React.useState<State>({
// amount: '',
// password: '',
// weight: '',
// weightRange: '',
// showPassword: false,
// });
// const handleChange =
// (prop: keyof State) => (event: React.ChangeEvent<HTMLInputElement>) => {
// setValues({ ...values, [prop]: event.target.value });
// };
// const handleClickShowPassword = () => {
// setValues({
// ...values,
// showPassword: !values.showPassword,
// });
// };
return (
<LoginView>
<Image src='/assets/marca1.svg' width={600} height={700}/>

91
pages/resumoOperacao.tsx Normal file
View File

@ -0,0 +1,91 @@
import React from 'react';
import Sidebar from '../src/components/sidebar/Sidebar';
import { TableView} from '../styles/layouts/ResumoOperacao/ResumoOperacaoView';
export default function ResumoOperacao() {
return(
<TableView>
<Sidebar />
<h1>Resumo de Operaçoes</h1>
<h2>Operações detalhadas</h2>
<h3>Seletor Mês</h3>
<table className='tg' >
<colgroup>
<col style={{width: "106px"}}/>
<col style={{width: "16px"}}/>
<col style={{width: "119px"}}/>
<col style={{width: "334px"}}/>
<col style={{width: "111px"}}/>
<col style={{width: "146px"}}/>
</colgroup>
<thead>
<tr>
<th className='tg-baqh'>Unidade</th>
<th className='tg-baqh'>Operação</th>
<th className='tg-baqh'>Montante(MWh)</th>
<th className='tg-baqh'>Contraparte</th>
<th className='tg-baqh'>Preço(R$/MWh)</th>
<th className='tg-0lax'>Valor NF/Crédito (R$)</th>
</tr>
</thead>
<tbody>
<tr>
<td className='tg-womg'>Unidade-19888</td>
<td className='tg-womg'>comprar</td>
<td className='tg-womg'>122.269</td>
<td className='tg-womg'>COPEL COM I5</td>
<td className='tg-womg'>234,67</td>
<td className='tg-womg'>38.257,15</td>
</tr>
<tr>
<th className='tg-baqh'>Unidade-19888</th>
<th className='tg-baqh'>Comprar</th>
<th className='tg-baqh'>122.269</th>
<th className='tg-baqh'>PACTO COMERCIALIZADORA I5</th>
<th className='tg-baqh'>234,67</th>
<th className='tg-baqh'>38.257,15</th>
</tr>
<tr>
<td className='tg-womg'>Unidade-19888</td>
<td className='tg-womg'>Comprar</td>
<td className='tg-womg'>122.269</td>
<td className='tg-womg'>PACTO COMERCIALIZADORA I5</td>
<td className='tg-womg'>234,67</td>
<td className='tg-womg'>38.257,15</td>
</tr>
<tr>
<td className='tg-baqh'>Unidade-19888</td>
<td className='tg-baqh'>Comprar</td>
<td className='tg-baqh'>122.269</td>
<td className='tg-baqh'>PACTO COMERCIALIZADORA I5</td>
<td className='tg-baqh'>234,67</td>
<td className='tg-baqh'>38.257,15</td>
</tr>
<tr>
<td className='tg-womg'>Unidade-19888</td>
<td className='tg-womg'>Comprar</td>
<td className='tg-womg'>122.269</td>
<td className='tg-womg'>PACTO COMERCIALIZADORA I5</td>
<td className='tg-womg'>234,67</td>
<td className='tg-womg'>38.257,15</td>
</tr>
</tbody>
</table >
</TableView>
)
}

30
pages/telemetria.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from 'react';
import Image from 'next/image';
import BasicButton from '../src/components/buttons/basicButton/BasicButton'
import { TelemetriaView} from '../styles/layouts/Telemetria/TelemetriaView';
export default function Telemetria() {
return(
<TelemetriaView>
<section className="container">
<Image src='/assets/graphical.png' width={970} height={200} layout='fixed'/>
</section>
<BasicButton title='texto'/>
</TelemetriaView>
)
}

BIN
public/assets/graphical.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 599 KiB

71
styles/layouts/Login/LoginView.ts
View File

@ -3,23 +3,36 @@ import styled from 'styled-components';
export const LoginView = styled.main`
display: flex;
align-items: center;
justify-content: center;
margin-left: 10rem;
justify-content: flex-end;
flex-wrap: wrap;
width: 100%;
min-height: fit-content;
height: 100vh;
background-color: #f9f9f9;
.container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #F9F9F9;
height: 34rem;
width: 49rem;
margin-left: 10rem;
margin-top:4rem;
color: #092C4C;
background-color: #FFFFFF;
height: 33rem;
text-align: center;
border-radius: 4px;
width: 100%;
max-width: 30rem;
padding-left: 50px;
padding-right: 50px;
margin-left: 8rem;
}
@media screen and (max-width: 1008px) {
justify-content: center;
.container {
margin: 0;
}
}
h1{
margin-bottom:5px;
@ -32,17 +45,18 @@ export const LoginView = styled.main`
color: #092C4C;
}
input{
width: 30rem;
width: 100%;
height: 15rem;
border-radius: 5px;
margin-bottom: 10px;
border-style: none;
border: solid #D0D0D0 1px;
}
button{
width: 30rem;
width: 100%;
height: 18rem;
background-image: linear-gradient(to right, #254F7F 10%, #888888 100%);
color: white;
@ -55,8 +69,10 @@ export const LoginView = styled.main`
color: #ABB3BB;
font-size: 12px;
}
span{
margin-left: 23rem;
font-size: 12px;
color: #254F7F;
@ -79,7 +95,7 @@ export const LoginView = styled.main`
border-right: none;
display: block;
text-align: center;
width: 30rem;
width: 100%;
}
@ -88,17 +104,26 @@ export const LoginView = styled.main`
color: #ABB3BB;
font-size: 14px;
}
img{
/* background-color: black; */
display: none;
}
@media (max-width: 1150px) {
img{visibility:hidden }
/* .app {
display: grid;
place-items: center;
min-height: 100vh;;
}
.password-field{
padding: 0.5rem 1rem;
}
.btnClick{
padding: 1px;
font-size: 1.2rem;
outline: none;
border: none;
} */

62
styles/layouts/ResumoOperacao/ResumoOperacaoView.ts Normal file
View File

@ -0,0 +1,62 @@
import styled from 'styled-components'
export const TableView = styled.div`
display: flex;
padding: 2.5rem;
justify-content: center;
flex-direction: column;
align-items: flex-start;
width: 100%;
height: 100%;
.tg{
border-collapse:collapse;
border-spacing:0;
}
.tg td{
border-color:black;
border-style:solid;
border-width:1px;
font-family:Arial, sans-serif;
font-size:14px;
overflow:hidden;
padding:10px 5px;
word-break:normal;
}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.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}
h1{
color: #000;
font-family: Poppins;
font-size: 15px;
}
h2{
color: #969BA0;
font-family: Poppins;
font-size: 11px;
font-weight: 400;
margin-top: 1px;
}
h3{
color: #254F7F;
font-family: Poppins;
font-size: 15px;
}
`;

42
styles/layouts/Telemetria/TelemetriaView.ts Normal file
View File

@ -0,0 +1,42 @@
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;
}
`;

5
yarn.lock
View File

@ -2375,6 +2375,11 @@ react-dom@18.1.0:
loose-envify "^1.1.0"
scheduler "^0.22.0"
react-icons@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"