connected the api to the button to update the controller state

src/bin/BinControllerDisplay.tsx

@@ -4,7 +4,7 @@ import { makeStyles } from "@mui/styles";
 import { Box, Button, DialogActions, DialogContent, DialogTitle, Typography } from "@mui/material";
 import AerationFanIcon from "products/AgIcons/AerationFanIcon";
 import { quack } from "protobuf-ts/quack";
-import { useComponentAPI, useMobile } from "hooks";
+import { useComponentAPI, useMobile, useSnackbar } from "hooks";
 import ButtonGroup from "common/ButtonGroup";
 import ObjectHeaterIcon from "products/Construction/ObjectHeaterIcon";
 import ResponsiveDialog from "common/ResponsiveDialog";
@@ -13,6 +13,7 @@ import ResponsiveDialog from "common/ResponsiveDialog";
 interface Props {
   deviceID: number
   component: Component
+  currentState?: boolean
 }
 
 const useStyles = makeStyles(() => {
@@ -27,10 +28,11 @@ const useStyles = makeStyles(() => {
 })
 
 export default function BinControllerDisplay(props: Props) {
-  const {component, deviceID} = props
+  const {component, deviceID, currentState} = props
   const [controllerState, setControllerState] = useState(0)
   const [openDialog, setOpenDialog] = useState(false)
   const [newOutputState, setNewOutputState] = useState(0)
+  const {openSnack} = useSnackbar()
   const componentAPI = useComponentAPI()
   const isMobile = useMobile()
   const classes = useStyles()
@@ -51,6 +53,14 @@ export default function BinControllerDisplay(props: Props) {
   const setController = () => {
     let newSettings = component.settings
     newSettings.defaultOutputState = newOutputState
+    componentAPI.update(deviceID, newSettings).then(resp => {
+      openSnack("Updated controllers output state")
+      setControllerState(newOutputState)
+    }).catch(err => {
+      openSnack("There was a problem updating the controller")
+    }).finally(() => {
+      setOpenDialog(false)
+    })
   }
 
   const controllerDialog = () => {
@@ -62,39 +72,47 @@ export default function BinControllerDisplay(props: Props) {
         </DialogContent>
         <DialogActions>
           <Button onClick={()=>{setOpenDialog(false)}}>Cancel</Button>
-          <Button onClick={()=>{setController()}}>Confirm</Button>
+          <Button onClick={()=>{setController()}} variant="contained" color="primary">Confirm</Button>
         </DialogActions>
       </ResponsiveDialog>
     )
   }
 
   const componentOn = () => {
-    let state = false
-    console.log(component.status)
-    component.status.lastGoodMeasurement.forEach(um => {
-      if(um.type === quack.MeasurementType.MEASUREMENT_TYPE_BOOLEAN){
-        if(um.values.length > 0){
-          let readings = um.values
-          if(readings[readings.length-1].values.length > 0){
-            let nodes = readings[readings.length-1].values
-            if (nodes[nodes.length -1] === 1){
-              state = true
+    if(currentState){
+      return currentState
+    }else{
+      let state = false
+      component.status.lastGoodMeasurement.forEach(um => {
+        if(um.type === quack.MeasurementType.MEASUREMENT_TYPE_BOOLEAN){
+          if(um.values.length > 0){
+            let readings = um.values
+            if(readings[readings.length-1].values.length > 0){
+              let nodes = readings[readings.length-1].values
+              if (nodes[nodes.length -1] === 1){
+                state = true
+              }
             }
-            //um.values[um.values.length-1].values[um.values[um.values.length-1].values.length-1]
           }
         }
-      }
-    })
-    return state
+      })
+      return state
+    }
   }
 
   return (
-    <Box className={classes.controllerDisplay} key={component.key()}>
+    <React.Fragment>
+    {controllerDialog()}
+    <Box className={classes.controllerDisplay} key={component.key()} marginTop={1} marginBottom={1}>
         <Box display="flex" marginY="auto">
-          {controllerIcon()}
+          <Box margin="auto">
+            {controllerIcon()}
+          </Box>
           <Typography
             align="center"
             style={{
+              marginBottom: "auto",
+              marginTop: "auto",
               paddingLeft: 5,
               fontSize: isMobile ? "0.85rem" : "1.0rem",
               fontWeight: 650
@@ -102,6 +120,7 @@ export default function BinControllerDisplay(props: Props) {
             {component.name()}
           </Typography>
         </Box>
+        <Box display="flex">
           <ButtonGroup
             buttons={[
               {
@@ -131,6 +150,8 @@ export default function BinControllerDisplay(props: Props) {
           />
           <Typography
             style={{
+              minWidth: 30,
+              marginLeft: "10px",
               marginBottom: "auto",
               marginTop: "auto",
               fontSize: isMobile ? "0.85rem" : "1.0rem",
@@ -139,7 +160,9 @@ export default function BinControllerDisplay(props: Props) {
             }}>
             {componentOn() ? "ON" : "OFF"}
           </Typography>
+          </Box>
       </Box>
+      </React.Fragment>
   )
 
 }

src/bin/BinVisualizerV2.tsx

@@ -1556,7 +1556,7 @@ export default function BinVisualizer(props: Props) {
             let device = componentDevices.get(fan.key)
             if(fanComp && device){
               return (
-                <BinControllerDisplay component={fanComp} deviceID={device}/>
+                <BinControllerDisplay component={fanComp} deviceID={device} currentState/>
               )
             }
           })}
@@ -1565,7 +1565,7 @@ export default function BinVisualizer(props: Props) {
             let device = componentDevices.get(heater.key)
             if(heaterComp && device){
               return (
-                <BinControllerDisplay component={heaterComp} deviceID={device}/>
+                <BinControllerDisplay component={heaterComp} deviceID={device} currentState={heater.state}/>
               )
             }
           })}