brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Carter 2026-03-13 13:43:05 -06:00
parent 1e2003a541
commit 9e3ce3c00d
2 changed files with 101 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/common/StatusGas.tsx
View file

@ -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) {
}
<Grid2 container direction="column">
<Grid2>
{gas !== "o2" ?
<Typography variant="body2" style={{ color: teal[500]}}>
Gas: {device.status[gas]?.ppm.toFixed(1)}ppm
</Typography>
:
{(gas === "o2" || gas === "lel") ?
<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>