156 lines
4.1 KiB
JavaScript
156 lines
4.1 KiB
JavaScript
import { useBackend } from '../backend';
|
|
import { Fragment } from 'inferno';
|
|
import { Box, Section, LabeledList, Button, AnimatedNumber, NumberInput } from '../components';
|
|
import { getGasLabel } from '../constants';
|
|
|
|
export const PortableBasicInfo = props => {
|
|
const { act, data } = useBackend(props);
|
|
|
|
const {
|
|
connected,
|
|
holding,
|
|
on,
|
|
pressure,
|
|
} = data;
|
|
|
|
return (
|
|
<Fragment>
|
|
<Section
|
|
title="Status"
|
|
buttons={(
|
|
<Button
|
|
icon={on ? 'power-off' : 'times'}
|
|
content={on ? 'On' : 'Off'}
|
|
selected={on}
|
|
onClick={() => act('power')} />
|
|
)}>
|
|
<LabeledList>
|
|
<LabeledList.Item label="Pressure">
|
|
<AnimatedNumber value={pressure} />
|
|
{' kPa'}
|
|
</LabeledList.Item>
|
|
<LabeledList.Item
|
|
label="Port"
|
|
color={connected ? 'good' : 'average'}>
|
|
{connected ? 'Connected' : 'Not Connected'}
|
|
</LabeledList.Item>
|
|
</LabeledList>
|
|
</Section>
|
|
<Section
|
|
title="Holding Tank"
|
|
minHeight="82px"
|
|
buttons={(
|
|
<Button
|
|
icon="eject"
|
|
content="Eject"
|
|
disabled={!holding}
|
|
onClick={() => act('eject')} />
|
|
)}>
|
|
{holding ? (
|
|
<LabeledList>
|
|
<LabeledList.Item label="Label">
|
|
{holding.name}
|
|
</LabeledList.Item>
|
|
<LabeledList.Item label="Pressure">
|
|
<AnimatedNumber
|
|
value={holding.pressure} />
|
|
{' kPa'}
|
|
</LabeledList.Item>
|
|
</LabeledList>
|
|
) : (
|
|
<Box color="average">
|
|
No holding tank
|
|
</Box>
|
|
)}
|
|
</Section>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export const PortablePump = props => {
|
|
const { act, data } = useBackend(props);
|
|
|
|
const {
|
|
direction,
|
|
holding,
|
|
target_pressure,
|
|
default_pressure,
|
|
min_pressure,
|
|
max_pressure,
|
|
} = data;
|
|
|
|
return (
|
|
<Fragment>
|
|
<PortableBasicInfo state={props.state} />
|
|
<Section
|
|
title="Pump"
|
|
buttons={(
|
|
<Button
|
|
icon={direction ? 'sign-in-alt' : 'sign-out-alt'}
|
|
content={direction ? 'In' : 'Out'}
|
|
selected={direction}
|
|
onClick={() => act('direction')} />
|
|
)}>
|
|
<LabeledList>
|
|
<LabeledList.Item label="Output">
|
|
<NumberInput
|
|
value={target_pressure}
|
|
unit="kPa"
|
|
width="75px"
|
|
minValue={min_pressure}
|
|
maxValue={max_pressure}
|
|
step={10}
|
|
onChange={(e, value) => act('pressure', {
|
|
pressure: value,
|
|
})} />
|
|
</LabeledList.Item>
|
|
<LabeledList.Item label="Presets">
|
|
<Button
|
|
icon="minus"
|
|
disabled={target_pressure === min_pressure}
|
|
onClick={() => act('pressure', {
|
|
pressure: 'min',
|
|
})} />
|
|
<Button
|
|
icon="sync"
|
|
disabled={target_pressure === default_pressure}
|
|
onClick={() => act('pressure', {
|
|
pressure: 'reset',
|
|
})} />
|
|
<Button
|
|
icon="plus"
|
|
disabled={target_pressure === max_pressure}
|
|
onClick={() => act('pressure', {
|
|
pressure: 'max',
|
|
})} />
|
|
</LabeledList.Item>
|
|
</LabeledList>
|
|
</Section>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export const PortableScrubber = props => {
|
|
const { act, data } = useBackend(props);
|
|
|
|
const filter_types = data.filter_types || [];
|
|
|
|
return (
|
|
<Fragment>
|
|
<PortableBasicInfo state={props.state} />
|
|
<Section title="Filters">
|
|
{filter_types.map(filter => (
|
|
<Button
|
|
key={filter.id}
|
|
icon={filter.enabled ? 'check-square-o' : 'square-o'}
|
|
content={getGasLabel(filter.gas_id, filter.gas_name)}
|
|
selected={filter.enabled}
|
|
onClick={() => act('toggle_filter', {
|
|
val: filter.gas_id,
|
|
})} />
|
|
))}
|
|
</Section>
|
|
</Fragment>
|
|
);
|
|
};
|