status card for gas readings

src/common/StatusGas.tsx

@@ -0,0 +1,162 @@
+import { Box, Grid2, Theme, Tooltip, Typography } from "@mui/material";
+import { blue, deepOrange, green, grey, orange, teal } 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
+  // noDust?: boolean;
+  gasType: "co2" | "co" | "no2" | "o2" | "all"
+}
+
+const useStyles = makeStyles((theme: Theme) => {
+  const lightMode = theme.palette?.mode === "light";
+  return ({
+    box: {
+      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(6),
+    },
+    carouselContainer: {
+      position: 'relative',
+      height: '40px',
+      overflow: 'hidden',
+      textAlign: "center",
+    },
+    carouselItem: {
+      opacity: 0,
+      transform: 'translateX(100%)',
+      transition: 'opacity 0.5s ease, transform 0.5s ease',
+      position: 'absolute',
+      width: '100%',
+      overflow: "hidden",
+      // height: '100%',
+    },
+    active: {
+      opacity: 1,
+      transform: 'translateX(0)',
+    },
+    inactive: {
+      transform: 'translateX(-100%)',
+    },
+  })
+})
+
+export default function StatusGas(props: Props) {
+  const { device, gasType } = props;
+  const classes = useStyles()
+  // console.log(noDust)
+  // const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
+  // const messages = or(device.status.sen5x?.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;
+  //     });
+  //   }, 7500);
+    
+  //   return () => clearInterval(interval);
+  // }, []);
+
+  // const [currentIndex, setCurrentIndex] = useState(0);
+
+  // Auto-cycle through measurements every 5 seconds
+  // useEffect(() => {
+    // if (noDust) {
+    //   setCurrentIndex(0)
+    //   return
+    // }
+    // const interval = setInterval(() => {
+      // if (!noDust) setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
+      // setCurrentIndex((prevIndex) => (prevIndex + 1) % 2);
+    // }, 5000); 
+
+    // return () => clearInterval(interval); // Cleanup on unmount
+  // }, [noDust]);
+
+  // const tooltip = () => {
+  //   if (messages.length === 0) return null
+  //   if (messages.length < 2) return (
+  //     messages[0]
+  //   )
+  //   return (
+  //     <Grid2 container direction={"column"}>
+  //       <Grid2 container direction="row">
+  //         <Typography fontWeight={"bold"} variant="caption">
+  //           Overlay Messages
+  //         </Typography>
+  //       </Grid2>
+  //       {messages.map((message, index) => {
+  //         return (
+  //           <Grid2 key={"tooltip-overly-message-" + message} container direction="row" alignItems={"center"}>
+  //             <Box
+  //               sx={{
+  //                 width: 10, // Size of the square
+  //                 height: 10,
+  //                 backgroundColor: colors[index], // Passed color prop
+  //                 borderRadius: 1, // Optional: slight rounding, remove for sharp square
+  //                 border: "1px solid black",
+  //               }}
+  //             />
+  //             <Typography variant="caption" sx={{ marginLeft: 1 }}>
+  //               {message}
+  //             </Typography>
+  //           </Grid2>
+  //         )
+  //       })}
+  //     </Grid2>
+  //   )
+  // }
+
+  const gasDisplay = () => {
+    if (gasType !== "all") {
+      return(
+        // <Tooltip title={tooltip()}>
+          <PulseBox color="" className={classes.box} >
+            <Grid2 container direction="column" >
+              <Grid2 container direction="column">
+                <Grid2>
+                  {gasType !== "o2" ? 
+                    <Typography variant="body2" style={{ color: teal[500]}}>
+                      Gas: {device.status[gasType]?.ppm.toFixed(1)}ppm
+                    </Typography>
+                  :
+                    <Typography variant="body2" style={{ color: blue[500]}}>
+                      Gas: {(device.status[gasType]?.ppm!/10000).toFixed(1)}%
+                    </Typography>
+                  }
+                </Grid2>
+                <Grid2>
+                  <Typography variant="body2" style={{ color: deepOrange[800]}}>
+                    Volt: {device.status[gasType]?.millivolts.toFixed(1)}mV
+                  </Typography>
+                </Grid2>
+              </Grid2>
+            </Grid2>
+          </PulseBox>
+        // </Tooltip>
+      )
+      
+    }
+  }
+
+  return (
+    <>
+      {gasDisplay()}
+    </>
+  )
+}

src/common/StatusSen5x.tsx

@@ -49,7 +49,7 @@ const useStyles = makeStyles((theme: Theme) => {
   })
 })
 
-export default function StatusPlenum(props: Props) {
+export default function StatusSen5x(props: Props) {
   const { device, noDust } = props;
   const classes = useStyles()
   // console.log(noDust)