brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added controller display component for the controllers on a bin

Browse source
This commit is contained in:
csawatzky 2026-03-06 15:12:25 -06:00
parent e4fe48025e
commit a9f5b9594b
3 changed files with 180 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

77
src/bin/BinVisualizerV2.tsx
View file

@ -31,7 +31,7 @@ import { round } from "lodash";
import { Bin, Component, Device } from "models";
import { GetComponentIcon } from "pbHelpers/ComponentType";
import { describeMeasurement } from "pbHelpers/MeasurementDescriber";
import { useMobile } from "hooks";
import { useComponentAPI, useMobile } from "hooks";
import { pond } from "protobuf-ts/pond";
import { quack } from "protobuf-ts/quack";
import { useGlobalState, useSnackbar } from "providers";
@ -71,6 +71,7 @@ import { makeStyles } from "@mui/styles";
import ButtonGroup from "common/ButtonGroup";
import ModeChangeDialog from "./conditioning/modeChangeDialog";
import CustomGrainSelector from "grain/CustomGrainSelector";
import BinControllerDisplay from "./BinControllerDisplay";
const useStyles = makeStyles((theme: Theme) => {
return ({
@ -180,7 +181,7 @@ interface Props {
bin: Bin;
loading: boolean;
components: Map<string, Component>;
componentDevices?: Map<string, number>;
componentDevices: Map<string, number>;
devices: Device[];
plenums?: Plenum[];
ambient?: Ambient;
@ -289,6 +290,12 @@ export default function BinVisualizer(props: Props) {
const [modeChangeInProgress, setModeChangeInProgress] = useState(false)
const [newGrainSettings, setNewGrainSettings] = useState<pond.GrainSettings>()
const componentAPI = useComponentAPI()
const [openControllerDIalog, setOpenControllerDialog] = useState(false)
const [controllerOutputStates, setControllerOutputStates] = useState<Map<string, number>>(new Map<string, number>())
const [selectedController, setSelectedController] = useState<Component>()
const [newOutputState, setNewOutputState] = useState()
useEffect(() => {
setModeTime(moment(bin.status.lastModeChange));
}, [bin.status.lastModeChange]);
@ -1544,54 +1551,24 @@ export default function BinVisualizer(props: Props) {
Controllers
</Typography>
<Box className={classes.displayBox}>
{bin.status.fans.map(fan => (
<Box className={classes.controllerDisplay} key={fan.key}>
<Box display="flex">
<AerationFanIcon />
<Typography
align="center"
style={{
paddingLeft: 5,
fontSize: isMobile ? "0.85rem" : "1.0rem",
fontWeight: 650
}}>
{fan.name}
</Typography>
</Box>
<Typography
style={{
fontSize: isMobile ? "0.85rem" : "1.0rem",
fontWeight: 650,
color: fan.state ? "green" : "orange"
}}>
{fan.state ? "ON" : "OFF"}
</Typography>
</Box>
))}
{bin.status.heaters.map(heater => (
<Box className={classes.controllerDisplay} key={heater.key}>
<Box display="flex">
<ObjectHeaterIcon />
<Typography
align="center"
style={{
paddingLeft: 5,
fontSize: isMobile ? "0.85rem" : "1.0rem",
fontWeight: 650
}}>
{heater.name}
</Typography>
</Box>
<Typography
style={{
fontSize: isMobile ? "0.85rem" : "1.0rem",
fontWeight: 650,
color: heater.state ? "green" : "orange"
}}>
{heater.state ? "ON" : "OFF"}
</Typography>
</Box>
))}
{bin.status.fans.map(fan => {
let fanComp = components.get(fan.key)
let device = componentDevices.get(fan.key)
if(fanComp && device){
return (
<BinControllerDisplay component={fanComp} deviceID={device}/>
)
}
})}
{bin.status.heaters.map(heater => {
let heaterComp = components.get(heater.key)
let device = componentDevices.get(heater.key)
if(heaterComp && device){
return (
<BinControllerDisplay component={heaterComp} deviceID={device}/>
)
}
})}
</Box>
</Box>
);