72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
import React, { useRef } from 'react';
|
|
import styled from "styled-components";
|
|
import { Button } from "@mui/material";
|
|
import { ActionDescription } from "../organisms/RightSidePanel";
|
|
import * as Settings from "./action-settings";
|
|
import { useSocketStore } from "../../context/socket";
|
|
|
|
interface ActionSettingsProps {
|
|
action: string;
|
|
}
|
|
|
|
export const ActionSettings = ({ action }: ActionSettingsProps) => {
|
|
|
|
const settingsRef = useRef<{ getSettings: () => object }>(null);
|
|
const { socket } = useSocketStore();
|
|
|
|
const DisplaySettings = () => {
|
|
switch (action) {
|
|
case "screenshot":
|
|
return <Settings.ScreenshotSettings ref={settingsRef} />;
|
|
case 'scroll':
|
|
return <Settings.ScrollSettings ref={settingsRef} />;
|
|
case 'scrapeSchema':
|
|
return <Settings.ScrapeSchemaSettings ref={settingsRef} />;
|
|
default:
|
|
return null;
|
|
}
|
|
}
|
|
|
|
const handleSubmit = (event: React.SyntheticEvent) => {
|
|
event.preventDefault();
|
|
//get the data from settings
|
|
const settings = settingsRef.current?.getSettings();
|
|
//Send notification to the server and generate the pair
|
|
socket?.emit(`action`, {
|
|
action,
|
|
settings
|
|
});
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<ActionDescription>Action settings:</ActionDescription>
|
|
<ActionSettingsWrapper action={action}>
|
|
<form onSubmit={handleSubmit}>
|
|
<DisplaySettings />
|
|
<Button
|
|
variant="outlined"
|
|
type="submit"
|
|
sx={{
|
|
display: "table-cell",
|
|
float: "right",
|
|
marginRight: "15px",
|
|
marginTop: "20px",
|
|
}}
|
|
>
|
|
Add Action
|
|
</Button>
|
|
</form>
|
|
</ActionSettingsWrapper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ActionSettingsWrapper = styled.div<{ action: string }>`
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: ${({ action }) => action === 'script' ? 'stretch' : 'center'};;
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
`;
|