passing multiple plenums and pressure to the visualizer and added a button to cycle them

src/bin/BinVisualizerV2.tsx

@@ -48,6 +48,8 @@ import { useBinAPI } from "providers/pond/binAPI";
 import BindaptIcon from "products/Bindapt/BindaptIcon";
 import {
   AccessTime,
+  ArrowForward,
+  ArrowForwardIos,
   CheckCircleOutline,
   Error,
   InfoOutlined,
@@ -172,16 +174,21 @@ interface GrainConditions {
   emcTrend: number;
 }
 
+interface CombinedPlenum {
+  tempHumidity?: Plenum,
+  pressure?: Pressure
+}
+
 interface Props {
   bin: Bin;
   loading: boolean;
   components: Map<string, Component>;
   componentDevices?: Map<string, number>;
   devices: Device[];
-  plenum?: Plenum;
+  plenums?: Plenum[];
   ambient?: Ambient;
   cables?: GrainCable[];
-  pressure?: Pressure;
+  pressures?: Pressure[];
   interactions?: Interaction[];
   //changeBinMode: (binMode: pond.BinMode) => boolean;
   refresh: (showSnack?: boolean) => void;
@@ -197,9 +204,9 @@ export default function BinVisualizer(props: Props) {
     bin,
     //changeBinMode,
     //changeGrainAmount,
-    plenum,
+    plenums,
     ambient,
-    pressure,
+    pressures,
     loading,
     cables,
     components,
@@ -282,6 +289,10 @@ export default function BinVisualizer(props: Props) {
   const [storageDate, setStorageDate] = useState(moment().format("YYYY-MM-DD"));
   const [storageTime, setStorageTime] = useState(moment().format("HH:mm"));
 
+  const [activePlenum, setActivePlenum] = useState<CombinedPlenum | undefined>()
+  const [activePlenumIndex, setActivePlenumIndex] = useState(0)
+  const [combinedPlenums, setCombinedPlenums] = useState<CombinedPlenum[]>([])
+
   // const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
   //   root: {
   //     backgroundColor: "transparent",
@@ -335,6 +346,31 @@ export default function BinVisualizer(props: Props) {
     setModeTime(moment(bin.status.lastModeChange));
   }, [bin.status.lastModeChange]);
 
+  useEffect(()=>{
+    //match the plenums and pressures based on their location (address)
+    let combinedPlenums: CombinedPlenum[] = []
+    if (plenums) {
+      plenums.forEach(plenum => {
+        let newCombinedPlenum: CombinedPlenum = {
+          tempHumidity: plenum
+        }
+        if (pressures) {
+          pressures.forEach(pressure => {
+            if(plenum.location().address === pressure.location().address){
+              console.log("found match")
+              newCombinedPlenum.pressure = pressure
+            }
+          })
+        }
+        combinedPlenums.push(newCombinedPlenum)
+      })
+    }
+    if (combinedPlenums.length > 0){
+      setActivePlenum(combinedPlenums[0])
+    }
+    setCombinedPlenums(combinedPlenums)
+  },[plenums, pressures])
+
   useEffect(() => {
     setIsCustomInventory(bin.storage() !== pond.BinStorage.BIN_STORAGE_SUPPORTED_GRAIN);
     setStorageType(bin.storage());
@@ -418,7 +454,6 @@ export default function BinVisualizer(props: Props) {
                 //determine which node is the coldest so that the data displayed is for the same node
                 let lowTempIndex =
                   filteredNodes.temps.indexOf(Math.min(...filteredNodes.temps)) === -1 ? 0 : filteredNodes.temps.indexOf(Math.min(...filteredNodes.temps));
-                  console.log(lowTempIndex)
                 lowNodeConditions = {
                   tempC: filteredNodes.temps[lowTempIndex],
                   humidity: filteredNodes.humids[lowTempIndex],
@@ -1094,14 +1129,28 @@ export default function BinVisualizer(props: Props) {
   const plenumOverview = () => {
     return (
       <Box style={{ position: "absolute", bottom: 5, width: "100%" }}>
+        <Box display="flex" flexDirection="row" alignItems="center">
         <Typography style={{ fontSize: isMobile ? "0.85rem" : "1.0rem", fontWeight: 650 }}>
-          Plenum
+          Plenum {plenums && plenums?.length > 1 ? activePlenumIndex+1 : ""}
         </Typography>
+        {plenums && plenums.length > 1 &&
+          <IconButton size="small" onClick={()=>{
+            let newIndex = activePlenumIndex + 1
+            if(newIndex > combinedPlenums.length - 1){
+              newIndex = 0
+            }
+            setActivePlenum(combinedPlenums[newIndex])
+            setActivePlenumIndex(newIndex)
+          }}>
+            <ArrowForwardIos />
+          </IconButton>
+        }
+        </Box>
         <Box
           className={classes.displayBoxBinLeft}
           style={{ marginRight: isMobile ? -70 : -90 }}
           position="relative">
-          {plenum ? (
+          {activePlenum?.tempHumidity ? (
             <React.Fragment>
               <Grid
                 container
@@ -1129,7 +1178,7 @@ export default function BinVisualizer(props: Props) {
                       fontWeight: 650,
                       color: tempColour
                     }}>
-                    {plenum.getTempString(user.settings.temperatureUnit)}
+                    {activePlenum.tempHumidity.getTempString(user.settings.temperatureUnit)}
                   </Typography>
                 </Grid>
                 <Grid size={{ xs: 5 }}>
@@ -1141,7 +1190,7 @@ export default function BinVisualizer(props: Props) {
                       fontWeight: 650,
                       color: humidColour
                     }}>
-                    {plenum.getHumidityString()}
+                    {activePlenum.tempHumidity.getHumidityString()}
                   </Typography>
                 </Grid>
               </Grid>
@@ -1262,7 +1311,7 @@ export default function BinVisualizer(props: Props) {
             style={{ height: isMobile ? 20 : 25, width: isMobile ? 20 : 25 }}
           />
         </Grid>
-        {pressure ? (
+        {activePlenum?.pressure ? (
           <React.Fragment>
             <Grid size={{ xs: 5 }}>
               <Typography
@@ -1273,7 +1322,7 @@ export default function BinVisualizer(props: Props) {
                   fontWeight: 650,
                   color: pressColour
                 }}>
-                {pressure.getPressureString(user.settings.pressureUnit)}
+                {activePlenum.pressure.getPressureString(user.settings.pressureUnit)}
               </Typography>
             </Grid>
             {/* <Grid item xs={5}>
@@ -1600,7 +1649,7 @@ export default function BinVisualizer(props: Props) {
         <Typography style={{ fontSize: isMobile ? "0.85rem" : "1.0rem", fontWeight: 650 }}>
           Fan Performance
         </Typography>
-        {pressure && pressure.fanId === 0 && !bin.settings.fan?.type && bin.fanID() === 0 && (
+        {activePlenum?.pressure && activePlenum.pressure.fanId === 0 && !bin.settings.fan?.type && bin.fanID() === 0 && (
           <Typography variant="subtitle2" color="textPrimary" style={{ fontWeight: 600 }}>
             No fans found to calculate CFM
           </Typography>
@@ -1642,8 +1691,8 @@ export default function BinVisualizer(props: Props) {
                 <Typography align="center" style={{ fontWeight: 650, color: emcColour }}>
                   {ExtractMoisture(
                     bin.grain(),
-                    plenum?.temperature ?? 0,
+                    activePlenum?.tempHumidity?.temperature ?? 0,
-                    plenum?.humidity ?? 0
+                    activePlenum?.tempHumidity?.humidity ?? 0
                   ).toFixed(2)}
                   %
                 </Typography>
@@ -2148,7 +2197,7 @@ export default function BinVisualizer(props: Props) {
           </Grid>
           <Grid size={1.5} >{controls()}</Grid>
         </Grid>
-        {plenum && pressure && fanPerformance()}
+        {plenums && pressures && fanPerformance()}
         {ambient && ambientDisplay()}
         {(bin.status.fans.length > 0 || bin.status.heaters.length > 0) && controllerDisplay()}
         {dryingEstimate()}

src/pages/Bin.tsx

@@ -689,8 +689,8 @@ export default function Bin(props: Props) {
   const overview = () => {
     return (
       <BinVisualizerV2
-        plenum={plenums[0]}
+        plenums={plenums}
-        pressure={pressures[0]}
+        pressures={pressures}
         ambient={ambients[0]}
         cables={grainCables}
         bin={bin}