switching from having 3 dialogs to using a stepper
This commit is contained in:
csawatzky
parent
283958ab6a
commit
70bd91bbe7
4 changed files with 576 additions and 285 deletions
|
|
@ -3,6 +3,7 @@ import {
|
|||
Box,
|
||||
Button,
|
||||
Card,
|
||||
CircularProgress,
|
||||
darken,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
|
|
@ -241,7 +242,7 @@ export default function BinVisualizer(props: Props) {
|
|||
).colour();
|
||||
const pressColour = describeMeasurement(quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE).colour();
|
||||
const emcColour = describeMeasurement(quack.MeasurementType.MEASUREMENT_TYPE_GRAIN_EMC).colour();
|
||||
const [showInputMoisture, setShowInputMoisture] = useState<boolean>(false);
|
||||
// const [showInputMoisture, setShowInputMoisture] = useState<boolean>(false);
|
||||
const [moistureInput, setMoistureInput] = useState<string>("");
|
||||
const [tempInput, setTempInput] = useState<string>("");
|
||||
const [outdoorHumidityInput, setOutdoorHumidityInput] = useState<string>("");
|
||||
|
|
@ -295,55 +296,7 @@ export default function BinVisualizer(props: Props) {
|
|||
const [combinedPlenums, setCombinedPlenums] = useState<CombinedPlenum[]>([])
|
||||
|
||||
const [openModeChange, setOpenModeChange] = useState(false)
|
||||
|
||||
// const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
|
||||
// root: {
|
||||
// backgroundColor: "transparent",
|
||||
// overflow: "visible",
|
||||
// content: "content-box",
|
||||
// "&$selected": {
|
||||
// backgroundColor: "gold",
|
||||
// color: "black",
|
||||
// borderRadius: 24,
|
||||
// fontWeight: "bold"
|
||||
// },
|
||||
// "&$selected:hover": {
|
||||
// backgroundColor: "rgb(255, 255, 0)",
|
||||
// color: "black",
|
||||
// borderRadius: 24
|
||||
// }
|
||||
// },
|
||||
// selected: {}
|
||||
// }));
|
||||
|
||||
// const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
|
||||
// grouped: {
|
||||
// margin: theme.spacing(-0.5),
|
||||
// border: "none",
|
||||
// padding: theme.spacing(1),
|
||||
// "&:not(:first-child):not(:last-child)": {
|
||||
// borderRadius: 24,
|
||||
// marginRight: theme.spacing(0.5),
|
||||
// marginLeft: theme.spacing(0.5)
|
||||
// },
|
||||
// "&:first-child": {
|
||||
// borderRadius: 24,
|
||||
// marginLeft: theme.spacing(0.25)
|
||||
// },
|
||||
// "&:last-child": {
|
||||
// borderRadius: 24,
|
||||
// marginRight: theme.spacing(0.25)
|
||||
// }
|
||||
// },
|
||||
// root: {
|
||||
// backgroundColor: darken(
|
||||
// theme.palette.background.paper,
|
||||
// getThemeType() === "light" ? 0.05 : 0.25
|
||||
// ),
|
||||
// borderRadius: 24,
|
||||
// content: "border-box"
|
||||
// }
|
||||
// }));
|
||||
const [modeChangeInProgress, setModeChangeInProgress] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setModeTime(moment(bin.status.lastModeChange));
|
||||
|
|
@ -429,20 +382,6 @@ export default function BinVisualizer(props: Props) {
|
|||
humids.push(...filteredNodes.humids)
|
||||
emcs.push(...filteredNodes.moistures)
|
||||
}
|
||||
// let tempClone = cloneDeep(cable.temperatures).reverse();
|
||||
// let humClone = cloneDeep(cable.humidities).reverse();
|
||||
// let emcClone = cloneDeep(cable.grainMoistures).reverse();
|
||||
//add the cable data to the proper arrays
|
||||
// if (cable.topNode > 0) {
|
||||
// temps.push(...tempClone.splice(0, cable.topNode));
|
||||
// humids.push(...humClone.splice(0, cable.topNode));
|
||||
// emcs.push(...emcClone.splice(0, cable.topNode));
|
||||
// } else {
|
||||
// //if the cable has no fill set (top node) then use all of the nodes
|
||||
// temps = tempClone;
|
||||
// humids = humClone;
|
||||
// emcs = emcClone;
|
||||
// }
|
||||
|
||||
//add the trend data to the proper arrays if the top node is set
|
||||
let cableTrendData = binTrend.cableTrend[cable.key()];
|
||||
|
|
@ -1796,7 +1735,11 @@ export default function BinVisualizer(props: Props) {
|
|||
<Typography variant="subtitle1" style={{ fontWeight: 800 }}>
|
||||
Bin Mode
|
||||
</Typography>
|
||||
{modeChangeInProgress &&
|
||||
<CircularProgress color="primary" size={25}/>
|
||||
}
|
||||
<ButtonGroup
|
||||
disableAll={modeChangeInProgress}
|
||||
buttons={[
|
||||
{
|
||||
title: "Storage",
|
||||
|
|
@ -1813,48 +1756,14 @@ export default function BinVisualizer(props: Props) {
|
|||
{
|
||||
title: bin.settings.inventory && bin.settings.inventory?.initialMoisture < bin.settings.inventory?.targetMoisture ? "Hydrating" : "Drying",
|
||||
function: () => {
|
||||
setShowInputMoisture(true)
|
||||
// setShowInputMoisture(true)
|
||||
setModeConditioning() //will set it to either drying or hydrating based on the initial and target moisture
|
||||
}
|
||||
}
|
||||
]}
|
||||
toggledButtons={determineToggle(mode)}
|
||||
toggle
|
||||
/>
|
||||
{/* <StyledToggleButtonGroup
|
||||
id="tour-bin-mode"
|
||||
value={mode}
|
||||
exclusive
|
||||
size="small"
|
||||
aria-label="Bin Mode">
|
||||
<StyledToggle
|
||||
value={pond.BinMode.BIN_MODE_STORAGE}
|
||||
aria-label="Storage Mode"
|
||||
onClick={setModeStorage}>
|
||||
Storage
|
||||
</StyledToggle>
|
||||
<StyledToggle
|
||||
onClick={setModeCooldown}
|
||||
value={pond.BinMode.BIN_MODE_COOLDOWN}
|
||||
aria-label="Off">
|
||||
Cooldown
|
||||
</StyledToggle>
|
||||
{bin.settings.inventory &&
|
||||
bin.settings.inventory?.initialMoisture < bin.settings.inventory?.targetMoisture ? (
|
||||
<StyledToggle
|
||||
onClick={() => setShowInputMoisture(true)}
|
||||
value={pond.BinMode.BIN_MODE_HYDRATING}
|
||||
aria-label="Hydrating Mode">
|
||||
Hydrating
|
||||
</StyledToggle>
|
||||
) : (
|
||||
<StyledToggle
|
||||
onClick={() => setShowInputMoisture(true)}
|
||||
value={pond.BinMode.BIN_MODE_DRYING}
|
||||
aria-label="Drying Mode">
|
||||
Drying
|
||||
</StyledToggle>
|
||||
)}
|
||||
</StyledToggleButtonGroup> */}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
|
@ -2037,7 +1946,7 @@ export default function BinVisualizer(props: Props) {
|
|||
setOpenModeChange(true)
|
||||
};
|
||||
|
||||
const setModeDrying = () => {
|
||||
const setModeConditioning = () => {
|
||||
if (
|
||||
bin.settings.inventory &&
|
||||
bin.settings.inventory?.initialMoisture < bin.settings.inventory?.targetMoisture
|
||||
|
|
@ -2051,82 +1960,82 @@ export default function BinVisualizer(props: Props) {
|
|||
setOpenModeChange(true)
|
||||
};
|
||||
|
||||
const closeMoistureDialog = () => {
|
||||
// setNewPreset(0);
|
||||
setNewBinMode(bin.settings.mode);
|
||||
setShowInputMoisture(false);
|
||||
};
|
||||
// const closeMoistureDialog = () => {
|
||||
// // setNewPreset(0);
|
||||
// setNewBinMode(bin.settings.mode);
|
||||
// setShowInputMoisture(false);
|
||||
// };
|
||||
|
||||
const moistureDialog = () => {
|
||||
return (
|
||||
<ResponsiveDialog open={showInputMoisture} onClose={closeMoistureDialog}>
|
||||
<DialogTitle>Input new grain moisture</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText style={{ paddingBottom: theme.spacing(0) }}>
|
||||
Updating the current grain moisture will calibrate the estimate for more accurate
|
||||
results. The outdoor temperature will have some effect on the estimate as well; consider
|
||||
updating with drastic changes in the weather or using a predicted average.
|
||||
</DialogContentText>
|
||||
<TextField
|
||||
label={"Grain Moisture"}
|
||||
value={moistureInput}
|
||||
onChange={event => setMoistureInput(event.target.value)}
|
||||
InputProps={{
|
||||
endAdornment: <InputAdornment position="end">%</InputAdornment>
|
||||
}}
|
||||
style={{ marginTop: theme.spacing(2) }}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
/>
|
||||
<Typography variant="body1" style={{ marginTop: theme.spacing(2) }}>
|
||||
Weather
|
||||
</Typography>
|
||||
<TextField
|
||||
label={"Outdoor Temperature"}
|
||||
value={tempInput}
|
||||
onChange={event => setTempInput(event.target.value)}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
{getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
|
||||
? "°F"
|
||||
: "℃"}
|
||||
</InputAdornment>
|
||||
)
|
||||
}}
|
||||
style={{ marginTop: theme.spacing(2) }}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
label={"Outdoor Humidity"}
|
||||
value={outdoorHumidityInput}
|
||||
onChange={event => setOutdoorHumidityInput(event.target.value)}
|
||||
InputProps={{
|
||||
endAdornment: <InputAdornment position="end">%</InputAdornment>
|
||||
}}
|
||||
style={{ marginTop: theme.spacing(2) }}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={() => {
|
||||
// setNewPreset(0);
|
||||
setNewBinMode(bin.settings.mode);
|
||||
setShowInputMoisture(false);
|
||||
}}
|
||||
color="primary">
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={setModeDrying} color="primary">
|
||||
Update
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</ResponsiveDialog>
|
||||
);
|
||||
};
|
||||
// const moistureDialog = () => {
|
||||
// return (
|
||||
// <ResponsiveDialog open={showInputMoisture} onClose={closeMoistureDialog}>
|
||||
// <DialogTitle>Input new grain moisture</DialogTitle>
|
||||
// <DialogContent>
|
||||
// <DialogContentText style={{ paddingBottom: theme.spacing(0) }}>
|
||||
// Updating the current grain moisture will calibrate the estimate for more accurate
|
||||
// results. The outdoor temperature will have some effect on the estimate as well; consider
|
||||
// updating with drastic changes in the weather or using a predicted average.
|
||||
// </DialogContentText>
|
||||
// <TextField
|
||||
// label={"Grain Moisture"}
|
||||
// value={moistureInput}
|
||||
// onChange={event => setMoistureInput(event.target.value)}
|
||||
// InputProps={{
|
||||
// endAdornment: <InputAdornment position="end">%</InputAdornment>
|
||||
// }}
|
||||
// style={{ marginTop: theme.spacing(2) }}
|
||||
// fullWidth
|
||||
// variant="outlined"
|
||||
// />
|
||||
// <Typography variant="body1" style={{ marginTop: theme.spacing(2) }}>
|
||||
// Weather
|
||||
// </Typography>
|
||||
// <TextField
|
||||
// label={"Outdoor Temperature"}
|
||||
// value={tempInput}
|
||||
// onChange={event => setTempInput(event.target.value)}
|
||||
// InputProps={{
|
||||
// endAdornment: (
|
||||
// <InputAdornment position="end">
|
||||
// {getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
|
||||
// ? "°F"
|
||||
// : "℃"}
|
||||
// </InputAdornment>
|
||||
// )
|
||||
// }}
|
||||
// style={{ marginTop: theme.spacing(2) }}
|
||||
// fullWidth
|
||||
// variant="outlined"
|
||||
// />
|
||||
// <TextField
|
||||
// label={"Outdoor Humidity"}
|
||||
// value={outdoorHumidityInput}
|
||||
// onChange={event => setOutdoorHumidityInput(event.target.value)}
|
||||
// InputProps={{
|
||||
// endAdornment: <InputAdornment position="end">%</InputAdornment>
|
||||
// }}
|
||||
// style={{ marginTop: theme.spacing(2) }}
|
||||
// fullWidth
|
||||
// variant="outlined"
|
||||
// />
|
||||
// </DialogContent>
|
||||
// <DialogActions>
|
||||
// <Button
|
||||
// onClick={() => {
|
||||
// // setNewPreset(0);
|
||||
// setNewBinMode(bin.settings.mode);
|
||||
// setShowInputMoisture(false);
|
||||
// }}
|
||||
// color="primary">
|
||||
// Cancel
|
||||
// </Button>
|
||||
// <Button onClick={setModeConditioning} color="primary">
|
||||
// Update
|
||||
// </Button>
|
||||
// </DialogActions>
|
||||
// </ResponsiveDialog>
|
||||
// );
|
||||
// };
|
||||
|
||||
if (loading) {
|
||||
return <Skeleton variant="rectangular" height={460} />;
|
||||
|
|
@ -2171,7 +2080,7 @@ export default function BinVisualizer(props: Props) {
|
|||
|
||||
return (
|
||||
<Card raised className={classes.cardContent}>
|
||||
{moistureDialog()}
|
||||
{/* {moistureDialog()} */}
|
||||
{cfmLowDialog()}
|
||||
{cfmHighDialog()}
|
||||
{changeGrain()}
|
||||
|
|
@ -2201,11 +2110,15 @@ export default function BinVisualizer(props: Props) {
|
|||
compDevMap={componentDevices}
|
||||
preferences={preferences}
|
||||
onClose={(refresh) => {
|
||||
setShowInputMoisture(false)
|
||||
setOpenModeChange(false)
|
||||
if(refresh) updateBin();
|
||||
}}
|
||||
|
||||
startChange={() => {
|
||||
setModeChangeInProgress(true)
|
||||
}}
|
||||
changeComplete={() => {
|
||||
setModeChangeInProgress(false)
|
||||
}}
|
||||
/>
|
||||
<Box paddingRight={1}>
|
||||
{binMode()}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue