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

StatusGas now displays overlays and can be grouped

Browse source
This commit is contained in:
Carter 2025-05-23 12:13:10 -06:00
parent 6dc181b24c
commit 32c2fbdb6e
2 changed files with 120 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

172
src/common/StatusGas.tsx
View file

@ -5,6 +5,7 @@ import { Device } from "models";
import PulseBox from "./PulseBox";
import { or } from "utils";
import { useEffect, useState } from "react";
import { pond } from "protobuf-ts/pond";
interface Props {
device: Device
@ -54,104 +55,107 @@ export default function StatusGas(props: Props) {
const { device, gasType } = props;
const classes = useStyles()
// console.log(noDust)
// const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
// const messages = or(device.status.sen5x?.overlays.map(overlay => overlay.message), []);
const colors = or(device.status.o2?.overlays.map(overlay => overlay.color), []);
const messages = or(device.status.o2?.overlays.map(overlay => overlay.message), []);
// const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
// const [, setColorIndex] = useState(0)
const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
const [, setColorIndex] = useState(0)
// useEffect(() => {
// const interval = setInterval(() => {
// setColorIndex(prevIndex => {
// const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
// setColor(colors[newIndex]); // Use the new index here
// return newIndex;
// });
// }, 7500);
const gasTypes: ("o2" | "no2" | "co2" | "co")[] = ["o2", "no2", "co2", "co"]
useEffect(() => {
const interval = setInterval(() => {
setColorIndex(prevIndex => {
const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
setColor(colors[newIndex]); // Use the new index here
return newIndex;
});
}, 7500);
// return () => clearInterval(interval);
// }, []);
return () => clearInterval(interval);
}, []);
// const [currentIndex, setCurrentIndex] = useState(0);
const [currentIndex, setCurrentIndex] = useState(0);
// Auto-cycle through measurements every 5 seconds
// useEffect(() => {
// if (noDust) {
// setCurrentIndex(0)
// return
// }
// const interval = setInterval(() => {
// if (!noDust) setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
// setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
// }, 5000);
useEffect(() => {
if (gasType !== "all") {
setCurrentIndex(0)
return
}
const interval = setInterval(() => {
if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
}, 5000);
// return () => clearInterval(interval); // Cleanup on unmount
// }, [noDust]);
return () => clearInterval(interval); // Cleanup on unmount
}, [gasType]);
// const tooltip = () => {
// if (messages.length === 0) return null
// if (messages.length < 2) return (
// messages[0]
// )
// return (
// <Grid2 container direction={"column"}>
// <Grid2 container direction="row">
// <Typography fontWeight={"bold"} variant="caption">
// Overlay Messages
// </Typography>
// </Grid2>
// {messages.map((message, index) => {
// return (
// <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
// <Box
// sx={{
// width: 10, // Size of the square
// height: 10,
// backgroundColor: colors[index], // Passed color prop
// borderRadius: 1, // Optional: slight rounding, remove for sharp square
// border: "1px solid black",
// }}
// />
// <Typography variant="caption" sx={{ marginLeft: 1 }}>
// {message}
// </Typography>
// </Grid2>
// )
// })}
// </Grid2>
// )
// }
const tooltip = () => {
if (messages.length === 0) return null
if (messages.length < 2) return (
messages[0]
)
return (
<Grid2 container direction={"column"}>
<Grid2 container direction="row">
<Typography fontWeight={"bold"} variant="caption">
Overlay Messages
</Typography>
</Grid2>
{messages.map((message, index) => {
return (
<Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
<Box
sx={{
width: 10, // Size of the square
height: 10,
backgroundColor: colors[index], // Passed color prop
borderRadius: 1, // Optional: slight rounding, remove for sharp square
border: "1px solid black",
}}
/>
<Typography variant="caption" sx={{ marginLeft: 1 }}>
{message}
</Typography>
</Grid2>
)
})}
</Grid2>
)
}
const gasDisplay = () => {
if (gasType !== "all") {
return(
// <Tooltip title={tooltip()}>
<PulseBox color="" className={classes.box} >
<Grid2 container direction="column" >
<Grid2 container direction="column">
<Grid2>
{gasType !== "o2" ?
<Typography variant="body2" style={{ color: teal[500]}}>
Gas: {device.status[gasType]?.ppm.toFixed(1)}ppm
</Typography>
:
<Typography variant="body2" style={{ color: blue[500]}}>
Gas: {(device.status[gasType]?.ppm!/10000).toFixed(1)}%
</Typography>
}
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: deepOrange[800]}}>
Volt: {device.status[gasType]?.millivolts.toFixed(1)}mV
const gas = gasType === "all" ? gasTypes[currentIndex] : gasType
// if (gasType !== "all") {
return (
<Tooltip title={tooltip()}>
<PulseBox color={color} className={classes.box} >
<Grid2 container direction="column" >
<Grid2 container direction="column">
<Grid2>
{gas !== "o2" ?
<Typography variant="body2" style={{ color: teal[500]}}>
Gas: {device.status[gas]?.ppm.toFixed(1)}ppm
</Typography>
</Grid2>
:
<Typography variant="body2" style={{ color: blue[500]}}>
Gas: {(device.status[gas]?.ppm!/10000).toFixed(1)}%
</Typography>
}
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: deepOrange[800]}}>
Volt: {device.status[gas]?.millivolts.toFixed(1)}mV
</Typography>
</Grid2>
</Grid2>
</PulseBox>
// </Tooltip>
)
</Grid2>
</PulseBox>
</Tooltip>
)
}
// }
}
return (