|
|
@ -4,10 +4,12 @@ import { |
|
|
|
ListItem, |
|
|
|
ListItem, |
|
|
|
Divider, |
|
|
|
Divider, |
|
|
|
Box, |
|
|
|
Box, |
|
|
|
|
|
|
|
IconButton, |
|
|
|
Button, |
|
|
|
Button, |
|
|
|
Checkbox, |
|
|
|
Checkbox, |
|
|
|
Menu, |
|
|
|
Menu, |
|
|
|
MenuItem, |
|
|
|
MenuItem, |
|
|
|
|
|
|
|
Typography, |
|
|
|
} from '@material-ui/core'; |
|
|
|
} from '@material-ui/core'; |
|
|
|
import EditIcon from '@material-ui/icons/Edit'; |
|
|
|
import EditIcon from '@material-ui/icons/Edit'; |
|
|
|
import MoreVertIcon from '@material-ui/icons/MoreVert'; |
|
|
|
import MoreVertIcon from '@material-ui/icons/MoreVert'; |
|
|
@ -15,7 +17,14 @@ import { makeStyles } from '@material-ui/core/styles'; |
|
|
|
import { Panel } from './Panels'; |
|
|
|
import { Panel } from './Panels'; |
|
|
|
import PeriodicFetch from '../lib/fetchers/periodicFetch'; |
|
|
|
import PeriodicFetch from '../lib/fetchers/periodicFetch'; |
|
|
|
import { HeaderText, BodyText } from './Text'; |
|
|
|
import { HeaderText, BodyText } from './Text'; |
|
|
|
import { HOVER, DIVIDER } from '../lib/consts/DEFAULT_THEME'; |
|
|
|
import { |
|
|
|
|
|
|
|
HOVER, |
|
|
|
|
|
|
|
DIVIDER, |
|
|
|
|
|
|
|
TEXT, |
|
|
|
|
|
|
|
BLUE, |
|
|
|
|
|
|
|
RED, |
|
|
|
|
|
|
|
GREY, |
|
|
|
|
|
|
|
} from '../lib/consts/DEFAULT_THEME'; |
|
|
|
import { AnvilContext } from './AnvilContext'; |
|
|
|
import { AnvilContext } from './AnvilContext'; |
|
|
|
import serverState from '../lib/consts/SERVERS'; |
|
|
|
import serverState from '../lib/consts/SERVERS'; |
|
|
|
import Decorator, { Colours } from './Decorator'; |
|
|
|
import Decorator, { Colours } from './Decorator'; |
|
|
@ -57,6 +66,13 @@ const useStyles = makeStyles((theme) => ({ |
|
|
|
checkbox: { |
|
|
|
checkbox: { |
|
|
|
paddingTop: '.8em', |
|
|
|
paddingTop: '.8em', |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
editButton: { |
|
|
|
|
|
|
|
borderRadius: 8, |
|
|
|
|
|
|
|
backgroundColor: GREY, |
|
|
|
|
|
|
|
'&:hover': { |
|
|
|
|
|
|
|
backgroundColor: TEXT, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
}, |
|
|
|
editButtonBox: { |
|
|
|
editButtonBox: { |
|
|
|
paddingTop: '.3em', |
|
|
|
paddingTop: '.3em', |
|
|
|
}, |
|
|
|
}, |
|
|
@ -64,6 +80,15 @@ const useStyles = makeStyles((theme) => ({ |
|
|
|
paddingTop: '.8em', |
|
|
|
paddingTop: '.8em', |
|
|
|
paddingBottom: '.8em', |
|
|
|
paddingBottom: '.8em', |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
power: { |
|
|
|
|
|
|
|
color: 'black', |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
on: { |
|
|
|
|
|
|
|
color: BLUE, |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
off: { |
|
|
|
|
|
|
|
color: RED, |
|
|
|
|
|
|
|
}, |
|
|
|
})); |
|
|
|
})); |
|
|
|
|
|
|
|
|
|
|
|
const selectDecorator = (state: string): Colours => { |
|
|
|
const selectDecorator = (state: string): Colours => { |
|
|
@ -100,13 +125,11 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
|
|
|
|
|
|
|
|
|
|
|
const handleChange = (server_uuid: string): void => { |
|
|
|
const handleChange = (server_uuid: string): void => { |
|
|
|
const index = selected.indexOf(server_uuid); |
|
|
|
const index = selected.indexOf(server_uuid); |
|
|
|
if (index === -1) { |
|
|
|
|
|
|
|
selected.push(server_uuid); |
|
|
|
if (index === -1) selected.push(server_uuid); |
|
|
|
setSelected([...selected]); |
|
|
|
else selected.splice(index, 1); |
|
|
|
} else { |
|
|
|
|
|
|
|
selected.splice(index, 1); |
|
|
|
|
|
|
|
setSelected([...selected]); |
|
|
|
setSelected([...selected]); |
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const anvilIndex = anvil.findIndex((a) => a.anvil_uuid === uuid); |
|
|
|
const anvilIndex = anvil.findIndex((a) => a.anvil_uuid === uuid); |
|
|
@ -120,12 +143,13 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
|
|
|
<HeaderText text="Servers" /> |
|
|
|
<HeaderText text="Servers" /> |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
<Box className={classes.editButtonBox}> |
|
|
|
<Box className={classes.editButtonBox}> |
|
|
|
<Button |
|
|
|
<IconButton |
|
|
|
variant="contained" |
|
|
|
className={classes.editButton} |
|
|
|
color="secondary" |
|
|
|
style={{ color: showCheckbox ? RED : 'black' }} |
|
|
|
startIcon={<EditIcon />} |
|
|
|
|
|
|
|
onClick={() => setShowCheckbox(!showCheckbox)} |
|
|
|
onClick={() => setShowCheckbox(!showCheckbox)} |
|
|
|
/> |
|
|
|
> |
|
|
|
|
|
|
|
<EditIcon /> |
|
|
|
|
|
|
|
</IconButton> |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
{showCheckbox && ( |
|
|
|
{showCheckbox && ( |
|
|
@ -133,11 +157,13 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
|
|
|
<Box flexGrow={1} className={classes.dropdown}> |
|
|
|
<Box flexGrow={1} className={classes.dropdown}> |
|
|
|
<Button |
|
|
|
<Button |
|
|
|
variant="contained" |
|
|
|
variant="contained" |
|
|
|
color="secondary" |
|
|
|
style={{ backgroundColor: GREY }} |
|
|
|
startIcon={<MoreVertIcon />} |
|
|
|
startIcon={<MoreVertIcon />} |
|
|
|
onClick={handleClick} |
|
|
|
onClick={handleClick} |
|
|
|
> |
|
|
|
> |
|
|
|
<BodyText text="Power" /> |
|
|
|
<Typography className={classes.power} variant="subtitle1"> |
|
|
|
|
|
|
|
Power |
|
|
|
|
|
|
|
</Typography> |
|
|
|
</Button> |
|
|
|
</Button> |
|
|
|
<Menu |
|
|
|
<Menu |
|
|
|
id="simple-menu" |
|
|
|
id="simple-menu" |
|
|
@ -146,11 +172,18 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
|
|
|
open={Boolean(anchorEl)} |
|
|
|
open={Boolean(anchorEl)} |
|
|
|
onClose={handleClose} |
|
|
|
onClose={handleClose} |
|
|
|
> |
|
|
|
> |
|
|
|
<MenuItem onClick={handleClose}> |
|
|
|
<MenuItem |
|
|
|
<BodyText text="On" /> |
|
|
|
onClick={handleClose} |
|
|
|
|
|
|
|
style={{ backgroundColor: TEXT, paddingRight: '3em' }} |
|
|
|
|
|
|
|
> |
|
|
|
|
|
|
|
<Typography className={classes.on} variant="subtitle1"> |
|
|
|
|
|
|
|
On |
|
|
|
|
|
|
|
</Typography> |
|
|
|
</MenuItem> |
|
|
|
</MenuItem> |
|
|
|
<MenuItem onClick={handleClose}> |
|
|
|
<MenuItem onClick={handleClose} style={{ backgroundColor: TEXT }}> |
|
|
|
<BodyText text="Off" /> |
|
|
|
<Typography className={classes.off} variant="subtitle1"> |
|
|
|
|
|
|
|
Off |
|
|
|
|
|
|
|
</Typography> |
|
|
|
</MenuItem> |
|
|
|
</MenuItem> |
|
|
|
</Menu> |
|
|
|
</Menu> |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
@ -172,14 +205,14 @@ const Servers = ({ anvil }: { anvil: AnvilListItem[] }): JSX.Element => { |
|
|
|
{showCheckbox && ( |
|
|
|
{showCheckbox && ( |
|
|
|
<Box className={classes.checkbox}> |
|
|
|
<Box className={classes.checkbox}> |
|
|
|
<Checkbox |
|
|
|
<Checkbox |
|
|
|
key={server.server_uuid} |
|
|
|
style={{ color: TEXT }} |
|
|
|
|
|
|
|
color="secondary" |
|
|
|
checked={ |
|
|
|
checked={ |
|
|
|
selected.find( |
|
|
|
selected.find( |
|
|
|
(s) => s === server.server_uuid, |
|
|
|
(s) => s === server.server_uuid, |
|
|
|
) !== undefined |
|
|
|
) !== undefined |
|
|
|
} |
|
|
|
} |
|
|
|
onChange={() => handleChange(server.server_uuid)} |
|
|
|
onChange={() => handleChange(server.server_uuid)} |
|
|
|
inputProps={{ 'aria-label': 'primary checkbox' }} |
|
|
|
|
|
|
|
/> |
|
|
|
/> |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
)} |
|
|
|
)} |
|
|
|