Вынес кнопку наверх

jwt
Rinsvent 2 years ago
parent ac8359d488
commit bb977edb2c
  1. 34
      components/elements/commands/elements/command/index.tsx
  2. 39
      components/elements/commands/index.tsx

@ -4,7 +4,7 @@ import Arguments from "../arguments";
import {OptionInterface} from "../option";
import {ArgumentInterface} from "../argument";
import {Provider} from "./context";
import {useState} from "react";
import {useEffect, useState} from "react";
export interface CommandInterface {
class: string,
@ -14,28 +14,19 @@ export interface CommandInterface {
arguments: ArgumentInterface[],
}
export default function Command(command: CommandInterface) {
interface CommandComponentInterface {
command: CommandInterface,
callback: any,
}
export default function Command({command, callback}: CommandComponentInterface) {
const [optionList, setOptionList] = useState<Record<string, any>>({});
const [argumentList, setArgumentList] = useState<Record<string, any>>({});
let onClick = async (event: any) => {
let url = `http://fmw.sipachev.sv/system-monitoring/commands/${command.name}/run`
let data = {
options: optionList,
arguments: argumentList,
}
console.log('data', data)
let response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',
'X-Plugin-Token': 'passw0rd'
},
body: JSON.stringify(data)
});
let result = await response.json();
console.log('result', result)
}
useEffect(() => {
callback && callback(command.name, optionList, argumentList)
}, [optionList, argumentList])
return (
<Provider value={{optionList, setOptionList, argumentList, setArgumentList}}>
<div className={styles.task}>
@ -44,9 +35,6 @@ export default function Command(command: CommandInterface) {
<Options optionList={command.options} />
<Arguments argumentList={command.arguments} />
</div>
<div>
<button onClick={onClick}>Run</button>
</div>
</div>
</Provider>
)

@ -1,9 +1,11 @@
import {Table, TableBody, TableCell, TableHead, TableRow} from "@mui/material";
import {Table, TableBody, TableCell, TableHead, TableRow, IconButton} from "@mui/material";
import Command, {CommandInterface} from "./elements/command";
import {useEffect, useState} from "react";
import PlayCircleOutlineIcon from '@mui/icons-material/PlayCircleOutline';
export default function Commands() {
const [commands, setCommands] = useState<CommandInterface[]>([]);
const [command2data, setCommand2data] = useState<Record<string, any>>({});
let refreshCommands = async () => {
let response = await fetch('http://fmw.sipachev.sv/system-monitoring/commands', {
@ -31,11 +33,40 @@ export default function Commands() {
</TableRow>
</TableHead>
<TableBody>
{commands.map((command: CommandInterface, index: number) => (
{commands.map((command: CommandInterface, index: number) => {
let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
let temp = {
...command2data
}
temp[name] = {
options: optionList,
arguments: argumentList,
}
setCommand2data(temp)
}
let runCommand = async () => {
let url = `http://fmw.sipachev.sv/system-monitoring/commands/${command.name}/run`
let data = command2data[command.name] || {}
let response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8',
'X-Plugin-Token': 'passw0rd'
},
body: JSON.stringify(data)
});
}
return (
<TableRow key={command.name}>
<TableCell><Command key={index} {...command} /></TableCell>
<TableCell><Command key={index} command={command} callback={callback} /></TableCell>
<TableCell>
<IconButton onClick={runCommand} aria-label="run">
<PlayCircleOutlineIcon />
</IconButton>
</TableCell>
</TableRow>
))}
)
})}
</TableBody>
</Table>
)

Loading…
Cancel
Save