cyberpresidentvanellope/Bubberstation
1
0
Fork 0
mirror of https://github.com/Bubberstation/Bubberstation.git synced 2026-08-21 20:20:33 +01:00
Code Issues Packages Projects Releases Wiki Activity

wire ui

Browse Source
This commit is contained in:
actioninja
2020-04-19 19:36:40 +03:00
committed by Aleksej Komarov
parent 158e70df99
commit cf0239052c
1 changed files with 51 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tgui/packages/tgui/interfaces/Wires.js
+51 -49
View File
@@ -1,59 +1,61 @@
import { Fragment } from 'inferno';
import { useBackend } from '../backend';
import { Box, Button, LabeledList, Section } from '../components';
import { Box, Button, LabeledList, Section, Layout } from '../components';
export const Wires = props => {
const { act, data } = useBackend(props);
export const Wires = (props, context) => {
const { act, data } = useBackend(context);
const wires = data.wires || [];
const statuses = data.status || [];
return (
<Fragment>
<Section>
<LabeledList>
{wires.map(wire => (
<LabeledList.Item
key={wire.color}
className="candystripe"
label={wire.color}
labelColor={wire.color}
color={wire.color}
buttons={(
<Fragment>
<Button
content={wire.cut ? 'Mend' : 'Cut'}
onClick={() => act('cut', {
wire: wire.color,
})} />
<Button
content="Pulse"
onClick={() => act('pulse', {
wire: wire.color,
})} />
<Button
content={wire.attached ? 'Detach' : 'Attach'}
onClick={() => act('attach', {
wire: wire.color,
})} />
</Fragment>
)}>
{!!wire.wire && (
<i>
({wire.wire})
</i>
)}
</LabeledList.Item>
))}
</LabeledList>
</Section>
{!!statuses.length && (
<Layout>
<Layout.Content>
<Section>
{statuses.map(status => (
<Box key={status}>
{status}
</Box>
))}
<LabeledList>
{wires.map(wire => (
<LabeledList.Item
key={wire.color}
className="candystripe"
label={wire.color}
labelColor={wire.color}
color={wire.color}
buttons={(
<Fragment>
<Button
content={wire.cut ? 'Mend' : 'Cut'}
onClick={() => act('cut', {
wire: wire.color,
})} />
<Button
content="Pulse"
onClick={() => act('pulse', {
wire: wire.color,
})} />
<Button
content={wire.attached ? 'Detach' : 'Attach'}
onClick={() => act('attach', {
wire: wire.color,
})} />
</Fragment>
)}>
{!!wire.wire && (
<i>
({wire.wire})
</i>
)}
</LabeledList.Item>
))}
</LabeledList>
</Section>
)}
</Fragment>
{!!statuses.length && (
<Section>
{statuses.map(status => (
<Box key={status}>
{status}
</Box>
))}
</Section>
)}
</Layout.Content>
</Layout>
);
};