passing multiple plenums and pressure to the visualizer and added a button to cycle them
This commit is contained in:
csawatzky
parent
2a8aeed510
commit
842f9bee6a
2 changed files with 66 additions and 17 deletions
|
|
@ -48,6 +48,8 @@ import { useBinAPI } from "providers/pond/binAPI";
|
|||
import BindaptIcon from "products/Bindapt/BindaptIcon";
|
||||
import {
|
||||
AccessTime,
|
||||
ArrowForward,
|
||||
ArrowForwardIos,
|
||||
CheckCircleOutline,
|
||||
Error,
|
||||
InfoOutlined,
|
||||
|
|
@ -172,16 +174,21 @@ interface GrainConditions {
|
|||
emcTrend: number;
|
||||
}
|
||||
|
||||
interface CombinedPlenum {
|
||||
tempHumidity?: Plenum,
|
||||
pressure?: Pressure
|
||||
}
|
||||
|
||||
interface Props {
|
||||
bin: Bin;
|
||||
loading: boolean;
|
||||
components: Map<string, Component>;
|
||||
componentDevices?: Map<string, number>;
|
||||
devices: Device[];
|
||||
plenum?: Plenum;
|
||||
plenums?: Plenum[];
|
||||
ambient?: Ambient;
|
||||
cables?: GrainCable[];
|
||||
pressure?: Pressure;
|
||||
pressures?: Pressure[];
|
||||
interactions?: Interaction[];
|
||||
//changeBinMode: (binMode: pond.BinMode) => boolean;
|
||||
refresh: (showSnack?: boolean) => void;
|
||||
|
|
@ -197,9 +204,9 @@ export default function BinVisualizer(props: Props) {
|
|||
bin,
|
||||
//changeBinMode,
|
||||
//changeGrainAmount,
|
||||
plenum,
|
||||
plenums,
|
||||
ambient,
|
||||
pressure,
|
||||
pressures,
|
||||
loading,
|
||||
cables,
|
||||
components,
|
||||
|
|
@ -282,6 +289,10 @@ export default function BinVisualizer(props: Props) {
|
|||
const [storageDate, setStorageDate] = useState(moment().format("YYYY-MM-DD"));
|
||||
const [storageTime, setStorageTime] = useState(moment().format("HH:mm"));
|
||||
|
||||
const [activePlenum, setActivePlenum] = useState<CombinedPlenum | undefined>()
|
||||
const [activePlenumIndex, setActivePlenumIndex] = useState(0)
|
||||
const [combinedPlenums, setCombinedPlenums] = useState<CombinedPlenum[]>([])
|
||||
|
||||
// const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
|
||||
// root: {
|
||||
// backgroundColor: "transparent",
|
||||
|
|
@ -335,6 +346,31 @@ export default function BinVisualizer(props: Props) {
|
|||
setModeTime(moment(bin.status.lastModeChange));
|
||||
}, [bin.status.lastModeChange]);
|
||||
|
||||
useEffect(()=>{
|
||||
//match the plenums and pressures based on their location (address)
|
||||
let combinedPlenums: CombinedPlenum[] = []
|
||||
if (plenums) {
|
||||
plenums.forEach(plenum => {
|
||||
let newCombinedPlenum: CombinedPlenum = {
|
||||
tempHumidity: plenum
|
||||
}
|
||||
if (pressures) {
|
||||
pressures.forEach(pressure => {
|
||||
if(plenum.location().address === pressure.location().address){
|
||||
console.log("found match")
|
||||
newCombinedPlenum.pressure = pressure
|
||||
}
|
||||
})
|
||||
}
|
||||
combinedPlenums.push(newCombinedPlenum)
|
||||
})
|
||||
}
|
||||
if (combinedPlenums.length > 0){
|
||||
setActivePlenum(combinedPlenums[0])
|
||||
}
|
||||
setCombinedPlenums(combinedPlenums)
|
||||
},[plenums, pressures])
|
||||
|
||||
useEffect(() => {
|
||||
setIsCustomInventory(bin.storage() !== pond.BinStorage.BIN_STORAGE_SUPPORTED_GRAIN);
|
||||
setStorageType(bin.storage());
|
||||
|
|
@ -418,7 +454,6 @@ export default function BinVisualizer(props: Props) {
|
|||
//determine which node is the coldest so that the data displayed is for the same node
|
||||
let lowTempIndex =
|
||||
filteredNodes.temps.indexOf(Math.min(...filteredNodes.temps)) === -1 ? 0 : filteredNodes.temps.indexOf(Math.min(...filteredNodes.temps));
|
||||
console.log(lowTempIndex)
|
||||
lowNodeConditions = {
|
||||
tempC: filteredNodes.temps[lowTempIndex],
|
||||
humidity: filteredNodes.humids[lowTempIndex],
|
||||
|
|
@ -1094,14 +1129,28 @@ export default function BinVisualizer(props: Props) {
|
|||
const plenumOverview = () => {
|
||||
return (
|
||||
<Box style={{ position: "absolute", bottom: 5, width: "100%" }}>
|
||||
<Box display="flex" flexDirection="row" alignItems="center">
|
||||
<Typography style={{ fontSize: isMobile ? "0.85rem" : "1.0rem", fontWeight: 650 }}>
|
||||
Plenum
|
||||
Plenum {plenums && plenums?.length > 1 ? activePlenumIndex+1 : ""}
|
||||
</Typography>
|
||||
{plenums && plenums.length > 1 &&
|
||||
<IconButton size="small" onClick={()=>{
|
||||
let newIndex = activePlenumIndex + 1
|
||||
if(newIndex > combinedPlenums.length - 1){
|
||||
newIndex = 0
|
||||
}
|
||||
setActivePlenum(combinedPlenums[newIndex])
|
||||
setActivePlenumIndex(newIndex)
|
||||
}}>
|
||||
<ArrowForwardIos />
|
||||
</IconButton>
|
||||
}
|
||||
</Box>
|
||||
<Box
|
||||
className={classes.displayBoxBinLeft}
|
||||
style={{ marginRight: isMobile ? -70 : -90 }}
|
||||
position="relative">
|
||||
{plenum ? (
|
||||
{activePlenum?.tempHumidity ? (
|
||||
<React.Fragment>
|
||||
<Grid
|
||||
container
|
||||
|
|
@ -1129,7 +1178,7 @@ export default function BinVisualizer(props: Props) {
|
|||
fontWeight: 650,
|
||||
color: tempColour
|
||||
}}>
|
||||
{plenum.getTempString(user.settings.temperatureUnit)}
|
||||
{activePlenum.tempHumidity.getTempString(user.settings.temperatureUnit)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 5 }}>
|
||||
|
|
@ -1141,7 +1190,7 @@ export default function BinVisualizer(props: Props) {
|
|||
fontWeight: 650,
|
||||
color: humidColour
|
||||
}}>
|
||||
{plenum.getHumidityString()}
|
||||
{activePlenum.tempHumidity.getHumidityString()}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
|
@ -1262,7 +1311,7 @@ export default function BinVisualizer(props: Props) {
|
|||
style={{ height: isMobile ? 20 : 25, width: isMobile ? 20 : 25 }}
|
||||
/>
|
||||
</Grid>
|
||||
{pressure ? (
|
||||
{activePlenum?.pressure ? (
|
||||
<React.Fragment>
|
||||
<Grid size={{ xs: 5 }}>
|
||||
<Typography
|
||||
|
|
@ -1273,7 +1322,7 @@ export default function BinVisualizer(props: Props) {
|
|||
fontWeight: 650,
|
||||
color: pressColour
|
||||
}}>
|
||||
{pressure.getPressureString(user.settings.pressureUnit)}
|
||||
{activePlenum.pressure.getPressureString(user.settings.pressureUnit)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
{/* <Grid item xs={5}>
|
||||
|
|
@ -1600,7 +1649,7 @@ export default function BinVisualizer(props: Props) {
|
|||
<Typography style={{ fontSize: isMobile ? "0.85rem" : "1.0rem", fontWeight: 650 }}>
|
||||
Fan Performance
|
||||
</Typography>
|
||||
{pressure && pressure.fanId === 0 && !bin.settings.fan?.type && bin.fanID() === 0 && (
|
||||
{activePlenum?.pressure && activePlenum.pressure.fanId === 0 && !bin.settings.fan?.type && bin.fanID() === 0 && (
|
||||
<Typography variant="subtitle2" color="textPrimary" style={{ fontWeight: 600 }}>
|
||||
No fans found to calculate CFM
|
||||
</Typography>
|
||||
|
|
@ -1642,8 +1691,8 @@ export default function BinVisualizer(props: Props) {
|
|||
<Typography align="center" style={{ fontWeight: 650, color: emcColour }}>
|
||||
{ExtractMoisture(
|
||||
bin.grain(),
|
||||
plenum?.temperature ?? 0,
|
||||
plenum?.humidity ?? 0
|
||||
activePlenum?.tempHumidity?.temperature ?? 0,
|
||||
activePlenum?.tempHumidity?.humidity ?? 0
|
||||
).toFixed(2)}
|
||||
%
|
||||
</Typography>
|
||||
|
|
@ -2148,7 +2197,7 @@ export default function BinVisualizer(props: Props) {
|
|||
</Grid>
|
||||
<Grid size={1.5} >{controls()}</Grid>
|
||||
</Grid>
|
||||
{plenum && pressure && fanPerformance()}
|
||||
{plenums && pressures && fanPerformance()}
|
||||
{ambient && ambientDisplay()}
|
||||
{(bin.status.fans.length > 0 || bin.status.heaters.length > 0) && controllerDisplay()}
|
||||
{dryingEstimate()}
|
||||
|
|
|
|||
|
|
@ -689,8 +689,8 @@ export default function Bin(props: Props) {
|
|||
const overview = () => {
|
||||
return (
|
||||
<BinVisualizerV2
|
||||
plenum={plenums[0]}
|
||||
pressure={pressures[0]}
|
||||
plenums={plenums}
|
||||
pressures={pressures}
|
||||
ambient={ambients[0]}
|
||||
cables={grainCables}
|
||||
bin={bin}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue