You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
fms/components/elements/commands/index.tsx

85 lines
3.1 KiB

import styles from './styles.module.css'
import {IconButton, Autocomplete, TextField} from "@mui/material";
import Command from "./elements/command";
import {useContext, useEffect, useState} from "react";
import ConfirmDialog from "../confirm-dialog";
import TabContext from "../../../context/tab";
import {TabEnum} from "../../../pages";
import Send from "@mui/icons-material/Send"
import {CommandInterface} from "../../../api/sm/responses/comamnds";
import {useApi} from "../../../hooks/use-api";
export default function Commands() {
const {setTab} = useContext(TabContext)
const [commands, setCommands] = useState<CommandInterface[]>([]);
const [selectedCommand, setSelectedCommand] = useState<CommandInterface|null>(null);
const [optionList, setOptionList] = useState<Record<string, any>>({});
const [argumentList, setArgumentList] = useState<Record<string, any>>({});
const [value, setValue] = useState<string | null>('');
const [open, setOpen] = useState<boolean>(false);
const api = useApi()
let refreshCommands = async () => {
const { data: commands } = await api.useMemory().getCommands()
setCommands(commands)
}
useEffect(() => {
refreshCommands()
}, [])
useEffect(() => {
let command = commands.filter((command) => command.name === value)
setSelectedCommand(command[0] || null)
}, [value])
let variants = commands.map((command: CommandInterface, index: number) => command.name);
let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
setOptionList(optionList)
setArgumentList(argumentList)
}
let lock = false
let runCommand = async (dialogId: string) => {
if (!selectedCommand) {
return
}
if (lock) {
return
}
lock = true
await api.runCommand({
commandName: selectedCommand.name,
options: optionList,
arguments: argumentList,
requestId: dialogId,
})
lock = false
setTab(TabEnum.Processes)
}
return (
<>
<br/>
<div className={styles.autocomplete}>
<Autocomplete
value={value}
onChange={(event: any, newValue: string | null) => {
setValue(newValue);
}}
disablePortal
id="combo-box-demo"
options={variants}
renderInput={(params) => <TextField {...params} label="Commands" />}
/>
<IconButton onClick={() => selectedCommand && setOpen(true)} title={`Execute`} aria-label="Execute">
<Send color={selectedCommand ? 'primary' : 'inherit'} />
</IconButton>
</div>
{selectedCommand && <ConfirmDialog title={selectedCommand.name} open={open} agreeCallback={runCommand} closeCallback={() => setOpen(false)}>
<Command command={selectedCommand} callback={callback} />
</ConfirmDialog>}
</>
)
}