Bundle Copy

tgui/packages/tgui_ch/interfaces/ShutoffMonitor.js

@@ -0,0 +1,64 @@
+import { useBackend } from '../backend';
+import { Window } from '../layouts';
+import { Button, Section, Table } from '../components';
+
+export const ShutoffMonitor = (props, context) => (
+  <Window width={627} height={700} resizable>
+    <Window.Content>
+      <ShutoffMonitorContent />
+    </Window.Content>
+  </Window>
+);
+
+export const ShutoffMonitorContent = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { valves } = data;
+
+  return (
+    <Section title="Valves">
+      <Table>
+        <Table.Row header>
+          <Table.Cell>Name</Table.Cell>
+          <Table.Cell>Position</Table.Cell>
+          <Table.Cell>Open</Table.Cell>
+          <Table.Cell>Mode</Table.Cell>
+          <Table.Cell>Actions</Table.Cell>
+        </Table.Row>
+        {valves.map((valve) => (
+          <Table.Row key={valve.name}>
+            <Table.Cell>{valve.name}</Table.Cell>
+            <Table.Cell>
+              {valve.x}, {valve.y}, {valve.z}
+            </Table.Cell>
+            <Table.Cell>{valve.open ? 'Yes' : 'No'}</Table.Cell>
+            <Table.Cell>{valve.enabled ? 'Auto' : 'Manual'}</Table.Cell>
+            <Table.Cell>
+              <Button
+                icon="power-off"
+                content={valve.open ? 'Opened' : 'Closed'}
+                selected={valve.open}
+                disabled={!valve.enabled}
+                onClick={() =>
+                  act('toggle_open', {
+                    valve: valve.ref,
+                  })
+                }
+              />
+              <Button
+                icon="power-off"
+                content={valve.enabled ? 'Auto' : 'Manual'}
+                selected={valve.enabled}
+                onClick={() =>
+                  act('toggle_enable', {
+                    valve: valve.ref,
+                  })
+                }
+              />
+            </Table.Cell>
+          </Table.Row>
+        ))}
+      </Table>
+    </Section>
+  );
+};