added more of the status for the gate to the gates dashboard, also changed the sensor graphs to have them in a specific order

src/gate/GateList.tsx

@@ -15,6 +15,10 @@ import { CheckCircleOutline, DoNotDisturb, ErrorOutline, HelpOutlineOutlined, Se
 import { cloneDeep } from "lodash";
 import moment from "moment";
 import { pond } from "protobuf-ts/pond";
+import { UnitMeasurement } from "models/UnitMeasurement";
+import { quack } from "protobuf-ts/quack";
+import { getTemperatureUnit } from "utils";
+import { teal } from "@mui/material/colors";
 
 interface Props {
   //gates: Gate[];
@@ -47,6 +51,7 @@ export default function GateList(props: Props) {
   const navigate = useNavigate();
   const isMobile = useMobile();
   const classes = useStyles();
+  const [{user}] = useGlobalState()
   const [gateDialog, setGateDialog] = useState(false);
   const [tablePage, setTablePage] = useState(0)
   const [pageSize, setPageSize] = useState(10)
@@ -104,6 +109,38 @@ export default function GateList(props: Props) {
     }
   }
 
+  const lastOutletReading = (reading: pond.UnitMeasurementsForComponent[]) => {
+    let outletDisplay = "--"
+    let timeSince = "No Reading Yet"
+    let color = ""
+    reading.forEach(um => {
+      let clone = cloneDeep(um)
+      let measurement = UnitMeasurement.create(clone, user)
+      if(measurement.type === quack.MeasurementType.MEASUREMENT_TYPE_TEMPERATURE || measurement.type === quack.MeasurementType.MEASUREMENT_TYPE_PRESSURE){
+        let nodes = measurement.values[measurement.values.length-1].values
+        outletDisplay = nodes[nodes.length-1].toFixed(2) + " " + measurement.unit
+        timeSince = moment(measurement.timestamps[measurement.timestamps.length-1]).fromNow()
+        color = measurement.colour
+      }
+    })
+    return (
+        <Box padding={2}>
+          <Box display="flex" justifyContent="space-between">
+            <Typography>Value:</Typography>
+            <Typography color={color}>{outletDisplay}</Typography>
+          </Box>
+          <Box display="flex" justifyContent="space-between">
+            <Typography>Time:</Typography>
+            <Typography>{timeSince}</Typography>
+          </Box>
+        </Box>
+    )
+  }
+
+  const CtoF = (celsius: number) => {
+    return Math.round((celsius * (9 / 5) + 32) * 100) / 100;
+  };
+
   const desktopCols = (): Column<Gate>[] => {
     return [
       {
@@ -126,68 +163,78 @@ export default function GateList(props: Props) {
           </Box>
         )
       },
-      {
-        title: "Duct Type",
-        render: gate => (
-          <Box padding={2}>
-            <Typography>
-            {gate.settings.ductName}
-            </Typography>
-          </Box>
-        )
-      },
-      {
-        title: "Duct Size(mm)",
-        render: gate => (
-          <Box padding={2}>
-            <Typography>
-            {gate.ductDiameter()}
-            </Typography>
-          </Box>
-        )
-      },
-      {
-        title: "Duct Length(m)",
-        render: gate => (
-          <Box padding={2}>
-            <Typography>
-            {gate.settings.ductLength}
-            </Typography>
-          </Box>
-        )
-      },
-      {
-        title: "PCA Unit",
-        render: gate => (
-          <Box padding={2}>
-            <Typography>
-            {gate.settings.pcaType}
-            </Typography>
-          </Box>
-        )
-      },
       {
         title: "PCA Status",
-        render: gate => (
-          <Box padding={2}>
+        render: gate => {
+        return (<Box padding={2}>
             {displayPCAStatus(gate.status.pcaState)}
+          </Box>)
+        }
+      },
+      {
+        title: "Conditioning",
+        render: gate => {
+          let display = ""
+          if(gate.status.pcaState === pond.PCAState.PCA_STATE_OFF){
+            display = "Inactive"
+          } else if (gate.status.pcaState === pond.PCAState.PCA_STATE_UNKNOWN){
+            display = "--"
+          } else {
+            display = gate.status.heating ? "Heating" : "Cooling"
+          }
+          return (
+          <Box padding={2}>
+            <Typography>
+            {display}
+            </Typography>
           </Box>
-        )
+        )}
+      },
+      {
+        title: "Estimated Temp",
+        render: gate => {
+          let display = "--"
+          if(gate.status.pcaState !== pond.PCAState.PCA_STATE_OFF){
+            //only display it if the final temp is between -4 and 60 C, is a valid number, and is not exactly 0
+            //0 is technically a valid number but the likely hood of the calculation being exactly 0 is negligible
+            if (gate.status.finalTemp < 60 && gate.status.finalTemp > -40 && !isNaN(gate.status.finalTemp) && gate.status.finalTemp !== 0){
+              display = getTemperatureUnit() === pond.TemperatureUnit.TEMPERATURE_UNIT_FAHRENHEIT ? CtoF(gate.status.finalTemp).toFixed(2) + "°F" : gate.status.finalTemp.toFixed(2) + "°C"
+            }
+          }
+          return (
+          <Box padding={2}>
+            <Typography >
+            {display}
+            </Typography>
+          </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>
+              <Typography>Flow:</Typography>
+              <Typography color={teal[500]}>{gate.status.lastMassAirflow.toFixed(2)} kg/s</Typography>
             </Box>
             <Box display="flex" justifyContent="space-between">
-              <Typography>Last Reading:</Typography>
+              <Typography>Read:</Typography>
               <Typography>{gate.status.lastUpdate !== "" ? moment(gate.status.lastUpdate).fromNow() : "No Reading Yet"}</Typography>
             </Box>
           </Box>
         )
+      },
+      {
+        title: "Outlet Temperature",
+        render: gate => (
+          <Box>{lastOutletReading(gate.status.lastTempReading)}</Box>
+        )
+      },
+      {
+        title: "Outlet Pressure",
+        render: gate => (
+          <Box>{lastOutletReading(gate.status.lastPressureReading)}</Box>
+        )
       }
     ]
   }