tgui-next: Tank, spaceheater and some touchups (#47887)

* Tank + spaceheater + touchups

* Mint update

code/game/objects/items/tanks/tanks.dm

@@ -144,7 +144,7 @@
 									datum/tgui/master_ui = null, datum/ui_state/state = GLOB.hands_state)
 	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 	if(!ui)
-		ui = new(user, src, ui_key, "tanks", name, 420, 200, master_ui, state)
+		ui = new(user, src, ui_key, "tanks", name, 400, 120, master_ui, state)
 		ui.open()
 
 /obj/item/tank/ui_data(mob/user)

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

@@ -11,15 +11,13 @@ export const Mint = props => {
     <Fragment>
       <Section
         title="Materials"
-        buttons={(data.processing ? (
+        buttons={
           <Button
-            content="Stop"
-            onClick={() => act(ref, 'stoppress')} />
-        ) : (
-          <Button
-            content="Start"
-            onClick={() => act(ref, 'startpress')} />
-        ))}>
+            icon={data.processing ? "times" : "power-off"}
+            content={data.processing ? "Stop" : "Start"}
+            selected={data.processing}
+            onClick={() => act(ref, data.processing ? 'stoppress' : 'startpress')} />
+        }>
         <LabeledList>
           {inserted_materials.map(material => {
             return (
@@ -28,7 +26,7 @@ export const Mint = props => {
                 label={material.material}
                 buttons={(
                   <Button
-                    content="Select"
+                    icon={data.chosen_material === material.material ? "check-square" : "square"}
                     selected={data.chosen_material === material.material}
                     onClick={() => act(ref, 'changematerial', {
                       material_name: material.material,

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

@@ -0,0 +1,106 @@
+import { Fragment } from 'inferno';
+import { act } from '../byond';
+import { Section, ProgressBar, LabeledList, Button, NumberInput, Box } from '../components';
+import { LabeledListItem, LabeledListDivider } from '../components/LabeledList';
+
+export const SpaceHeater = props => {
+  const { state } = props;
+  const { config, data } = state;
+  const { ref } = config;
+  return (
+    <Fragment>
+      <Section
+        title="Power"
+        buttons={
+          <Fragment>
+            <Button
+              icon="eject"
+              content="Eject Cell"
+              disabled={!data.hasPowercell || !data.open}
+              onClick={() => act(ref, 'eject')} />
+            <Button
+              icon={data.on ? 'power-off' : 'times'}
+              content={data.on ? 'On' : 'Off'}
+              selected={data.on}
+              disabled={!data.hasPowercell}
+              onClick={() => act(ref, 'power')} />
+          </Fragment>
+        }>
+        <LabeledList>
+          <LabeledListItem label="Cell" color={data.hasPowercell ? "" : "bad"}>
+            {data.hasPowercell ? (
+              <ProgressBar
+                value={data.powerLevel / 100}
+                content={data.powerLevel + '%'}
+                ranges={{
+                  good: [0.6, Infinity],
+                  average: [0.3, 0.6],
+                  bad: [-Infinity, 0.3],
+                }} />
+            ) : ("None")}
+          </LabeledListItem>
+        </LabeledList>
+      </Section>
+      <Section title="Thermostat">
+        <LabeledList>
+          <LabeledListItem label="Current Temperature">
+            <Box
+              fontSize="18px"
+              color={Math.abs(data.targetTemp - data.currentTemp) > 50
+                ? "bad"
+                : Math.abs(data.targetTemp - data.currentTemp) > 20 ? "average" : "good"}>
+              {data.currentTemp}°C
+            </Box>
+          </LabeledListItem>
+          <LabeledListItem label="Target Temperature">
+            {data.open
+              ? (
+                <NumberInput
+                  animated
+                  value={parseFloat(data.targetTemp)}
+                  width="65px"
+                  unit="°C"
+                  minValue={data.minTemp}
+                  maxValue={data.maxTemp}
+                  onChange={(e, value) => act(ref, 'target', {
+                    target: value,
+                  })} />
+              ) : (
+                data.targetTemp + "°C"
+              )}
+          </LabeledListItem>
+          <LabeledListItem label="Mode">
+            {!data.open
+              ? ("Auto"
+              ) : (
+                <Fragment>
+                  <Button
+                    icon="thermometer-half"
+                    content="Auto"
+                    selected={data.mode === "auto"}
+                    onClick={() => act(ref, 'mode', {
+                      mode: "auto",
+                    })} />
+                  <Button
+                    icon="fire-alt"
+                    content="Heat"
+                    selected={data.mode === "heat"}
+                    onClick={() => act(ref, 'mode', {
+                      mode: "heat",
+                    })} />
+                  <Button
+                    icon="fan"
+                    content="Cool"
+                    selected={data.mode === "cool"}
+                    onClick={() => act(ref, 'mode', {
+                      mode: "cool",
+                    })} />
+                </Fragment>
+              )}
+          </LabeledListItem>
+          <LabeledListDivider />
+        </LabeledList>
+      </Section>
+    </Fragment>
+  );
+};

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

@@ -20,7 +20,7 @@ export const StationAlertConsole = props => {
             </li>
           )}
           {fire.map(alert => (
-            <li key={alert}>
+            <li key={alert} className="color-average">
               {alert}
             </li>
           ))}
@@ -34,7 +34,7 @@ export const StationAlertConsole = props => {
             </li>
           )}
           {atmos.map(alert => (
-            <li key={alert}>
+            <li key={alert} className="color-average">
               {alert}
             </li>
           ))}
@@ -48,7 +48,7 @@ export const StationAlertConsole = props => {
             </li>
           )}
           {power.map(alert => (
-            <li key={alert}>
+            <li key={alert} className="color-average">
               {alert}
             </li>
           ))}

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

@@ -0,0 +1,58 @@
+import { Fragment } from 'inferno';
+import { act } from '../byond';
+import { Section, ProgressBar, LabeledList, Button, NumberInput } from '../components';
+import { LabeledListItem } from '../components/LabeledList';
+
+export const Tank = props => {
+  const { state } = props;
+  const { config, data } = state;
+  const { ref } = config;
+  return (
+    <Section>
+      <LabeledList>
+        <LabeledListItem label="Pressure">
+          <ProgressBar
+            value={data.tankPressure / 1013}
+            content={data.tankPressure + ' kPa'}
+            ranges={{
+              good: [0.35, Infinity],
+              average: [0.15, 0.35],
+              bad: [-Infinity, 0.15],
+            }}
+          />
+        </LabeledListItem>
+        <LabeledListItem label="Pressure Regulator">
+          <Button
+            icon="fast-backward"
+            disabled={data.ReleasePressure === data.minReleasePressure}
+            onClick={() => act(ref, 'pressure', {
+              pressure: 'min',
+            })} />
+          <NumberInput
+            animated
+            value={parseFloat(data.releasePressure)}
+            width="65px"
+            unit="kPa"
+            minValue={data.minReleasePressure}
+            maxValue={data.maxReleasePressure}
+            onChange={(e, value) => act(ref, 'pressure', {
+              pressure: value,
+            })} />
+          <Button
+            icon="fast-forward"
+            disabled={data.ReleasePressure === data.maxReleasePressure}
+            onClick={() => act(ref, 'pressure', {
+              pressure: 'max',
+            })} />
+          <Button
+            icon="undo"
+            content=""
+            disabled={data.ReleasePressure === data.defaultReleasePressure}
+            onClick={() => act(ref, 'pressure', {
+              pressure: 'reset',
+            })} />
+        </LabeledListItem>
+      </LabeledList>
+    </Section>
+  );
+};

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

@@ -12,6 +12,7 @@ export const VaultController = props => {
       buttons={(
         <Button
           content={data.doorstatus ? 'Locked' : 'Unlocked'}
+          icon={data.doorstatus ? 'lock' : 'unlock'}
           disabled={data.stored < data.max}
           onClick={() => act(ref, 'togglelock')}
         />
@@ -21,6 +22,11 @@ export const VaultController = props => {
           <ProgressBar
             value={data.stored / data.max}
             content={toFixed(data.stored/1000) + ' / ' + data.max/1000 + ' kW'}
+            ranges={{
+              good: [1, Infinity],
+              average: [0.30, 1],
+              bad: [-Infinity, 0.30],
+            }}
           />
         </LabeledList.Item>
       </LabeledList>

tgui-next/packages/tgui/routes.js

@@ -33,6 +33,7 @@ import { DisposalUnit } from './interfaces/DisposalUnit';
 import { DnaVault } from './interfaces/DnaVault';
 import { EngravedMessage } from './interfaces/EngravedMessage';
 import { Gps } from './interfaces/Gps';
+import { Holodeck } from './interfaces/Holodeck';
 import { LanguageMenu } from './interfaces/LanguageMenu';
 import { MedicalKiosk } from './interfaces/MedicalKiosk';
 import { Mint } from './interfaces/Mint';
@@ -50,17 +51,18 @@ import { RapidPipeDispenser } from './interfaces/RapidPipeDispenser';
 import { ShuttleManipulator } from './interfaces/ShuttleManipulator';
 import { SmartVend } from './interfaces/SmartVend';
 import { Smes } from './interfaces/Smes';
+import { SpawnersMenu } from './interfaces/SpawnersMenu';
 import { SolarControl } from './interfaces/SolarControl';
+import { SpaceHeater } from './interfaces/SpaceHeater';
 import { StationAlertConsole } from './interfaces/StationAlertConsole';
 import { SuitStorageUnit } from './interfaces/SuitStorageUnit';
+import { Tank } from './interfaces/Tank';
 import { TankDispenser } from './interfaces/TankDispenser';
 import { ThermoMachine } from './interfaces/ThermoMachine';
 import { TurbineComputer } from './interfaces/TurbineComputer';
 import { Uplink } from './interfaces/Uplink';
 import { VaultController } from './interfaces/VaultController';
 import { Wires } from './interfaces/Wires';
-import { Holodeck } from './interfaces/Holodeck';
-import { SpawnersMenu } from './interfaces/SpawnersMenu';
 
 const ROUTES = {
   achievements: {
@@ -291,6 +293,10 @@ const ROUTES = {
     component: () => SolarControl,
     scrollable: false,
   },
+  space_heater: {
+    component: () => SpaceHeater,
+    scrollable: false,
+  },
   spawners_menu: {
     component: () => SpawnersMenu,
     scrollable: true,
@@ -303,6 +309,10 @@ const ROUTES = {
     component: () => SuitStorageUnit,
     scrollable: false,
   },
+  tanks: {
+    component: () => Tank,
+    scrollable: false,
+  },
   tank_dispenser: {
     component: () => TankDispenser,
     scrollable: false,