cyberpresidentvanellope/Paradise
1
0
Fork 0
mirror of https://github.com/ParadiseSS13/Paradise.git synced 2026-08-27 14:07:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

convert ERT manager to tsx (#30676)

Browse Source 
* convert ERT manager to tsx

* rebuild bundle
This commit is contained in:
warriorstar-orion
2025-11-12 12:44:13 +00:00
committed by GitHub
parent 0e430a3180
commit fc0a723775
2 changed files with 102 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tgui/packages/tgui/interfaces/ERTManager.jsx → tgui/packages/tgui/interfaces/ERTManager.tsx
+101 -71
View File
@@ -1,11 +1,12 @@
import { useState } from 'react';
import { Box, Button, Icon, Input, LabeledList, Section, Stack, Tabs, TextArea } from 'tgui-core/components';
import { Box, Button, Icon, LabeledList, Section, Stack, Tabs, TextArea } from 'tgui-core/components';
import { BooleanLike } from 'tgui-core/react';
import { decodeHtmlEntities } from 'tgui-core/string';
import { useBackend } from '../backend';
import { Window } from '../layouts';
const PickTab = (index) => {
const PickTab = (index: number) => {
switch (index) {
case 0:
return <SendERT />;
@@ -18,9 +19,7 @@ const PickTab = (index) => {
}
};
export const ERTManager = (props) => {
const { act, data } = useBackend();
export const ERTManager = () => {
const [tabIndex, setTabIndex] = useState(0);
return (
@@ -69,8 +68,33 @@ export const ERTManager = (props) => {
);
};
export const ERTOverview = (props) => {
const { act, data } = useBackend();
type ERTRequestMessage = {
time: string;
sender_real_name: string;
sender_uid: string;
message: string;
};
type ERTManagerData = {
security_level_color: string;
str_security_level: string;
ert_request_answered: BooleanLike;
ert_type: string;
com: number;
sec: number;
med: number;
eng: number;
jan: number;
par: number;
cyb: number;
secborg: number;
total: number;
spawnpoints: number;
ert_request_messages: ERTRequestMessage[];
};
export const ERTOverview = () => {
const { act, data } = useBackend<ERTManagerData>();
const { security_level_color, str_security_level, ert_request_answered } = data;
return (
@@ -84,11 +108,12 @@ export const ERTOverview = (props) => {
<Button.Checkbox
checked={ert_request_answered}
textColor={ert_request_answered ? null : 'bad'}
content={ert_request_answered ? 'Answered' : 'Unanswered'}
onClick={() => act('toggle_ert_request_answered')}
tooltip={'Checking this box will disable the next ERT reminder notification'}
selected={null}
/>
>
{ert_request_answered ? 'Answered' : 'Unanswered'}
</Button.Checkbox>
</LabeledList.Item>
</LabeledList>
</Section>
@@ -96,8 +121,9 @@ export const ERTOverview = (props) => {
);
};
const SendERT = (props) => {
const { act, data } = useBackend();
const SendERT = () => {
const { act, data } = useBackend<ERTManagerData>();
const { ert_type, com, sec, med, eng, par, jan, cyb, secborg, total, spawnpoints } = data;
let slotOptions = [0, 1, 2, 3, 4, 5];
const [silentERT, setSilentERT] = useState(false);
@@ -112,137 +138,143 @@ const SendERT = (props) => {
<>
<Button
width={5}
content="Amber"
textAlign="center"
color={data.ert_type === 'Amber' ? 'orange' : ''}
color={ert_type === 'Amber' ? 'orange' : ''}
onClick={() => act('ert_type', { ert_type: 'Amber' })}
/>
>
Amber
</Button>
<Button
width={5}
content="Red"
textAlign="center"
color={data.ert_type === 'Red' ? 'red' : ''}
color={ert_type === 'Red' ? 'red' : ''}
onClick={() => act('ert_type', { ert_type: 'Red' })}
/>
>
Red
</Button>
<Button
width={5}
content="Gamma"
textAlign="center"
color={data.ert_type === 'Gamma' ? 'purple' : ''}
color={ert_type === 'Gamma' ? 'purple' : ''}
onClick={() => act('ert_type', { ert_type: 'Gamma' })}
/>
>
Gamma
</Button>
</>
}
>
<LabeledList>
<LabeledList.Item label="Commander">
<Button
icon={data.com ? 'toggle-on' : 'toggle-off'}
selected={data.com}
content={data.com ? 'Yes' : 'No'}
onClick={() => act('toggle_com')}
/>
<Button icon={com ? 'toggle-on' : 'toggle-off'} selected={com} onClick={() => act('toggle_com')}>
{com ? 'Yes' : 'No'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Security">
{slotOptions.map((a, i) => (
<Button
key={'sec' + a}
selected={data.sec === a}
content={String(a)}
selected={sec === a}
onClick={() =>
act('set_sec', {
set_sec: a,
})
}
/>
>
{String(a)}
</Button>
))}
</LabeledList.Item>
<LabeledList.Item label="Medical">
{slotOptions.map((a, i) => (
<Button
key={'med' + a}
selected={data.med === a}
content={String(a)}
selected={med === a}
onClick={() =>
act('set_med', {
set_med: a,
})
}
/>
>
{String(a)}
</Button>
))}
</LabeledList.Item>
<LabeledList.Item label="Engineering">
{slotOptions.map((a, i) => (
<Button
key={'eng' + a}
selected={data.eng === a}
content={String(a)}
selected={eng === a}
onClick={() =>
act('set_eng', {
set_eng: a,
})
}
/>
>
{String(a)}
</Button>
))}
</LabeledList.Item>
<LabeledList.Item label="Paranormal">
{slotOptions.map((a, i) => (
<Button
key={'par' + a}
selected={data.par === a}
content={String(a)}
selected={par === a}
onClick={() =>
act('set_par', {
set_par: a,
})
}
/>
>
{String(a)}
</Button>
))}
</LabeledList.Item>
<LabeledList.Item label="Janitor">
{slotOptions.map((a, i) => (
<Button
key={'jan' + a}
selected={data.jan === a}
content={String(a)}
selected={jan === a}
onClick={() =>
act('set_jan', {
set_jan: a,
})
}
/>
>
{String(a)}
</Button>
))}
</LabeledList.Item>
<LabeledList.Item label="Cyborg">
{slotOptions.map((a, i) => (
<Button
key={'cyb' + a}
selected={data.cyb === a}
content={String(a)}
selected={cyb === a}
onClick={() =>
act('set_cyb', {
set_cyb: a,
})
}
/>
>
{String(a)}
</Button>
))}
</LabeledList.Item>
<LabeledList.Item label="Security Module">
<Button
width={10.5}
disabled={data.ert_type !== 'Red' || !data.cyb}
icon={data.secborg ? 'toggle-on' : 'toggle-off'}
color={data.secborg ? 'red' : ''}
content={data.secborg ? 'Enabled' : data.ert_type !== 'Red' ? 'Unavailable' : 'Disabled'}
disabled={ert_type !== 'Red' || !cyb}
icon={secborg ? 'toggle-on' : 'toggle-off'}
color={secborg ? 'red' : ''}
textAlign="center"
onClick={() => act('toggle_secborg')}
/>
>
{secborg ? 'Enabled' : ert_type !== 'Red' ? 'Unavailable' : 'Disabled'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Silent ERT">
<Button
width={10.5}
icon={silentERT ? 'microphone-slash' : 'microphone'}
content={silentERT ? 'Silenced' : 'Public'}
textAlign="center"
selected={silentERT}
onClick={() => setSilentERT(!silentERT)}
@@ -252,11 +284,13 @@ const SendERT = (props) => {
: 'This ERT will be announced to the station on dispatch'
}
tooltipPosition="top"
/>
>
{silentERT ? 'Silenced' : 'Public'}
</Button>
</LabeledList.Item>
<LabeledList.Item label="Total Slots">
<Box color={data.total > data.spawnpoints ? 'red' : 'green'}>
{data.total} total, versus {data.spawnpoints} spawnpoints
<Box color={total > spawnpoints ? 'red' : 'green'}>
{total} total, versus {spawnpoints} spawnpoints
</Box>
</LabeledList.Item>
<LabeledList.Item label="Dispatch">
@@ -264,9 +298,10 @@ const SendERT = (props) => {
width={10.5}
textAlign="center"
icon="ambulance"
content="Send ERT"
onClick={() => act('dispatch_ert', { silent: silentERT })}
/>
>
Send ERT
</Button>
</LabeledList.Item>
</LabeledList>
</Section>
@@ -274,8 +309,8 @@ const SendERT = (props) => {
);
};
const ReadERTRequests = (props) => {
const { act, data } = useBackend();
const ReadERTRequests = () => {
const { act, data } = useBackend<ERTManagerData>();
const { ert_request_messages } = data;
@@ -289,10 +324,11 @@ const ReadERTRequests = (props) => {
title={request.time}
buttons={
<Button
content={request.sender_real_name}
onClick={() => act('view_player_panel', { uid: request.sender_uid })}
tooltip="View player panel"
/>
>
{request.sender_real_name}
</Button>
}
>
{request.message}
@@ -315,8 +351,8 @@ const ReadERTRequests = (props) => {
);
};
const DenyERT = (props) => {
const { act, data } = useBackend();
const DenyERT = () => {
const { act } = useBackend();
const [text, setText] = useState('');
@@ -325,20 +361,14 @@ const DenyERT = (props) => {
<Section fill>
<TextArea
placeholder="Enter ERT denial reason here. Shift-Enter to add a new line."
rows={19}
fluid
height={24}
value={text}
onChange={(value) => setText(value)}
/>
<Button.Confirm
content="Deny ERT"
fluid
icon="times"
center
mt={2}
textAlign="center"
onClick={() => act('deny_ert', { reason: text })}
/>
<Button.Confirm fluid icon="times" mt={2} textAlign="center" onClick={() => act('deny_ert', { reason: text })}>
Deny ERT
</Button.Confirm>
</Section>
</Stack.Item>
);
tgui/public/tgui.bundle.js
+1 -1
View File
File diff suppressed because one or more lines are too long