From 5ff48dad9b95e6210b12e03b45680683c5c47fbf Mon Sep 17 00:00:00 2001 From: Josue Date: Tue, 13 Jul 2021 19:58:07 -0400 Subject: [PATCH] feat(front-end): add a first implementation of sending key combinations to a server hosted in node --- striker-ui/components/Display/FullSize.tsx | 33 ++++++++++++++++++---- 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/striker-ui/components/Display/FullSize.tsx b/striker-ui/components/Display/FullSize.tsx index 73f182ed..a0c267c9 100644 --- a/striker-ui/components/Display/FullSize.tsx +++ b/striker-ui/components/Display/FullSize.tsx @@ -1,4 +1,5 @@ -import { useState, Dispatch, SetStateAction } from 'react'; +import { useState, useRef, useEffect, Dispatch, SetStateAction } from 'react'; +import { RFB } from 'novnc-node'; import { Box, Menu, MenuItem, Typography } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import CloseIcon from '@material-ui/icons/Close'; @@ -51,22 +52,42 @@ interface PreviewProps { const FullSize = ({ setMode }: PreviewProps): JSX.Element => { const [anchorEl, setAnchorEl] = useState(null); + const rfb = useRef(undefined); + const [displaySize, setDisplaySize] = useState< + | { + width: string | number; + height: string | number; + } + | undefined + >(undefined); const classes = useStyles(); + useEffect(() => { + setDisplaySize({ + width: '75vw', + height: '80vh', + }); + }, []); + const handleClick = (event: React.MouseEvent): void => { setAnchorEl(event.currentTarget); }; + const handleSendKeys = () => { + if (rfb.current) { + rfb.current.sendCtrlAltDel(); + setAnchorEl(null); + } + }; + return ( @@ -100,7 +121,7 @@ const FullSize = ({ setMode }: PreviewProps): JSX.Element => { {keyCombinations.map(({ keys }) => { return ( handlePower(label)} + onClick={handleSendKeys} className={classes.keysItem} key={keys} >