added column for the device state and some wording next to the icond for the pca state so its not as ambiguous

This commit is contained in:
csawatzky 2026-03-10 16:50:59 -06:00
parent 5502d9670e
commit 115e2c5ed4
4 changed files with 61 additions and 9 deletions

4
package-lock.json generated
View file

@ -43,7 +43,7 @@
"mui-tel-input": "^7.0.0", "mui-tel-input": "^7.0.0",
"notistack": "^3.0.1", "notistack": "^3.0.1",
"openweathermap-ts": "^1.2.10", "openweathermap-ts": "^1.2.10",
"protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging", "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#terminal_dashboard_changes",
"query-string": "^9.2.1", "query-string": "^9.2.1",
"react": "^18.3.1", "react": "^18.3.1",
"react-beautiful-dnd": "^13.1.1", "react-beautiful-dnd": "^13.1.1",
@ -11967,7 +11967,7 @@
}, },
"node_modules/protobuf-ts": { "node_modules/protobuf-ts": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#1c00e059fe16126e85c50581786b7510759920d7", "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#bfe8ce6f4ee17a178304e17718a8911b060b2e69",
"dependencies": { "dependencies": {
"protobufjs": "^6.8.8" "protobufjs": "^6.8.8"
} }

View file

@ -55,7 +55,7 @@
"mui-tel-input": "^7.0.0", "mui-tel-input": "^7.0.0",
"notistack": "^3.0.1", "notistack": "^3.0.1",
"openweathermap-ts": "^1.2.10", "openweathermap-ts": "^1.2.10",
"protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#staging", "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#terminal_dashboard_changes",
"query-string": "^9.2.1", "query-string": "^9.2.1",
"react": "^18.3.1", "react": "^18.3.1",
"react-beautiful-dnd": "^13.1.1", "react-beautiful-dnd": "^13.1.1",

View file

@ -1,5 +1,5 @@
import { Gate } from "models/Gate"; import { Gate } from "models/Gate";
import { Box, Card, IconButton, List, ListItem, ListItemText, Theme, Typography } from "@mui/material"; import { Box, Card, IconButton, List, ListItem, ListItemText, Theme, Tooltip, Typography } from "@mui/material";
import React, { useCallback, useEffect, useState } from "react"; import React, { useCallback, useEffect, useState } from "react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useMobile } from "hooks"; import { useMobile } from "hooks";
@ -20,6 +20,7 @@ import { quack } from "protobuf-ts/quack";
import { getTemperatureUnit } from "utils"; import { getTemperatureUnit } from "utils";
import { teal } from "@mui/material/colors"; import { teal } from "@mui/material/colors";
import { react } from "@babel/types"; import { react } from "@babel/types";
import { getDeviceStateHelper } from "pbHelpers/DeviceState";
interface Props { interface Props {
//gates: Gate[]; //gates: Gate[];
@ -42,6 +43,12 @@ const useStyles = makeStyles((theme: Theme) => ({
gateCard: { gateCard: {
marginBottom: 10, marginBottom: 10,
paddingLeft: 15 paddingLeft: 15
},
cellContainer: {
margin: theme.spacing(1),
marginLeft: theme.spacing(2),
display: "flex",
width: theme.spacing(10)
} }
})); }));
@ -100,13 +107,33 @@ export default function GateList(props: Props) {
const displayPCAStatus = (state: pond.PCAState) => { const displayPCAStatus = (state: pond.PCAState) => {
switch(state){ switch(state){
case pond.PCAState.PCA_STATE_IN_BOUNDS: case pond.PCAState.PCA_STATE_IN_BOUNDS:
return <CheckCircleOutline sx={{color: "green"}}/> return (
<Box display="flex">
<CheckCircleOutline sx={{color: "green"}}/>
<Typography paddingLeft={2}>PCA in threshold</Typography>
</Box>
)
case pond.PCAState.PCA_STATE_OUT_BOUNDS: case pond.PCAState.PCA_STATE_OUT_BOUNDS:
return <ErrorOutline sx={{color: "red"}} /> return (
<Box display="flex">
<ErrorOutline sx={{color: "red"}} />
<Typography paddingLeft={2}>PCA out of threshold</Typography>
</Box>
)
case pond.PCAState.PCA_STATE_OFF: case pond.PCAState.PCA_STATE_OFF:
return <DoNotDisturb /> return (
<Box display="flex">
<DoNotDisturb />
<Typography paddingLeft={2}>PCA off</Typography>
</Box>
)
default: default:
return <HelpOutlineOutlined /> return (
<Box display="flex">
<HelpOutlineOutlined />
<Typography paddingLeft={2}>PCA device not found</Typography>
</Box>
)
} }
} }
@ -166,7 +193,7 @@ export default function GateList(props: Props) {
const conditionDisplay = (gate: Gate) => { const conditionDisplay = (gate: Gate) => {
let display = "" let display = ""
if(gate.status.pcaState === pond.PCAState.PCA_STATE_OFF){ if(gate.status.pcaState === pond.PCAState.PCA_STATE_OFF){
display = "Inactive" display = "PCA Off"
} else if (gate.status.pcaState === pond.PCAState.PCA_STATE_UNKNOWN){ } else if (gate.status.pcaState === pond.PCAState.PCA_STATE_UNKNOWN){
display = "--" display = "--"
} else { //the pca is currently active calulate the delta temp (outlet - ambient) } else { //the pca is currently active calulate the delta temp (outlet - ambient)
@ -241,6 +268,19 @@ export default function GateList(props: Props) {
</Box> </Box>
) )
}, },
{
title: "Device State",
// cellStyle: {width: 100000},
// sortKey: "state",
render: gate => {
const deviceStateHelper = getDeviceStateHelper(gate.status.pcaDeviceState);
return (
<Box className={classes.cellContainer}>
<Tooltip title={deviceStateHelper.description}>{deviceStateHelper.icon}</Tooltip>
</Box>
)
}
},
{ {
title: "PCA Status", title: "PCA Status",
render: gate => { render: gate => {
@ -324,6 +364,7 @@ export default function GateList(props: Props) {
} }
const gutter = (gate: Gate) => { const gutter = (gate: Gate) => {
const deviceStateHelper = getDeviceStateHelper(gate.status.pcaDeviceState)
return( return(
<Box> <Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between"> <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
@ -334,6 +375,12 @@ export default function GateList(props: Props) {
<Typography>Delta Temperature:</Typography> <Typography>Delta Temperature:</Typography>
{conditionDisplay(gate)} {conditionDisplay(gate)}
</Box> </Box>
<Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Device State:</Typography>
<Box>
{deviceStateHelper.icon}
</Box>
</Box>
{/* taking these out for now because we are not sure if the customer wants them */} {/* taking these out for now because we are not sure if the customer wants them */}
{/* <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between"> {/* <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
<Typography>Estimated Temp:</Typography> <Typography>Estimated Temp:</Typography>

View file

@ -92,6 +92,11 @@ export function dragerGasDongle(subtype: number = 0): ComponentTypeExtension {
key: quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_LEL, key: quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_LEL,
value: "DRAGER_GAS_DONGLE_SUBTYPE_LEL", value: "DRAGER_GAS_DONGLE_SUBTYPE_LEL",
friendlyName: "Drager Gas LEL" friendlyName: "Drager Gas LEL"
},
{
key: quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_AMMONIA,
value: "DRAGER_GAS_DONGLE_SUBTYPE_AMMONIA",
friendlyName: "Drager Gas Ammonia"
} }
], ],
friendlyName: "Drager Gas", friendlyName: "Drager Gas",