got sen5x overlays working

src/common/StatusSen5x.tsx

@@ -34,6 +34,7 @@ const useStyles = makeStyles((theme: Theme) => {
       transition: 'opacity 0.5s ease, transform 0.5s ease',
       position: 'absolute',
       width: '100%',
+      overflow: "hidden",
       // height: '100%',
     },
     active: {
@@ -50,8 +51,8 @@ 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 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)
@@ -63,7 +64,7 @@ export default function StatusPlenum(props: Props) {
         setColor(colors[newIndex]); // Use the new index here
         return newIndex;
       });
-    }, 5000);
+    }, 7500);
     
     return () => clearInterval(interval);
   }, []);
@@ -116,7 +117,6 @@ export default function StatusPlenum(props: Props) {
   return (
     <Tooltip title={tooltip()}>
       <PulseBox color={color} className={classes.box} >
-        {/* <Grid2 container direction="column" > */}
         <Grid2 container direction="column" >
           <Grid2 container direction="column"
             className={`${classes.carouselItem} ${
@@ -185,20 +185,7 @@ export default function StatusPlenum(props: Props) {
               </Typography>
             </Grid2>
           </Grid2>
-
         </Grid2>
-
-          {/* <Grid2>
-            <Typography variant="body2" style={{ color: orange[700]}}>
-              {device.status.sen5x?.temperature.toFixed(1)}°C
-            </Typography>
-          </Grid2>
-          <Grid2>
-            <Typography variant="body2" style={{ color: blue[700]}}>
-              {device.status.sen5x?.humidity.toFixed(1)}%
-            </Typography>
-          </Grid2> */}
-        {/* </Grid2> */}
       </PulseBox>
     </Tooltip>
   )

src/component/ComponentSettings.tsx

@@ -307,11 +307,11 @@ export default function ComponentSettings(props: Props) {
     if (cableID > 0) component.settings.addressType = cableID + 8;
     componentAPI
       .add(device.id(), component.settings, as)
-      .then((response: any) => {
+      .then((_response: any) => {
         success(component.name() + " was successfully added!");
         refresh();
       })
-      .catch((err: any) => {
+      .catch((_err: any) => {
         error("Error occured while adding " + component.name() + ".");
       })
       .finally(() => close());
@@ -321,21 +321,21 @@ export default function ComponentSettings(props: Props) {
     const component = formComponent;
     componentAPI
       .update(device.id(), component.settings, getContextKeys(), getContextTypes(), as)
-      .then((response: any) => {
+      .then((_response: any) => {
         success(component.name() + " was successfully updated!");
         let updatedPrefs = pond.DeviceComponentPreferences.create();
         updatedPrefs.excludedNodes = excludedNodes;
         deviceAPI
           .updateComponentPreferences(device.id(), component.key(), updatedPrefs, undefined, undefined, as)
-          .then(resp => {
+          .then(_resp => {
             console.log("Preferences updated");
           })
-          .catch(err => {
+          .catch(_err => {
             console.log("Preferences failed to update");
           });
         refresh();
       })
-      .catch((err: any) => {
+      .catch((_err: any) => {
         error("Error occured while updating " + component.name() + ".");
       })
       .finally(() => {
@@ -346,7 +346,7 @@ export default function ComponentSettings(props: Props) {
   const removeComponent = () => {
     componentAPI
       .remove(device.id(), formComponent.key(), getContextKeys(), getContextTypes(), as)
-      .then((response: any) => {
+      .then((_response: any) => {
         success(formComponent.name() + " was successfully removed!");
         refresh();
       })
@@ -826,7 +826,7 @@ export default function ComponentSettings(props: Props) {
                 Back
               </Button>
             ) : (
-              <DeleteButton onClick={() => setRemoveDialogOpen(true)}>Delete</DeleteButton>
+              <DeleteButton disabled={!canEdit} onClick={() => setRemoveDialogOpen(true)}>Delete</DeleteButton>
             )}
           </Grid>
           <Grid size={{ xs: 7 }} container justifyContent="flex-end">
@@ -850,14 +850,6 @@ export default function ComponentSettings(props: Props) {
             ) : (
               <React.Fragment>
                 <CancelSubmit onSubmit={updateComponent} onCancel={close} submitDisabled={!canEdit || !formValid}/>
-                {/* <Button onClick={close} color="primary">
-                  Cancel
-                </Button>
-                {canEdit && (
-                  <Button onClick={updateComponent} color="primary" disabled={!formValid}>
-                    Submit
-                  </Button>
-                )} */}
               </React.Fragment>
             )}
           </Grid>