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/Alerts.tsx

@@ -0,0 +1,74 @@
+import { ExpandMore } from "@mui/icons-material";
+import { Accordion, AccordionDetails, AccordionSummary, Box, Grid2, List, ListItem, ListSubheader, Typography } from "@mui/material";
+import { Component } from "models";
+import { describeMeasurement } from "pbHelpers/MeasurementDescriber";
+import { pond, quack } from "protobuf-ts/pond";
+import React, { useState } from "react";
+import NewObjectInteraction from "./NewObjectInteraction";
+
+export interface Alert {
+  conditions: pond.InteractionCondition[];
+  sourceComponents: Component[];
+}
+
+interface Props {
+  alerts: Alert[]
+}
+
+export default function Alerts(props: Props){
+  const {alerts} = props
+  const [openNewAlert, setOpenNewAlert] = useState(false)
+
+  const readableCondition = (condition: pond.InteractionCondition) => {
+    let describer = describeMeasurement(condition.measurementType);
+    let type = describer.label();
+    let comparison =
+      condition.comparison === quack.RelationalOperator.RELATIONAL_OPERATOR_EQUAL_TO
+        ? "Exactly"
+        : condition.comparison === quack.RelationalOperator.RELATIONAL_OPERATOR_GREATER_THAN
+        ? "Above"
+        : "Below";
+    let value = describer.toDisplay(condition.value);
+    return (
+      <Box>
+        <Typography>{type + " " + comparison + " " + value + describer.GetUnit()}</Typography>
+      </Box>
+    );
+  };
+
+  const alertAccordion = (alert: Alert) => {
+    return (
+      <Accordion style={{ width: "100%" }}>
+        <AccordionSummary expandIcon={<ExpandMore />}>
+          <Grid2 container direction="column">
+            {alert.conditions.map((condition, i) => (
+              <Grid2 key={i}>
+                {readableCondition(condition)}
+              </Grid2>
+            ))}
+          </Grid2>
+        </AccordionSummary>
+        <AccordionDetails>
+          <List>
+            <ListSubheader>Reporting Components</ListSubheader>
+            {alert.sourceComponents.map((comp, i) => (
+              <ListItem key={i}>{comp.name()}</ListItem>
+            ))}
+          </List>
+        </AccordionDetails>
+      </Accordion>
+    );
+  };
+
+  return (
+    <React.Fragment>
+      <NewObjectInteraction open={openNewAlert} onClose={()=>{}}/>
+      <List style={{ margin: 5 }}>
+        <ListSubheader>Alerts</ListSubheader>
+        {alerts.map((alert, i) => (
+          <ListItem key={i}>{alertAccordion(alert)}</ListItem>
+        ))}
+      </List>
+    </React.Fragment>
+  );
+}