louis/oktopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: devices page

Browse Source
This commit is contained in:
Leandro Farias 2023-04-11 14:10:56 +00:00
parent 93a3199f33
commit 058b47d461
3 changed files with 130 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/pages/devices.js
View File

@ -24,10 +24,10 @@ const Page = () => (
component="main" component="main"
sx={{ sx={{
flexGrow: 1, flexGrow: 1,
py: 8 py: 8,
}} }}
> >
<Container maxWidth="xl"> <Container maxWidth="xl" >
<Grid <Grid
container container
spacing={3} spacing={3}

40
frontend/src/pages/devices/[id].js
View File

@ -1,11 +1,45 @@
import { useRouter } from 'next/router' import Head from 'next/head';
import { Box, Stack, Typography, Container, Unstable_Grid2 as Grid } from '@mui/material';
import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
import { useRouter } from 'next/router';
import { DevicesRPC } from 'src/sections/devices/devices-rpc';
const Page = () => { const Page = () => {
const router = useRouter() const router = useRouter()
const { id } = router.query const { id } = router.query
return <p>Device: {id}</p> return(
} <>
<Head>
<title>
Oktopus | TR-369
</title>
</Head>
<Box
component="main"
sx={{
flexGrow: 1,
py: 8,
}}
>
<Container maxWidth="lg" >
<Stack spacing={3} >
<Typography variant="h4">
RPC
</Typography>
{/*<SettingsNotifications />*/}
< DevicesRPC/>
</Stack>
</Container>
</Box>
</>
);
};
Page.getLayout = (page) => (
<DashboardLayout>
{page}
</DashboardLayout>
);
export default Page; export default Page;

90
frontend/src/sections/devices/devices-rpc.js Normal file
View File

@ -0,0 +1,90 @@
import { useCallback, useState } from 'react';
import {
Button,
Card,
CardActions,
CardContent,
CardHeader,
Divider,
Stack,
TextField,
InputLabel,
MenuItem,
Select,
FormControl,
SvgIcon
} from '@mui/material';
import PaperAirplane from '@heroicons/react/24/solid/PaperAirplaneIcon';
export const DevicesRPC = () => {
const [value, setValue] = useState(`
{opa,
teste123:goiaba}`
)
const [age, setAge] = useState(1);
const handleChangeRPC = (event) => {
setAge(event.target.value);
};
const handleChange = (event) => {
setValue(event.target.value);
};
const handleSubmit = useCallback(
(event) => {
event.preventDefault();
},
[]
);
return (
<form onSubmit={handleSubmit}>
<Card>
<CardActions sx={{ justifyContent: 'flex-end'}}>
<FormControl sx={{width:'100px'}}>
<Select
labelId="demo-simple-select-standard-label"
id="demo-simple-select-standard"
value={age}
label="Action"
onChange={(event)=>{handleChangeRPC(event)}}
variant='standard'
>
<MenuItem value={1}>Create</MenuItem>
<MenuItem value={2}>Read</MenuItem>
<MenuItem value={3}>Update</MenuItem>
<MenuItem value={4}>Delete</MenuItem>
</Select>
</FormControl>
</CardActions>
<Divider />
<CardContent>
<Stack
spacing={3}
alignItems={'stretch'}
>
<TextField
id="outlined-multiline-static"
size="large"
multiline="true"
label="Mensagem"
name="password"
onChange={handleChange}
value={value}
fullWidth
rows="10"
/>
</Stack>
</CardContent>
<Divider />
<CardActions sx={{ justifyContent: 'flex-end' }}>
<Button variant="contained" endIcon={<SvgIcon><PaperAirplane /></SvgIcon>}>
Send
</Button>
</CardActions>
</Card>
</form>
);
};