created a change grain dialog component and made the grain display a 'button' to be able to change the grain without going into the settings
This commit is contained in:
csawatzky
parent
dc52ef77a7
commit
b8a49197cb
3 changed files with 263 additions and 107 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import { Box, Card, Grid2, LinearProgress, Typography } from "@mui/material";
|
||||
import { Box, Card, DialogContent, DialogTitle, Grid2, IconButton, LinearProgress, Switch, Typography } from "@mui/material";
|
||||
import { useMobile } from "hooks";
|
||||
import { Bin, Component, Device } from "models";
|
||||
import Bin3dVisualizer from "./components/bin3dVisualizer";
|
||||
|
|
@ -12,6 +12,10 @@ import { pond } from "protobuf-ts/pond";
|
|||
import BinDetails from "./components/binDetails";
|
||||
import { Plenum } from "models/Plenum";
|
||||
import BinSensorsDisplay from "../binSensorsDisplay";
|
||||
import ResponsiveDialog from "common/ResponsiveDialog";
|
||||
import { useState } from "react";
|
||||
import SearchSelect from "common/SearchSelect";
|
||||
import ChangeGrainDialog from "grain/ChangeGrainDialog";
|
||||
|
||||
interface Props {
|
||||
bin: Bin
|
||||
|
|
@ -34,6 +38,7 @@ export default function BinSummary(props: Props){
|
|||
const {bin, devices, fans, heaters, permissions, componentDevices, componentMap, binPrefs, updateBinCallback, cables = [], plenums = [], setPreferences} = props
|
||||
//const [currentDevice, setCurrentDevice] = useState<Device | undefined>(undefined)
|
||||
const isMobile = useMobile()
|
||||
const [openGrainDialog, setOpenGrainDialog] = useState(false)
|
||||
|
||||
// useEffect(() => {
|
||||
// if(devices.length > 0){
|
||||
|
|
@ -71,79 +76,90 @@ export default function BinSummary(props: Props){
|
|||
)
|
||||
}
|
||||
|
||||
const inventorySummary = () => {
|
||||
return (
|
||||
<Card raised sx={{ marginBottom: 2 }}>
|
||||
<Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{ padding: 2 }}>
|
||||
|
||||
{/* Grain Type */}
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ color: grey[500] }}>
|
||||
Grain Type
|
||||
</Typography>
|
||||
<Box
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={0.5}
|
||||
onClick={() => setOpenGrainDialog(true)}
|
||||
sx={{
|
||||
cursor: "pointer",
|
||||
mt: 0.5,
|
||||
px: 1,
|
||||
py: 0.5,
|
||||
borderRadius: 1,
|
||||
border: "1px solid",
|
||||
borderColor: grey[700],
|
||||
"&:hover": {
|
||||
borderColor: grey[500],
|
||||
backgroundColor: "rgba(255,255,255,0.05)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Spa sx={{ color: "#4caf50", fontSize: 18 }} />
|
||||
<Typography variant="body1">{bin.grainName()}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Bin Fill */}
|
||||
<Box sx={{ flexGrow: 1, maxWidth: 400, mx: 4 }}>
|
||||
<Typography variant="caption" sx={{ color: grey[500] }}>
|
||||
Bin Fill
|
||||
</Typography>
|
||||
<Box display="flex" alignItems="center" gap={1} sx={{ mt: 0.5 }}>
|
||||
<Typography variant="body2" noWrap>
|
||||
{bin.binFillCap()}
|
||||
</Typography>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={bin.fillPercent()}
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
backgroundColor: "rgba(255,255,255,0.1)",
|
||||
"& .MuiLinearProgress-bar": {
|
||||
backgroundColor: "#4caf50",
|
||||
borderRadius: 4,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Last Updated */}
|
||||
<Box>
|
||||
<Typography variant="caption" sx={{ color: grey[500] }}>
|
||||
Last Updated
|
||||
</Typography>
|
||||
<Box display="flex" alignItems="center" gap={2} sx={{ mt: 0.5 }}>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<AccessTime sx={{ fontSize: 16, color: grey[400] }} />
|
||||
<Typography variant="body2" sx={{ color: grey[300] }}>
|
||||
{moment(bin.status.timestamp).fromNow()}
|
||||
</Typography>
|
||||
</Box>
|
||||
{activity(bin.status.timestamp)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box padding={2}>
|
||||
<Card raised sx={{marginBottom: 2}}>
|
||||
<Grid2 container justifyContent={"space-between"} sx={{padding:2}}>
|
||||
<Grid2>
|
||||
<Typography variant="caption" sx={{ color: grey[500] }}>
|
||||
Grain Type
|
||||
</Typography>
|
||||
<Box display="flex" alignItems="center">
|
||||
<Spa sx={{ color: "#4caf50", fontSize: 18 }} />
|
||||
{/* <GrassIcon sx={{ color: "#4caf50", fontSize: 18 }} /> */}
|
||||
<Typography variant="body1">{bin.grainName()}</Typography>
|
||||
</Box>
|
||||
</Grid2>
|
||||
<Grid2 sx={{ flexGrow: 1, maxWidth: 400 }}>
|
||||
<Typography variant="caption" sx={{ color: grey[500] }}>
|
||||
Bin Fill
|
||||
</Typography>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<Typography variant="body2" noWrap>
|
||||
{bin.binFillCap()}
|
||||
</Typography>
|
||||
<LinearProgress
|
||||
variant="determinate"
|
||||
value={bin.fillPercent()} // adjust to your data
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
backgroundColor: "rgba(255,255,255,0.1)",
|
||||
"& .MuiLinearProgress-bar": {
|
||||
backgroundColor: "#4caf50",
|
||||
borderRadius: 4,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Grid2>
|
||||
<Grid2>
|
||||
<Typography variant="caption" sx={{ color: grey[500] }}>
|
||||
Last Updated
|
||||
</Typography>
|
||||
{/* this would be to show the last time the device checked in */}
|
||||
{/* {currentDevice ?
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<AccessTime sx={{ fontSize: 16, color: grey[400] }} />
|
||||
<Typography variant="body2" sx={{ color: grey[300] }}>
|
||||
{moment(currentDevice.status.lastActive).fromNow()}
|
||||
</Typography>
|
||||
</Box>
|
||||
{activity(currentDevice.status.lastActive)}
|
||||
</Box>
|
||||
:
|
||||
<Box display="flex" alignItems="center">
|
||||
<Typography variant="body2" sx={{ color: "grey.300" }}>
|
||||
No Connected Devices Found
|
||||
</Typography>
|
||||
</Box>
|
||||
} */}
|
||||
{/* this shows the last time the bins status updated */}
|
||||
<Box display="flex" alignItems="center" gap={2}>
|
||||
<Box display="flex" alignItems="center" gap={1}>
|
||||
<AccessTime sx={{ fontSize: 16, color: grey[400] }} />
|
||||
<Typography variant="body2" sx={{ color: grey[300] }}>
|
||||
{moment(bin.status.timestamp).fromNow()}
|
||||
</Typography>
|
||||
</Box>
|
||||
{activity(bin.status.timestamp)}
|
||||
</Box>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</Card>
|
||||
<ChangeGrainDialog bin={bin} open={openGrainDialog} closeDialog={()=>setOpenGrainDialog(false)} permissions={permissions} updateBin={updateBinCallback}/>
|
||||
{inventorySummary()}
|
||||
<Grid2 container spacing={2}>
|
||||
<Grid2 size={isMobile ? 12 : 7}>
|
||||
<Card raised sx={{height: 600}}>
|
||||
|
|
|
|||
|
|
@ -394,41 +394,6 @@ export default function BinTableView(props: Props) {
|
|||
{levelDisplay(level)}
|
||||
</TableRow>
|
||||
))}
|
||||
<TableRow>
|
||||
<TableCell>TESTING</TableCell>
|
||||
<TableCell>SCROLLING</TableCell>
|
||||
<TableCell>ROWS</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>TESTING</TableCell>
|
||||
<TableCell>SCROLLING</TableCell>
|
||||
<TableCell>ROWS</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>TESTING</TableCell>
|
||||
<TableCell>SCROLLING</TableCell>
|
||||
<TableCell>ROWS</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>TESTING</TableCell>
|
||||
<TableCell>SCROLLING</TableCell>
|
||||
<TableCell>ROWS</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>TESTING</TableCell>
|
||||
<TableCell>SCROLLING</TableCell>
|
||||
<TableCell>ROWS</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>TESTING</TableCell>
|
||||
<TableCell>SCROLLING</TableCell>
|
||||
<TableCell>ROWS</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>TESTING</TableCell>
|
||||
<TableCell>SCROLLING</TableCell>
|
||||
<TableCell>ROWS</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Box>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue