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

feat: circular progress loading component

Browse Source
This commit is contained in:
Leandro Farias 2023-04-20 14:46:53 +00:00
parent 7c40982a00
commit 2d7da446fc
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,6 +8,7 @@ const Page = () => {
const router = useRouter() const router = useRouter()
const { id } = router.query const { id } = router.query
return( return(
<> <>
<Head> <Head>
@ -19,7 +20,7 @@ const Page = () => {
component="main" component="main"
sx={{ sx={{
flexGrow: 1, flexGrow: 1,
py: 8, py: 0,
}} }}
> >
<Container maxWidth="lg" > <Container maxWidth="lg" >
@ -28,7 +29,7 @@ const Page = () => {
RPC RPC
</Typography> </Typography>
{/*<SettingsNotifications />*/} {/*<SettingsNotifications />*/}
< DevicesRPC/> < DevicesRPC />
</Stack> </Stack>
</Container> </Container>
</Box> </Box>

22
frontend/src/sections/devices/devices-rpc.js
View File

@ -15,8 +15,21 @@ import {
SvgIcon SvgIcon
} from '@mui/material'; } from '@mui/material';
import PaperAirplane from '@heroicons/react/24/solid/PaperAirplaneIcon'; import PaperAirplane from '@heroicons/react/24/solid/PaperAirplaneIcon';
import CircularProgress from '@mui/material/CircularProgress';
import Backdrop from '@mui/material/Backdrop';
export const DevicesRPC = () => { export const DevicesRPC = () => {
const [open, setOpen] = useState(false);
const handleClose = () => {
setOpen(false);
};
const handleOpen = () => {
setOpen(true);
};
const [value, setValue] = useState(` const [value, setValue] = useState(`
{opa, {opa,
teste123:goiaba}` teste123:goiaba}`
@ -80,10 +93,17 @@ export const DevicesRPC = () => {
</CardContent> </CardContent>
<Divider /> <Divider />
<CardActions sx={{ justifyContent: 'flex-end' }}> <CardActions sx={{ justifyContent: 'flex-end' }}>
<Button variant="contained" endIcon={<SvgIcon><PaperAirplane /></SvgIcon>}> <Button variant="contained" endIcon={<SvgIcon><PaperAirplane /></SvgIcon>} onClick={handleOpen}>
Send Send
</Button> </Button>
</CardActions> </CardActions>
<Backdrop
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
open={open}
onClick={handleClose}
>
<CircularProgress color="inherit" />
</Backdrop>
</Card> </Card>
</form> </form>
); );