added a dialog to cinfirm the mode change for the controller
This commit is contained in:
parent
1ac937e7db
commit
7ac469f9db
1 changed files with 51 additions and 19 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue