{
let input = document.createElement('input');
input.setAttribute('type', 'text');
- input.style.fontSize = field.is_signature ? '12px' : `${fontSize}px`;
+ input.style.fontSize = field.is_signature ? '30px' : `${fontSize}px`;
input.style.fontFamily = fieldData.font || font;
input.style.fontStyle = field.is_signature ? 'italic' : 'normal';
input.style.fontWeight = 'bold';
diff --git a/tgui/packages/tgui/interfaces/RequestManager.js b/tgui/packages/tgui/interfaces/RequestManager.js
new file mode 100644
index 000000000000..5d8d2c468a53
--- /dev/null
+++ b/tgui/packages/tgui/interfaces/RequestManager.js
@@ -0,0 +1,184 @@
+/**
+ * @file
+ * @copyright 2021 bobbahbrown (https://github.com/bobbahbrown)
+ * @license MIT
+ */
+
+import { decodeHtmlEntities } from 'common/string';
+import { useBackend, useLocalState } from '../backend';
+import { Button, Input, Section, Table } from '../components';
+import { Popper } from '../components/Popper';
+import { Window } from '../layouts';
+
+export const RequestManager = (props, context) => {
+ const { act, data } = useBackend(context);
+ const { requests } = data;
+ const [filteredTypes, _] = useLocalState(
+ context,
+ 'filteredTypes',
+ Object.fromEntries(
+ Object.entries(displayTypeMap).map(([type, _]) => [type, true])
+ )
+ );
+ const [searchText, setSearchText] = useLocalState(context, 'searchText');
+
+ // Handle filtering
+ let displayedRequests = requests.filter(
+ (request) => filteredTypes[request.req_type]
+ );
+ if (searchText) {
+ const filterText = searchText.toLowerCase();
+ displayedRequests = displayedRequests.filter(
+ (request) =>
+ decodeHtmlEntities(request.message)
+ .toLowerCase()
+ .includes(filterText) ||
+ request.owner_name.toLowerCase().includes(filterText)
+ );
+ }
+
+ return (
+
+
+
+ setSearchText(value)}
+ placeholder={'Search...'}
+ mr={1}
+ />
+
+ >
+ }
+ >
+ {displayedRequests.map((request) => (
+
+
+
+
+ {request.owner_name}
+ {request.owner === null && ' [DC]'}
+
+
+ {request.timestamp_str}
+
+
+
+
+ {decodeHtmlEntities(request.message)}
+
+
+ {request.owner !== null &&
}
+
+ ))}
+
+
+
+ );
+};
+
+const displayTypeMap = {
+ 'request_prayer': 'PRAYER',
+ 'request_centcom': 'CENTCOM',
+ 'request_syndicate': 'SYNDICATE',
+ 'request_nuke': 'NUKE CODE',
+ 'request_fax': 'FAX',
+};
+
+const RequestType = (props) => {
+ const { requestType } = props;
+
+ return (
+
+ {displayTypeMap[requestType]}:
+
+ );
+};
+
+const RequestControls = (props, context) => {
+ const { act, _ } = useBackend(context);
+ const { request } = props;
+
+ return (
+
+
+
+
+
+
+
+
+ {request.req_type !== 'request_prayer' && (
+
+ )}
+ {request.req_type === 'request_nuke' && (
+
+ )}
+ {request.req_type === 'request_fax' && (
+
+ )}
+
+ );
+};
+
+const FilterPanel = (_, context) => {
+ const [filterVisible, setFilterVisible] = useLocalState(
+ context,
+ 'filterVisible',
+ false
+ );
+ const [filteredTypes, setFilteredTypes] = useLocalState(
+ context,
+ 'filteredTypes',
+ Object.fromEntries(
+ Object.entries(displayTypeMap).map(([type, _]) => [type, true])
+ )
+ );
+
+ return (
+
+
+ {Object.keys(displayTypeMap).map((type) => {
+ return (
+
+
+
+
+
+ {
+ filteredTypes[type] = !filteredTypes[type];
+ setFilteredTypes(filteredTypes);
+ }}
+ my={0.25}
+ />
+
+
+ );
+ })}
+
+
+ }
+ >
+
+
+ );
+};