added a dialog to cinfirm the mode change for the controller

This commit is contained in:
csawatzky 2026-07-14 15:47:35 -06:00
parent 1ac937e7db
commit 7ac469f9db

View file

@ -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
console.log("changing mode: " + mode)
controller.settings.defaultOutputState = mode
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")
})
}
setCurrentController(controller)
setControllersNewMode(mode)
setControllerConfirmation(true)
}}
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>