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

update Consumption

Browse Source
This commit is contained in:
Alex Santos 2022-06-24 19:54:46 -03:00
parent b5312d2964
commit 020fe30314
9 changed files with 356 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -27,6 +27,7 @@
"@mui/material": "^5.6.4",
"@mui/x-data-grid": "^5.11.0",
"@mui/x-date-pickers": "^5.0.0-alpha.3",
"@react-pdf-viewer/core": "^3.5.0",
"@tinymce/tinymce-react": "^4.1.0",
"@types/react-csv": "^1.1.2",
"@types/yup": "^0.29.14",

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

@ -23,9 +23,11 @@ export const BannerView = styled.div`
}
h1 {
font-size: 18px;
font-size: 1.3em;
}
.text {
position: relative;
margin: 0 0 0 20px;
@ -42,7 +44,7 @@ export const BannerView = styled.div`
text-overflow: ellipsis;
p {
font-size: 70%;
font-size: 19px;
/* height: 43px; */
text-overflow: ellipsis;

349
src/pages/administrative/clients/index.tsx
View File

@ -1,28 +1,28 @@
import Box from '@mui/material/Box';
import Modal from '@mui/material/Modal';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import React, { useState } from 'react'
import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertProps } from '@mui/material/Alert';
import ClientsTable from '../../../components/administrativeTables/ClientsTable';
import Box from '@mui/material/Box'
import Modal from '@mui/material/Modal'
import TextField from '@mui/material/TextField'
import Typography from '@mui/material/Typography'
import React, { useState, useEffect } from 'react'
import Image from 'next/image'
import Snackbar from '@mui/material/Snackbar'
import MuiAlert, { AlertProps } from '@mui/material/Alert'
import ClientsTable from '../../../components/administrativeTables/ClientsTable'
import BasicButton from '../../../components/buttons/basicButton/BasicButton'
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1';
import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2';
import FaqButton1 from '../../../components/buttons/faqButton/FaqButton1'
import FaqButton2 from '../../../components/buttons/faqButton/FaqButton2'
import Header from '../../../components/header/Header'
import InputUploadImg from '../../../components/inputUploadImg/inputUpload';
import { ClientsView } from '../../../styles/layouts/clients/ClientsView';
import PageTitle from '../../../components/pageTitle/PageTitle';
import ConfirmModal from '../../../components/modal/ConfirmModal';
import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView';
import { api } from '../../../services/api';
import { parseCookies } from 'nookies';
import { GetServerSideProps } from 'next';
import getAPIClient from '../../../services/ssrApi';
import FormData from 'form-data';
import { InputUploadView } from '../../../components/inputUploadImg/inputUploadView';
import { ClientsView } from '../../../styles/layouts/clients/ClientsView'
import PageTitle from '../../../components/pageTitle/PageTitle'
import ConfirmModal from '../../../components/modal/ConfirmModal'
import { ConfirmModalView } from '../../../styles/layouts/modals/confirmModalView'
import { api } from '../../../services/api'
import { parseCookies } from 'nookies'
import { GetServerSideProps } from 'next'
import getAPIClient from '../../../services/ssrApi'
import FormData from 'form-data'
import { InputUploadView } from '../../../components/inputUploadImg/inputUploadView'
const style = {
position: 'absolute' as const,
@ -36,17 +36,17 @@ const style = {
boxShadow: 24,
p: 4,
overflowY: 'scroll'
};
}
const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
ref,
ref
) {
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});
return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
})
export default function clients({clients, userName}) {
const formData = new FormData();
export default function clients({ clients, userName }) {
const formData = new FormData()
const [client, setClient] = useState<any>({
name: String,
@ -55,44 +55,60 @@ export default function clients({clients, userName}) {
password_confirmation: String,
client_id: Number
})
const [logo, setLogo] = useState(false);
const [logo, setLogo] = useState(false)
const [selectedClients, setSelectedClients] = useState([])
const [open, setOpen] = useState(false);
const [imageURLS, setImageURLs] = useState([])
const [images, setImages] = useState([] as any)
const [open, setOpen] = useState(false)
const [openModalInativar, setOpenModalInativar] = useState(false)
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
const handleOpen = () => setOpen(true)
const handleClose = () => setOpen(false)
const [openModal, setOpenModal] = useState(false)
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
const [openSnackSuccessDelete, setOpenSnackSuccessDelete] = useState<boolean>(false);
const [openSnackErrorDelete, setOpenSnackErrorDelete] = useState<boolean>(false);
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false)
const [openSnackError, setOpenSnackError] = useState<boolean>(false)
const [openSnackSuccessDelete, setOpenSnackSuccessDelete] =
useState<boolean>(false)
const [openSnackErrorDelete, setOpenSnackErrorDelete] =
useState<boolean>(false)
const handleCloseSnack = (event?: React.SyntheticEvent | Event, reason?: string) => {
const handleCloseSnack = (
event?: React.SyntheticEvent | Event,
reason?: string
) => {
if (reason === 'clickaway') {
return;
return
}
setOpenSnackError(false);
setOpenSnackSuccess(false);
};
const handleCloseSnackDelete = (event?: React.SyntheticEvent | Event, reason?: string) => {
if (reason === 'clickaway') {
return;
setOpenSnackError(false)
setOpenSnackSuccess(false)
}
setOpenSnackErrorDelete(false);
setOpenSnackSuccessDelete(false);
};
const handleCloseSnackDelete = (
event?: React.SyntheticEvent | Event,
reason?: string
) => {
if (reason === 'clickaway') {
return
}
setOpenSnackErrorDelete(false)
setOpenSnackSuccessDelete(false)
}
function onChange(e) {
setLogo(e.target.files[0])
}
function handleCreateClient({name, email, password, password_confirmation, client_id}) {
function handleCreateClient({
name,
email,
password,
password_confirmation,
client_id
}) {
formData.append('name', name)
formData.append('email', email)
formData.append('password', password)
@ -100,59 +116,119 @@ export default function clients({clients, userName}) {
formData.append('client_id', client_id)
formData.append('profile_picture', logo)
api.post('/user', formData).then(res => {
api
.post('/user', formData)
.then((res) => {
setOpenSnackSuccess(true)
setOpenModalInativar(false)
window.location.reload()
}).catch(res => {
})
.catch((res) => {
setOpenSnackError(true)
})
}
async function handleDeleteClient(id: any) {
await id.map(client => {
api.delete(`/user/${client}`).then(res => {
await id.map((client) => {
api
.delete(`/user/${client}`)
.then((res) => {
setOpenSnackSuccessDelete(true)
setOpenModalInativar(false)
window.location.reload()
}).catch(res => setOpenSnackErrorDelete(true))
})
.catch((res) => setOpenSnackErrorDelete(true))
})
}
useEffect(() => {
if (images.length < 1) return
const newImageUrls: any = []
images.forEach((image: any) =>
newImageUrls.push(URL.createObjectURL(image))
)
setImageURLs(newImageUrls)
}, [images])
function onImageChange(e: any) {
setImages([...e.target.files])
setLogo(e.target.files[0])
// console.log(e);
}
return (
<div style={{display: 'flex', flexDirection: 'column', width: '100%'}}>
<Snackbar open={openSnackSuccess} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="success" sx={{ width: '100%' }}>
<div style={{ display: 'flex', flexDirection: 'column', width: '100%' }}>
<Snackbar
open={openSnackSuccess}
autoHideDuration={4000}
onClose={handleCloseSnack}
>
<Alert
onClose={handleCloseSnack}
severity="success"
sx={{ width: '100%' }}
>
Cliente cadastrada com Sucesso!
</Alert>
</Snackbar>
<Snackbar open={openSnackError} autoHideDuration={4000} onClose={handleCloseSnack}>
<Alert onClose={handleCloseSnack} severity="error" sx={{ width: '100%' }}>
<Snackbar
open={openSnackError}
autoHideDuration={4000}
onClose={handleCloseSnack}
>
<Alert
onClose={handleCloseSnack}
severity="error"
sx={{ width: '100%' }}
>
Cliente não cadastrado!
</Alert>
</Snackbar>
<Snackbar open={openSnackSuccessDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
<Alert onClose={handleCloseSnackDelete} severity="success" sx={{ width: '100%' }}>
<Snackbar
open={openSnackSuccessDelete}
autoHideDuration={4000}
onClose={handleCloseSnackDelete}
>
<Alert
onClose={handleCloseSnackDelete}
severity="success"
sx={{ width: '100%' }}
>
Cliente excluido com sucesso!
</Alert>
</Snackbar>
<Snackbar open={openSnackErrorDelete} autoHideDuration={4000} onClose={handleCloseSnackDelete}>
<Alert onClose={handleCloseSnackDelete} severity="error" sx={{ width: '100%' }}>
<Snackbar
open={openSnackErrorDelete}
autoHideDuration={4000}
onClose={handleCloseSnackDelete}
>
<Alert
onClose={handleCloseSnackDelete}
severity="error"
sx={{ width: '100%' }}
>
Cliente não excluido!
</Alert>
</Snackbar>
<ClientsView>
<Header name={userName} admin/>
<PageTitle title='Clientes' subtitle='Clientes Smart Energia'/>
<div className='buttons'>
<button className='btn2' onClick={handleOpen}>Adicionar</button>
<button className='btn1' onClick={() => setOpenModalInativar(true)}>Inativar</button>
<Header name={userName} admin />
<PageTitle title="Clientes" subtitle="Clientes Smart Energia" />
<div className="buttons">
<button className="btn2" onClick={handleOpen}>
Adicionar
</button>
<button className="btn1" onClick={() => setOpenModalInativar(true)}>
Inativar
</button>
</div>
<section>
<ClientsTable clients={clients} onChange={value => {
<ClientsTable
clients={clients}
onChange={(value) => {
setSelectedClients(value)
}}/>
}}
/>
</section>
</ClientsView>
@ -164,70 +240,136 @@ export default function clients({clients, userName}) {
>
<Box sx={style}>
<h1>Adicionar Cliente</h1>
<Typography sx={{color:'gray', fontSize:12}}variant="h5" gutterBottom component="div">
Adicionar Cliente Smart Energia</Typography>
<Typography
sx={{ color: 'gray', fontSize: 12 }}
variant="h5"
gutterBottom
component="div"
>
Adicionar Cliente Smart Energia
</Typography>
<br />
<TextField id="outlined-basic" label="Nome" sx={{width:350, ml:5}} onChange={(value) => {
<TextField
id="outlined-basic"
label="Nome"
sx={{ width: 350, ml: 5 }}
onChange={(value) => {
setClient({
...client,
name: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="E-mail/Usuário" value={client.email} sx={{width:350, ml:8}} onChange={(value) => {
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="E-mail/Usuário"
value={client.email}
sx={{ width: 350, ml: 8 }}
onChange={(value) => {
setClient({
...client,
email: value.target.value.toLowerCase()
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Senha" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="Senha"
sx={{ width: 350, ml: 5, mt: 2 }}
onChange={(value) => {
setClient({
...client,
password: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Confirma Senha" sx={{width:350, ml:8, mt:2}} onChange={(value) => {
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="Confirma Senha"
sx={{ width: 350, ml: 8, mt: 2 }}
onChange={(value) => {
setClient({
...client,
password_confirmation: value.target.value
})
}} variant="outlined" />
<TextField id="outlined-basic" label="Codigo do Cliente Smart Energia" sx={{width:350, ml:5, mt:2}} onChange={(value) => {
}}
variant="outlined"
/>
<TextField
id="outlined-basic"
label="Codigo do Cliente Smart Energia"
sx={{ width: 350, ml: 5, mt: 2 }}
onChange={(value) => {
setClient({
...client,
client_id: value.target.value
})
}} variant="outlined" />
}}
variant="outlined"
/>
<InputUploadView>
<div className='imgContainer'>
<div className="imgContainer">
<article>
{imageURLS.map((imageSrc, index) => (
<Image
src={imageSrc}
key={index}
width={30}
height={30}
className="image"
/>
))}
</article>
</div>
<div className="update">
<form action="">
<div >
<label htmlFor="arquivo"> <p className='TitleButton'> Enviar foto de Perfil </p> </label>
<input type="file" name='arquivo' id='arquivo' onChange={onChange} />
<div>
<label htmlFor="arquivo">
{' '}
<p className="TitleButton"> Enviar foto de Perfil </p>{' '}
</label>
<input
type="file"
name="arquivo"
id="arquivo"
onChange={onImageChange}
/>
</div>
</form>
</div>
</InputUploadView>
<br /><br />
<FaqButton1 title='Cancelar' onClick={() => setOpen(false)} />
<FaqButton2 title='Salvar' onClick={() => handleCreateClient(client)}/>
<br />
<br />
<FaqButton1 title="Cancelar" onClick={() => setOpen(false)} />
<FaqButton2
title="Salvar"
onClick={() => handleCreateClient(client)}
/>
</Box>
</Modal>
<ConfirmModal open={openModalInativar} handleIsClose={(value) => {setOpenModalInativar(value)}}>
<PageTitle title='Inativar Cliente(s)' subtitle='deseja realmente inativar os clientes selecionadas?'/>
<ConfirmModal
open={openModalInativar}
handleIsClose={(value) => {
setOpenModalInativar(value)
}}
>
<PageTitle
title="Inativar Cliente(s)"
subtitle="deseja realmente inativar os clientes selecionadas?"
/>
<ConfirmModalView>
<BasicButton title='Confirmar' onClick={() => handleDeleteClient(selectedClients)}/>
<BasicButton title='Cancelar' onClick={() => setOpenModalInativar(false)}/>
<BasicButton
title="Confirmar"
onClick={() => handleDeleteClient(selectedClients)}
/>
<BasicButton
title="Cancelar"
onClick={() => setOpenModalInativar(false)}
/>
</ConfirmModalView>
</ConfirmModal>
</div>
@ -238,13 +380,16 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
const apiClient = getAPIClient(ctx)
const { ['@smartAuth-token']: token } = parseCookies(ctx)
const { ['user-name']: userName } = parseCookies(ctx)
let clients = [];
let clients = []
await apiClient.get('/user').then(res => {
await apiClient
.get('/user')
.then((res) => {
// console.log(res)
clients = res.data.data
// console.log(clients)
}).catch(res => {
})
.catch((res) => {
// console.log(res)
})

19
src/pages/administrative/general.tsx
View File

@ -8,10 +8,13 @@ import { GetServerSideProps } from 'next';
import { parseCookies } from 'nookies';
import React, { useRef, useState } from 'react'
import BasicButton from '../../components/buttons/basicButton/BasicButton';
import Header from '../../components/header/Header';
import PageTitle from '../../components/pageTitle/PageTitle';
import { api } from '../../services/api';
import { GeneralView } from '../../styles/layouts/general/GeneralView'
export default function index({userName}: any) {
const editorRef = useRef(null);
const [text, setText] = useState('');
@ -22,14 +25,28 @@ export default function index({userName}: any) {
}
};
const handleChange = (event: SelectChangeEvent) => {
setText(event.target.value);
};
async function handleRegisterAboutUs() {
await api.post('/aboutUs', {
about: editorRef.current.value
}).then(res => {
console.log(res)
}).catch(res => console.log(res))
}
return (
<GeneralView>
<Header name={userName} admin/>
<PageTitle title='Sobre nós' subtitle='Alterar texto de sobre nós'/>
<BasicButton onClick={() => handleRegisterAboutUs(editorRef)} title='Enviar'/>
<br />
<Editor
onInit={(evt, editor) => editorRef.current = editor}
@ -70,6 +87,8 @@ export default function index({userName}: any) {
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
}}
/>
</GeneralView>
)
}

27
src/pages/administrative/industryInfo/index.tsx
View File

@ -8,9 +8,12 @@ import PageTitle from '../../../components/pageTitle/PageTitle'
import { IndustryInfoView } from '../../../styles/layouts/industryInfo/IndustryInfoView'
import InputUploadPdf from '../../../components/inputUploadPdf/inputUpload';
import { api } from '../../../services/api'
import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';
import FormData from 'form-data';
import Snackbar from '@mui/material/Snackbar';
import MuiAlert, { AlertProps } from '@mui/material/Alert';
import { InputUploadView } from '../../../components/inputUploadPdf/inputUploadView'
@ -23,12 +26,12 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
});
export default function industryInfo({userName}: any) {
const formData = new FormData();
const [url, setUrl] = React.useState('');
const [pdf, setPdf] = useState<any>();
function onChange(e) {
setPdf(e.target.files[0])
}
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const files = e.target.files;
files.length > 0 && setUrl(URL.createObjectURL(files[0]));
};
const [openSnackSuccess, setOpenSnackSuccess] = useState<boolean>(false);
const [openSnackError, setOpenSnackError] = useState<boolean>(false);
@ -75,7 +78,8 @@ export default function industryInfo({userName}: any) {
<form action="">
<div className='testess'>
<label htmlFor="arquivo"> <p className='TitleButton'> Enviar PDF </p> </label>
<input type="file" name='arquivo' id='arquivo' onChange={onChange} />
{/* <input type="file" name='arquivo' id='arquivo' onChange={onChange} /> */}
<input type="file" name='arquivo' id='arquivo' accept=".pdf" onChange={onChange} />
</div>
</form>
</div>
@ -83,6 +87,15 @@ export default function industryInfo({userName}: any) {
{/* <InputUploadPdf/> */}
</div>
<div className="update">
<form action="">
<div className='testess'>
<label htmlFor="arquivo"> <p className='TitleButton'> Enviar PDF </p> </label>
<input type="file" accept=".pdf" onChange={onChange} />
</div>
</form>
</div>
<BasicButton onClick={() => handleCreateClient()} title='Atualizar'/>
</IndustryInfoView>

2
src/pages/industryInfo.tsx
View File

@ -35,7 +35,7 @@ export default function industryInfo({userName}: any) {
function handleDownloadPdf() {
api.get('/download').then(res => {
router.replace(res.data.path);
window.open(res.data.path);
console.log(res.data);
setOpenSnackSuccess(true)
}).catch(res => {

5
src/pages/pld/index.tsx
View File

@ -10,6 +10,7 @@ import { parseCookies } from 'nookies';
import React, { useEffect, useState } from 'react'
import BasicButton from '../../components/buttons/basicButton/BasicButton';
import { BasicButtonView } from '../../components/buttons/basicButton/BasicButtonView';
import { LineBarChart } from '../../components/graph/LineBarChart';
import LineChart from '../../components/graph/LineChart';
import Header from '../../components/header/Header'
@ -206,7 +207,11 @@ export default function pld({tableData, graphByHourData, graphByMonthData, userN
}
</tbody>
</table>
<div className='btnDownload'>
<BasicButton onClick={''} title='Download'/>
</div>
<section>
<article onClick={() => setPage('perMouth')}>
<p>Valores Diários</p>
</article>

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

@ -149,6 +149,10 @@ export const PldTableView = styled.main`
margin: 20px;
}
}
.btnDownload{
margin-top:6px;
}
`
export const PldGraphView = styled.main`

5
yarn.lock
View File

@ -1390,6 +1390,11 @@
version "2.11.5"
resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz"
"@react-pdf-viewer/core@^3.5.0":
version "3.5.0"
resolved "https://registry.yarnpkg.com/@react-pdf-viewer/core/-/core-3.5.0.tgz#bb18b87330bfd01d5c31980b820ef58dc1c50a19"
integrity sha512-fu9vi8lzpFtQQqu8XUzSzp5aQYD5YxmJQ0CxOuRrANU7z1kft+TbdyiDOpWoeX2VC0/oyclBxUwleVYv+g1f1w==
"@rushstack/eslint-patch@^1.1.3":
version "1.1.3"
resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz"