added h2s lel and o2 to the device status readings on the devices dashboard

src/common/StatusGas.tsx

@@ -9,7 +9,7 @@ import { useEffect, useState } from "react";
 
 interface Props {
   device: Device;
-  gasType: "co2" | "co" | "no2" | "o2" | "all";
+  gasType: "co2" | "co" | "no2" | "o2" | "lel" | "h2s" | "all";
   showTimestamp?: boolean;
 }
 
@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme: Theme) => {
       marginRight: "auto",
       margin: theme.spacing(1),
       width: theme.spacing(14),
-      height: theme.spacing(6),
+      minHeight: theme.spacing(6),
     },
     boxTall: {
       display: "inline-block",
@@ -34,7 +34,7 @@ const useStyles = makeStyles((theme: Theme) => {
       marginRight: "auto",
       margin: theme.spacing(1),
       width: theme.spacing(14),
-      height: theme.spacing(8.5),
+      minHeight: theme.spacing(8.5),
     },
     carouselContainer: {
       position: 'relative',
@@ -68,23 +68,27 @@ export default function StatusGas(props: Props) {
   let colors: string[] = []
   let messages: string[] = []
   if (gasType === "all") {
-    colors = or(device.status.o2?.overlays.map(overlay => overlay.color), []);
+    colors = or(device.status.o2?.overlays?.map(overlay => overlay.color), []);
-    colors.push(...or(device.status.co2?.overlays.map(overlay => overlay.color), []));
+    colors.push(...or(device.status.co2?.overlays?.map(overlay => overlay.color), []));
-    colors.push(...or(device.status.no2?.overlays.map(overlay => overlay.color), []));
+    colors.push(...or(device.status.no2?.overlays?.map(overlay => overlay.color), []));
-    colors.push(...or(device.status.co?.overlays.map(overlay => overlay.color), []));
+    colors.push(...or(device.status.co?.overlays?.map(overlay => overlay.color), []));
-    messages = or(device.status.o2?.overlays.map(overlay => overlay.message), []);
+    colors.push(...or(device.status.lel?.overlays?.map(overlay => overlay.color), []));
-    messages.push(...or(device.status.co2?.overlays.map(overlay => overlay.message), []));
+    colors.push(...or(device.status.h2s?.overlays?.map(overlay => overlay.color), []));
-    messages.push(...or(device.status.no2?.overlays.map(overlay => overlay.message), []));
+    messages = or(device.status.o2?.overlays?.map(overlay => overlay.message), []);
-    messages.push(...or(device.status.co?.overlays.map(overlay => overlay.message), []));
+    messages.push(...or(device.status.co2?.overlays?.map(overlay => overlay.message), []));
+    messages.push(...or(device.status.no2?.overlays?.map(overlay => overlay.message), []));
+    messages.push(...or(device.status.co?.overlays?.map(overlay => overlay.message), []));
+    messages.push(...or(device.status.lel?.overlays?.map(overlay => overlay.message), []));
+    messages.push(...or(device.status.h2s?.overlays?.map(overlay => overlay.message), []));
   } else {
-    colors = or(device.status[gasType]?.overlays.map(overlay => overlay.color), []);
+    colors = or(device.status[gasType]?.overlays?.map(overlay => overlay.color), []);
-    messages = or(device.status[gasType]?.overlays.map(overlay => overlay.message), []);
+    messages = or(device.status[gasType]?.overlays?.map(overlay => overlay.message), []);
   }
 
   const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
   const [, setColorIndex] = useState(0)
 
-  const gasTypes: ("o2" | "no2" | "co2" | "co")[] = ["o2", "no2", "co2", "co"]
+  const gasTypes: ("o2" | "no2" | "co2" | "co" | "lel" | "h2s")[] = ["o2", "no2", "co2", "co", "lel", "h2s"]
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -107,8 +111,7 @@ export default function StatusGas(props: Props) {
       return
     }
     const interval = setInterval(() => {
-      if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
+      if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % gasTypes.length);
-      else setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
     }, 6000); 
 
     return () => clearInterval(interval); // Cleanup on unmount
@@ -189,14 +192,14 @@ export default function StatusGas(props: Props) {
             }
             <Grid2 container direction="column">
               <Grid2>
-                {gas !== "o2" ? 
+                {(gas === "o2" || gas === "lel") ? 
-                  <Typography variant="body2" style={{ color: teal[500]}}>
-                    Gas: {device.status[gas]?.ppm.toFixed(1)}ppm
-                  </Typography>
-                :
                   <Typography variant="body2" style={{ color: blue[500]}}>
                     Gas: {(device.status[gas]?.ppm!/10000).toFixed(1)}%
                   </Typography>
+                :
+                  <Typography variant="body2" style={{ color: teal[500]}}>
+                    Gas: {device.status[gas]?.ppm.toFixed(1)}ppm
+                  </Typography>
                 }
               </Grid2>
               <Grid2>

src/pages/Devices.tsx

@@ -143,6 +143,8 @@ export default function Devices() {
   const [hasCo2, setHasCo2] = useState(false)
   const [hasNo2, setHasNo2] = useState(false)
   const [hasO2, setHasO2] = useState(false)
+  const [hasLel, setHasLel] = useState(false)
+  const [hasH2S, setHasH2S] = useState(false)
 
   const [groupsLoading, setGroupsLoading] = useState(false)
   const [groups, setGroups] = useState<Group[]>([]);
@@ -296,14 +298,32 @@ export default function Devices() {
 
   const doesDeviceHaveO2 = (device: pond.Device) => {
     if (device.status?.o2?.ppm && device.status?.o2?.timestamp) {
-      if (device.status.sen5x?.timestamp) {
+      const now = new Date();
-        const now = new Date();
+      const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
-        const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+      if (compareTimestamps(device.status.o2?.timestamp, oneDayAgo.toISOString()) > 0) {
-        if (compareTimestamps(device.status.o2?.timestamp, oneDayAgo.toISOString()) > 0) {
+        return true
-          return true
+      }
-        } 
+    }
-      } else {
+    return false
-        return false
+  }
+
+  const doesDeviceHaveLel = (device: pond.Device) => {
+    if (device.status?.lel?.ppm && device.status?.lel?.timestamp) {
+      const now = new Date();
+      const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+      if (compareTimestamps(device.status.lel?.timestamp, oneDayAgo.toISOString()) > 0) {
+        return true
+      }
+    }
+    return false
+  }
+
+  const doesDeviceHaveH2S = (device: pond.Device) => {
+    if (device.status?.h2s?.ppm && device.status?.h2s?.timestamp) {
+      const now = new Date();
+      const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+      if (compareTimestamps(device.status.h2s?.timestamp, oneDayAgo.toISOString()) > 0) {
+        return true
       }
     }
     return false
@@ -486,6 +506,8 @@ export default function Devices() {
       let hasCo = false
       let hasCo2 = false
       let hasNo2 = false
+      let hasLel = false
+      let hasH2S = false
       resp.data.devices.forEach(device => {
         setHasPlenums(doesDeviceHavePlenum(device))
         if (doesDeviceHavePlenum(device)) hasPlenum = true
@@ -495,6 +517,8 @@ export default function Devices() {
         if (doesDeviceHaveCo(device)) hasCo = true
         if (doesDeviceHaveCo2(device)) hasCo2 = true
         if (doesDeviceHaveNo2(device)) hasNo2 = true
+        if (doesDeviceHaveLel(device)) hasLel = true
+        if (doesDeviceHaveH2S(device)) hasH2S = true
         newDevices.push(Device.create(device))
       })
       setHasPlenums(hasPlenum)
@@ -503,6 +527,8 @@ export default function Devices() {
       setHasCo(hasCo)
       setHasCo2(hasCo2)
       setHasNo2(hasNo2)
+      setHasLel(hasLel)
+      setHasH2S(hasH2S)
       setDevices(newDevices)
       setTotal(resp.data.total)
     }).finally(() => {
@@ -774,6 +800,42 @@ export default function Devices() {
         }
       })
     }
+    if (hasLel && !groupGas) {
+      columns.push({
+        title: "LEL",
+        render: (device: Device) => {
+          if (device.status.lel) {
+            return (
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusGas device={device} gasType={"lel"} showTimestamp={showTimestamp} />
+              </Box>
+            )
+          } else {
+            return (
+              <></>
+            )
+          }
+        }
+      })
+    }
+    if (hasH2S && !groupGas) {
+      columns.push({
+        title: "H2S",
+        render: (device: Device) => {
+          if (device.status.h2s) {
+            return (
+              <Box sx={{ marginLeft: 1 }}>
+                <StatusGas device={device} gasType={"h2s"} showTimestamp={showTimestamp} />
+              </Box>
+            )
+          } else {
+            return (
+              <></>
+            )
+          }
+        }
+      })
+    }
     return columns
   }
 
@@ -1000,6 +1062,8 @@ export default function Devices() {
             let hasCo = false
             let hasCo2 = false
             let hasNo2 = false
+            let hasLel = false
+            let hasH2S = false
             resp.data.devices.forEach(device => {
               setHasPlenums(doesDeviceHavePlenum(device))
               if (doesDeviceHavePlenum(device)) hasPlenum = true
@@ -1009,6 +1073,8 @@ export default function Devices() {
               if (doesDeviceHaveCo(device)) hasCo = true
               if (doesDeviceHaveCo2(device)) hasCo2 = true
               if (doesDeviceHaveNo2(device)) hasNo2 = true
+              if (doesDeviceHaveLel(device)) hasLel = true
+              if (doesDeviceHaveH2S(device)) hasH2S = true
               newDevices.push(Device.create(device))
             })
             setHasPlenums(hasPlenum)
@@ -1017,6 +1083,8 @@ export default function Devices() {
             setHasCo(hasCo)
             setHasCo2(hasCo2)
             setHasNo2(hasNo2)
+            setHasLel(hasLel)
+            setHasH2S(hasH2S)
             setDevices(currentRows.concat(newDevices))
           }).catch(_err => {