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

53
src/common/StatusGas.tsx
View file

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