refactoring object interactions into multiple components and taking into account controller interactions having to be on the same device where the alerts dont matter

src/objects/objectInteractions/NewObjectInteraction.tsx

@@ -0,0 +1,94 @@
+import { Button, DialogActions, DialogContent, DialogTitle, MenuItem, Select } from "@mui/material";
+import ResponsiveDialog from "common/ResponsiveDialog";
+import { getMeasurements } from "pbHelpers/ComponentType";
+import { Measurement, Operator } from "pbHelpers/Enums";
+import { pond } from "protobuf-ts/pond";
+import { quack } from "protobuf-ts/quack";
+import { useEffect, useState } from "react";
+
+interface Props {
+  open: boolean
+  onClose: (refreshCallback: boolean) => void
+  //if we pass in a device id we could filter the components to only be for that device, this could be used for the control part
+  device?: number
+}
+
+export default function NewObjectInteraction(props: Props){
+  const { open, onClose } = props
+  const [newAlertComponentType, setNewAlertComponentType] = useState<quack.ComponentType>(
+    quack.ComponentType.COMPONENT_TYPE_INVALID
+  );
+  const [conditions, setConditions] = useState<pond.InteractionCondition[]>([]);
+  const [selectedAlertComponents, setSelectedAlertComponents] = useState<string[]>([]);
+
+  useEffect(() => {},[])
+  
+
+  const close = (refresh: boolean) => {
+    onClose(refresh)
+  }
+  const availableMeasurementTypes = (type: quack.ComponentType): quack.MeasurementType[] => {
+    return getMeasurements(type).map(m => m.measurementType);
+  };
+  
+  const initialConditions = (type: quack.ComponentType): pond.InteractionCondition[] => {
+    let measurementType = availableMeasurementTypes(type)[0];
+    let condition = pond.InteractionCondition.create({
+      measurementType: measurementType,
+      comparison: measurementType === Measurement.boolean ? Operator.equals : Operator.less,
+      value: 0
+    });
+    return [condition];
+  };
+
+  return (
+      <ResponsiveDialog
+        open={open}
+        onClose={() => {
+          close(false);
+        }}>
+        <DialogTitle>Set New Alert</DialogTitle>
+        <DialogContent>
+          {/* Dropdown to select the component type to add the interaction to */}
+          <Select
+            id="componentType"
+            label="Component Type"
+            fullWidth
+            displayEmpty
+            value={newAlertComponentType}
+            onChange={e => {
+              setNewAlertComponentType(e.target.value as quack.ComponentType);
+              setSelectedAlertComponents([]);
+              setConditions(initialConditions(e.target.value as quack.ComponentType));
+            }}>
+            <MenuItem key={0} value={0}>
+              Select Component Type
+            </MenuItem>
+            {typeOptions.map(option => (
+              <MenuItem key={option.value} value={option.value}>
+                {option.label}
+              </MenuItem>
+            ))}
+          </Select>
+          {/* list of checkboxes for the components that match that type */}
+          {listMatchingComponents()}
+          {/* have the conditions set here */}
+          {conditionInput()}
+          {/* have the schedule set here */}
+          {scheduler()}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => close(false)} variant="contained">
+            Cancel
+          </Button>
+          <Button
+            disabled={selectedAlertComponents.length === 0}
+            onClick={addInteractionToComponents}
+            variant="contained"
+            color="primary">
+            Confirm
+          </Button>
+        </DialogActions>
+      </ResponsiveDialog>
+  )
+}