|
|
@ -1,10 +1,11 @@ |
|
|
|
import { useState } from 'react'; |
|
|
|
import { useState, useContext } from 'react'; |
|
|
|
import { Switch, Box } from '@material-ui/core'; |
|
|
|
import { Switch, Box } from '@material-ui/core'; |
|
|
|
import { ClassNameMap } from '@material-ui/styles'; |
|
|
|
import { ClassNameMap } from '@material-ui/styles'; |
|
|
|
import { makeStyles } from '@material-ui/core/styles'; |
|
|
|
import { makeStyles } from '@material-ui/core/styles'; |
|
|
|
import { HeaderText } from '../Text'; |
|
|
|
import { HeaderText } from '../Text'; |
|
|
|
import { BLUE, PURPLE_OFF, RED_ON } from '../../lib/consts/DEFAULT_THEME'; |
|
|
|
import { BLUE, PURPLE_OFF, RED_ON } from '../../lib/consts/DEFAULT_THEME'; |
|
|
|
import anvilState from './CONSTS'; |
|
|
|
import anvilState from './CONSTS'; |
|
|
|
|
|
|
|
import { AnvilContext } from '../AnvilContext'; |
|
|
|
|
|
|
|
|
|
|
|
const useStyles = makeStyles(() => ({ |
|
|
|
const useStyles = makeStyles(() => ({ |
|
|
|
root: { |
|
|
|
root: { |
|
|
@ -47,28 +48,39 @@ const selectDecorator = ( |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const SelectedAnvil = ({ anvil }: { anvil: AnvilListItem }): JSX.Element => { |
|
|
|
const SelectedAnvil = ({ list }: { list: AnvilListItem[] }): JSX.Element => { |
|
|
|
|
|
|
|
const { uuid } = useContext(AnvilContext); |
|
|
|
const classes = useStyles(); |
|
|
|
const classes = useStyles(); |
|
|
|
const [checked, setChecked] = useState<boolean>(true); |
|
|
|
const [checked, setChecked] = useState<boolean>(true); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const index = list.findIndex( |
|
|
|
|
|
|
|
(anvil: AnvilListItem) => anvil.anvil_uuid === uuid, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<Box display="flex" flexDirection="row" width="100%"> |
|
|
|
<Box display="flex" flexDirection="row" width="100%"> |
|
|
|
<Box p={1}> |
|
|
|
{uuid !== '' && ( |
|
|
|
<div |
|
|
|
<> |
|
|
|
className={`${classes.decorator} ${ |
|
|
|
<Box p={1}> |
|
|
|
classes[selectDecorator(anvil.anvil_state)] |
|
|
|
<div |
|
|
|
}`}
|
|
|
|
className={`${classes.decorator} ${ |
|
|
|
/> |
|
|
|
classes[selectDecorator(list[index].anvil_state)] |
|
|
|
</Box> |
|
|
|
}`}
|
|
|
|
<Box p={1} flexGrow={1} className={classes.anvilName}> |
|
|
|
/> |
|
|
|
<HeaderText text={anvil?.anvil_name} /> |
|
|
|
</Box> |
|
|
|
<HeaderText |
|
|
|
<Box p={1} flexGrow={1} className={classes.anvilName}> |
|
|
|
text={anvilState.get(anvil.anvil_state) || 'State unavailable'} |
|
|
|
<HeaderText text={list[index].anvil_name} /> |
|
|
|
/> |
|
|
|
<HeaderText |
|
|
|
</Box> |
|
|
|
text={ |
|
|
|
<Box p={1}> |
|
|
|
anvilState.get(list[index].anvil_state) || 'State unavailable' |
|
|
|
<Switch checked={checked} onChange={() => setChecked(!checked)} /> |
|
|
|
} |
|
|
|
</Box> |
|
|
|
/> |
|
|
|
|
|
|
|
</Box> |
|
|
|
|
|
|
|
<Box p={1}> |
|
|
|
|
|
|
|
<Switch checked={checked} onChange={() => setChecked(!checked)} /> |
|
|
|
|
|
|
|
</Box> |
|
|
|
|
|
|
|
</> |
|
|
|
|
|
|
|
)} |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
); |
|
|
|
); |
|
|
|
}; |
|
|
|
}; |
|
|
|