132 lines
4.1 KiB
TypeScript
132 lines
4.1 KiB
TypeScript
import { Box, Paper, Tab, Tabs } from "@mui/material";
|
|
import React, { useCallback, useEffect, useState } from "react";
|
|
import { getActiveWorkflow, getParamsOfActiveWorkflow } from "../../src/api/workflow";
|
|
import { useSocketStore } from '../../src/context/socket';
|
|
import { WhereWhatPair, WorkflowFile } from "maxun-core";
|
|
import { emptyWorkflow } from "../../src/shared/constants";
|
|
import { LeftSidePanelContent } from "./LeftSidePanelContent";
|
|
import { useGlobalInfoStore } from "../../src/context/globalInfo";
|
|
import { TabContext, TabPanel } from "@mui/lab";
|
|
import { LeftSidePanelSettings } from "./LeftSidePanelSettings";
|
|
import { RunSettings } from "../../src/components/run/RunSettings";
|
|
|
|
const fetchWorkflow = (id: string, callback: (response: WorkflowFile) => void) => {
|
|
getActiveWorkflow(id).then(
|
|
(response) => {
|
|
if (response) {
|
|
callback(response);
|
|
} else {
|
|
throw new Error("No workflow found");
|
|
}
|
|
}
|
|
).catch((error) => { console.log(`Failed to fetch workflow:`,error.message) })
|
|
};
|
|
|
|
interface LeftSidePanelProps {
|
|
sidePanelRef: HTMLDivElement | null;
|
|
alreadyHasScrollbar: boolean;
|
|
recordingName: string;
|
|
handleSelectPairForEdit: (pair: WhereWhatPair, index: number) => void;
|
|
}
|
|
|
|
export const LeftSidePanel = (
|
|
{ sidePanelRef, alreadyHasScrollbar, recordingName, handleSelectPairForEdit }: LeftSidePanelProps) => {
|
|
|
|
const [workflow, setWorkflow] = useState<WorkflowFile>(emptyWorkflow);
|
|
const [hasScrollbar, setHasScrollbar] = useState<boolean>(alreadyHasScrollbar);
|
|
const [tab, setTab] = useState<string>('recording');
|
|
const [params, setParams] = useState<string[]>([]);
|
|
const [settings, setSettings] = React.useState<RunSettings>({
|
|
maxConcurrency: 1,
|
|
maxRepeats: 1,
|
|
debug: false,
|
|
});
|
|
|
|
const { id, socket } = useSocketStore();
|
|
const { setRecordingLength } = useGlobalInfoStore();
|
|
|
|
const workflowHandler = useCallback((data: WorkflowFile) => {
|
|
setWorkflow(data);
|
|
setRecordingLength(data.workflow.length);
|
|
}, [workflow])
|
|
|
|
useEffect(() => {
|
|
// fetch the workflow every time the id changes
|
|
if (id) {
|
|
fetchWorkflow(id, workflowHandler);
|
|
}
|
|
// fetch workflow in 15min intervals
|
|
let interval = setInterval(() => {
|
|
if (id) {
|
|
fetchWorkflow(id, workflowHandler);
|
|
}
|
|
}, (900 * 60 * 15));
|
|
return () => clearInterval(interval)
|
|
}, [id]);
|
|
|
|
useEffect(() => {
|
|
if (socket) {
|
|
socket.on("workflow", workflowHandler);
|
|
}
|
|
|
|
if (sidePanelRef) {
|
|
const workflowListHeight = sidePanelRef.clientHeight;
|
|
const innerHeightWithoutNavbar = window.innerHeight - 70;
|
|
if (innerHeightWithoutNavbar <= workflowListHeight) {
|
|
if (!hasScrollbar) {
|
|
setHasScrollbar(true);
|
|
}
|
|
} else {
|
|
if (hasScrollbar && !alreadyHasScrollbar) {
|
|
setHasScrollbar(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
return () => {
|
|
socket?.off('workflow', workflowHandler);
|
|
}
|
|
}, [socket, workflowHandler]);
|
|
|
|
return (
|
|
<Paper
|
|
sx={{
|
|
height: '100%',
|
|
width: '100%',
|
|
backgroundColor: 'lightgray',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-start',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{/* <SidePanelHeader /> */}
|
|
<TabContext value={tab}>
|
|
<Tabs value={tab} onChange={(e, newTab) => setTab(newTab)}>
|
|
<Tab label="Recording" value='recording' />
|
|
<Tab label="Settings" value='settings' onClick={() => {
|
|
getParamsOfActiveWorkflow(id).then((response) => {
|
|
if (response) {
|
|
setParams(response);
|
|
}
|
|
})
|
|
}} />
|
|
</Tabs>
|
|
<TabPanel value='recording' sx={{ padding: '0px' }}>
|
|
<LeftSidePanelContent
|
|
workflow={workflow}
|
|
updateWorkflow={setWorkflow}
|
|
recordingName={recordingName}
|
|
handleSelectPairForEdit={handleSelectPairForEdit}
|
|
/>
|
|
</TabPanel>
|
|
<TabPanel value='settings'>
|
|
<LeftSidePanelSettings params={params}
|
|
settings={settings} setSettings={setSettings} />
|
|
</TabPanel>
|
|
</TabContext>
|
|
</Paper>
|
|
);
|
|
|
|
};
|