added a dialog to cinfirm the mode change for the controller

src/bin/binSensorsDisplay.tsx

@@ -1,5 +1,5 @@
 import { AccessTime, MoreVert } from "@mui/icons-material";
-import { Avatar, Box, Button, Card, Checkbox, FormControlLabel, Grid2, IconButton, Menu, MenuItem, Typography, useTheme } from "@mui/material";
+import { Avatar, Box, Button, Card, Checkbox, DialogActions, DialogContent, DialogTitle, FormControlLabel, Grid2, IconButton, Menu, MenuItem, Typography, useTheme } from "@mui/material";
 import BinSensorCard from "bin/BinSensorCard";
 import { GetDefaultDateRange } from "common/time/DateRange";
 import { ExtractMoisture } from "grain";
@@ -21,6 +21,7 @@ import React, { useEffect, useState } from "react";
 import { avg } from "utils";
 import BinSensorGraph from "./graphs/BinSensorGraph";
 import TimeBar from "common/time/TimeBar";
+import ResponsiveDialog from "common/ResponsiveDialog";
 
 interface Props {
     bin: Bin
@@ -72,8 +73,13 @@ export default function BinSensorsDisplay(props: Props){
     const [startDate, setStartDate] = useState<Moment>(defaultDateRange.start);
     const [endDate, setEndDate] = useState<Moment>(defaultDateRange.end);
     const [filterNodes, setFilterNodes] = useState(true)
+    const [controllerConfirmation, setControllerConfirmation] = useState(false)
     const isMobile = useMobile()
 
+    //state variables fo controller updates using the switch on the card
+    const [currentController, setCurrentController] = useState<Controller | undefined>()
+    const [controllersNewMode, setControllersNewMode] = useState(quack.OutputMode.OUTPUT_MODE_OFF)
+
     //organize the components into the correct 'positions' using the bins preferences
     useEffect(()=>{
         let unassigned: Component[] = []
@@ -499,6 +505,46 @@ export default function BinSensorsDisplay(props: Props){
         )
     }
 
+    const controllerDialog = () => {
+      return (
+        <ResponsiveDialog open={controllerConfirmation} onClose={()=>{setControllerConfirmation(false)}}>
+          <DialogTitle>Changing Controller</DialogTitle>
+          <DialogContent>
+            <Typography>
+              This action will change the state of the controller
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={()=>{setControllerConfirmation(false)}}>Cancel</Button>
+            <Button onClick={()=>{
+              updateController()
+              }}>Confirm</Button>
+          </DialogActions>
+        </ResponsiveDialog>
+      )
+    }
+
+    const updateController = () => {
+      if(!currentController) return
+      const prefType = preferences?.get(currentController.key())?.type
+      //this will update the components settings here to change the mode
+      currentController.settings.defaultOutputState = controllersNewMode
+      let device = componentDevices.get(currentController.key())
+      if(device){
+        componentAPI.update(device, currentController.settings).then(resp => {
+          currentController.mode = controllersNewMode 
+          if (prefType === pond.BinComponent.BIN_COMPONENT_FAN) {
+              setFans(prev => prev.map(f => f.key() === currentController.key() ? currentController : f))
+          } else {
+              setHeaters(prev => prev.map(h => h.key() === currentController.key() ? currentController : h))
+          }
+      }).catch(err => {
+          console.log("there was a problem updating the controller")
+      }).finally(() => {
+        setControllerConfirmation(false)
+      })}
+    }
+
     const controllerCard = (controller: Controller) => {
         const component = controller.asComponent()
         let icon = GetComponentIcon(component.type(), component.subType(), themeType)
@@ -592,24 +638,9 @@ export default function BinSensorsDisplay(props: Props){
                                 key={label}
                                 component="button"
                                 onClick={() => {
-                                    //this will update the components settings here to change the mode
+                                  setCurrentController(controller)
-                                    console.log("changing mode: " + mode)
+                                  setControllersNewMode(mode)
-                                    controller.settings.defaultOutputState = mode
+                                  setControllerConfirmation(true)
-                                    let device = componentDevices.get(controller.key())
-                                    if(device){
-                                      componentAPI.update(device, controller.settings).then(resp => {
-                                        controller.mode = mode  // ← update the field the UI reads
-                            
-                                        if (prefType === pond.BinComponent.BIN_COMPONENT_FAN) {
-                                            setFans(prev => prev.map(f => f.key() === controller.key() ? controller : f))
-                                        } else {
-                                            setHeaters(prev => prev.map(h => h.key() === controller.key() ? controller : h))
-                                        }
-                                    }).catch(err => {
-                                        console.log("there was a problem updating the controller")
-                                    })
-                                    }
-                                    
                                 }}
                                 sx={{
                                     ...segStyle(active, label === "Off" ? theme.palette.action.selected : undefined),
@@ -718,6 +749,7 @@ export default function BinSensorsDisplay(props: Props){
 
     return (
         <Box padding={1}>
+          {controllerDialog()}
           {assignmentMenu()}
           {sensorCount > 0 &&
             <Box>