diff --git a/striker-ui/components/Servers.tsx b/striker-ui/components/Servers.tsx index ac2cac41..127d64f0 100644 --- a/striker-ui/components/Servers.tsx +++ b/striker-ui/components/Servers.tsx @@ -1,5 +1,16 @@ -import { useContext } from 'react'; -import { List, ListItem, Divider, Box } from '@material-ui/core'; +import { useState, useContext } from 'react'; +import { + List, + ListItem, + Divider, + Box, + Button, + Checkbox, + Menu, + MenuItem, +} from '@material-ui/core'; +import EditIcon from '@material-ui/icons/Edit'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; import { makeStyles } from '@material-ui/core/styles'; import { Panel } from './Panels'; import PeriodicFetch from '../lib/fetchers/periodicFetch'; @@ -43,6 +54,16 @@ const useStyles = makeStyles((theme) => ({ hostBox: { paddingTop: 0, }, + checkbox: { + paddingTop: '.8em', + }, + editButtonBox: { + paddingTop: '.3em', + }, + dropdown: { + paddingTop: '.8em', + paddingBottom: '.8em', + }, })); const selectDecorator = (state: string): Colours => { @@ -59,6 +80,9 @@ const selectDecorator = (state: string): Colours => { }; const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { + const [anchorEl, setAnchorEl] = useState(null); + const [showCheckbox, setShowCheckbox] = useState(false); + const [selected, setSelected] = useState([]); const { uuid } = useContext(AnvilContext); const classes = useStyles(); @@ -66,15 +90,74 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { `${process.env.NEXT_PUBLIC_API_URL}/get_servers?anvil_uuid=${uuid}`, ); + const handleClick = (event: React.MouseEvent): void => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const handleChange = (server_uuid: string): void => { + const index = selected.indexOf(server_uuid); + if (index === -1) { + selected.push(server_uuid); + setSelected([...selected]); + } else selected.splice(index, 1); + }; + + const isSelected = (server: string): boolean => { + const thing = selected.find((s) => s === server); + return thing !== 'undefined'; + }; + const anvilIndex = anvil.findIndex((a) => a.anvil_uuid === uuid); const filteredHosts = hostsSanitizer(anvil[anvilIndex]?.hosts); return ( -
- -
+ + + + + + + + + + + + + + + + + )} {!isLoading ? ( @@ -88,6 +171,16 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { key={server.server_uuid} > + {showCheckbox && ( + + handleChange(server.server_uuid)} + inputProps={{ 'aria-label': 'primary checkbox' }} + /> + + )}