526 lines
17 KiB
TypeScript
526 lines
17 KiB
TypeScript
import {
|
|
Box,
|
|
Card,
|
|
darken,
|
|
Grid2 as Grid,
|
|
IconButton,
|
|
Theme,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import HumidityIcon from "component/HumidityIcon";
|
|
import TemperatureIcon from "component/TemperatureIcon";
|
|
import GrainDescriber from "grain/GrainDescriber";
|
|
import { cloneDeep } from "lodash";
|
|
import { Bin } from "models";
|
|
import { GrainCable } from "models/GrainCable";
|
|
import moment from "moment";
|
|
import { pond } from "protobuf-ts/pond";
|
|
import { useGlobalState } from "providers";
|
|
import React, { useEffect, useState } from "react";
|
|
import { celsiusToFahrenheit, getGrainUnit, or } from "utils";
|
|
//import { useHistory } from "react-router";
|
|
//import BinModeDot from "./BinModeDot";
|
|
import BinSVGV2 from "./BinSVGV2";
|
|
import { avg } from "utils";
|
|
import { describeMeasurement } from "pbHelpers/MeasurementDescriber";
|
|
import { quack } from "protobuf-ts/quack";
|
|
import AerationFanIcon from "products/AgIcons/AerationFanIcon";
|
|
import ObjectHeaterIcon from "products/Construction/ObjectHeaterIcon";
|
|
import { CheckCircle, Warning } from "@mui/icons-material";
|
|
import { makeStyles } from "@mui/styles";
|
|
|
|
const useStyles = makeStyles((theme: Theme) => {
|
|
return ({
|
|
displayBox: {
|
|
background: darken(theme.palette.background.default, 0.05),
|
|
borderRadius: 5,
|
|
marginRight: -30, //negative margin to extend the box behind the bin svg
|
|
paddingRight: 30, //padding to offset the text and ignore the extension
|
|
marginTop: 5,
|
|
cursor: "pointer",
|
|
}
|
|
});
|
|
});
|
|
|
|
interface Props {
|
|
bin: Bin;
|
|
duplicateBin: (bin: Bin) => void;
|
|
dupHovered: (hovered: boolean) => void;
|
|
valDisplay?: "high" | "low" | "average";
|
|
}
|
|
|
|
interface GrainDetails {
|
|
temp: number;
|
|
humid: number;
|
|
emc: number | undefined;
|
|
}
|
|
|
|
export default function BinCard(props: Props) {
|
|
const { bin, valDisplay } = props;
|
|
const [cables, setCables] = useState<GrainCable[]>();
|
|
//const [modeDetails, setModeDetails] = useState("");
|
|
const [lidarPercentage, setLidarPercentage] = useState<number | undefined>();
|
|
//const [lidarBushels, setLidarBushels] = useState<number | undefined>();
|
|
const [{ user }] = useGlobalState();
|
|
const classes = useStyles();
|
|
const [average, setAverage] = useState<GrainDetails>();
|
|
const [coldNode, setColdNode] = useState<GrainDetails>();
|
|
const [hotNode, setHotNode] = useState<GrainDetails>();
|
|
const [mostMissed, setMostMissed] = useState(0);
|
|
const warningThreshold = 6;
|
|
const tempColour = describeMeasurement(
|
|
quack.MeasurementType.MEASUREMENT_TYPE_TEMPERATURE
|
|
).colour();
|
|
const humColour = describeMeasurement(quack.MeasurementType.MEASUREMENT_TYPE_PERCENT).colour();
|
|
const emcColour = describeMeasurement(quack.MeasurementType.MEASUREMENT_TYPE_GRAIN_EMC).colour();
|
|
|
|
useEffect(() => {
|
|
let newGrainCables: GrainCable[] = [];
|
|
if (bin.status.grainCables === undefined) return;
|
|
let mostMissedReadings = 0;
|
|
let allTemps: number[] = [];
|
|
let allHums: number[] = [];
|
|
let allMoistures: number[] = [];
|
|
let coldestNode: GrainDetails | undefined;
|
|
let hottestNode: GrainDetails | undefined;
|
|
let now = moment();
|
|
//loop through the cables in the bin status to prep for display
|
|
bin.status.grainCables.forEach(cable => {
|
|
let c: GrainCable = new GrainCable();
|
|
//flip the cables so that for display node 1 is at the bottom,
|
|
let cableTemps = cloneDeep(cable.celcius);
|
|
let cableHums = cloneDeep(cable.relativeHumidity);
|
|
let cableEMC = cloneDeep(cable.moisture);
|
|
|
|
c.temperatures = cableTemps.reverse();
|
|
c.humidities = cableHums.reverse();
|
|
c.grainMoistures = cableEMC.reverse();
|
|
c.topNode = cable.topNode;
|
|
c.excludedNodes = cable.excludedNodes;
|
|
newGrainCables.push(c);
|
|
|
|
//filter out the excluded nodes and any nodes above the top node
|
|
let filteredNodes = c.filteredNodes(true)
|
|
|
|
allTemps.push(...filteredNodes.temps);
|
|
if(avg(c.humidities) !== 0){ //if the average of the humidities is 0 that means that all the readings are 0 and it is a temp only cable
|
|
allHums.push(...filteredNodes.humids);
|
|
allMoistures.push(...filteredNodes.moistures);
|
|
}
|
|
|
|
//set the hottest and coldest nodes
|
|
if (coldestNode === undefined || Math.min(...filteredNodes.temps) < coldestNode.temp) {
|
|
let lowTempIndex =
|
|
filteredNodes.temps.indexOf(Math.min(...filteredNodes.temps)) === -1
|
|
? 0
|
|
: filteredNodes.temps.indexOf(Math.min(...filteredNodes.temps));
|
|
coldestNode = {
|
|
temp: filteredNodes.temps[lowTempIndex],
|
|
humid: filteredNodes.humids[lowTempIndex],
|
|
emc: filteredNodes.moistures[lowTempIndex]
|
|
};
|
|
}
|
|
|
|
if (hottestNode === undefined || Math.max(...filteredNodes.temps) > hottestNode.temp) {
|
|
let highTempIndex =
|
|
filteredNodes.temps.indexOf(Math.max(...filteredNodes.temps)) === -1
|
|
? 0
|
|
: filteredNodes.temps.indexOf(Math.max(...filteredNodes.temps));
|
|
|
|
hottestNode = {
|
|
temp: filteredNodes.temps[highTempIndex],
|
|
humid: filteredNodes.humids[highTempIndex],
|
|
emc: filteredNodes.moistures[highTempIndex]
|
|
};
|
|
}
|
|
|
|
//check cables missed readings
|
|
let lastCableRead = moment(cable.lastRead);
|
|
let elapsedMS = now.diff(lastCableRead);
|
|
|
|
if (elapsedMS > cable.measurementInterval) {
|
|
let missedReadings = Math.floor(elapsedMS / cable.measurementInterval);
|
|
if (missedReadings > mostMissedReadings) {
|
|
mostMissedReadings = missedReadings;
|
|
}
|
|
}
|
|
});
|
|
//loop through the CO2's to check for missed readings
|
|
bin.status.co2.forEach(co2 => {
|
|
let lastRead = moment(co2.lastRead);
|
|
let elapsedMS = now.diff(lastRead);
|
|
if (elapsedMS > co2.measurementInterval) {
|
|
let missedReadings = Math.floor(elapsedMS / co2.measurementInterval);
|
|
if (missedReadings > mostMissedReadings) {
|
|
mostMissedReadings = missedReadings;
|
|
}
|
|
}
|
|
})
|
|
|
|
setCables(newGrainCables);
|
|
setMostMissed(mostMissedReadings);
|
|
setColdNode(coldestNode);
|
|
setHotNode(hottestNode);
|
|
setAverage({
|
|
temp: avg(allTemps),
|
|
humid: avg(allHums),
|
|
emc: avg(allMoistures)
|
|
});
|
|
|
|
let cm = 0;
|
|
if (bin.status.distance && bin.status.distance > 0) {
|
|
//note that no conversions are happening as the unit measurement model is not being used so the value will be in cm
|
|
cm = bin.status.distance;
|
|
let height = or(bin.settings.specs?.heightCm, 0);
|
|
let ratio = 1 - cm / height;
|
|
let capacity = or(bin.settings.specs?.bushelCapacity, 0);
|
|
let lidarEstimate = Math.round(capacity * ratio);
|
|
//setLidarBushels(lidarEstimate);
|
|
setLidarPercentage(Math.round((lidarEstimate / capacity) * 100));
|
|
}
|
|
}, [bin]);
|
|
|
|
// useEffect(() => {
|
|
// let now = moment();
|
|
// let duration = moment.duration(moment(bin.status.lastModeChange).diff(now));
|
|
// let days = duration.asDays();
|
|
// days = Math.abs(days);
|
|
// duration.subtract(moment.duration(days, "days"));
|
|
// let hours = duration.hours();
|
|
// hours = Math.abs(hours);
|
|
|
|
// if (days > 50 && bin.settings.mode === pond.BinMode.BIN_MODE_DRYING) {
|
|
// setModeDetails("Calculating...");
|
|
// } else if (bin.settings.mode === pond.BinMode.BIN_MODE_NONE) {
|
|
// setModeDetails("No Mode");
|
|
// } else {
|
|
// setModeDetails(Math.floor(days) + "d " + hours + "h");
|
|
// }
|
|
// }, [bin]);
|
|
|
|
const typeDisplay = () => {
|
|
let grainType = bin.settings.inventory?.grainType ?? pond.Grain.GRAIN_NONE;
|
|
if (bin.storage() === pond.BinStorage.BIN_STORAGE_SUPPORTED_GRAIN) {
|
|
return (
|
|
<Box>
|
|
<Typography variant="subtitle2" style={{ fontSize: "0.7rem", fontWeight: 700 }}>
|
|
{GrainDescriber(grainType).name}
|
|
</Typography>
|
|
<Typography variant="subtitle2" style={{ fontSize: "0.7rem", fontWeight: 700 }}>
|
|
{bin.settings.inventory?.grainSubtype}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
}
|
|
return (
|
|
<Box>
|
|
<Typography variant="subtitle2" style={{ fontSize: "0.7rem", fontWeight: 700 }}>
|
|
{bin.settings.inventory?.customTypeName}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const tempDisplay = () => {
|
|
let display = "--";
|
|
let val;
|
|
switch (valDisplay) {
|
|
case "average":
|
|
val = average?.temp;
|
|
break;
|
|
case "low":
|
|
val = coldNode?.temp;
|
|
break;
|
|
case "high":
|
|
val = hotNode?.temp;
|
|
break;
|
|
}
|
|
|
|
if (val !== undefined && !isNaN(val)) {
|
|
if (user.settings.temperatureUnit === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT) {
|
|
val = celsiusToFahrenheit(val);
|
|
}
|
|
display = val.toFixed(2);
|
|
}
|
|
|
|
return (
|
|
<Typography
|
|
align="center"
|
|
noWrap
|
|
style={{ fontSize: "0.85rem", fontWeight: 650, color: tempColour }}>
|
|
{display +
|
|
(user.settings.temperatureUnit === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
|
|
? "°F"
|
|
: "°C")}
|
|
</Typography>
|
|
);
|
|
};
|
|
|
|
const percentDisplay = () => {
|
|
let display = "--";
|
|
let val;
|
|
let useEMC = false;
|
|
|
|
switch (valDisplay) {
|
|
case "average":
|
|
if (average?.emc) {
|
|
useEMC = true;
|
|
val = average.emc;
|
|
} else {
|
|
val = average?.humid;
|
|
}
|
|
break;
|
|
case "low":
|
|
if (coldNode?.emc) {
|
|
useEMC = true;
|
|
val = coldNode.emc;
|
|
} else {
|
|
val = coldNode?.humid;
|
|
}
|
|
break;
|
|
case "high":
|
|
if (hotNode?.emc) {
|
|
useEMC = true;
|
|
val = hotNode.emc;
|
|
} else {
|
|
val = hotNode?.humid;
|
|
}
|
|
break;
|
|
}
|
|
|
|
if (val !== undefined && !isNaN(val)) {
|
|
display = val.toFixed(2);
|
|
}
|
|
|
|
return (
|
|
<Typography
|
|
align="center"
|
|
noWrap
|
|
style={{ fontSize: "0.85rem", fontWeight: 650, color: useEMC ? emcColour : humColour }}>
|
|
{display}%
|
|
</Typography>
|
|
);
|
|
};
|
|
|
|
const cableBox = () => {
|
|
return (
|
|
<Box className={classes.displayBox}>
|
|
<Grid container alignContent="center" alignItems="center" direction="row">
|
|
<Grid size={{ xs: 3 }}>
|
|
<TemperatureIcon heightWidth={20} />
|
|
</Grid>
|
|
<Grid size={{ xs: 9 }}>
|
|
<Box>
|
|
{tempDisplay()}
|
|
<Typography
|
|
align="center"
|
|
color="textSecondary"
|
|
noWrap
|
|
style={{ fontSize: "0.5rem" }}>
|
|
{valDisplay === "high" ? "High" : valDisplay === "low" ? "Low" : "Average"}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
<Grid size={{ xs: 3 }} style={{ paddingLeft: 5 }}>
|
|
<HumidityIcon height={20} />
|
|
</Grid>
|
|
<Grid size={{ xs: 9 }}>
|
|
<Box>
|
|
{percentDisplay()}
|
|
<Typography
|
|
align="center"
|
|
color="textSecondary"
|
|
noWrap
|
|
style={{ fontSize: "0.5rem" }}>
|
|
{valDisplay === "high" ? "High" : valDisplay === "low" ? "Low" : "Average"}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const fanBox = (controller: pond.BinFan) => {
|
|
return (
|
|
<Box className={classes.displayBox} key={controller.key}>
|
|
<Grid container direction="row" alignItems="center" alignContent="center">
|
|
<Grid size={{ xs: 3 }} style={{ paddingLeft: 5, paddingTop: 5 }}>
|
|
<AerationFanIcon size={18} />
|
|
</Grid>
|
|
<Grid size={{ xs: 9 }}>
|
|
<Box>
|
|
<Typography
|
|
align="center"
|
|
noWrap
|
|
style={{
|
|
fontSize: "0.7rem",
|
|
fontWeight: 650,
|
|
color: controller.state ? "green" : "orange"
|
|
}}>
|
|
{controller.state ? "ON" : "OFF"}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const heaterBox = (controller: pond.BinHeater) => {
|
|
return (
|
|
<Box className={classes.displayBox} key={controller.key}>
|
|
<Grid container direction="row" alignItems="center" alignContent="center">
|
|
<Grid size={{ xs: 3 }} style={{ paddingLeft: 5, paddingTop: 3 }}>
|
|
{/* <ObjectHeaterIcon height={18} width={18} /> */}
|
|
<ObjectHeaterIcon />
|
|
</Grid>
|
|
<Grid size={{ xs: 9 }}>
|
|
<Box>
|
|
<Typography
|
|
align="center"
|
|
noWrap
|
|
style={{
|
|
fontSize: "0.7rem",
|
|
fontWeight: 650,
|
|
color: controller.state ? "green" : "orange"
|
|
}}>
|
|
{controller.state ? "ON" : "OFF"}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const binGraphic = () => {
|
|
return (
|
|
<Box display="flex" justifyContent="center" paddingTop={0}>
|
|
<Box padding={0} style={{ flex: 1, textAlign: "left", flexDirection: "column" }}>
|
|
{typeDisplay()}
|
|
{cableBox()}
|
|
{bin.status.fans.map(controller => fanBox(controller))}
|
|
{bin.status.heaters.map(controller => heaterBox(controller))}
|
|
</Box>
|
|
<Box style={{ flex: 1, textAlign: "center", flexDirection: "column" }}>
|
|
<BinSVGV2
|
|
cableEstimate={bin.settings.autoGrainNode}
|
|
height={160}
|
|
binShape={bin.settings.specs?.shape}
|
|
fillPercentage={bin.fillPercent()}
|
|
lidarEstimate={lidarPercentage}
|
|
cables={cables}
|
|
co2Sensors={bin.status.co2}
|
|
highTemp={bin.settings.highTemp}
|
|
lowTemp={bin.settings.lowTemp}
|
|
hottestNodeTemp={valDisplay === "high" ? hotNode?.temp : undefined}
|
|
coldestNodeTemp={valDisplay === "low" ? coldNode?.temp : undefined}
|
|
inventoryControl={bin.inventoryControl()}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const inventoryDisplay = (current: number, capacity: number) => {
|
|
if (bin.storage() === pond.BinStorage.BIN_STORAGE_FERTILIZER) {
|
|
return (
|
|
Math.round(current * 35.239).toLocaleString() +
|
|
"/" +
|
|
Math.round(capacity * 35.239).toLocaleString() +
|
|
" L"
|
|
);
|
|
}
|
|
if (getGrainUnit() === pond.GrainUnit.GRAIN_UNIT_WEIGHT && bin.bushelsPerTonne() > 1) {
|
|
return (
|
|
bin.grainTonnes().toLocaleString() +
|
|
" mT " +
|
|
bin.fillPercent() +
|
|
"%"
|
|
);
|
|
}
|
|
return (
|
|
current.toLocaleString() +
|
|
"/" +
|
|
capacity.toLocaleString() +
|
|
" bu"
|
|
);
|
|
};
|
|
|
|
const componentStateBanner = () => {
|
|
const hasCables = bin.status.grainCables.length > 0;
|
|
const hasCO2 = bin.status.co2.length > 0;
|
|
return (
|
|
<Box display="flex" justifyContent="space-between">
|
|
{hasCables || hasCO2 ? (
|
|
<React.Fragment>
|
|
<Typography style={{ fontSize: 15, fontWeight: 650 }}>
|
|
{mostMissed < 3 ? "Active" : mostMissed <= warningThreshold ? "Missing" : "Inactive"}
|
|
</Typography>
|
|
{mostMissed < 3 ? (
|
|
<CheckCircle style={{ color: "green" }} />
|
|
) : mostMissed <= warningThreshold ? (
|
|
<Warning style={{ color: "yellow" }} />
|
|
) : (
|
|
<Warning style={{ color: "red" }} />
|
|
)}
|
|
</React.Fragment>
|
|
) : (
|
|
<Typography style={{ fontSize: 15, fontWeight: 650 }}>Unmonitored</Typography>
|
|
)}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const info = () => {
|
|
const inv = bin.settings.inventory;
|
|
let bushelAmount = bin.bushels();
|
|
let bushelCapacity = bin.settings.specs?.bushelCapacity;
|
|
const empty =
|
|
!inv || inv.empty || !bushelCapacity || bushelCapacity <= 0 || bushelAmount <= 0;
|
|
return (
|
|
<Box width={1} marginTop={0}>
|
|
<Typography align="center" color="textSecondary" noWrap style={{ fontSize: "0.65rem" }}>
|
|
{empty || !bushelAmount || !bushelCapacity
|
|
? "empty"
|
|
: inventoryDisplay(bushelAmount, bushelCapacity)}
|
|
</Typography>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Card style={{ cursor: "pointer" }}>
|
|
{user.hasFeature("installer") && (
|
|
<IconButton
|
|
style={{
|
|
height: 35,
|
|
width: 35,
|
|
position: "absolute",
|
|
zIndex: 2,
|
|
right: 1,
|
|
top: 1
|
|
}}
|
|
onClick={e => props.duplicateBin(bin)}
|
|
onMouseEnter={() => props.dupHovered(true)}
|
|
onMouseLeave={() => props.dupHovered(false)}>
|
|
+
|
|
</IconButton>
|
|
)}
|
|
<Box padding={1}>
|
|
<Typography
|
|
align="left"
|
|
variant="body1"
|
|
color="textPrimary"
|
|
noWrap
|
|
style={{ fontSize: "0.8rem", fontWeight: 700 }}>
|
|
{bin.name()}
|
|
</Typography>
|
|
{binGraphic()}
|
|
{info()}
|
|
{componentStateBanner()}
|
|
</Box>
|
|
</Card>
|
|
);
|
|
}
|