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

gas status now rotates through overlays properly, shows the correct readings when grouped

Browse source
This commit is contained in:
Carter 2025-05-23 13:13:37 -06:00
parent 32c2fbdb6e
commit 7d1081ea50
1 changed files with 51 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

69
src/common/StatusGas.tsx
View file

@ -26,6 +26,16 @@ const useStyles = makeStyles((theme: Theme) => {
width: theme.spacing(14), width: theme.spacing(14),
height: theme.spacing(6), height: theme.spacing(6),
}, },
boxTall: {
display: "inline-block",
borderRadius: "6px",
backgroundColor: lightMode ? "rgb(210, 210, 210)" : "rgb(50, 50, 50)",
padding: theme.spacing(0.75),
marginRight: "auto",
margin: theme.spacing(1),
width: theme.spacing(14),
height: theme.spacing(8),
},
carouselContainer: { carouselContainer: {
position: 'relative', position: 'relative',
height: '40px', height: '40px',
@ -55,8 +65,21 @@ 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.o2?.overlays.map(overlay => overlay.color), []); let colors: string[] = []
const messages = or(device.status.o2?.overlays.map(overlay => overlay.message), []); 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), []));
} else {
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 [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
const [, setColorIndex] = useState(0) const [, setColorIndex] = useState(0)
@ -85,8 +108,8 @@ export default function StatusGas(props: Props) {
} }
const interval = setInterval(() => { const interval = setInterval(() => {
if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % 4); if (gasType === "all") setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
setCurrentIndex((prevIndex) => (prevIndex + 1) % 4); else setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
}, 5000); }, 6000);
return () => clearInterval(interval); // Cleanup on unmount return () => clearInterval(interval); // Cleanup on unmount
}, [gasType]); }, [gasType]);
@ -105,19 +128,24 @@ export default function StatusGas(props: Props) {
</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" alignContent={"center"}>
<Box <Grid2 size={{xs: 1}} alignContent={"center"}>
sx={{ <Box
width: 10, // Size of the square sx={{
height: 10, width: 12, // Size of the square
backgroundColor: colors[index], // Passed color prop height: 12,
borderRadius: 1, // Optional: slight rounding, remove for sharp square backgroundColor: colors[index], // Passed color prop
border: "1px solid black", borderRadius: 3, // Optional: slight rounding, remove for sharp square
}} border: "1px solid black",
/> marginBottom: 0.4
<Typography variant="caption" sx={{ marginLeft: 1 }}> }}
{message} />
</Typography> </Grid2>
<Grid2 size={{ xs: 11 }} alignContent={"center"}>
<Typography variant="caption">
{message}
</Typography>
</Grid2>
</Grid2> </Grid2>
) )
})} })}
@ -130,8 +158,13 @@ export default function StatusGas(props: Props) {
// if (gasType !== "all") { // if (gasType !== "all") {
return ( return (
<Tooltip title={tooltip()}> <Tooltip title={tooltip()}>
<PulseBox color={color} className={classes.box} > <PulseBox color={color} className={gasType === "all" ? classes.boxTall : classes.box}>
<Grid2 container direction="column" > <Grid2 container direction="column" >
{ gasType === "all" &&
<Typography variant="body2">
{gas.toUpperCase()}
</Typography>
}
<Grid2 container direction="column"> <Grid2 container direction="column">
<Grid2> <Grid2>
{gas !== "o2" ? {gas !== "o2" ?