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",
margin: theme.spacing(1),
width: theme.spacing(16),
height: theme.spacing(11),
minHeight: theme.spacing(11),
},
readingsWrapper: {
position: "relative",
width: "100%",
minHeight: theme.spacing(10),
},
carouselContainer: {
position: 'relative',
@ -143,33 +148,35 @@ export default function StatusDust(props: Props) {
return (
<Tooltip title={tooltip()}>
<PulseBox color={color} className={classes.box} >
<Grid2 container direction="column" >
<Grid2 container direction="column"
className={`${classes.carouselItem} ${classes.active }`}
>
<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 container direction="column" spacing={0.25}>
<Grid2 className={classes.readingsWrapper}>
<Grid2 container direction="column"
className={`${classes.carouselItem} ${classes.active }`}
>
<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>
{showTimestamp && device.status.sen5x?.timestamp && (
<Grid2>
<Grid2 sx={{ pt: 0.25 }}>
<RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
</Grid2>
)}

116
src/common/StatusSen5x.tsx
View file

@ -24,7 +24,13 @@ const useStyles = makeStyles((theme: Theme) => {
marginRight: "auto",
margin: theme.spacing(1),
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: {
position: 'relative',
@ -148,62 +154,64 @@ export default function StatusSen5x(props: Props) {
return (
<Tooltip title={tooltip()}>
<PulseBox color={color} className={classes.box} >
<Grid2 container direction="column" >
<Grid2 container direction="column"
className={`${classes.carouselItem} ${
0 === currentIndex ? classes.active : classes.inactive
}`}
>
<Grid2>
<Typography variant="body2" style={{ color: orange[700]}}>
Temp: {device.status.sen5x?.temperature.toFixed(1)}°C
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: blue[700]}}>
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 container direction="column" spacing={0.25}>
<Grid2 className={classes.readingsWrapper}>
<Grid2 container direction="column"
className={`${classes.carouselItem} ${
0 === currentIndex ? classes.active : classes.inactive
}`}
>
<Grid2>
<Typography variant="body2" style={{ color: orange[700]}}>
Temp: {device.status.sen5x?.temperature.toFixed(1)}°C
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: blue[700]}}>
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>
{!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>
{!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 && (
<Grid2>
<Grid2 sx={{ pt: 0.25 }}>
<RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
</Grid2>
)}