final

tgui/packages/tgui/interfaces/NtosStationAlertConsole.js

@@ -4,8 +4,8 @@ import { StationAlertConsoleContent } from './StationAlertConsole';
 export const NtosStationAlertConsole = () => {
   return (
     <NtosWindow
-      width={315}
-      height={500}>
+      width={335}
+      height={587}>
       <NtosWindow.Content scrollable>
         <StationAlertConsoleContent />
       </NtosWindow.Content>

tgui/packages/tgui/interfaces/StationAlertConsole.js

@@ -1,12 +1,18 @@
+import { sortBy } from 'common/collections';
+import { flow } from 'common/fp';
 import { useBackend } from '../backend';
-import { Section } from '../components';
+import { Button, Section, Stack } from '../components';
 import { Window } from '../layouts';
 
-export const StationAlertConsole = () => {
+export const StationAlertConsole = (props, context) => {
+  const { data } = useBackend(context);
+  const {
+    cameraView,
+  } = data;
   return (
     <Window
-      width={325}
-      height={500}>
+      width={cameraView ? 390 : 345}
+      height={587}>
       <Window.Content scrollable>
         <StationAlertConsoleContent />
       </Window.Content>
@@ -15,55 +21,65 @@ export const StationAlertConsole = () => {
 };
 
 export const StationAlertConsoleContent = (props, context) => {
-  const { data } = useBackend(context);
-  const categories = data.alarms || [];
-  const fire = categories['Fire'] || [];
-  const atmos = categories['Atmosphere'] || [];
-  const power = categories['Power'] || [];
+  const { act, data } = useBackend(context);
+  const {
+    cameraView,
+  } = data;
+
+  const sortingKey = {
+    "Fire": 0,
+    "Atmosphere": 1,
+    "Power": 2,
+    "Burglar": 3,
+    "Motion": 4,
+    "Camera": 5,
+  };
+
+  const sortedAlarms = flow([
+    sortBy((alarm) => sortingKey[alarm.name]),
+  ])(data.alarms || []);
+
   return (
     <>
-      <Section title="Fire Alarms">
-        <ul>
-          {fire.length === 0 && (
-            <li className="color-good">
-              Systems Nominal
-            </li>
-          )}
-          {fire.map(alert => (
-            <li key={alert} className="color-average">
-              {alert}
-            </li>
-          ))}
-        </ul>
-      </Section>
-      <Section title="Atmospherics Alarms">
-        <ul>
-          {atmos.length === 0 && (
-            <li className="color-good">
-              Systems Nominal
-            </li>
-          )}
-          {atmos.map(alert => (
-            <li key={alert} className="color-average">
-              {alert}
-            </li>
-          ))}
-        </ul>
-      </Section>
-      <Section title="Power Alarms">
-        <ul>
-          {power.length === 0 && (
-            <li className="color-good">
-              Systems Nominal
-            </li>
-          )}
-          {power.map(alert => (
-            <li key={alert} className="color-average">
-              {alert}
-            </li>
-          ))}
-        </ul>
-      </Section>
+      {sortedAlarms.map(category => (
+        <Section key={category.name} title={category.name + " Alarms"}>
+          <ul>
+            {category.alerts?.length === 0 && (
+              <li className="color-good">
+                Systems Nominal
+              </li>
+            )}
+            {category.alerts.map(alert => (
+              <Stack
+                key={alert.name}
+                height="30px"
+                align="baseline">
+                <Stack.Item grow>
+                  <li className="color-average">
+                    {alert.name} {!!cameraView && alert?.sources > 1
+                      ? " (" + alert.sources + " sources)" : ""}
+                  </li>
+                </Stack.Item>
+                {!!cameraView && (
+                  <Stack.Item>
+                    <Button
+                      textAlign="center"
+                      width="100px"
+                      icon={alert.cameras ? "video" : ""}
+                      disabled={!alert.cameras}
+                      content={alert.cameras === 1
+                        ? alert.cameras + " Camera" : alert.cameras > 1
+                          ? alert.cameras + " Cameras" : "No Camera"}
+                      onClick={() => act('select_camera', {
+                        alert: alert.ref,
+                      })} />
+                  </Stack.Item>
+                )}
+              </Stack>
+            ))}
+          </ul>
+        </Section>
+      ))}
     </>
   );
 };