cyberpresidentvanellope/VOREStation
1
0
Fork 0
mirror of https://github.com/VOREStation/VOREStation.git synced 2026-08-30 15:38:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

rework atmos control (#17092)

Browse Source
This commit is contained in:
Kashargul
2025-02-08 13:56:19 -05:00
committed by GitHub
parent f89268c27b
commit 3c3eb54a2b
1 changed files with 65 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tgui/packages/tgui/interfaces/AtmosControl.tsx
+65 -64
View File
@@ -2,7 +2,7 @@ import { useState } from 'react';
import { useBackend } from 'tgui/backend';
import { NanoMap } from 'tgui/components';
import { Window } from 'tgui/layouts';
import { Box, Button, Icon, Section, Tabs } from 'tgui-core/components';
import { Box, Button, Icon, Section, Stack, Tabs } from 'tgui-core/components';
type alarm = {
name: string;
@@ -21,7 +21,7 @@ type Data = {
export const AtmosControl = (props) => {
return (
<Window width={600} height={440}>
<Window.Content scrollable>
<Window.Content>
<AtmosControlContent />
</Window.Content>
</Window>
@@ -37,69 +37,70 @@ export const AtmosControlContent = (props) => {
const [tabIndex, setTabIndex] = useState(0);
const [zoom, setZoom] = useState(1);
let body;
// Alarms View
if (tabIndex === 0) {
body = (
<Section title="Alarms">
{alarms.map((alarm) => (
<Button
key={alarm.name}
color={
alarm.danger === 2 ? 'bad' : alarm.danger === 1 ? 'average' : ''
}
onClick={() => act('alarm', { alarm: alarm.ref })}
>
{alarm.name}
</Button>
))}
</Section>
);
} else if (tabIndex === 1) {
// Please note, if you ever change the zoom values,
// you MUST update styles/components/Tooltip.scss
// and change the @for scss to match.
body = (
<Box height="526px" mb="0.5rem" overflow="hidden">
<NanoMap zoomScale={data.zoomScale} onZoom={(v) => setZoom(v)}>
{alarms
.filter((x) => ~~x.z === ~~config.mapZLevel)
.map((cm) => (
<NanoMap.Marker
key={cm.ref}
x={cm.x}
y={cm.y}
zoom={zoom}
icon="bell"
tooltip={cm.name}
color={cm.danger ? 'red' : 'green'}
onClick={() => act('alarm', { alarm: cm.ref })}
/>
))}
</NanoMap>
</Box>
);
}
const tab: React.JSX.Element[] = [];
tab[0] = (
<Section title="Alarms" scrollable fill>
{alarms.map((alarm) => (
<Button
key={alarm.name}
color={
alarm.danger === 2 ? 'bad' : alarm.danger === 1 ? 'average' : ''
}
onClick={() => act('alarm', { alarm: alarm.ref })}
>
{alarm.name}
</Button>
))}
</Section>
);
// Please note, if you ever change the zoom values,
// you MUST update styles/components/Tooltip.scss
// and change the @for scss to match.
tab[1] = (
<Box height="526px" mb="0.5rem" overflow="hidden">
<NanoMap zoomScale={data.zoomScale} onZoom={(v) => setZoom(v)}>
{alarms
.filter((x) => ~~x.z === ~~config.mapZLevel)
.map((cm) => (
<NanoMap.Marker
key={cm.ref}
x={cm.x}
y={cm.y}
zoom={zoom}
icon="bell"
tooltip={cm.name}
color={cm.danger ? 'red' : 'green'}
onClick={() => act('alarm', { alarm: cm.ref })}
/>
))}
</NanoMap>
</Box>
);
return (
<>
<Tabs>
<Tabs.Tab
key="AlarmView"
selected={0 === tabIndex}
onClick={() => setTabIndex(0)}
>
<Icon name="table" /> Alarm View
</Tabs.Tab>
<Tabs.Tab
key="MapView"
selected={1 === tabIndex}
onClick={() => setTabIndex(1)}
>
<Icon name="map-marked-alt" /> Map View
</Tabs.Tab>
</Tabs>
<Box m={2}>{body}</Box>
</>
<Stack fill vertical>
<Stack.Item>
<Tabs>
<Tabs.Tab
key="AlarmView"
selected={0 === tabIndex}
onClick={() => setTabIndex(0)}
>
<Icon name="table" /> Alarm View
</Tabs.Tab>
<Tabs.Tab
key="MapView"
selected={1 === tabIndex}
onClick={() => setTabIndex(1)}
>
<Icon name="map-marked-alt" /> Map View
</Tabs.Tab>
</Tabs>
</Stack.Item>
<Stack.Item grow m={2}>
{tab[tabIndex]}
</Stack.Item>
</Stack>
);
};