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

142
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"]
// return () => clearInterval(interval);
// }, []);
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 [currentIndex, setCurrentIndex] = useState(0);
return () => clearInterval(interval);
}, []);
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} >
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>
{gasType !== "o2" ?
{gas !== "o2" ?
<Typography variant="body2" style={{ color: teal[500]}}>
Gas: {device.status[gasType]?.ppm.toFixed(1)}ppm
Gas: {device.status[gas]?.ppm.toFixed(1)}ppm
</Typography>
:
<Typography variant="body2" style={{ color: blue[500]}}>
Gas: {(device.status[gasType]?.ppm!/10000).toFixed(1)}%
Gas: {(device.status[gas]?.ppm!/10000).toFixed(1)}%
</Typography>
}
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: deepOrange[800]}}>
Volt: {device.status[gasType]?.millivolts.toFixed(1)}mV
Volt: {device.status[gas]?.millivolts.toFixed(1)}mV
</Typography>
</Grid2>
</Grid2>
</Grid2>
</PulseBox>
// </Tooltip>
</Tooltip>
)
}
// }
}
return (

44
src/pages/Devices.tsx
View file

@ -138,6 +138,15 @@ export default function Devices() {
localStorage.setItem('separateDust', separateDust.toString());
}, [separateDust]);
const [groupGas, setGroupGas] = useState(() => {
const stored = localStorage.getItem('groupGas');
return stored !== null ? stored === 'true' : false;
});
useEffect(() => {
localStorage.setItem('groupGas', groupGas.toString());
}, [groupGas]);
const [preferencesAnchor, setPreferencesAnchor] = useState<any>(null)
const [{ as }] = useGlobalState()
@ -320,9 +329,9 @@ export default function Devices() {
return '/' + newSegments.join('/');
}
useEffect(() => {
console.log(devices)
}, [devices])
// useEffect(() => {
// console.log(devices)
// }, [devices])
const toDevice = (device: Device) => {
let url = getGroup() ? insertGroupContext(getGroup().id().toString(), device.id().toString()) : ""
@ -455,12 +464,12 @@ export default function Devices() {
}
if (hasCo) {
columns.push({
title: "CO",
title: groupGas ? "Gas" : "CO",
render: (device: Device) => {
if (device.status.co) {
return (
<Box sx={{ marginLeft: 1 }}>
<StatusGas device={device} gasType={"co"}/>
<StatusGas device={device} gasType={groupGas ? "all" : "co"}/>
</Box>
)
} else {
@ -471,7 +480,7 @@ export default function Devices() {
}
})
}
if (hasCo2) {
if (hasCo2 && !groupGas) {
columns.push({
title: "CO2",
render: (device: Device) => {
@ -489,7 +498,7 @@ export default function Devices() {
}
})
}
if (hasNo2) {
if (hasNo2 && !groupGas) {
columns.push({
title: "NO2",
render: (device: Device) => {
@ -507,7 +516,7 @@ export default function Devices() {
}
})
}
if (hasCo2) {
if (hasO2 && !groupGas) {
columns.push({
title: "O2",
render: (device: Device) => {
@ -625,8 +634,6 @@ export default function Devices() {
)
}
const preferencesMenu = () => {
return (
<Menu
@ -642,10 +649,23 @@ export default function Devices() {
>
<ListItemIcon>
<Checkbox
checked={separateDust}
checked={!separateDust}
/>
</ListItemIcon>
<ListItemText primary={"Seperate Dust"} />
<ListItemText primary={"Group Dust"} />
</MenuItem>
<MenuItem
onClick={() => setGroupGas(!groupGas)}
sx={{ marginLeft: -0.75 }}
dense
>
<ListItemIcon>
<Checkbox
checked={groupGas}
/>
</ListItemIcon>
<ListItemText primary={"Group Gas"} />
</MenuItem>
</Menu>
)