some searching

This commit is contained in:
Kashargul
2024-09-19 02:23:42 +02:00
parent 5b964e0bf0
commit d1f28eb1cd
3 changed files with 101 additions and 56 deletions
+2 -2
View File
@@ -51,7 +51,7 @@
.["target"]["back"] = icon2base64(get_flat_icon(target,dir=NORTH,no_anim=TRUE))
var/list/target_items = list()
for(var/obj/item in target.module.modules)
target_items += list(list("item" = item.name, "ref" = "\ref[item]", "icon" = icon2html(item, user, sourceonly=TRUE)))
target_items += list(list("item" = item.name, "ref" = "\ref[item]", "icon" = icon2html(item, user, sourceonly=TRUE), "desc" = item.desc))
.["target"]["modules"] = target_items
var/list/module_options = list()
for(var/module in robot_modules)
@@ -70,7 +70,7 @@
break
if(exists)
continue
source_items += list(list("item" = item.name, "ref" = "\ref[item]", "icon" = icon2html(item, user, sourceonly=TRUE)))
source_items += list(list("item" = item.name, "ref" = "\ref[item]", "icon" = icon2html(item, user, sourceonly=TRUE), "desc" = item.desc))
.["source"]["modules"] = source_items
var/list/all_robots = list()
for(var/mob/living/silicon/robot/R in silicon_mob_list)
@@ -1,3 +1,7 @@
import { filter } from 'common/collections';
import { flow } from 'common/fp';
import { createSearch } from 'common/string';
import { useState } from 'react';
import { useBackend } from 'tgui/backend';
import {
Box,
@@ -7,11 +11,12 @@ import {
Flex,
Icon,
Image,
Input,
Section,
Stack,
} from 'tgui/components';
import { Source, Target } from '../types';
import { Module, Source, Target } from '../types';
export const ModifyRobotModules = (props: {
target: Target;
@@ -20,6 +25,8 @@ export const ModifyRobotModules = (props: {
}) => {
const { target, source, model_options } = props;
const { act } = useBackend();
const [searchSourceText, setSearchSourceText] = useState<string>('');
const [searchModuleText, setSearchModulText] = useState<string>('');
return (
<Flex>
@@ -49,36 +56,46 @@ export const ModifyRobotModules = (props: {
}}
/>
<Divider />
<Input
fluid
value={searchSourceText}
placeholder="Search for modules..."
onInput={(e, value: string) => setSearchSourceText(value)}
/>
<Divider />
<Stack fill>
<Stack.Item width="100%">
{source.modules.map((modul_option, i) => {
return (
<Button
fluid
key={i}
onClick={() =>
act('add_module', {
new_module: modul_option.ref,
})
}
>
<Flex varticalAlign="center">
<Flex.Item>
<Image src={modul_option.icon} />
</Flex.Item>
<Flex.Item ml="10px">{modul_option.item}</Flex.Item>
<Flex.Item grow />
<Flex.Item>
<Icon
name="arrow-right-to-bracket"
backgroundColor="green"
size={1.5}
/>
</Flex.Item>
</Flex>
</Button>
);
})}
{prepareSearch(source.modules, searchSourceText).map(
(modul_option, i) => {
return (
<Button
fluid
key={i}
tooltip={modul_option.desc}
onClick={() =>
act('add_module', {
new_module: modul_option.ref,
})
}
>
<Flex varticalAlign="center">
<Flex.Item>
<Image src={modul_option.icon} />
</Flex.Item>
<Flex.Item ml="10px">{modul_option.item}</Flex.Item>
<Flex.Item grow />
<Flex.Item>
<Icon
name="arrow-right-to-bracket"
backgroundColor="green"
size={1.5}
/>
</Flex.Item>
</Flex>
</Button>
);
},
)}
</Stack.Item>
</Stack>
</>
@@ -95,6 +112,7 @@ export const ModifyRobotModules = (props: {
confirmColor="red"
confirmIcon="triangle-exclamation"
onClick={() => act('reset_module')}
tooltip="Allows to reset the module back to default."
>
Reset Module
</Button.Confirm>
@@ -109,32 +127,42 @@ export const ModifyRobotModules = (props: {
}}
/>
<Divider />
<Input
fluid
value={searchModuleText}
placeholder="Search for modules..."
onInput={(e, value: string) => setSearchModulText(value)}
/>
<Divider />
<Stack fill>
<Stack.Item width="100%">
{target.modules.map((modul_option, i) => {
return (
<Button
fluid
key={i}
onClick={() =>
act('rem_module', {
old_module: modul_option.ref,
})
}
>
<Flex varticalAlign="center">
<Flex.Item>
<Image src={modul_option.icon} />
</Flex.Item>
<Flex.Item ml="10px">{modul_option.item}</Flex.Item>
<Flex.Item grow />
<Flex.Item>
<Icon name="trash" backgroundColor="red" size={1.5} />
</Flex.Item>
</Flex>
</Button>
);
})}
{prepareSearch(target.modules, searchModuleText).map(
(modul_option, i) => {
return (
<Button
fluid
key={i}
tooltip={modul_option.desc}
onClick={() =>
act('rem_module', {
old_module: modul_option.ref,
})
}
>
<Flex varticalAlign="center">
<Flex.Item>
<Image src={modul_option.icon} />
</Flex.Item>
<Flex.Item ml="10px">{modul_option.item}</Flex.Item>
<Flex.Item grow />
<Flex.Item>
<Icon name="trash" backgroundColor="red" size={1.5} />
</Flex.Item>
</Flex>
</Button>
);
},
)}
</Stack.Item>
</Stack>
</Section>
@@ -142,3 +170,20 @@ export const ModifyRobotModules = (props: {
</Flex>
);
};
const prepareSearch = (
modules: Module[],
searchText: string = '',
): Module[] => {
const testSearch = createSearch(searchText, (module: Module) => module.item);
return flow([
(modules: Module[]) => {
// Optional search term
if (!searchText) {
return modules;
} else {
return filter(modules, testSearch);
}
},
])(modules);
};
@@ -31,4 +31,4 @@ export type Source = {
modules: Module[];
} | null;
export type Module = { item: string; ref: string; icon: string };
export type Module = { item: string; ref: string; icon: string; desc: string };