diff --git a/striker-ui/components/Servers.tsx b/striker-ui/components/Servers.tsx index c1fa6021..172bafc9 100644 --- a/striker-ui/components/Servers.tsx +++ b/striker-ui/components/Servers.tsx @@ -1,4 +1,4 @@ -import { useState, useContext } from 'react'; +import { useState, useContext, useRef } from 'react'; import { List, ListItem, @@ -74,17 +74,17 @@ const useStyles = makeStyles((theme) => ({ paddingTop: '.8em', }, menuItem: { - backgroundColor: TEXT, + backgroundColor: GREY, paddingRight: '3em', '&:hover': { - backgroundColor: TEXT, + backgroundColor: GREY, }, }, editButton: { borderRadius: 8, backgroundColor: GREY, '&:hover': { - backgroundColor: TEXT, + backgroundColor: GREY, }, }, editButtonBox: { @@ -124,13 +124,12 @@ 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); const [allSelected, setAllSelected] = useState(false); const [selected, setSelected] = useState([]); + const buttonLabels = useRef([]); const { uuid } = useContext(AnvilContext); const classes = useStyles(); @@ -138,6 +137,23 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { `${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`, ); + const setButtons = (filtered: AnvilServer[]) => { + buttonLabels.current = []; + if ( + filtered.filter((item: AnvilServer) => item.server_state === 'running') + .length + ) { + buttonLabels.current.push('off'); + } + + if ( + filtered.filter((item: AnvilServer) => item.server_state === 'shut off') + .length + ) { + buttonLabels.current.push('on'); + } + }; + const handleClick = (event: React.MouseEvent): void => { setAnchorEl(event.currentTarget); }; @@ -158,6 +174,10 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { if (index === -1) selected.push(server_uuid); else selected.splice(index, 1); + const filtered = data.servers.filter( + (server: AnvilServer) => selected.indexOf(server.server_uuid) !== -1, + ); + setButtons(filtered); setSelected([...selected]); }; @@ -201,7 +221,7 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)} > - {buttonLabels.map((label: ButtonLabels) => { + {buttonLabels.current.map((label: ButtonLabels) => { return ( handlePower(label)} @@ -227,13 +247,17 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { color="secondary" checked={allSelected} onChange={() => { - if (!allSelected) + if (!allSelected) { + setButtons(data.servers); setSelected( data.servers.map( (server: AnvilServer) => server.server_uuid, ), ); - else setSelected([]); + } else { + setButtons([]); + setSelected([]); + } setAllSelected(!allSelected); }}