getting the new object interaction dialog filtering the components properly regarding devices being passed in, finished the display part for alert and notification

src/objects/objectInteractions/NewObjectInteraction.tsx

@@ -1,6 +1,8 @@
-import { Button, DialogActions, DialogContent, DialogTitle, MenuItem, Select } from "@mui/material";
+import { Button, Checkbox, DialogActions, DialogContent, DialogTitle, List, ListItem, ListItemIcon, ListItemText, MenuItem, Select } from "@mui/material";
 import ResponsiveDialog from "common/ResponsiveDialog";
-import { getMeasurements } from "pbHelpers/ComponentType";
+import { Option } from "common/SearchSelect";
+import { Component } from "models";
+import { extension, getMeasurements } from "pbHelpers/ComponentType";
 import { Measurement, Operator } from "pbHelpers/Enums";
 import { pond } from "protobuf-ts/pond";
 import { quack } from "protobuf-ts/quack";
@@ -9,19 +11,58 @@ import { useEffect, useState } from "react";
 interface Props {
   open: boolean
   onClose: (refreshCallback: boolean) => void
+  linkedComponents: Map<string, Component>
+  componentDevices: Map<string, number>
   //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 { open, onClose, device, linkedComponents, componentDevices } = props
   const [newAlertComponentType, setNewAlertComponentType] = useState<quack.ComponentType>(
     quack.ComponentType.COMPONENT_TYPE_INVALID
   );
   const [conditions, setConditions] = useState<pond.InteractionCondition[]>([]);
   const [selectedAlertComponents, setSelectedAlertComponents] = useState<string[]>([]);
+  const [validOptions, setValidOptions] = useState<Option[]>([])
+  const [validComponents, setValidComponents] = useState<Component[]>([])
 
-  useEffect(() => {},[])
+  useEffect(() => {
+    //if the device is passed in need to filter out possible components
+    let validCompList: Component[] = []
+    let validOptions: Option[] = []
+    
+    linkedComponents.forEach((comp, key) => {
+      if(componentDevices.get(key) === device || !device){
+        validCompList.push(comp)
+      }
+    })
+    
+    let included: quack.ComponentType[] = []
+    validCompList.forEach(comp => {
+      if(included.includes(comp.type())) return
+      let ext = extension(comp.type(), comp.subType())
+      if(device){
+        if(!ext.isController){
+          included.push(comp.type())
+          validOptions.push({
+            label: ext.friendlyName,
+            value: comp.type()
+          })
+        }
+      }else{
+        included.push(comp.type())
+        validOptions.push({
+          label: ext.friendlyName,
+          value: comp.type()
+        })
+      }
+
+    })
+
+    setValidOptions(validOptions)
+    setValidComponents(validCompList)
+  },[device, linkedComponents, componentDevices])
   
 
   const close = (refresh: boolean) => {
@@ -41,6 +82,39 @@ export default function NewObjectInteraction(props: Props){
     return [condition];
   };
 
+  //display the components that match the type that was selected for the new alert
+  const listMatchingComponents = () => {
+    let matching: Component[] = [];
+    validComponents.forEach(comp => {
+      if (comp.type() === newAlertComponentType) {
+        matching.push(comp);
+      }
+    });
+    return (
+      <List>
+        {matching.map(comp => (
+          <ListItem key={comp.key()}>
+            <ListItemIcon>
+              <Checkbox
+                checked={selectedAlertComponents.includes(comp.key())}
+                onChange={(_, checked) => {
+                  let selected = selectedAlertComponents;
+                  if (checked) {
+                    selected.push(comp.key());
+                  } else {
+                    selected.splice(selected.indexOf(comp.key()), 1);
+                  }
+                  setSelectedAlertComponents([...selected]);
+                }}
+              />
+            </ListItemIcon>
+            <ListItemText>{comp.name()}</ListItemText>
+          </ListItem>
+        ))}
+      </List>
+    );
+  };
+
   return (
       <ResponsiveDialog
         open={open}
@@ -64,7 +138,7 @@ export default function NewObjectInteraction(props: Props){
             <MenuItem key={0} value={0}>
               Select Component Type
             </MenuItem>
-            {typeOptions.map(option => (
+            {validOptions.map(option => (
               <MenuItem key={option.value} value={option.value}>
                 {option.label}
               </MenuItem>
@@ -73,21 +147,21 @@ export default function NewObjectInteraction(props: Props){
           {/* list of checkboxes for the components that match that type */}
           {listMatchingComponents()}
           {/* have the conditions set here */}
-          {conditionInput()}
+          {/* {conditionInput()} */}
           {/* have the schedule set here */}
-          {scheduler()}
+          {/* {scheduler()} */}
         </DialogContent>
         <DialogActions>
           <Button onClick={() => close(false)} variant="contained">
             Cancel
           </Button>
-          <Button
+          {/* <Button
             disabled={selectedAlertComponents.length === 0}
             onClick={addInteractionToComponents}
             variant="contained"
             color="primary">
             Confirm
-          </Button>
+          </Button> */}
         </DialogActions>
       </ResponsiveDialog>
   )