diff --git a/client/src/Experiment/Contained/AddContainedButton.jsx b/client/src/Experiment/Contained/AddContainedButton.jsx index 07d372a..65516ae 100644 --- a/client/src/Experiment/Contained/AddContainedButton.jsx +++ b/client/src/Experiment/Contained/AddContainedButton.jsx @@ -2,6 +2,7 @@ import { MergeType } from "@mui/icons-material" import { ButtonTooltip } from "../../Utils/ButtonTooltip" import { useContext } from "react"; import { experimentContext } from "../../Context/ExperimentProvider"; +import { ContextMenu } from "../../Utils/ContextMenu"; export const AddContainedButton = ({ deviceItem, deviceType }) => { const { selection, currTrial, setTrialData } = useContext(experimentContext); @@ -20,36 +21,82 @@ export const AddContainedButton = ({ deviceItem, deviceType }) => { disabled = deviceItemName === deviceItem.name && deviceTypeName === deviceType.name; } + const addContained = (devicesOnTrialCopy, deviceItemParentName, deviceTypeParentName, deviceItemChildName, deviceTypeChildName) => { + const containedIn = { deviceItemName: deviceItemParentName, deviceTypeName: deviceTypeParentName } + const i = devicesOnTrialCopy.findIndex(t => t.deviceItemName === deviceItemChildName && t.deviceTypeName === deviceTypeChildName); + if (i !== -1) { + devicesOnTrialCopy[i].containedIn = containedIn; + } else { + devicesOnTrialCopy.push({ + deviceTypeName: deviceTypeChildName, + deviceItemName: deviceItemChildName, + containedIn + }); + } + } + + const removeContained = (devicesOnTrialCopy, deviceItemChildName, deviceTypeChildName) => { + const i = devicesOnTrialCopy.findIndex(t => t.deviceItemName === deviceItemChildName && t.deviceTypeName === deviceTypeChildName); + if (i !== -1) { + delete devicesOnTrialCopy[i].containedIn; + if (!devicesOnTrialCopy[i].location) { + devicesOnTrialCopy.splice(i, 1); + } + } + } + const handleClick = () => { if (!disabled) { - const dev = { ...(topSelected || {}) }; + const devicesOnTrialCopy = [...devicesOnTrial]; if (topSelectedIsContained) { - delete dev.containedIn; + removeContained(devicesOnTrialCopy, deviceItemName, deviceTypeName); } else { - dev.containedIn = { deviceItemName: deviceItem.name, deviceTypeName: deviceType.name } + addContained(devicesOnTrialCopy, deviceItem.name, deviceType.name, deviceItemName, deviceTypeName); } - const devs = [...devicesOnTrial]; - if (topSelectedIndex !== -1) { - devs[topSelectedIndex] = dev; - } else { - devs.push(dev); - } - setTrialData({ ...currTrial.trial, devicesOnTrial: devs }); + setTrialData({ ...currTrial.trial, devicesOnTrial: devicesOnTrialCopy }); } } + const tooltip = disabled + ? 'To add a contained device, select a device that is not this one' + : (topSelectedIsContained + ? 'Remove the top selected device from being contained in this' + : 'Add the top selected device to be contained in this'); + + const menuItems = [ + { label: tooltip, callback: handleClick }, + { + label: 'Add all selected devices to be contained in this', callback: () => { + + } + }, + { label: 'Remove all selected devices to be contained in this', callback: () => { } }, + { + label: 'Remove all contained devices', + callback: () => { + // const devs = [...devicesOnTrial]; + // if (topSelectedIndex !== -1) { + // devs[topSelectedIndex] = dev; + // } else { + // devs.push(dev); + // } + // setTrialData({ ...currTrial.trial, devicesOnTrial: devs }); + } + }, + ]; + return ( - - - + + + + ) } \ No newline at end of file