updated the mobile view and moved the displays into their own function rather than in the columns so they can be used for the mobile views

src/gate/GateList.tsx

@@ -19,6 +19,7 @@ import { UnitMeasurement } from "models/UnitMeasurement";
 import { quack } from "protobuf-ts/quack";
 import { getTemperatureUnit } from "utils";
 import { teal } from "@mui/material/colors";
+import { react } from "@babel/types";
 
 interface Props {
   //gates: Gate[];
@@ -123,6 +124,15 @@ export default function GateList(props: Props) {
         color = measurement.colour
       }
     })
+
+    if(isMobile){
+      return (
+        <React.Fragment>
+            <Typography color={color}>{outletDisplay}</Typography>
+            <Typography>{timeSince}</Typography>
+        </React.Fragment>
+    )
+    }
     return (
         <Box padding={2}>
           <Box display="flex" justifyContent="space-between">
@@ -137,6 +147,38 @@ export default function GateList(props: Props) {
     )
   }
 
+  const tempDisplay = (gate: 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 (
+      <Typography>
+        {display}
+      </Typography>
+    )
+  }
+
+  const conditionDisplay = (gate: 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 (
+      <Typography>
+      {display}
+      </Typography>
+    )
+  }
+
   const CtoF = (celsius: number) => {
     return Math.round((celsius * (9 / 5) + 32) * 100) / 100;
   };
@@ -174,40 +216,21 @@ export default function GateList(props: Props) {
       {
         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>
+            {conditionDisplay(gate)}
-            {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 >
+              {tempDisplay(gate)}
-            {display}
-            </Typography>
             </Box>
-        )}
+          )
+        }
       },
       {
         title: "Last FLow",
@@ -271,28 +294,25 @@ export default function GateList(props: Props) {
           <Typography>{terminalMap.get(gate.terminal()) ?? "None"}</Typography>
         </Box>
         <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
-          <Typography>Duct Type:</Typography>
+          <Typography>Conditioning:</Typography>
-          <Typography>{gate.ductName() !== "" ? gate.ductName() : "None"}</Typography>
+          {conditionDisplay(gate)}
         </Box>
         <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
-          <Typography>Duct Size(mm):</Typography>
+          <Typography>Estimated Temp:</Typography>
-          <Typography>{gate.ductDiameter()}</Typography>
+          {tempDisplay(gate)}
-        </Box>
-        <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
-          <Typography>DuctLength(m):</Typography>
-          <Typography>{gate.ductLength()}</Typography>
-        </Box>
-        <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
-          <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>
+          <Typography color={teal[500]}>{gate.status.lastMassAirflow.toFixed(2)} kg/s</Typography>
+          <Typography>{gate.status.lastUpdate !== "" ? moment(gate.status.lastUpdate).fromNow() : "No PCA reading yet"}</Typography>
         </Box>
         <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
-          <Typography>Last Reading:</Typography>
+          <Typography>Outlet Temp:</Typography>
-          <Typography>{gate.status.lastUpdate !== "" ? moment(gate.status.lastUpdate).fromNow() : "No PCA reading yet"}</Typography>
+          {lastOutletReading(gate.status.lastTempReading)}
+        </Box>
+          <Box padding={2} display="flex" flexDirection="row" justifyContent="space-between">
+          <Typography>Outlet Pressure:</Typography>
+          {lastOutletReading(gate.status.lastPressureReading)}
         </Box>
       </Box>
       // <Typography variant="body2" color="textSecondary" sx={{ padding: 1 }}>