diff --git a/tgui/packages/tgui/interfaces/ERTManager.jsx b/tgui/packages/tgui/interfaces/ERTManager.tsx similarity index 71% rename from tgui/packages/tgui/interfaces/ERTManager.jsx rename to tgui/packages/tgui/interfaces/ERTManager.tsx index 80f05612951..2fcbc7b6aba 100644 --- a/tgui/packages/tgui/interfaces/ERTManager.jsx +++ b/tgui/packages/tgui/interfaces/ERTManager.tsx @@ -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 ; @@ -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(); const { security_level_color, str_security_level, ert_request_answered } = data; return ( @@ -84,11 +108,12 @@ export const ERTOverview = (props) => { act('toggle_ert_request_answered')} tooltip={'Checking this box will disable the next ERT reminder notification'} selected={null} - /> + > + {ert_request_answered ? 'Answered' : 'Unanswered'} + @@ -96,8 +121,9 @@ export const ERTOverview = (props) => { ); }; -const SendERT = (props) => { - const { act, data } = useBackend(); +const SendERT = () => { + const { act, data } = useBackend(); + 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) => { <> } > - {slotOptions.map((a, i) => ( ))} {slotOptions.map((a, i) => ( ))} {slotOptions.map((a, i) => ( ))} {slotOptions.map((a, i) => ( ))} {slotOptions.map((a, i) => ( ))} {slotOptions.map((a, i) => ( ))} - data.spawnpoints ? 'red' : 'green'}> - {data.total} total, versus {data.spawnpoints} spawnpoints + spawnpoints ? 'red' : 'green'}> + {total} total, versus {spawnpoints} spawnpoints @@ -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 + @@ -274,8 +309,8 @@ const SendERT = (props) => { ); }; -const ReadERTRequests = (props) => { - const { act, data } = useBackend(); +const ReadERTRequests = () => { + const { act, data } = useBackend(); const { ert_request_messages } = data; @@ -289,10 +324,11 @@ const ReadERTRequests = (props) => { title={request.time} buttons={ } > {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) => {