From 9e3ce3c00dd4c55185ee12f3ce958c63de82bd4f Mon Sep 17 00:00:00 2001 From: Carter Date: Fri, 13 Mar 2026 13:43:05 -0600 Subject: [PATCH] added h2s lel and o2 to the device status readings on the devices dashboard --- src/common/StatusGas.tsx | 45 +++++++++++---------- src/pages/Devices.tsx | 86 +++++++++++++++++++++++++++++++++++----- 2 files changed, 101 insertions(+), 30 deletions(-) diff --git a/src/common/StatusGas.tsx b/src/common/StatusGas.tsx index 4571278..b220d96 100644 --- a/src/common/StatusGas.tsx +++ b/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.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.co?.overlays.map(overlay => overlay.color), [])); - messages = or(device.status.o2?.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), [])); + 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.no2?.overlays?.map(overlay => overlay.color), [])); + colors.push(...or(device.status.co?.overlays?.map(overlay => overlay.color), [])); + colors.push(...or(device.status.lel?.overlays?.map(overlay => overlay.color), [])); + colors.push(...or(device.status.h2s?.overlays?.map(overlay => overlay.color), [])); + messages = or(device.status.o2?.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), []); - messages = or(device.status[gasType]?.overlays.map(overlay => overlay.message), []); + colors = or(device.status[gasType]?.overlays?.map(overlay => overlay.color), []); + 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); - else setCurrentIndex((prevIndex) => (prevIndex + 1) % 4); + if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % gasTypes.length); }, 6000); return () => clearInterval(interval); // Cleanup on unmount @@ -189,14 +192,14 @@ export default function StatusGas(props: Props) { } - {gas !== "o2" ? - - Gas: {device.status[gas]?.ppm.toFixed(1)}ppm - - : + {(gas === "o2" || gas === "lel") ? Gas: {(device.status[gas]?.ppm!/10000).toFixed(1)}% + : + + Gas: {device.status[gas]?.ppm.toFixed(1)}ppm + } diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx index d166134..08fb013 100644 --- a/src/pages/Devices.tsx +++ b/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([]); @@ -296,16 +298,34 @@ 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 oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000); - if (compareTimestamps(device.status.o2?.timestamp, oneDayAgo.toISOString()) > 0) { - return true - } - } else { - return false + const now = new Date(); + const oneDayAgo = new Date(now.getTime() - 24 * 60 * 60 * 1000); + if (compareTimestamps(device.status.o2?.timestamp, oneDayAgo.toISOString()) > 0) { + return true } - } + } + 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 ( + + + + ) + } else { + return ( + <> + ) + } + } + }) + } + if (hasH2S && !groupGas) { + columns.push({ + title: "H2S", + render: (device: Device) => { + if (device.status.h2s) { + return ( + + + + ) + } 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 => {