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

finished the expanded cables dialog, worked on the scrolling for bin cables in the pages table view, did some mobile view edits

Browse source
This commit is contained in:
csawatzky 2026-06-01 15:12:13 -06:00
parent c3ee4a518c
commit dc52ef77a7
6 changed files with 617 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

134
src/bin/binTableView.tsx
View file

@ -1,27 +1,36 @@
import { Edit, GppGood, Save } from "@mui/icons-material";
import { Box, darken, IconButton, Table, TableBody, TableCell, TableHead, TableRow, TextField, Theme, Typography } from "@mui/material";
import { Edit, GppGood, Info, Save } from "@mui/icons-material";
import { Box, Button, darken, DialogActions, IconButton, Table, TableBody, TableCell, TableHead, TableRow, TextField, Theme, Tooltip, Typography } from "@mui/material";
import { green, grey, orange, red, yellow } from "@mui/material/colors";
import { makeStyles } from "@mui/styles";
import ResponsiveDialog from "common/ResponsiveDialog";
import HumidityIcon from "component/HumidityIcon";
import TemperatureIcon from "component/TemperatureIcon";
import { cloneDeep } from "lodash";
import { Bin } from "models";
import { pond } from "protobuf-ts/pond";
import { useGlobalState } from "providers";
import React, { useEffect, useState } from "react";
import React, { useEffect, useRef, useState } from "react";
import { useMemo } from "react";
import { avg, celsiusToFahrenheit } from "utils";
import BinTableExpanded from "./BinTableExpanded";
import { useMobile } from "hooks";
const useStyles = makeStyles((theme: Theme) => ({
tableStyle: {
borderCollapse: "collapse",
borderCollapse: "separate",
borderSpacing: 0, // removes the default gap that "separate" introduces
},
headerCellStyle: {
fontWeight: 650,
fontWeight: 650,
backgroundColor: darken(theme.palette.background.paper, 0.2),
fontSize: 15,
textAlign: "center",
border: "1px solid black"
fontSize: 15,
textAlign: "center",
borderTop: "1px solid black",
borderLeft: "1px solid black",
borderBottom: "1px solid black",
"&:last-child": {
borderRight: "1px solid black",
}
},
cellStyle: {
padding: 2,
@ -30,11 +39,6 @@ const useStyles = makeStyles((theme: Theme) => ({
textAlign: "center",
border: "1px solid black",
},
thresholdCell: {
fontWeight: 650,
fontSize: 15,
textAlign: "center",
}
})
);
@ -62,9 +66,19 @@ export default function BinTableView(props: Props) {
const [tempEntry, setTempEntry] = useState("")
const [moistureEntry, setMoistureEntry] = useState("")
const [moistureTarget, setMoistureTarget] = useState(0)
const [openExpandedCables, setOpenExpandedCables] = useState(false)
const mobileView = useMobile()
const inBounds = green[600]
const caution = yellow[800]
const warning = red[700]
const headerRow1Ref = useRef<HTMLTableRowElement>(null)
const [firstRowHeight, setFirstRowHeight] = useState(0)
useEffect(() => {
if (headerRow1Ref.current) {
setFirstRowHeight(headerRow1Ref.current.getBoundingClientRect().height)
}
}, [enterTemp, enterMoisture]) // re-measure when the row height might change due to TextField appearing
useEffect(()=>{
let val = bin.targetTemp()
@ -250,15 +264,54 @@ export default function BinTableView(props: Props) {
)
}
const expandedTableDialog = () => {
return (
<ResponsiveDialog open={openExpandedCables} onClose={()=>{setOpenExpandedCables(false)}}>
<BinTableExpanded
cables={bin.status.grainCables}
targetMoisture={bin.targetMoisture()}
targetTemp={bin.targetTemp()}
inBounds={inBounds}
caution={caution}
warning={warning}
/>
<DialogActions>
<Button onClick={()=> {setOpenExpandedCables(false)}}>
Close
</Button>
</DialogActions>
</ResponsiveDialog>
)
}
return (
<Box padding={2}>
<Box padding={2} sx={{ display: "flex", flexDirection: "column", height: "100%" }}>
{expandedTableDialog()}
{/* Level Table */}
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography>Grain Table</Typography>
<Box display="flex" alignItems="center" gap={1}>
<Button
variant="contained"
onClick={() => {
setOpenExpandedCables(true)
}}>
Show All Cables
</Button>
<Tooltip title="testing">
<Info />
</Tooltip>
</Box>
</Box>
{/* this box is to make the whole table scrollable */}
<Box sx={{ overflowY: "auto", flex: 1, minHeight: 0 }}>
<Table className={classes.tableStyle}>
<TableHead>
<TableRow>
<TableCell className={classes.thresholdCell}>
<TableRow ref={headerRow1Ref}>
<TableCell className={classes.headerCellStyle} sx={{ top: 0, position: "sticky", zIndex: 3 }}>
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
<GppGood />
<Typography fontWeight={650}>
@ -266,7 +319,7 @@ export default function BinTableView(props: Props) {
</Typography>
</Box>
</TableCell>
<TableCell className={classes.thresholdCell}>
<TableCell className={classes.headerCellStyle} sx={{ top: 0, position: "sticky", zIndex: 3 }}>
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
<TemperatureIcon heightWidth={30}/>
{enterTemp ?
@ -296,7 +349,7 @@ export default function BinTableView(props: Props) {
}
</Box>
</TableCell>
<TableCell className={classes.thresholdCell}>
<TableCell className={classes.headerCellStyle} sx={{ top: 0, position: "sticky", zIndex: 3 }}>
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
<HumidityIcon height={30} width={20}/>
{enterMoisture ?
@ -328,11 +381,12 @@ export default function BinTableView(props: Props) {
</TableCell>
</TableRow>
<TableRow>
<TableCell className={classes.headerCellStyle}>Level</TableCell>
<TableCell className={classes.headerCellStyle}>Temperature</TableCell>
<TableCell className={classes.headerCellStyle}>Moisture</TableCell>
<TableCell className={classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>Level</TableCell>
<TableCell className={classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>Temperature</TableCell>
<TableCell className={classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>Moisture</TableCell>
</TableRow>
</TableHead>
<TableBody>
{binLevels.map((level, i) => (
<TableRow key={i}>
@ -340,10 +394,46 @@ 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>
{/* Table Legend */}
<Box display="flex" alignItems="center" justifyContent={"space-between"} marginTop={2}>
<Box display="flex" alignItems="center" justifyContent="space-between" marginTop={2} sx={{ flexShrink: 0 }}>
<Box display="flex" alignItems="center" gap={1}>
<LegendSwatch color={inBounds} />
<Typography sx={{fontWeight: 600, fontSize: 10}}>On or below target</Typography>