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

src/gate/GateList.tsx

@@ -1,5 +1,5 @@
 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 { useNavigate } from "react-router-dom";
 import { useMobile } from "hooks";
@@ -20,6 +20,7 @@ import { quack } from "protobuf-ts/quack";
 import { getTemperatureUnit } from "utils";
 import { teal } from "@mui/material/colors";
 import { react } from "@babel/types";
+import { getDeviceStateHelper } from "pbHelpers/DeviceState";
 
 interface Props {
   //gates: Gate[];
@@ -42,6 +43,12 @@ const useStyles = makeStyles((theme: Theme) => ({
     gateCard: {
       marginBottom: 10,
       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) => {
     switch(state){
       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:
-        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:
-        return <DoNotDisturb />
+        return (
+          <Box display="flex">
+            <DoNotDisturb />
+            <Typography paddingLeft={2}>PCA off</Typography>
+          </Box>
+        )
       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) => {
     let display = ""
     if(gate.status.pcaState === pond.PCAState.PCA_STATE_OFF){
-      display = "Inactive"
+      display = "PCA Off"
     } else if (gate.status.pcaState === pond.PCAState.PCA_STATE_UNKNOWN){
       display = "--"
     } else { //the pca is currently active calulate the delta temp (outlet - ambient)
@@ -241,6 +268,19 @@ export default function GateList(props: Props) {
           </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",
         render: gate => {
@@ -324,6 +364,7 @@ export default function GateList(props: Props) {
   }
 
   const gutter = (gate: Gate) => {
+    const deviceStateHelper = getDeviceStateHelper(gate.status.pcaDeviceState)
     return(
       <Box>
         <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
@@ -334,6 +375,12 @@ export default function GateList(props: Props) {
           <Typography>Delta Temperature:</Typography>
           {conditionDisplay(gate)}
         </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 */}
         {/* <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
           <Typography>Estimated Temp:</Typography>

src/pbHelpers/ComponentTypes/DragerGasDongle.ts

@@ -92,6 +92,11 @@ export function dragerGasDongle(subtype: number = 0): ComponentTypeExtension {
         key: quack.DragerGasDongleSubtype.DRAGER_GAS_DONGLE_SUBTYPE_LEL,
         value: "DRAGER_GAS_DONGLE_SUBTYPE_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",