106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react';
|
|
import Box from "@mui/material/Box";
|
|
import { Pair } from "./Pair";
|
|
import { WhereWhatPair, WorkflowFile } from "maxun-core";
|
|
import { useSocketStore } from "../../context/socket";
|
|
import { Add } from "@mui/icons-material";
|
|
import { Socket } from "socket.io-client";
|
|
import { AddButton } from "../atoms/buttons/AddButton";
|
|
import { AddPair } from "../../api/workflow";
|
|
import { GenericModal } from "../atoms/GenericModal";
|
|
import { PairEditForm } from "./PairEditForm";
|
|
import { Fab, Tooltip, Typography } from "@mui/material";
|
|
|
|
interface LeftSidePanelContentProps {
|
|
workflow: WorkflowFile;
|
|
updateWorkflow: (workflow: WorkflowFile) => void;
|
|
recordingName: string;
|
|
handleSelectPairForEdit: (pair: WhereWhatPair, index: number) => void;
|
|
}
|
|
|
|
export const LeftSidePanelContent = ({ workflow, updateWorkflow, recordingName, handleSelectPairForEdit}: LeftSidePanelContentProps) => {
|
|
const [activeId, setActiveId] = React.useState<number>(0);
|
|
const [breakpoints, setBreakpoints] = React.useState<boolean[]>([]);
|
|
const [showEditModal, setShowEditModal] = useState(false);
|
|
|
|
const { socket } = useSocketStore();
|
|
|
|
const activePairIdHandler = useCallback((data: string, socket: Socket) => {
|
|
setActiveId(parseInt(data) + 1);
|
|
// -1 is specially emitted when the interpretation finishes
|
|
if (parseInt(data) === -1) {
|
|
return;
|
|
}
|
|
socket.emit('activeIndex', data);
|
|
}, [activeId])
|
|
|
|
const addPair = (pair: WhereWhatPair, index: number) => {
|
|
AddPair((index - 1), pair).then((updatedWorkflow) => {
|
|
updateWorkflow(updatedWorkflow);
|
|
}).catch((error) => {
|
|
console.error(error);
|
|
});
|
|
setShowEditModal(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
socket?.on("activePairId", (data) => activePairIdHandler(data, socket));
|
|
return () => {
|
|
socket?.off("activePairId", (data) => activePairIdHandler(data, socket));
|
|
}
|
|
}, [socket, setActiveId]);
|
|
|
|
|
|
const handleBreakpointClick = (id: number) => {
|
|
setBreakpoints(oldBreakpoints => {
|
|
const newArray = [...oldBreakpoints, ...Array(workflow.workflow.length - oldBreakpoints.length).fill(false)];
|
|
newArray[id] = !newArray[id];
|
|
socket?.emit("breakpoints", newArray);
|
|
return newArray;
|
|
});
|
|
};
|
|
|
|
const handleAddPair = () => {
|
|
setShowEditModal(true);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<Tooltip title='Add pair' placement='left' arrow>
|
|
<div style={{ float: 'right'}}>
|
|
<AddButton
|
|
handleClick={handleAddPair}
|
|
title=''
|
|
hoverEffect={false}
|
|
style={{color: 'white', background: '#1976d2'}}
|
|
/>
|
|
</div>
|
|
</Tooltip>
|
|
<GenericModal
|
|
isOpen={showEditModal}
|
|
onClose={() => setShowEditModal(false)}
|
|
>
|
|
<PairEditForm
|
|
onSubmitOfPair={addPair}
|
|
numberOfPairs={workflow.workflow.length}
|
|
/>
|
|
</GenericModal>
|
|
<div>
|
|
{
|
|
workflow.workflow.map((pair, i, workflow, ) =>
|
|
<Pair
|
|
handleBreakpoint={() => handleBreakpointClick(i)}
|
|
isActive={ activeId === i + 1}
|
|
key={workflow.length - i}
|
|
index={workflow.length - i}
|
|
pair={pair}
|
|
updateWorkflow={updateWorkflow}
|
|
numberOfPairs={workflow.length}
|
|
handleSelectPairForEdit={handleSelectPairForEdit}
|
|
/>)
|
|
}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|