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

fixed sen5x status card formatting with timestamp

Browse source
This commit is contained in:
Carter 2026-03-20 12:22:52 -06:00
parent f23a5d559d
commit a901c12ebe
2 changed files with 94 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

57
src/common/StatusDust.tsx
View file

@ -23,7 +23,12 @@ const useStyles = makeStyles((theme: Theme) => {
marginRight: "auto", marginRight: "auto",
margin: theme.spacing(1), margin: theme.spacing(1),
width: theme.spacing(16), width: theme.spacing(16),
height: theme.spacing(11), minHeight: theme.spacing(11),
},
readingsWrapper: {
position: "relative",
width: "100%",
minHeight: theme.spacing(10),
}, },
carouselContainer: { carouselContainer: {
position: 'relative', position: 'relative',
@ -143,33 +148,35 @@ export default function StatusDust(props: Props) {
return ( return (
<Tooltip title={tooltip()}> <Tooltip title={tooltip()}>
<PulseBox color={color} className={classes.box} > <PulseBox color={color} className={classes.box} >
<Grid2 container direction="column" > <Grid2 container direction="column" spacing={0.25}>
<Grid2 container direction="column" <Grid2 className={classes.readingsWrapper}>
className={`${classes.carouselItem} ${classes.active }`} <Grid2 container direction="column"
> className={`${classes.carouselItem} ${classes.active }`}
<Grid2> >
<Typography variant="body2" style={{ color: green[300]}}> <Grid2>
{"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3 <Typography variant="body2" style={{ color: green[300]}}>
</Typography> {"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
</Grid2> </Typography>
<Grid2> </Grid2>
<Typography variant="body2" style={{ color: green[400]}}> <Grid2>
{"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3 <Typography variant="body2" style={{ color: green[400]}}>
</Typography> {"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
</Grid2> </Typography>
<Grid2> </Grid2>
<Typography variant="body2" style={{ color: green[500]}}> <Grid2>
{"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3 <Typography variant="body2" style={{ color: green[500]}}>
</Typography> {"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
</Grid2> </Typography>
<Grid2> </Grid2>
<Typography variant="body2" style={{ color: green[600]}}> <Grid2>
{"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3 <Typography variant="body2" style={{ color: green[600]}}>
</Typography> {"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
</Grid2> </Grid2>
</Grid2> </Grid2>
{showTimestamp && device.status.sen5x?.timestamp && ( {showTimestamp && device.status.sen5x?.timestamp && (
<Grid2> <Grid2 sx={{ pt: 0.25 }}>
<RelativeTimestamp timestamp={device.status.sen5x.timestamp} /> <RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
</Grid2> </Grid2>
)} )}

116
src/common/StatusSen5x.tsx
View file

@ -24,7 +24,13 @@ const useStyles = makeStyles((theme: Theme) => {
marginRight: "auto", marginRight: "auto",
margin: theme.spacing(1), margin: theme.spacing(1),
width: theme.spacing(16), width: theme.spacing(16),
height: theme.spacing(11), minHeight: theme.spacing(11),
},
/** Reserves vertical space so absolute carousel slides do not overlap the timestamp below. */
readingsWrapper: {
position: "relative",
width: "100%",
minHeight: theme.spacing(10),
}, },
carouselContainer: { carouselContainer: {
position: 'relative', position: 'relative',
@ -148,62 +154,64 @@ export default function StatusSen5x(props: Props) {
return ( return (
<Tooltip title={tooltip()}> <Tooltip title={tooltip()}>
<PulseBox color={color} className={classes.box} > <PulseBox color={color} className={classes.box} >
<Grid2 container direction="column" > <Grid2 container direction="column" spacing={0.25}>
<Grid2 container direction="column" <Grid2 className={classes.readingsWrapper}>
className={`${classes.carouselItem} ${ <Grid2 container direction="column"
0 === currentIndex ? classes.active : classes.inactive className={`${classes.carouselItem} ${
}`} 0 === currentIndex ? classes.active : classes.inactive
> }`}
<Grid2> >
<Typography variant="body2" style={{ color: orange[700]}}> <Grid2>
Temp: {device.status.sen5x?.temperature.toFixed(1)}°C <Typography variant="body2" style={{ color: orange[700]}}>
</Typography> Temp: {device.status.sen5x?.temperature.toFixed(1)}°C
</Grid2> </Typography>
<Grid2> </Grid2>
<Typography variant="body2" style={{ color: blue[700]}}> <Grid2>
Humidity: {device.status.sen5x?.humidity.toFixed(1)}% <Typography variant="body2" style={{ color: blue[700]}}>
</Typography> Humidity: {device.status.sen5x?.humidity.toFixed(1)}%
</Grid2> </Typography>
<Grid2> </Grid2>
<Typography variant="body2" style={{ color: blue[300]}}> <Grid2>
Voc: {device.status.sen5x?.voc.toFixed(1)}% <Typography variant="body2" style={{ color: blue[300]}}>
</Typography> Voc: {device.status.sen5x?.voc.toFixed(1)}%
</Grid2> </Typography>
<Grid2> </Grid2>
<Typography variant="body2" style={{ color: blue[400]}}> <Grid2>
Nox: {device.status.sen5x?.nox.toFixed(1)}% <Typography variant="body2" style={{ color: blue[400]}}>
</Typography> Nox: {device.status.sen5x?.nox.toFixed(1)}%
</Typography>
</Grid2>
</Grid2> </Grid2>
{!noDust && <Grid2 container direction="column"
className={`${classes.carouselItem} ${
1 === currentIndex ? classes.active : classes.inactive
}`}
>
<Grid2>
<Typography variant="body2" style={{ color: green[300]}}>
{"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: green[400]}}>
{"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: green[500]}}>
{"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: green[600]}}>
{"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
</Grid2>}
</Grid2> </Grid2>
{!noDust && <Grid2 container direction="column"
className={`${classes.carouselItem} ${
1 === currentIndex ? classes.active : classes.inactive
}`}
>
<Grid2>
<Typography variant="body2" style={{ color: green[300]}}>
{"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: green[400]}}>
{"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: green[500]}}>
{"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: green[600]}}>
{"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
</Typography>
</Grid2>
</Grid2>}
{showTimestamp && device.status.sen5x?.timestamp && ( {showTimestamp && device.status.sen5x?.timestamp && (
<Grid2> <Grid2 sx={{ pt: 0.25 }}>
<RelativeTimestamp timestamp={device.status.sen5x.timestamp} /> <RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
</Grid2> </Grid2>
)} )}