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

more visual tweaks and design, fixed a coule bugs and removed some console logs

Browse source
This commit is contained in:
csawatzky 2026-06-11 16:48:00 -06:00
parent f04213af1e
commit ea13f97c57
8 changed files with 257 additions and 293 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/bin/3dView/Scene/Bin3dView.tsx
View file

@ -138,8 +138,8 @@ export default function Bin3dView(props: Props) {
<BinShell
binBodyColour="#fff"
radialSegments={20}
binMetalness={0.5}
binRoughness={0.7}
binMetalness={0.7}
binRoughness={0.3}
binOpacity={0.2}
diameter={dims.diameter}
sidewallHeight={dims.sidewallHeight}

23
src/bin/BinPlayer.tsx
View file

@ -1,5 +1,6 @@
import { DateRange, PlayArrow, Start, Stop } from "@mui/icons-material";
import { Box, Button, DialogActions, DialogContent, FormControl, IconButton, LinearProgress, MenuItem, Select, TextField, Typography } from "@mui/material";
import { Box, Button, darken, DialogActions, DialogContent, FormControl, IconButton, LinearProgress, MenuItem, Select, TextField, Typography } from "@mui/material";
import { grey } from "@mui/material/colors";
import ResponsiveDialog from "common/ResponsiveDialog";
import { GetDefaultDateRange } from "common/time/DateRange";
import { cloneDeep } from "lodash";
@ -312,7 +313,7 @@ export default function BinPlayer(props: Props) {
const checkpointStartTime = useRef(0);
const currentCheckpointIndex = useRef(0);
const isPlaying = useRef(false);
const PLAYBACK_INTERVAL = 2000 //playback time between checkpoints
const PLAYBACK_INTERVAL = 1000 //playback time between checkpoints in ms
const [isPlayingState, setIsPlayingState] = useState(false);
const stopPlayer = () => { isPlaying.current = false; };
const originalBin = useRef<Bin | null>(null);
@ -350,8 +351,6 @@ export default function BinPlayer(props: Props) {
* then builds `statusCheckpoints` for playback over [startDate, endDate].
*/
const startPlayer = async () => {
console.log(startDate.toISOString())
console.log(endDate.toISOString())
originalBin.current = cloneDeep(bin); // capture before async work begins
isPlaying.current = true;
setIsPlayingState(true)
@ -369,8 +368,6 @@ const startPlayer = async () => {
endDate,
checkpointCountFromRange(startDate, endDate)
);
console.log(responses)
console.log(checkpoints)
for (let i = 0; i < checkpoints.length; i++) {
if (!isPlaying.current) {
@ -387,7 +384,6 @@ const startPlayer = async () => {
setBin(newBin);
setCurrentCheckpointTime(checkpoints[i].time)
await new Promise(res => setTimeout(res, PLAYBACK_INTERVAL));
console.log("next step")
}
isPlaying.current = false;
setIsPlayingState(false)
@ -455,8 +451,10 @@ const dateSelector = () => {
<Select
value={dateSelect}
sx={{
borderRadius: 1,
bgcolor: 'rgba(255,255,255,0.08)',
fontSize: 12,
borderRadius: 2,
border: "1px solid",
borderColor: grey[800],
'& .MuiSelect-select': {
py: 1.5,
},
@ -502,16 +500,15 @@ const dateSelector = () => {
{/* start/stop button */}
<Box>
{isPlayingState ? (
<IconButton color="primary" sx={{ border: "1px solid", borderRadius: "50%", padding: 1 }} onClick={stopPlayer}><Stop /></IconButton>
<IconButton sx={{ border: "1px solid", borderRadius: "50%", padding: 1, height: 60, width: 60}} onClick={stopPlayer}><Stop fontSize="large" /></IconButton>
) : (
<IconButton color="primary" sx={{ border: "1px solid", borderRadius: "50%", padding: 1 }} onClick={startPlayer}><PlayArrow /></IconButton>
<IconButton sx={{ border: "1px solid", borderRadius: "50%", padding: 1, height: 60, width: 60 }} onClick={startPlayer}><PlayArrow fontSize="large" /></IconButton>
)}
</Box>
{/* progress bar and date display */}
<Box sx={{ flexGrow: 1 }}>
<Typography textAlign={"center"}>{currentCheckpointTime ? currentCheckpointTime.format("MMM D, YYYY h:mm A") : moment().format("MMM D, YYYY h:mm A")}</Typography>
<LinearProgress value={displayProgress} variant="determinate" />
<LinearProgress value={displayProgress} variant="determinate" color="inherit" />
<Box display="flex" flexDirection="row" justifyContent="space-between">
<Typography variant="caption">{startDate.format("MMM D, YYYY")}</Typography>
<Typography variant="caption">{endDate.format("MMM D, YYYY")}</Typography>

106
src/bin/BinTableExpanded.tsx
View file

@ -1,4 +1,4 @@
import { Box, Table, TableBody, TableCell, TableHead, TableRow, Theme, Typography } from "@mui/material";
import { Box, Table, TableBody, TableCell, TableHead, TableRow, Theme, Typography, useTheme } from "@mui/material";
import { pond } from "protobuf-ts/pond";
import { makeStyles } from "@mui/styles";
import { useEffect, useMemo, useState } from "react";
@ -8,20 +8,34 @@ import { darken } from "@mui/material";
import React from "react";
const useStyles = makeStyles((theme: Theme) => ({
tableStyle: { borderCollapse: "collapse" },
tableStyle: {
borderCollapse: "separate",
borderSpacing: 0,
},
headerCellStyle: {
fontWeight: 650,
backgroundColor: darken(theme.palette.background.paper, 0.2),
backgroundColor: darken(theme.palette.background.paper, 0.3),
fontSize: 15,
textAlign: "center",
border: "1px solid black"
borderBottom: "none",
padding: 10,
},
cellStyle: {
defaultCellStyle: {
padding: 2,
fontWeight: 650,
fontSize: 17,
textAlign: "center",
border: "1px solid black",
backgroundColor: darken(theme.palette.background.paper, 0.1),
borderTop: "1px solid " + darken(theme.palette.background.paper, 0.4),
borderBottom: "none",
},
colouredCellStyle: {
padding: 2,
fontWeight: 650,
fontSize: 17,
textAlign: "center",
borderTop: "1px solid " + darken(theme.palette.background.paper, 0.4),
borderBottom: "none",
},
}));
@ -45,22 +59,10 @@ export default function BinTableExpanded(props: Props) {
const { cables, targetTemp, targetMoisture, inBounds = "#43a047", caution = "#f9a825", warning = "#c62828" } = props
const classes = useStyles()
const [{ user }] = useGlobalState()
const theme = useTheme()
const useFahrenheit = user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT
// Build column definitions by iterating cables once
// const columns = useMemo<Column[]>(() => {
// const cols: Column[] = []
// cables.forEach((cable, cableIndex) => {
// cols.push({ label: `Cable ${cableIndex + 1} Temp`, cableIndex, type: "temp" })
// // Same moisture-validity check as BinTableView
// if (cable.moisture.length > 0 && avg(cable.moisture) > 0) {
// cols.push({ label: `Cable ${cableIndex + 1} Moisture`, cableIndex, type: "moisture" })
// }
// })
// return cols
// }, [cables])
// Row count driven by the longest cable
const rowCount = useMemo(
() => Math.max(0, ...cables.map(c => c.celcius.length)),
@ -110,87 +112,57 @@ export default function BinTableExpanded(props: Props) {
const cableTable = (cable: pond.GrainCable) => {
return (
<Table>
<Table className={classes.tableStyle}>
<TableHead>
<TableRow>
<TableCell className={classes.headerCellStyle}>
<TableCell className={classes.headerCellStyle} sx={{ borderTopLeftRadius: 8 }}>
Level
</TableCell>
<TableCell className={classes.headerCellStyle}>
Temperature
</TableCell>
<TableCell className={classes.headerCellStyle}>
<TableCell className={classes.headerCellStyle} sx={{ borderTopRightRadius: 8 }}>
Moisture
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{/* Rows are reversed so highest node is at top, matching BinTableView */}
{Array.from({ length: rowCount }, (_, i) => rowCount - 1 - i).map(nodeIndex => {
{Array.from({ length: rowCount }, (_, i) => rowCount - 1 - i).map((nodeIndex, rowI) => {
const isLast = rowI === rowCount - 1
const tempData = renderCell(cable, nodeIndex, "temp")
const moistureData = renderCell(cable, nodeIndex, "moisture")
return (
<TableRow key={nodeIndex}>
<TableCell padding="none" className={classes.cellStyle}>
<TableCell
padding="none"
className={classes.defaultCellStyle}
sx={{ borderBottomLeftRadius: isLast ? 8 : 0 }}>
{nodeIndex + 1}
</TableCell>
<TableCell
padding="none"
className={classes.cellStyle}
sx={{ backgroundColor: tempData.color || undefined }}>
className={classes.colouredCellStyle}
sx={{ backgroundColor: tempData.color || darken(theme.palette.background.paper, 0.1) }}>
{tempData.display}
</TableCell>
<TableCell
padding="none"
className={classes.cellStyle}
sx={{ backgroundColor: moistureData.color || undefined }}>
className={classes.colouredCellStyle}
sx={{
backgroundColor: moistureData.color || darken(theme.palette.background.paper, 0.1),
borderBottomRightRadius: isLast ? 8 : 0,
}}>
{moistureData.display}
</TableCell>
</TableRow>
)})}
)
})}
</TableBody>
</Table>
)
}
return (
// <Table className={classes.tableStyle}>
// <TableHead>
// <TableRow>
// <TableCell className={classes.headerCellStyle}>Level</TableCell>
// {columns.map((col, i) => (
// <TableCell key={i} className={classes.headerCellStyle}>
// {col.label}
// </TableCell>
// ))}
// </TableRow>
// </TableHead>
// <TableBody>
// {/* Rows are reversed so highest node is at top, matching BinTableView */}
// {Array.from({ length: rowCount }, (_, i) => rowCount - 1 - i).map(nodeIndex => (
// <TableRow key={nodeIndex}>
// <TableCell padding="none" className={classes.cellStyle}>
// {nodeIndex + 1}
// </TableCell>
// {columns.map((col, colI) => {
// const cable = cables[col.cableIndex]
// const { display, color } = renderCell(cable, nodeIndex, col.type)
// return (
// <TableCell
// key={colI}
// padding="none"
// className={classes.cellStyle}
// sx={{ backgroundColor: color || undefined }}
// >
// {display}
// </TableCell>
// )
// })}
// </TableRow>
// ))}
// </TableBody>
// </Table>
<Box padding={1}>
{/* Table Legend */}
<Box display="flex" alignItems="center" justifyContent={"space-between"} marginY={2}>

47
src/bin/bin3dVisualizer.tsx
View file

@ -1,4 +1,4 @@
import { Box, Checkbox, FormControl, MenuItem, List, ListItem, InputLabel, Select, Typography, Stack, FormControlLabel } from "@mui/material";
import { Box, Checkbox, FormControl, MenuItem, List, ListItem, InputLabel, Select, Typography, Stack, FormControlLabel, useTheme } from "@mui/material";
import Bin3dView from "bin/3dView/Scene/Bin3dView";
import { Bin, Component, Device } from "models";
import { Controller } from "models/Controller";
@ -26,6 +26,7 @@ interface Props {
}
export default function bin3dVisualizer(props: Props){
const {bin, fans, heaters, permissions, devices, componentDevices, componentMap, binPrefs, updateBinCallback} = props
const theme = useTheme()
const [showHeatmap, setShowHeatmap] = useState(true)
// const [showHotspots, setShowHotspots] = useState(false)
// const [showFill, setShowFill] = useState(false)
@ -68,16 +69,17 @@ export default function bin3dVisualizer(props: Props){
const binModeControl = () => {
return (
<Box>
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>{bin.name()}</Typography>
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 17}}>{bin.name()}</Typography>
<FormControl fullWidth>
<Select
value={binMode}
disabled={modeChangeInProgress}
sx={{
borderRadius: 1,
bgcolor: 'rgba(255,255,255,0.08)',
bgcolor: '#151E27',
'& .MuiSelect-select': {
py: 1.5,
py: isMobile ? 0.5 : 1.5,
fontSize: 13
},
'& .MuiOutlinedInput-notchedOutline': { border: 'none' },
'&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' },
@ -103,7 +105,7 @@ export default function bin3dVisualizer(props: Props){
const heatmapDisplay = () => {
return (
<Box>
<Typography noWrap sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>
<Typography noWrap sx={{fontWeight: 650, fontSize: isMobile ? 13 : 17}}>
Heatmap
</Typography>
<FormControl fullWidth>
@ -111,8 +113,11 @@ export default function bin3dVisualizer(props: Props){
value={binDisplay}
sx={{
borderRadius: 1,
bgcolor: 'rgba(255,255,255,0.08)',
'& .MuiSelect-select': { py: 1.5 },
bgcolor: '#151E27',
'& .MuiSelect-select': {
py: isMobile ? 0.5 : 1.5,
fontSize: 13
},
'& .MuiOutlinedInput-notchedOutline': { border: 'none' },
'&:hover .MuiOutlinedInput-notchedOutline': { border: 'none' },
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { border: 'none' },
@ -173,9 +178,12 @@ export default function bin3dVisualizer(props: Props){
}
const controllerDisplay = () => {
if (fans && fans.length > 1 || heaters && heaters.length > 1){
return (
<Box>
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 20}}>
<Box width="100%">
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 17}}>
Controllers
</Typography>
{fans && fans.map(fan => {
@ -187,15 +195,16 @@ export default function bin3dVisualizer(props: Props){
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
bgcolor: 'rgba(255,255,255,0.05)',
// bgcolor: 'rgba(255,255,255,0.05)',
bgcolor: '#151E27',
borderRadius: 1,
px: 2,
py: 1,
}}
>
<Typography sx={{fontSize: isMobile ? 13 : 15}}>{fan.name()}</Typography>
<Typography sx={{fontSize: 13}}>{fan.name()}</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 15}}>
<Typography sx={{fontWeight: 650, fontSize: 13}}>
{isOn ? "ON" : "OFF"}
</Typography>
<Box sx={{
@ -216,15 +225,16 @@ export default function bin3dVisualizer(props: Props){
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
bgcolor: 'rgba(255,255,255,0.05)',
// bgcolor: 'rgba(255,255,255,0.05)',
bgcolor: '#151E27',
borderRadius: 1,
px: 2,
py: 1,
}}
>
<Typography sx={{fontSize: isMobile ? 13 : 15}}>{heater.name()}</Typography>
<Typography sx={{fontSize: 13}}>{heater.name()}</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<Typography sx={{fontWeight: 650, fontSize: isMobile ? 13 : 15}}>
<Typography sx={{fontWeight: 650, fontSize: 13}}>
{isOn ? "ON" : "OFF"}
</Typography>
<Box sx={{
@ -240,11 +250,14 @@ export default function bin3dVisualizer(props: Props){
// loop through controllers displaying each one
)
}else{
return
}
}
const desktopHUD = () => {
return (
<Box position={"absolute"} top={20} left={30} height={"80%"} width={"30%"} padding={2}>
<Box position={"absolute"} top={20} left={25} height={"75%"} width={"25%"}>
<Stack direction={"column"} justifyContent={"space-between"} sx={{height: "100%", width: "100%"}}>
{binModeControl()}
{heatmapDisplay()}
@ -397,7 +410,7 @@ export default function bin3dVisualizer(props: Props){
showMoisture={showMoisture && showLabels}
// showGrain={showFill}
// showHotspots={showHotspots}
xOffset={isMobile ? undefined : -150}
xOffset={isMobile ? undefined : -120}
/>
{isMobile ? mobileHUD() : desktopHUD()}
</Box>

38
src/bin/binSensorsDisplay.tsx
View file

@ -734,7 +734,7 @@ export default function BinSensorsDisplay(props: Props){
if(showGraphs && device){
let icon = GetComponentIcon(plenum.type(), plenum.subType(), themeType)
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={plenum.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<BinSensorGraph
icon={icon}
title={plenum.name()}
@ -754,7 +754,7 @@ export default function BinSensorsDisplay(props: Props){
)
}
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={plenum.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
{tempHumidCard(plenum)}
</Grid2>
)
@ -765,7 +765,7 @@ export default function BinSensorsDisplay(props: Props){
if(showGraphs && device){
let icon = GetComponentIcon(pressure.type(), pressure.subType(), themeType)
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={pressure.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<BinSensorGraph
icon={icon}
title={pressure.name()}
@ -785,7 +785,7 @@ export default function BinSensorsDisplay(props: Props){
)
}
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={pressure.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
{pressureCard(pressure)}
</Grid2>
)
@ -795,7 +795,7 @@ export default function BinSensorsDisplay(props: Props){
if(showGraphs && device){
let icon = GetComponentIcon(ambient.type(), ambient.subType(), themeType)
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={ambient.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<BinSensorGraph
icon={icon}
title={ambient.name()}
@ -815,7 +815,7 @@ export default function BinSensorsDisplay(props: Props){
)
}
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={ambient.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
{tempHumidCard(ambient)}
</Grid2>
)
@ -826,7 +826,7 @@ export default function BinSensorsDisplay(props: Props){
if(showGraphs && device){
let icon = GetComponentIcon(h.type(), h.subType(), themeType)
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={h.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<BinSensorGraph
icon={icon}
title={h.name()}
@ -846,7 +846,7 @@ export default function BinSensorsDisplay(props: Props){
)
}
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={h.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
{tempHumidCard(h)}
</Grid2>
)
@ -857,7 +857,7 @@ export default function BinSensorsDisplay(props: Props){
if(showGraphs && device){
let icon = GetComponentIcon(co2.type(), co2.subType(), themeType)
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={co2.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<BinSensorGraph
icon={icon}
title={co2.name()}
@ -877,7 +877,7 @@ export default function BinSensorsDisplay(props: Props){
)
}
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={co2.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
{co2Card(co2)}
</Grid2>
)
@ -887,7 +887,7 @@ export default function BinSensorsDisplay(props: Props){
if(showGraphs && device){
let icon = GetComponentIcon(lidar.type(), lidar.subType(), themeType)
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={lidar.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<BinSensorGraph
icon={icon}
title={lidar.name()}
@ -907,7 +907,7 @@ export default function BinSensorsDisplay(props: Props){
)
}
return (
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={lidar.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
{lidarCard(lidar)}
</Grid2>
)
@ -917,7 +917,7 @@ export default function BinSensorsDisplay(props: Props){
if(showGraphs && device){
let icon = GetComponentIcon(cable.type(), cable.subType(), themeType)
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={cable.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<BinSensorGraph
icon={icon}
title={cable.name()}
@ -939,7 +939,7 @@ export default function BinSensorsDisplay(props: Props){
)
}
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={cable.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
{cableCard(cable)}
</Grid2>
)
@ -957,7 +957,7 @@ export default function BinSensorsDisplay(props: Props){
if(showGraphs && device){
let icon = GetComponentIcon(heater.type(), heater.subType(), themeType)
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={heater.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<BinSensorGraph
device={device}
icon={icon}
@ -977,7 +977,7 @@ export default function BinSensorsDisplay(props: Props){
)
}
return (
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={heater.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
{controllerCard(heater)}
</Grid2>
)
@ -987,7 +987,7 @@ export default function BinSensorsDisplay(props: Props){
if(showGraphs && device){
let icon = GetComponentIcon(fan.type(), fan.subType(), themeType)
return(
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={fan.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<BinSensorGraph
device={device}
icon={icon}
@ -1007,7 +1007,7 @@ export default function BinSensorsDisplay(props: Props){
)
}
return (
<Grid2 size={{xs: 12, sm: 6, md: 4, lg: 3}}>
<Grid2 key={fan.key()} size={{xs: 12, sm: 6, md: 4, lg: 3}}>
{controllerCard(fan)}
</Grid2>
)
@ -1020,7 +1020,7 @@ export default function BinSensorsDisplay(props: Props){
<Typography sx={{ fontWeight: 650, fontSize: 25 }}>Unassigned Components</Typography>
<Grid2 container spacing={2}>
{unassignedComponents.map(comp => (
<Grid2 size={{ xs: 6, sm: 6, md: 4, lg: 3 }}>
<Grid2 key={comp.key()} size={{ xs: 6, sm: 6, md: 4, lg: 3 }}>
{unassignedComponentCard(comp)}
</Grid2>
))}

154
src/bin/binSummary/BinSummary.tsx
View file

@ -113,125 +113,69 @@ export default function BinSummary(props: Props){
return bin.grainInventory(user)
}
const inventorySummaryMobile = () => {
return (
<Card raised sx={{ marginBottom: 2 }}>
<Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{ padding: 1, gap: 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)",
},
}}
>
const inventorySummaryMobile = () => (
<Card raised sx={{ mb: 2, overflow: "hidden", borderRadius: 4 }}>
{/* Header row */}
<Box display="flex" alignItems="center" justifyContent="space-between" sx={{ px: 2, pt: 1.5, pb: 1.25 }}>
<Box display="flex" alignItems="center" gap={1}>
<Box sx={{ width: 30, height: 30, borderRadius: 2, backgroundColor: "rgba(76,175,80,0.15)", display: "flex", alignItems: "center", justifyContent: "center" }}
onClick={() => setOpenGrainDialog(true)}>
<Spa sx={{ color: "#4caf50", fontSize: 18 }} />
<Typography variant="body1" sx={{fontSize: 12}}>{bin.grainName()}</Typography>
</Box>
<Box>
<Typography variant="caption" sx={{ color: grey[500], display: "block" }}>Grain type</Typography>
<Typography variant="body2" sx={{ fontWeight: 500, fontSize: 14 }}>{bin.grainName()}</Typography>
</Box>
</Box>
<Box display="flex" alignItems="center" gap={0.75} sx={{ textAlign: "right" }}>
<Box sx={{ width: 7, height: 7, borderRadius: "50%", backgroundColor: "#4caf50", flexShrink: 0 }} />
<Box>
<Typography variant="caption" sx={{ color: grey[500], display: "block" }}>Last updated</Typography>
<Typography variant="body2" sx={{ fontSize: 13 }}>{moment(bin.status.timestamp).fromNow()}</Typography>
</Box>
</Box>
</Box>
{/* Bin Fill */}
<Box sx={{ flexGrow: 1 }}>
{/* Fill row */}
<Box sx={{ borderTop: `1px solid ${grey[800]}`, px: 2, pt: 1.5, pb: 1.75 }}>
<Box display="flex" alignItems="baseline" justifyContent="space-between" sx={{ mb: 1 }}>
<Typography variant="caption" sx={{ color: grey[500] }}>Bin fill</Typography>
<Box display="flex" alignItems="baseline" gap={0.75}>
<Typography sx={{ fontSize: 20, fontWeight: 500 }}>
{bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_MANUAL
? manualFillPercent : bin.fillPercent()}%
</Typography>
<Typography variant="caption" sx={{ color: grey[500] }}>
Bin Fill
{currentFill().toLocaleString()} / {bin.grainCapacity(user).toLocaleString()}
</Typography>
<Box sx={{ mt: 0.5 }}>
{/* Top line: current / capacity */}
<Typography sx={{fontSize: 12}} noWrap>
{currentFill()} / {bin.grainCapacity(user)}
</Typography>
{/* Bottom line: bar/slider + percent */}
<Box display="flex" alignItems="center" gap={1} sx={{ mt: 0.5 }}>
</Box>
</Box>
{bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_MANUAL ? (
<Slider
value={manualFillPercent}
onChangeCommitted={() => setOpenNewTransaction(true)}
onChange={(_, val) => {
let fillPercent = val as number
setManualFillPercent(fillPercent)
setManualBushels((fillPercent / 100) * bin.bushelCapacity())
}}
min={0}
max={100}
sx={{
flexGrow: 1,
<Box sx={{ display: "flex", alignItems: "center", marginY: -2.5 }}>
<Slider value={manualFillPercent} onChangeCommitted={() => setOpenNewTransaction(true)}
onChange={(_, val) => { setManualFillPercent(val as number); setManualBushels((val as number / 100) * bin.bushelCapacity()); }}
min={0} max={100} sx={{
color: "#4caf50",
py: 0,
mt: 0,
mb: 0,
height: 4,
"& .MuiSlider-root": { py: 0 },
"& .MuiSlider-thumb": { width: 16, height: 16 },
"& .MuiSlider-rail": { backgroundColor: "rgba(255,255,255,0.1)" },
}}
/>
}} />
</Box>
) : (
<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,
},
}}
/>
<LinearProgress variant="determinate" value={bin.fillPercent()}
sx={{ height: 8, borderRadius: 4, backgroundColor: "rgba(255,255,255,0.1)", "& .MuiLinearProgress-bar": { backgroundColor: "#4caf50", borderRadius: 4 } }} />
)}
<Typography variant="body2" noWrap sx={{ flexShrink: 0, fontSize: 12 }}>
{bin.inventoryControl() === pond.BinInventoryControl.BIN_INVENTORY_CONTROL_MANUAL
? manualFillPercent
: bin.fillPercent()}%
</Typography>
</Box>
</Box>
</Box>
{/* Last Updated */}
<Box>
<Typography variant="caption" sx={{ color: grey[500] }}>
Last Updated
</Typography>
<Tooltip title="Bin Status will update whenever its settings change or a device with a connected sensor checks in">
<Box sx={{ mt: 0.5 }}>
{/* Top line: time */}
<Box display="flex" alignItems="center" gap={0.5}>
<AccessTime sx={{ fontSize: 16, color: grey[400] }} />
<Typography variant="body2" sx={{ color: grey[300], fontSize: 12 }}>
{moment(bin.status.timestamp).fromNow()}
</Typography>
</Box>
{/* Bottom line: live/inactive status */}
<Box sx={{ mt: 0.5 }}>
{activity(bin.status.timestamp)}
</Box>
</Box>
</Tooltip>
</Box>
</Box>
</Card>
);
}
const inventorySummaryDesktop = () => {
return (
<Card raised sx={{ marginBottom: 2 }}>
<Card raised sx={{ marginBottom: 2, borderRadius: 4 }}>
<Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{ padding: 2 }}>
{/* Grain Type */}
@ -395,7 +339,7 @@ export default function BinSummary(props: Props){
{loading ?
<Skeleton variant="rectangular" height={600}/>
:
<Card raised sx={{height: 600, position: "relative"}}>
<Card raised sx={{height: 600, position: "relative", borderRadius: 4}}>
<Bin3dVisualizer
bin={bin}
fans={fans}
@ -408,7 +352,7 @@ export default function BinSummary(props: Props){
updateBinCallback={updateBinCallback}
/>
{setBin &&
<Box paddingX={2} position="absolute" bottom={10} width="100%">
<Box padding={3} position="absolute" bottom={3} width="100%">
<BinPlayer bin={bin} componentDevices={componentDevices} setBin={setBin}/>
</Box>
}
@ -420,7 +364,7 @@ export default function BinSummary(props: Props){
{loading ?
<Skeleton variant="rectangular" height={600}/>
:
<Card raised sx={{ height: 600, display: "flex", flexDirection: "column", overflow: "hidden" }}>
<Card raised sx={{ height: 600, display: "flex", flexDirection: "column", overflow: "hidden", borderRadius: 4 }}>
<BinDetails
bin={bin}
updateBinCallback={updateBinCallback}
@ -442,7 +386,7 @@ export default function BinSummary(props: Props){
{loading ?
<Skeleton variant="rectangular" height={250}/>
:
<Card>
<Card sx={{borderRadius: 4}}>
<BinSensorsDisplay components={componentMap} bin={bin} preferences={binPrefs} setPreferences={setPreferences} componentDevices={componentDevices}/>
</Card>
}

120
src/bin/binTableView.tsx
View file

@ -1,5 +1,5 @@
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 { Box, Button, darken, DialogActions, IconButton, Table, TableBody, TableCell, TableHead, TableRow, TextField, Theme, Tooltip, Typography, useTheme } from "@mui/material";
import { green, grey, orange, red, yellow } from "@mui/material/colors";
import { makeStyles } from "@mui/styles";
import ResponsiveDialog from "common/ResponsiveDialog";
@ -22,34 +22,40 @@ const useStyles = makeStyles((theme: Theme) => ({
},
headerCellStyle: {
fontWeight: 650,
backgroundColor: darken(theme.palette.background.paper, 0.2),
backgroundColor: darken(theme.palette.background.paper, 0.3),
textAlign: "center",
borderTop: "1px solid black",
borderLeft: "1px solid black",
borderBottom: "1px solid black",
"&:last-child": {
borderRight: "1px solid black",
}
padding: 10
},
mobileHeaderCellStyle: {
fontWeight: 650,
backgroundColor: darken(theme.palette.background.paper, 0.2),
backgroundColor: darken(theme.palette.background.paper, 0.3),
textAlign: "center",
borderTop: "1px solid black",
borderLeft: "1px solid black",
borderBottom: "1px solid black",
"&:last-child": {
borderRight: "1px solid black",
},
padding: 2
},
cellStyle: {
padding: 2,
fontWeight: 650,
fontSize: 17,
targetCellStyle: {
textAlign: "center",
border: "1px solid black",
backgroundColor: theme.palette.background.paper
},
mobileTargetCellStyle: {
textAlign: "center",
backgroundColor: theme.palette.background.paper,
padding: 2
},
defaultCellStyle: {
padding: 2,
fontSize: 15,
textAlign: "center",
backgroundColor: darken(theme.palette.background.paper, 0.1),
borderTop: "1px solid " + darken(theme.palette.background.paper, 0.4),
borderBottom: "none"
},
colouredCellStyle: {
padding: 2,
borderTop: "1px solid " + darken(theme.palette.background.paper, 0.4),
// fontWeight: 650,
fontSize: 15,
textAlign: "center",
borderBottom: "none"
}
})
);
@ -71,6 +77,7 @@ export default function BinTableView(props: Props) {
const classes = useStyles()
const {bin, updateBinCallback} = props
const [{user}] = useGlobalState()
const theme = useTheme()
const [enterTemp, setEnterTemp] = useState(false)
const [enterMoisture, setEnterMoisture] = useState(false)
const [tempTarget, setTempTarget] = useState(0)
@ -163,13 +170,13 @@ export default function BinTableView(props: Props) {
return levels
},[bin])
const levelDisplay = (level: BinLevel) => {
const levelDisplay = (level: BinLevel, lastRow?: boolean) => {
let tempDisplay = "--"
let moistureDisplay = "--"
let lvlTemp
let lvlMoisture
let tempColour: string = ""
let moistureColour: string = ""
let tempColour: string = darken(theme.palette.background.paper, 0.1)
let moistureColour: string = darken(theme.palette.background.paper, 0.1)
//determine the temp
if(level.grainTemps.length > 0){
@ -207,12 +214,12 @@ export default function BinTableView(props: Props) {
lvlMoisture = avg(level.airMoistures)
}
if(lvlMoisture){
moistureDisplay = lvlMoisture.toFixed(2) + "%"
moistureDisplay = lvlMoisture.toFixed(2)
}
return (
<React.Fragment>
<TableCell padding="none" className={classes.cellStyle} sx={{backgroundColor: tempColour}}>{tempDisplay}</TableCell>
<TableCell padding="none" className={classes.cellStyle} sx={{backgroundColor: moistureColour}}>{moistureDisplay}</TableCell>
<TableCell className={classes.colouredCellStyle} padding="none" sx={{backgroundColor: tempColour}}>{tempDisplay}</TableCell>
<TableCell className={classes.colouredCellStyle} padding="none" sx={{backgroundColor: moistureColour, borderBottomRightRadius: lastRow ? 8 : 0}}>{moistureDisplay}</TableCell>
</React.Fragment>
)
}
@ -301,10 +308,11 @@ export default function BinTableView(props: Props) {
{expandedTableDialog()}
{/* Level Table */}
<Box display="flex" justifyContent="space-between" alignItems="center">
<Typography>Grain Table</Typography>
<Typography fontWeight={650}>Grain Table</Typography>
<Box display="flex" alignItems="center" gap={1}>
<Button
variant="contained"
sx={{ background: theme.palette.background.default}}
onClick={() => {
setOpenExpandedCables(true)
}}>
@ -324,7 +332,7 @@ export default function BinTableView(props: Props) {
<TableRow ref={headerRow1Ref}>
{/* "Targets" cell — hide on mobile when either field is being edited */}
{!(isMobile && (enterTemp || enterMoisture)) && (
<TableCell className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle} sx={{top: 0, position: "sticky", zIndex: 3 }}>
<TableCell className={isMobile ? classes.mobileTargetCellStyle : classes.targetCellStyle} sx={{top: 0, position: "sticky", zIndex: 4, borderBottom: "none" }}>
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
<GppGood />
{!isMobile &&
@ -339,14 +347,14 @@ export default function BinTableView(props: Props) {
{/* Temperature cell */}
{!(isMobile && enterMoisture) && (
<TableCell
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
className={isMobile ? classes.mobileTargetCellStyle : classes.targetCellStyle}
colSpan={isMobile && enterTemp ? 3 : 1}
sx={{ top: 0, position: "sticky", zIndex: 3 }}
sx={{ top: 0, position: "sticky", zIndex: 4, borderBottom: "none" }}
>
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
<TemperatureIcon heightWidth={isMobile ? 25 : 30} />
{enterTemp ? updateTempEntry() : (
<Typography fontSize={isMobile ? 12 : 16} fontWeight={650}>
<Typography fontSize={isMobile ? 12 : 16}>
{tempThreshDisplay(isMobile)}
</Typography>
)}
@ -365,15 +373,15 @@ export default function BinTableView(props: Props) {
{/* Moisture cell — hide on mobile when temperature is being edited */}
{!(isMobile && enterTemp) && (
<TableCell
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
className={isMobile ? classes.mobileTargetCellStyle : classes.targetCellStyle}
colSpan={isMobile && enterMoisture ? 3 : 1}
sx={{ top: 0, position: "sticky", zIndex: 3 }}
sx={{ top: 0, position: "sticky", zIndex: 4, borderBottom: "none" }}
>
<Box justifyContent={"center"} sx={{ display: "flex", alignItems: "center", gap: 1 }}>
<HumidityIcon height={isMobile ? 25 : 30} width={20} />
{enterMoisture ? updateMoistureEntry() : (
<Typography fontSize={isMobile ? 12 : 16} fontWeight={650} sx={{ marginLeft: "10px" }}>
{bin.targetMoisture()}%
<Typography fontSize={isMobile ? 12 : 16} sx={{ marginLeft: "10px" }}>
{bin.targetMoisture()}
</Typography>
)}
{enterMoisture ? (
@ -390,19 +398,49 @@ export default function BinTableView(props: Props) {
)}
</TableRow>
<TableRow>
<TableCell className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>Level</TableCell>
<TableCell className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>
<TableCell
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
sx={{
top: firstRowHeight,
position: "sticky",
zIndex: 3,
borderBottom: "none",
borderTopLeftRadius: 8,
boxShadow: `-12px -12px 0px 4px ${theme.palette.background.paper}`
}}>
Level
</TableCell>
<TableCell
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
sx={{
top: firstRowHeight,
position: "sticky",
zIndex: 3,
borderBottom: "none"
}}>
{isMobile ? "T" : "Temperature"}{(user.tempUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? " (°F)" : " (°C)")}
</TableCell>
<TableCell className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle} sx={{ top: firstRowHeight, position: "sticky", zIndex: 3 }}>EMC (%)</TableCell>
<TableCell
className={isMobile ? classes.mobileHeaderCellStyle : classes.headerCellStyle}
sx={{
top: firstRowHeight,
position: "sticky",
zIndex: 3,
borderBottom: "none",
borderTopRightRadius: 8,
// fills the transparent corner area with the target row's background colour
boxShadow: `16px -16px 8px 12px ${theme.palette.background.paper}`
}}>
EMC (%)
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{binLevels.map((level, i) => (
<TableRow key={i}>
<TableCell padding="none" className={classes.cellStyle}>{binLevels.length - i}</TableCell>
{levelDisplay(level)}
<TableCell sx={{borderBottomLeftRadius: (i === binLevels.length-1 ? 8 : 0)}} padding="none" className={classes.defaultCellStyle}>{binLevels.length - i}</TableCell>
{levelDisplay(level, i === binLevels.length-1)}
</TableRow>
))}
</TableBody>

4
src/theme/theme.ts
View file

@ -66,8 +66,8 @@ export const getTheme = (mode: 'light' | 'dark') =>
...(mode === 'dark'
? {
background: {
default: '#0A1118', // was #0F1923 — push it darker
paper: '#141F2A', // was #1A2530 — slightly darker, less grey/blue
default: '#070F17', // was #0F1923 — push it darker
paper: '#0D1820', // was #1A2530 — slightly darker, less grey/blue
},
}
: {