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

44
src/pages/Devices.tsx
View file

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