added carousel display for sen5x status

src/pages/Devices.tsx

@@ -23,6 +23,7 @@ import { describePower } from "pbHelpers/Power";
 import { Tag as TagUI } from "common/Tag";
 import moment from "moment";
 import StatusPlenum from "common/StatusPlenum";
+import StatusSen5x from "common/StatusSen5x";
 
 const useStyles = makeStyles((theme: Theme) => {
   return ({
@@ -91,6 +92,7 @@ export default function Devices() {
   const [devices, setDevices] = useState<Device[]>([])
   const [isProvisionDialogOpen, setIsProvisionDialogOpen] = useState<boolean>(false);
   const [hasPlenums, setHasPlenums] = useState(false)
+  const [hasSen5x, setHasSen5x] = useState(false)
 
   const [groupsLoading, setGroupsLoading] = useState(false)
   const [groups, setGroups] = useState<Group[]>([]);
@@ -244,6 +246,9 @@ export default function Devices() {
         if (device.status?.plenum?.temperature) {
           setHasPlenums(true)
         }
+        if (device.status?.sen5x?.temperature) {
+          setHasSen5x(true)
+        }
         newDevices.push(Device.create(device))
       })
       setDevices(newDevices)
@@ -365,6 +370,24 @@ export default function Devices() {
         }
       })
     }
+    if (hasSen5x) {
+      columns.push({
+        title: "Sen5X",
+        render: (device: Device) => {
+          if (device.status.sen5x?.temperature) {
+            return (
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusSen5x device={device} />
+              </Box>
+            )
+          } else {
+            return (
+              <></>
+            )
+          }
+        }
+      })
+    }
     return columns
   }