116 lines
2.8 KiB
JavaScript
116 lines
2.8 KiB
JavaScript
import { Box, Section, Button, Grid } from '../components';
|
|
import { useBackend } from '../backend';
|
|
|
|
export const EmergencyShuttleConsole = props => {
|
|
const { act, data } = useBackend(props);
|
|
|
|
const {
|
|
timer_str,
|
|
enabled,
|
|
emagged,
|
|
engines_started,
|
|
authorizations_remaining,
|
|
authorizations = [],
|
|
} = data;
|
|
|
|
return (
|
|
<Section>
|
|
<Box
|
|
bold
|
|
fontSize="40px"
|
|
textAlign="center"
|
|
fontFamily="monospace">
|
|
{timer_str}
|
|
</Box>
|
|
<Box
|
|
textAlign="center"
|
|
fontSize="16px"
|
|
mb={1}>
|
|
<Box
|
|
inline
|
|
bold>
|
|
ENGINES:
|
|
</Box>
|
|
<Box
|
|
inline
|
|
color={engines_started ? 'good' : 'average'}
|
|
ml={1}>
|
|
{engines_started ? 'Online' : 'Idle'}
|
|
</Box>
|
|
</Box>
|
|
<Section
|
|
title="Early Launch Authorization"
|
|
level={2}
|
|
buttons={(
|
|
<Button
|
|
icon="times"
|
|
content="Repeal All"
|
|
color="bad"
|
|
disabled={!enabled}
|
|
onClick={() => act('abort')} />
|
|
)}>
|
|
<Grid>
|
|
<Grid.Column>
|
|
<Button
|
|
fluid
|
|
icon="exclamation-triangle"
|
|
color="good"
|
|
content="AUTHORIZE"
|
|
disabled={!enabled}
|
|
onClick={() => act('authorize')} />
|
|
</Grid.Column>
|
|
<Grid.Column>
|
|
<Button
|
|
fluid
|
|
icon="minus"
|
|
content="REPEAL"
|
|
disabled={!enabled}
|
|
onClick={() => act('repeal')} />
|
|
</Grid.Column>
|
|
</Grid>
|
|
<Section
|
|
title="Authorizations"
|
|
level={3}
|
|
minHeight="150px"
|
|
buttons={(
|
|
<Box
|
|
inline
|
|
bold
|
|
color={emagged ? 'bad' : 'good'}>
|
|
{emagged ? 'ERROR' : 'Remaining: ' + authorizations_remaining}
|
|
</Box>
|
|
)}>
|
|
{authorizations.length > 0 ? (
|
|
authorizations.map(authorization => (
|
|
<Box
|
|
key={authorization.name}
|
|
bold
|
|
fontSize="16px"
|
|
className="candystripe">
|
|
{authorization.name} ({authorization.job})
|
|
</Box>
|
|
))
|
|
) : (
|
|
<Box
|
|
bold
|
|
textAlign="center"
|
|
fontSize="16px"
|
|
color="average">
|
|
No Active Authorizations
|
|
</Box>
|
|
)}
|
|
{authorizations.map(authorization => (
|
|
<Box
|
|
key={authorization.name}
|
|
bold
|
|
fontSize="16px"
|
|
className="candystripe">
|
|
{authorization.name} ({authorization.job})
|
|
</Box>
|
|
))}
|
|
</Section>
|
|
</Section>
|
|
</Section>
|
|
);
|
|
};
|