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:
parent
5502d9670e
commit
115e2c5ed4
4 changed files with 61 additions and 9 deletions
4
package-lock.json
generated
4
package-lock.json
generated
|
|
@ -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"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue