62 lines
1.8 KiB
JavaScript
62 lines
1.8 KiB
JavaScript
import { map } from 'common/collections';
|
|
import { useBackend } from '../backend';
|
|
import { Button, NoticeBox, Section, Table } from '../components';
|
|
|
|
export const SmartVend = props => {
|
|
const { act, data } = useBackend(props);
|
|
return (
|
|
<Section
|
|
title="Storage"
|
|
buttons={!!data.isdryer && (
|
|
<Button
|
|
icon={data.drying ? 'stop' : 'tint'}
|
|
onClick={() => act('Dry')}>
|
|
{data.drying ? 'Stop drying' : 'Dry'}
|
|
</Button>
|
|
)}>
|
|
{data.contents.length === 0 && (
|
|
<NoticeBox>
|
|
Unfortunately, this {data.name} is empty.
|
|
</NoticeBox>
|
|
) || (
|
|
<Table>
|
|
<Table.Row header>
|
|
<Table.Cell>
|
|
Item
|
|
</Table.Cell>
|
|
<Table.Cell collapsing />
|
|
<Table.Cell collapsing textAlign="center">
|
|
{data.verb ? data.verb : 'Dispense'}
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
{map((value, key) => (
|
|
<Table.Row key={key}>
|
|
<Table.Cell>
|
|
{value.name}
|
|
</Table.Cell>
|
|
<Table.Cell collapsing textAlign="right">
|
|
{value.amount}
|
|
</Table.Cell>
|
|
<Table.Cell collapsing>
|
|
<Button
|
|
content="One"
|
|
disabled={value.amount < 1}
|
|
onClick={() => act('Release', {
|
|
name: value.name,
|
|
amount: 1,
|
|
})} />
|
|
<Button
|
|
content="Many"
|
|
disabled={value.amount <= 1}
|
|
onClick={() => act('Release', {
|
|
name: value.name,
|
|
})} />
|
|
</Table.Cell>
|
|
</Table.Row>
|
|
))(data.contents)}
|
|
</Table>
|
|
)}
|
|
</Section>
|
|
);
|
|
};
|