diff --git a/striker-ui/components/Servers.tsx b/striker-ui/components/Servers.tsx index 9a525e19..3a9b9831 100644 --- a/striker-ui/components/Servers.tsx +++ b/striker-ui/components/Servers.tsx @@ -33,6 +33,8 @@ import Decorator, { Colours } from './Decorator'; import Spinner from './Spinner'; import hostsSanitizer from '../lib/sanitizers/hostsSanitizer'; +import putJSON from '../lib/fetchers/putJSON'; + const useStyles = makeStyles((theme) => ({ root: { width: '100%', @@ -117,6 +119,10 @@ const selectDecorator = (state: string): Colours => { } }; +type ButtonLabels = 'on' | 'off'; + +const buttonLabels: ButtonLabels[] = ['on', 'off']; + const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { const [anchorEl, setAnchorEl] = useState(null); const [showCheckbox, setShowCheckbox] = useState(false); @@ -133,8 +139,14 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { setAnchorEl(event.currentTarget); }; - const handleClose = () => { + const handlePower = (label: ButtonLabels) => { setAnchorEl(null); + if (!selected.length) { + putJSON('/set_power', { + server_uuid: selected, + is_on: label === 'on', + }); + } }; const handleChange = (server_uuid: string): void => { @@ -184,22 +196,28 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} - onClose={handleClose} + onClose={handlePower} > - - - On - - - - - Off - - + {buttonLabels.map((label: ButtonLabels) => { + return ( + handlePower(label)} + className={classes.menuItem} + key={label} + > + + {label.replace(/^[a-z]/, (c) => c.toUpperCase())} + + + ); + })} - +