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

fixed navigation bug in devices page; added option to seperate dust from sen5x to different column

Browse source
This commit is contained in:
Carter 2025-05-16 10:53:26 -06:00
parent 4bd66d3d24
commit ebf6bdb71a
5 changed files with 82 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/common/StatusSen5x.tsx
View file

@ -5,8 +5,10 @@ import { Device } from "models";
import PulseBox from "./PulseBox";
import { or } from "utils";
import { useEffect, useState } from "react";
interface Props {
device: Device
noDust?: boolean;
}
const useStyles = makeStyles((theme: Theme) => {
@ -19,8 +21,8 @@ const useStyles = makeStyles((theme: Theme) => {
padding: theme.spacing(0.75),
marginRight: "auto",
margin: theme.spacing(1),
width: "72px",
height: "50px",
width: theme.spacing(16),
height: theme.spacing(11),
},
carouselContainer: {
position: 'relative',
@ -48,7 +50,7 @@ const useStyles = makeStyles((theme: Theme) => {
})
export default function StatusPlenum(props: Props) {
const { device } = props;
const { device, noDust } = props;
const classes = useStyles()
const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
@ -73,8 +75,9 @@ export default function StatusPlenum(props: Props) {
// Auto-cycle through measurements every 3 seconds
useEffect(() => {
if (noDust) return
const interval = setInterval(() => {
setCurrentIndex((prevIndex) => (prevIndex + 1) % 4);
setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
}, 3000); // Adjust timing as needed (3000ms = 3s)
return () => clearInterval(interval); // Cleanup on unmount
@ -125,66 +128,52 @@ export default function StatusPlenum(props: Props) {
>
<Grid2>
<Typography variant="body2" style={{ color: orange[700]}}>
{device.status.sen5x?.temperature.toFixed(1)}°C
Temp: {device.status.sen5x?.temperature.toFixed(1)}°C
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: blue[700]}}>
{device.status.sen5x?.humidity.toFixed(1)}%
Humidity: {device.status.sen5x?.humidity.toFixed(1)}%
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: blue[300]}}>
Voc: {device.status.sen5x?.voc.toFixed(1)}%
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: blue[400]}}>
Nox: {device.status.sen5x?.nox.toFixed(1)}%
</Typography>
</Grid2>
</Grid2>
<Grid2 container direction="column"
{!noDust && <Grid2 container direction="column"
className={`${classes.carouselItem} ${
1 === currentIndex ? classes.active : classes.inactive
}`}
>
<Grid2>
<Typography variant="body2" style={{ color: green[300]}}>
{device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
{"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: green[400]}}>
{device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
{"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
</Grid2>
<Grid2 container direction="column"
className={`${classes.carouselItem} ${
2 === currentIndex ? classes.active : classes.inactive
}`}
>
<Grid2>
<Typography variant="body2" style={{ color: green[500]}}>
{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
{"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: green[600]}}>
{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
{"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
</Grid2>
<Grid2 container direction="column"
className={`${classes.carouselItem} ${
3 === currentIndex ? classes.active : classes.inactive
}`}
>
<Grid2>
<Typography variant="body2" style={{ color: blue[300]}}>
V: {device.status.sen5x?.voc.toFixed(1)}%
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: blue[400]}}>
N: {device.status.sen5x?.nox.toFixed(1)}%
</Typography>
</Grid2>
</Grid2>
</Grid2>}
</Grid2>
</PulseBox>
</Tooltip>