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

StatusPlenum now pulses with all colors that are found in plenum overlays

Browse source
This commit is contained in:
Carter 2025-03-31 15:38:03 -06:00
parent 6433bed70f
commit c567a83da2
1 changed files with 23 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/common/StatusPlenum.tsx
View file

@ -3,6 +3,8 @@ import { blue, orange } from "@mui/material/colors";
import { makeStyles } from "@mui/styles";
import { Device } from "models";
import PulseBox from "./PulseBox";
import { or } from "utils";
import { useEffect, useState } from "react";
interface Props {
device: Device
@ -14,8 +16,8 @@ const useStyles = makeStyles((theme: Theme) => {
box: {
display: "inline-block",
borderRadius: "6px",
backgroundColor: lightMode ? "rgb(170, 170, 170)" : "rgb(34, 34, 34)",
padding: theme.spacing(0.5),
backgroundColor: lightMode ? "rgb(155, 155, 155)" : "rgb(34, 34, 34)",
padding: theme.spacing(0.75),
marginRight: "auto",
margin: theme.spacing(1),
},
@ -26,18 +28,34 @@ export default function StatusPlenum(props: Props) {
const { device } = props;
const classes = useStyles()
const colors = or(device.status.plenum?.overlays.map(overlay => overlay.color), []);
const messages = or(device.status.plenum?.overlays.map(overlay => overlay.message), []);
const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
const [, setColorIndex] = useState(0)
useEffect(() => {
const interval = setInterval(() => {
setColorIndex(prevIndex => {
const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
setColor(colors[newIndex]); // Use the new index here
return newIndex;
});
}, 2000);
return () => clearInterval(interval);
}, []);
return (
<PulseBox color="blue" className={classes.box} >
<PulseBox color={color} className={classes.box} >
<Grid2 container direction="column" >
<Grid2>
<Typography variant="body2" style={{ color: orange[500]}}>
<Typography variant="body2" style={{ color: orange[400]}}>
{device.status.plenum?.temperature.toFixed(1)}°C
</Typography>
</Grid2>
<Grid2>
<Typography variant="body2" style={{ color: blue[800]}}>
<Typography variant="body2" style={{ color: blue[700]}}>
{device.status.plenum?.humidity.toFixed(1)}%
</Typography>
</Grid2>