mirror of
https://github.com/VOREStation/VOREStation.git
synced 2026-08-27 22:18:27 +01:00
some searching
This commit is contained in:
@@ -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 };
|
||||
|
||||
Reference in New Issue
Block a user