126 lines
3.8 KiB
JavaScript
126 lines
3.8 KiB
JavaScript
import { map } from 'common/collections';
|
|
import { Fragment } from 'inferno';
|
|
import { useBackend } from '../backend';
|
|
import { Button, LabeledList, NoticeBox, Section, Tabs } from '../components';
|
|
|
|
export const NaniteProgramHub = props => {
|
|
const { act, data } = useBackend(props);
|
|
const {
|
|
detail_view,
|
|
disk,
|
|
has_disk,
|
|
has_program,
|
|
programs = {},
|
|
} = data;
|
|
return (
|
|
<Fragment>
|
|
<Section
|
|
title="Program Disk"
|
|
buttons={(
|
|
<Fragment>
|
|
<Button
|
|
icon="eject"
|
|
content="Eject"
|
|
onClick={() => act('eject')} />
|
|
<Button
|
|
icon="minus-circle"
|
|
content="Delete Program"
|
|
onClick={() => act('clear')} />
|
|
</Fragment>
|
|
)}>
|
|
{has_disk ? (
|
|
has_program ? (
|
|
<LabeledList>
|
|
<LabeledList.Item label="Program Name">
|
|
{disk.name}
|
|
</LabeledList.Item>
|
|
<LabeledList.Item label="Description">
|
|
{disk.desc}
|
|
</LabeledList.Item>
|
|
</LabeledList>
|
|
) : (
|
|
<NoticeBox>
|
|
No Program Installed
|
|
</NoticeBox>
|
|
)
|
|
) : (
|
|
<NoticeBox>
|
|
Insert Disk
|
|
</NoticeBox>
|
|
)}
|
|
</Section>
|
|
<Section
|
|
title="Programs"
|
|
buttons={(
|
|
<Fragment>
|
|
<Button
|
|
icon={detail_view ? 'info' : 'list'}
|
|
content={detail_view ? 'Detailed' : 'Compact'}
|
|
onClick={() => act('toggle_details')} />
|
|
<Button
|
|
icon="sync"
|
|
content="Sync Research"
|
|
onClick={() => act('refresh')} />
|
|
</Fragment>
|
|
)}>
|
|
{programs !== null ? (
|
|
<Tabs vertical>
|
|
{map((cat_contents, category) => {
|
|
const progs = cat_contents || [];
|
|
// Backend was sending stupid data that would have been
|
|
// annoying to fix
|
|
const tabLabel = category.substring(0, category.length - 8);
|
|
return (
|
|
<Tabs.Tab
|
|
key={category}
|
|
label={tabLabel}>
|
|
{detail_view ? (
|
|
progs.map(program => (
|
|
<Section
|
|
key={program.id}
|
|
title={program.name}
|
|
level={2}
|
|
buttons={(
|
|
<Button
|
|
icon="download"
|
|
content="Download"
|
|
disabled={!has_disk}
|
|
onClick={() => act('download', {
|
|
program_id: program.id,
|
|
})} />
|
|
)}>
|
|
{program.desc}
|
|
</Section>
|
|
))
|
|
) : (
|
|
<LabeledList>
|
|
{progs.map(program => (
|
|
<LabeledList.Item
|
|
key={program.id}
|
|
label={program.name}
|
|
buttons={(
|
|
<Button
|
|
icon="download"
|
|
content="Download"
|
|
disabled={!has_disk}
|
|
onClick={() => act('download', {
|
|
program_id: program.id,
|
|
})} />
|
|
)} />
|
|
))}
|
|
</LabeledList>
|
|
)}
|
|
</Tabs.Tab>
|
|
);
|
|
})(programs)}
|
|
</Tabs>
|
|
) : (
|
|
<NoticeBox>
|
|
No nanite programs are currently researched.
|
|
</NoticeBox>
|
|
)}
|
|
</Section>
|
|
</Fragment>
|
|
);
|
|
};
|