feat: devices page

2023-04-11 14:10:56 +00:00 · 2023-04-11 14:10:56 +00:00 · 058b47d461
commit 058b47d461
parent 93a3199f33
3 changed files with 130 additions and 6 deletions
--- a/frontend/src/pages/devices.js
+++ b/frontend/src/pages/devices.js
@ -24,10 +24,10 @@ const Page = () => (
            component="main"
            sx={{
                flexGrow: 1,
-                py: 8
+                py: 8,
            }}
        >
-            <Container maxWidth="xl">
+            <Container maxWidth="xl" >
                <Grid
                    container
                    spacing={3}
--- a/frontend/src/pages/devices/[id].js
+++ b/frontend/src/pages/devices/[id].js
@ -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 router = useRouter()
    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;
--- a/frontend/src/sections/devices/devices-rpc.js
+++ b/frontend/src/sections/devices/devices-rpc.js
@ -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>
+  );
+};