rinsvent/fms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

изменил дизайн

Browse Source
This commit is contained in:
Rinsvent 2023-01-25 00:18:55 +07:00
parent 27049764da
commit 5ff2fbbc39
8 changed files with 81 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
api/sm/sm-client.ts
View File

@ -15,6 +15,7 @@ import playProcessSchema from "./schemas/play-process";
import pauseProcessSchema from "./schemas/pause-process";
import stopProcessSchema from "./schemas/stop-process";
import killProcessSchema from "./schemas/kill-process";
import commandSchema from "./schemas/command";
export class SMClient {
schemaClient: SchemaClient
@ -33,6 +34,16 @@ export class SMClient {
}
}
async getCommand(name: string): Promise<ResponseInterface<CommandResponseInterface>> {
let { responseData, headers } = await this.schemaClient.send(commandSchema, {
commandName: name
})
return {
data: responseData,
headers: headers
}
}
async runCommand(data: any): Promise<ResponseInterface> {
let { headers } = await this.schemaClient.send(runCommandsSchema, data)
return {

3
components/elements/commands/elements/argument/index.tsx
View File

@ -28,8 +28,7 @@ export default function Argument(argument: ArgumentInterface) {
}
return (
<span>
<TextField onInput={onInput} placeholder={argument.name} value={value} size="small" variant="outlined" />&nbsp;
{/*<input onInput={onInput} placeholder={argument.name} value={value} type="text"/>&nbsp;*/}
<TextField onInput={onInput} label={argument.name} value={value} size="small" variant="outlined" />&nbsp;
</span>
)
}

9
components/elements/commands/elements/command/index.tsx
View File

@ -17,11 +17,13 @@ export interface CommandInterface {
interface CommandComponentInterface {
command: CommandInterface,
callback: any,
optionsParams?: Record<string, any>,
argumentsParams?: Record<string, any>,
}
export default function Command({command, callback}: CommandComponentInterface) {
const [optionList, setOptionList] = useState<Record<string, any>>({});
const [argumentList, setArgumentList] = useState<Record<string, any>>({});
export default function Command({command, callback, optionsParams, argumentsParams}: CommandComponentInterface) {
const [optionList, setOptionList] = useState<Record<string, any>>(optionsParams || {});
const [argumentList, setArgumentList] = useState<Record<string, any>>(argumentsParams || {});
useEffect(() => {
callback && callback(command.name, optionList, argumentList)
@ -31,7 +33,6 @@ export default function Command({command, callback}: CommandComponentInterface)
<Provider value={{optionList, setOptionList, argumentList, setArgumentList}}>
<div>
<div title={command.description}>
{command.name}&nbsp;
<Options optionList={command.options} />
<Arguments argumentList={command.arguments} />
</div>

5
components/elements/commands/elements/options/index.tsx
View File

@ -2,7 +2,7 @@ import styles from './styles.module.css'
import Option, {OptionInterface} from '../option'
import {useContext, useEffect, useState} from "react";
import Context, {ContextInterface} from "../command/context";
import {Select, MenuItem, Checkbox, ListItemText} from "@mui/material";
import {Select, OutlinedInput, FormControl, MenuItem, Checkbox, ListItemText} from "@mui/material";
interface OptionsInterface {
optionList: OptionInterface[]
@ -45,10 +45,11 @@ export default function Options({optionList}: OptionsInterface) {
<>
<Select
value={selectedValues}
label="Option"
label="Options"
multiple
displayEmpty
onChange={handleChange}
input={<OutlinedInput />}
renderValue={(selectedValues) => `Options`}
size="small"
>

52
components/elements/commands/index.tsx
View File

@ -7,12 +7,14 @@ import ConfirmDialog from "../confirm-dialog";
import TabContext from "../../../context/tab";
import {TabEnum} from "../../../pages";
import smClient from "../../../api/sm/sm-client";
import Send from "@mui/icons-material/Send"
export default function Commands() {
const {setTab} = useContext(TabContext)
const [commands, setCommands] = useState<CommandInterface[]>([]);
const [selectedCommand, setSelectedCommand] = useState<CommandInterface|null>(null);
const [command2data, setCommand2data] = useState<Record<string, any>>({});
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);
@ -33,29 +35,23 @@ export default function Commands() {
let variants = commands.map((command: CommandInterface, index: number) => command.name);
let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
let temp = {
...command2data
}
temp[name] = {
options: optionList,
arguments: argumentList,
}
setCommand2data(temp)
setOptionList(optionList)
setArgumentList(argumentList)
}
let lock = false
let runCommand = async (dialogId: string) => {
if (lock) {
return
}
if (!selectedCommand) {
return
}
if (lock) {
return
}
lock = true
let data = command2data[selectedCommand.name] || {}
data['requestId'] = dialogId;
await smClient.runCommand({
commandName: selectedCommand.name,
...data
options: optionList,
arguments: argumentList,
requestId: dialogId,
})
lock = false
setTab(TabEnum.Processes)
@ -75,27 +71,13 @@ export default function Commands() {
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>
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{selectedCommand && <TableRow key={selectedCommand.name}>
<TableCell><Command command={selectedCommand} callback={callback} /></TableCell>
<TableCell>
<IconButton onClick={() => setOpen(true)} aria-label="run">
<PlayCircleOutline />
</IconButton>
</TableCell>
</TableRow>}
</TableBody>
</Table>
<ConfirmDialog open={open} text={'$$$'} agreeCallback={runCommand} closeCallback={() => setOpen(false)}/>
{selectedCommand && <ConfirmDialog title={selectedCommand.name} open={open} agreeCallback={runCommand} closeCallback={() => setOpen(false)}>
<Command command={selectedCommand} callback={callback} />
</ConfirmDialog>}
</>
)
}

25
components/elements/confirm-dialog/index.tsx
View File

@ -3,18 +3,20 @@ import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import { v4 } from "uuid"
interface ConfirmDialogInterface {
open: boolean
closeCallback: any
agreeCallback: any
text: string
title: string
closeCallback?: any
modifyCallback?: any
agreeCallback?: any
children: any
}
export default function ConfirmDialog({open, agreeCallback, closeCallback, text}: ConfirmDialogInterface) {
export default function ConfirmDialog({open, title, agreeCallback, modifyCallback, closeCallback, children}: ConfirmDialogInterface) {
let dialogId = v4()
return (
<Dialog
open={open}
@ -23,18 +25,17 @@ export default function ConfirmDialog({open, agreeCallback, closeCallback, text}
aria-describedby="alert-dialog-description"
>
<DialogTitle>
{"Are you sure?"}
{title}
</DialogTitle>
<DialogContent>
<DialogContentText>
{text}
</DialogContentText>
{children}
</DialogContent>
<DialogActions>
<Button onClick={() => agreeCallback(v4())} autoFocus>
{agreeCallback && <Button onClick={() => agreeCallback(dialogId)} autoFocus>
Agree
</Button>
<Button onClick={closeCallback}>Disagree</Button>
</Button>}
{modifyCallback && <Button onClick={modifyCallback}>Modify</Button>}
{closeCallback && <Button onClick={closeCallback}>Disagree</Button>}
</DialogActions>
</Dialog>
);

35
components/elements/processes/index.tsx
View File

@ -14,6 +14,7 @@ import {IconButton, LinearProgress, TableContainer, Table, TableBody, TableCell,
import ConfirmDialog from "../confirm-dialog";
import smClient from "../../../api/sm/sm-client";
import {ProcessesResponseInterface, Status} from "../../../api/sm/responses/processes";
import Command, {CommandInterface} from "../commands/elements/command";
enum Action {
Repeat,
@ -28,8 +29,12 @@ export default function Processes() {
const [page, setPage] = useState<number>(0);
const [count, setCount] = useState<number>(0);
const [open, setOpen] = useState<boolean>(false);
const [modify, setModify] = useState<boolean>(false);
const [action, setAction] = useState<Action | null>(null);
const [command, setCommand] = useState<CommandInterface | null>(null);
const [selectedProcess, setSelectedProcess] = useState<ProcessesResponseInterface | null>(null);
const [optionList, setOptionList] = useState<Record<string, any>>({});
const [argumentList, setArgumentList] = useState<Record<string, any>>({});
let refreshLock = false
let refreshProcesses = async () => {
@ -113,6 +118,11 @@ export default function Processes() {
setAction(null)
}
let callback = (name: string, optionList: Record<string, any>, argumentList: Record<string, any>) => {
setOptionList(optionList)
setArgumentList(argumentList)
}
return (
<>
<TableContainer>
@ -190,10 +200,27 @@ export default function Processes() {
page={page}
onPageChange={handleChangePage}
/>
<ConfirmDialog open={open} text={'!!!'} agreeCallback={agreeCallback} closeCallback={() => {
setSelectedProcess(null)
setOpen(false)
}}/>
{selectedProcess && <ConfirmDialog
title={selectedProcess.name}
open={open}
agreeCallback={agreeCallback}
modifyCallback={async () => {
let {data: command} = await smClient.getCommand(selectedProcess.name)
setCommand(command)
setModify(true)
}}
closeCallback={() => {
setSelectedProcess(null)
setOpen(false)
setCommand(null)
}}>
{!modify && `Reply?`}
{command && <Command
command={command}
optionsParams={selectedProcess.options}
argumentsParams={selectedProcess.arguments}
callback={callback}/>}
</ConfirmDialog>}
</>
)
}

1
pages/index.tsx
View File

@ -38,7 +38,6 @@ export default function Home() {
{tab === TabEnum.Commands && <Commands />}
{tab === TabEnum.Processes && <Processes />}
</TabProvider>
</main>
</>
)