tgui-next portable atmos (#48081)

* portable atmos stuff

* better titlecase handling

* Rebuild tgui

code/modules/atmospherics/machinery/portable/pump.dm

@@ -8,8 +8,8 @@
 	name = "portable air pump"
 	icon_state = "psiphon:0"
 	density = TRUE
-	ui_x = 420
-	ui_y = 415
+	ui_x = 300
+	ui_y = 315
 
 	var/on = FALSE
 	var/direction = PUMP_OUT
@@ -92,8 +92,8 @@
 /obj/machinery/portable_atmospherics/pump/ui_data()
 	var/data = list()
 	data["on"] = on
-	data["direction"] = direction
-	data["connected"] = connected_port ? 1 : 0
+	data["direction"] = direction == PUMP_IN ? TRUE : FALSE
+	data["connected"] = connected_port ? TRUE : FALSE
 	data["pressure"] = round(air_contents.return_pressure() ? air_contents.return_pressure() : 0)
 	data["target_pressure"] = round(pump.target_pressure ? pump.target_pressure : 0)
 	data["default_pressure"] = round(PUMP_DEFAULT_PRESSURE)
@@ -104,6 +104,8 @@
 		data["holding"] = list()
 		data["holding"]["name"] = holding.name
 		data["holding"]["pressure"] = round(holding.air_contents.return_pressure())
+	else
+		data["holding"] = null
 	return data
 
 /obj/machinery/portable_atmospherics/pump/ui_act(action, params)

code/modules/atmospherics/machinery/portable/scrubber.dm

@@ -2,8 +2,8 @@
 	name = "portable air scrubber"
 	icon_state = "pscrubber:0"
 	density = TRUE
-	ui_x = 420
-	ui_y = 435
+	ui_x = 320
+	ui_y = 335
 
 	var/on = FALSE
 	var/volume_rate = 1000
@@ -93,6 +93,8 @@
 		data["holding"] = list()
 		data["holding"]["name"] = holding.name
 		data["holding"]["pressure"] = round(holding.air_contents.return_pressure())
+	else
+		data["holding"] = null
 	return data
 
 /obj/machinery/portable_atmospherics/scrubber/replace_tank(mob/living/user, close_valve)

tgui-next/packages/tgui/components/TitleBar.js

@@ -1,4 +1,5 @@
 import { classes, pureComponentHooks } from 'common/react';
+import { toTitleCase } from 'common/string';
 import { UI_DISABLED, UI_INTERACTIVE, UI_UPDATE } from '../constants';
 import { Icon } from './Icon';
 
@@ -27,12 +28,14 @@ export const TitleBar = props => {
         color={statusToColor(status)}
         name="eye" />
       <div className="TitleBar__title">
-        {title}
+        {title === title.toLowerCase() ? toTitleCase(title) : title}
       </div>
-      <div className="TitleBar__dragZone"
+      <div
+        className="TitleBar__dragZone"
         onMousedown={e => fancy && onDragStart(e)} />
       {!!fancy && (
-        <div className="TitleBar__close TitleBar__clickable"
+        <div
+          className="TitleBar__close TitleBar__clickable"
           onClick={onClose} />
       )}
     </div>

tgui-next/packages/tgui/interfaces/PortableAtmos.js

@@ -0,0 +1,155 @@
+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>
+  );
+};

tgui-next/packages/tgui/routes.js

@@ -60,6 +60,7 @@ import { OreRedemptionMachine } from './interfaces/OreRedemptionMachine';
 import { Pandemic } from './interfaces/Pandemic';
 import { PersonalCrafting } from './interfaces/PersonalCrafting';
 import { PortableGenerator } from './interfaces/PortableGenerator';
+import { PortablePump, PortableScrubber } from './interfaces/PortableAtmos';
 import { PowerMonitor } from './interfaces/PowerMonitor';
 import { Radio } from './interfaces/Radio';
 import { RapidPipeDispenser } from './interfaces/RapidPipeDispenser';
@@ -346,6 +347,14 @@ const ROUTES = {
     component: () => PortableGenerator,
     scrollable: false,
   },
+  portable_pump: {
+    component: () => PortablePump,
+    scrollable: false,
+  },
+  portable_scrubber: {
+    component: () => PortableScrubber,
+    scrollable: false,
+  },
   power_monitor: {
     component: () => PowerMonitor,
     scrollable: true,