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

made a new function for the mobile inventory section, since it may differ drastically fomr the desktop rather than just re-size some stuff

Browse source
This commit is contained in:
csawatzky 2026-06-03 16:23:01 -06:00
parent 160d2a9d31
commit ac26455110
1 changed files with 118 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -111,7 +111,123 @@ export default function BinSummary(props: Props){
return bin.grainInventory(user)
}
const inventorySummary = () => {
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)",
},
}}
>
<Spa sx={{ color: "#4caf50", fontSize: 18 }} />
<Typography variant="body1" sx={{fontSize: 12}}>{bin.grainName()}</Typography>
</Box>
</Box>
{/* Bin Fill */}
<Box sx={{ flexGrow: 1 }}>
<Typography variant="caption" sx={{ color: grey[500] }}>
Bin Fill
</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 }}>
{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,
color: "#4caf50",
"& .MuiSlider-thumb": { width: 16, height: 16 },
"& .MuiSlider-rail": { backgroundColor: "rgba(255,255,255,0.1)" },
}}
/>
) : (
<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,
},
}}
/>
)}
<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 }}>
<Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{ padding: 2 }}>
@ -270,7 +386,7 @@ export default function BinSummary(props: Props){
}}
/>
<ChangeGrainDialog bin={bin} open={openGrainDialog} closeDialog={()=>setOpenGrainDialog(false)} permissions={permissions} updateBin={updateBinCallback}/>
{inventorySummary()}
{isMobile ? inventorySummaryMobile() : inventorySummaryDesktop()}
<Grid2 container spacing={2}>
<Grid2 size={isMobile ? 12 : 7}>
<Card raised sx={{height: 600}}>