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

displaying status information on the gates dashboard now

Browse source
This commit is contained in:
csawatzky 2026-01-15 14:32:39 -06:00
parent f06bcf9535
commit 65e70265fb
6 changed files with 66 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/gate/GateList.tsx
View file

@ -11,8 +11,10 @@ import ResponsiveTable, { Column } from "common/ResponsiveTable";
import AddGateFab from "./AddGateFab";
import GateSettings from "./GateSettings";
import { useGateAPI, useGlobalState } from "providers";
import { Settings } from "@mui/icons-material";
import { CheckCircleOutline, DoNotDisturb, ErrorOutline, RemoveCircleOutline, Settings } from "@mui/icons-material";
import { cloneDeep } from "lodash";
import moment from "moment";
import { pond } from "protobuf-ts/pond";
interface Props {
//gates: Gate[];
@ -89,6 +91,19 @@ export default function GateList(props: Props) {
setPageSize(event.target.value);
};
const displayPCAStatus = (state: pond.PCAState) => {
switch(state){
case pond.PCAState.PCA_STATE_IN_BOUNDS:
return <CheckCircleOutline sx={{color: "green"}}/>
case pond.PCAState.PCA_STATE_OUT_BOUNDS:
return <ErrorOutline sx={{color: "red"}} />
case pond.PCAState.PCA_STATE_OFF:
return <RemoveCircleOutline />
default:
return <DoNotDisturb />
}
}
const desktopCols = (): Column<Gate>[] => {
return [
{
@ -151,6 +166,29 @@ export default function GateList(props: Props) {
</Box>
)
},
{
title: "PCA Status",
render: gate => (
<Box padding={2}>
{displayPCAStatus(gate.status.pcaState)}
</Box>
)
},
{
title: "Last FLow",
render: gate => (
<Box padding={2}>
<Box display="flex" justifyContent="space-between">
<Typography>Last Flow:</Typography>
<Typography>{gate.status.lastMassAirflow.toFixed(2)}</Typography>
</Box>
<Box display="flex" justifyContent="space-between">
<Typography>Last Reading:</Typography>
<Typography>{gate.status.lastUpdate !== "" ? moment(gate.status.lastUpdate).fromNow() : "No Reading Yet"}</Typography>
</Box>
</Box>
)
}
]
}
const mobileCols = (): Column<Gate>[] => {
@ -162,13 +200,16 @@ export default function GateList(props: Props) {
<Typography margin="auto" marginLeft={0} fontWeight={650} fontSize={20}>
{gate.name}
</Typography>
<IconButton onClick={(event) => {
event.stopPropagation()
setSelectedGate(gate)
setGateDialog(true)
}}>
<Settings />
</IconButton>
<Box display="flex" alignItems="center" gap={1}>
{displayPCAStatus(gate.status.pcaState)}
<IconButton onClick={(event) => {
event.stopPropagation()
setSelectedGate(gate)
setGateDialog(true)
}}>
<Settings />
</IconButton>
</Box>
</Box>
)
}
@ -198,6 +239,14 @@ export default function GateList(props: Props) {
<Typography>PCA Unit:</Typography>
<Typography>{gate.settings.pcaType !== "" ? gate.settings.pcaType : "None"}</Typography>
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Last Flow:</Typography>
<Typography>{gate.status.lastMassAirflow}</Typography>
</Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Last Reading:</Typography>
<Typography>{gate.status.lastUpdate !== "" ? moment(gate.status.lastUpdate).fromNow() : "No PCA reading yet"}</Typography>
</Box>
</Box>
// <Typography variant="body2" color="textSecondary" sx={{ padding: 1 }}>