TGUI fetch update (#1308)

tgui/packages/tgui/interfaces/CameraConsole.js

@@ -4,14 +4,14 @@ import { classes } from 'common/react';
 import { createSearch } from 'common/string';
 import { Fragment } from 'inferno';
 import { useBackend, useLocalState } from '../backend';
-import { Button, ByondUi, Input, Section } from '../components';
+import { Button, ByondUi, Input, Section, Flex } from '../components';
 import { Window } from '../layouts';
 
 /**
  * Returns previous and next camera names relative to the currently
  * active camera.
  */
-const prevNextCamera = (cameras, activeCamera) => {
+export const prevNextCamera = (cameras, activeCamera) => {
   if (!activeCamera) {
     return [];
   }
@@ -29,7 +29,7 @@ const prevNextCamera = (cameras, activeCamera) => {
  *
  * Filters cameras, applies search terms and sorts the alphabetically.
  */
-const selectCameras = (cameras, searchText = '') => {
+export const selectCameras = (cameras, searchText = '') => {
   const testSearch = createSearch(searchText, camera => camera.name);
   return flow([
     // Null camera filter
@@ -100,36 +100,45 @@ export const CameraConsoleContent = (props, context) => {
   const { activeCamera } = data;
   const cameras = selectCameras(data.cameras, searchText);
   return (
-    <Fragment>
-      <Input
-        autoFocus
-        fluid
-        mb={1}
-        placeholder="Search for a camera"
-        onInput={(e, value) => setSearchText(value)} />
-      <Section>
-        {cameras.map(camera => (
+    <Flex
+      direction={"column"}
+      height="100%">
+      <Flex.Item>
+        <Input
+          autoFocus
+          fluid
+          mt={1}
+          placeholder="Search for a camera"
+          onInput={(e, value) => setSearchText(value)} />
+      </Flex.Item>
+      <Flex.Item
+        height="100%">
+        <Section
+          fill
+          scrollable>
+          {cameras.map(camera => (
           // We're not using the component here because performance
           // would be absolutely abysmal (50+ ms for each re-render).
-          <div
-            key={camera.name}
-            title={camera.name}
-            className={classes([
-              'Button',
-              'Button--fluid',
-              'Button--color--transparent',
-              'Button--ellipsis',
-              activeCamera
+            <div
+              key={camera.name}
+              title={camera.name}
+              className={classes([
+                'Button',
+                'Button--fluid',
+                'Button--color--transparent',
+                'Button--ellipsis',
+                activeCamera
                 && camera.name === activeCamera.name
                 && 'Button--selected',
-            ])}
-            onClick={() => act('switch_camera', {
-              name: camera.name,
-            })}>
-            {camera.name}
-          </div>
-        ))}
-      </Section>
-    </Fragment>
+              ])}
+              onClick={() => act('switch_camera', {
+                name: camera.name,
+              })}>
+              {camera.name}
+            </div>
+          ))}
+        </Section>
+      </Flex.Item>
+    </Flex>
   );
 };

tgui/packages/tgui/interfaces/NtosSecurEye.js

@@ -0,0 +1,60 @@
+import { filter, sortBy } from 'common/collections';
+import { flow } from 'common/fp';
+import { classes } from 'common/react';
+import { createSearch } from 'common/string';
+import { Fragment } from 'inferno';
+import { useBackend, useLocalState } from '../backend';
+import { Button, ByondUi, Input, Section } from '../components';
+import { NtosWindow } from '../layouts';
+import { prevNextCamera, selectCameras, CameraConsoleContent } from './CameraConsole';
+import { logger } from "../logging";
+
+export const NtosSecurEye = (props, context) => {
+  const { act, data, config } = useBackend(context);
+  const { PC_device_theme, mapRef, activeCamera } = data;
+  const cameras = selectCameras(data.cameras);
+  const [
+    prevCameraName,
+    nextCameraName,
+  ] = prevNextCamera(cameras, activeCamera);
+  return (
+    <NtosWindow
+      width={800}
+      height={600}
+      theme={PC_device_theme}>
+      <NtosWindow.Content>
+        <div className="CameraConsole__left">
+          <CameraConsoleContent />
+        </div>
+        <div className="CameraConsole__right">
+          <div className="CameraConsole__toolbar">
+            <b>Camera: </b>
+            {activeCamera
+              && activeCamera.name
+              || '—'}
+          </div>
+          <div className="CameraConsole__toolbarRight">
+            <Button
+              icon="chevron-left"
+              disabled={!prevCameraName}
+              onClick={() => act('switch_camera', {
+                name: prevCameraName,
+              })} />
+            <Button
+              icon="chevron-right"
+              disabled={!nextCameraName}
+              onClick={() => act('switch_camera', {
+                name: nextCameraName,
+              })} />
+          </div>
+          <ByondUi
+            className="CameraConsole__map"
+            params={{
+              id: mapRef,
+              type: 'map',
+            }} />
+        </div>
+      </NtosWindow.Content>
+    </NtosWindow>
+  );
+};