From bfd3b6bb5f4c4aba7eb22ad85b0aa068da3ea249 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Thu, 1 May 2025 11:03:43 -0600
Subject: [PATCH 1/2] got sen5x overlays working

---
 src/common/StatusSen5x.tsx          | 145 +++++++++++++---------------
 src/component/ComponentSettings.tsx |  30 +++---
 2 files changed, 77 insertions(+), 98 deletions(-)

diff --git a/src/common/StatusSen5x.tsx b/src/common/StatusSen5x.tsx
index efcb53f..cc92085 100644
--- a/src/common/StatusSen5x.tsx
+++ b/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,89 +117,75 @@ 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} ${
-                0 === currentIndex ? classes.active : classes.inactive
-              }`}
-            >
-              <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 container direction="column" >
+          <Grid2 container direction="column"
+            className={`${classes.carouselItem} ${
+              0 === currentIndex ? classes.active : classes.inactive
+            }`}
+          >
+            <Grid2>
+              <Typography variant="body2" style={{ color: orange[700]}}>
+                {device.status.sen5x?.temperature.toFixed(1)}°C
+              </Typography>
             </Grid2>
-            
-            <Grid2 container direction="column" 
-              className={`${classes.carouselItem} ${
-                1 === currentIndex ? classes.active : classes.inactive
-              }`}
-            >
-              <Grid2>
-                <Typography variant="body2" style={{ color: green[300]}}>
-                  {device.status.sen5x?.dust_1ug.toFixed(1)}ug/m3
-                </Typography>
-              </Grid2>
-              <Grid2>
-                <Typography variant="body2" style={{ color: green[400]}}>
-                  {device.status.sen5x?.dust_2ug.toFixed(1)}ug/m3
-                </Typography>
-              </Grid2>
+            <Grid2>
+              <Typography variant="body2" style={{ color: blue[700]}}>
+                {device.status.sen5x?.humidity.toFixed(1)}%
+              </Typography>
             </Grid2>
-
-            <Grid2 container direction="column" 
-              className={`${classes.carouselItem} ${
-                2 === currentIndex ? classes.active : classes.inactive
-              }`}
-            >
-              <Grid2>
-                <Typography variant="body2" style={{ color: green[500]}}>
-                  {device.status.sen5x?.dust_4ug.toFixed(1)}ug/m3
-                </Typography>
-              </Grid2>
-              <Grid2>
-                <Typography variant="body2" style={{ color: green[600]}}>
-                  {device.status.sen5x?.dust_10ug.toFixed(1)}ug/m3
-                </Typography>
-              </Grid2>
+          </Grid2>
+          
+          <Grid2 container direction="column" 
+            className={`${classes.carouselItem} ${
+              1 === currentIndex ? classes.active : classes.inactive
+            }`}
+          >
+            <Grid2>
+              <Typography variant="body2" style={{ color: green[300]}}>
+                {device.status.sen5x?.dust_1ug.toFixed(1)}ug/m3
+              </Typography>
             </Grid2>
-
-            <Grid2 container direction="column" 
-              className={`${classes.carouselItem} ${
-                3 === currentIndex ? classes.active : classes.inactive
-              }`}
-            >
-              <Grid2>
-                <Typography variant="body2" style={{ color: blue[300]}}>
-                  {device.status.sen5x?.voc.toFixed(1)}%
-                </Typography>
-              </Grid2>
-              <Grid2>
-                <Typography variant="body2" style={{ color: blue[400]}}>
-                  {device.status.sen5x?.nox.toFixed(1)}%
-                </Typography>
-              </Grid2>
+            <Grid2>
+              <Typography variant="body2" style={{ color: green[400]}}>
+                {device.status.sen5x?.dust_2ug.toFixed(1)}ug/m3
+              </Typography>
             </Grid2>
-
           </Grid2>
 
-          {/* <Grid2>
-            <Typography variant="body2" style={{ color: orange[700]}}>
-              {device.status.sen5x?.temperature.toFixed(1)}°C
-            </Typography>
+          <Grid2 container direction="column" 
+            className={`${classes.carouselItem} ${
+              2 === currentIndex ? classes.active : classes.inactive
+            }`}
+          >
+            <Grid2>
+              <Typography variant="body2" style={{ color: green[500]}}>
+                {device.status.sen5x?.dust_4ug.toFixed(1)}ug/m3
+              </Typography>
+            </Grid2>
+            <Grid2>
+              <Typography variant="body2" style={{ color: green[600]}}>
+                {device.status.sen5x?.dust_10ug.toFixed(1)}ug/m3
+              </Typography>
+            </Grid2>
           </Grid2>
-          <Grid2>
-            <Typography variant="body2" style={{ color: blue[700]}}>
-              {device.status.sen5x?.humidity.toFixed(1)}%
-            </Typography>
-          </Grid2> */}
-        {/* </Grid2> */}
+
+          <Grid2 container direction="column" 
+            className={`${classes.carouselItem} ${
+              3 === currentIndex ? classes.active : classes.inactive
+            }`}
+          >
+            <Grid2>
+              <Typography variant="body2" style={{ color: blue[300]}}>
+                {device.status.sen5x?.voc.toFixed(1)}%
+              </Typography>
+            </Grid2>
+            <Grid2>
+              <Typography variant="body2" style={{ color: blue[400]}}>
+                {device.status.sen5x?.nox.toFixed(1)}%
+              </Typography>
+            </Grid2>
+          </Grid2>
+        </Grid2>
       </PulseBox>
     </Tooltip>
   )
diff --git a/src/component/ComponentSettings.tsx b/src/component/ComponentSettings.tsx
index ac68259..d762ee3 100644
--- a/src/component/ComponentSettings.tsx
+++ b/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,16 +826,16 @@ 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">
             {mode === "add" ? (
               <React.Fragment>
                 <Button onClick={close} color="primary">
-                <Typography variant="subtitle2" color="textPrimary">
-        Cancel
-      </Typography>
+                  <Typography variant="subtitle2" color="textPrimary">
+                    Cancel
+                  </Typography>
                 </Button>
                 {activeStep === steps.length - 1 ? (
                   <Button color="primary" onClick={addComponent} disabled={!formValid}>
@@ -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>

From ee86ec176c2bc47bd9fe2c547d6516b94fe80aa5 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Thu, 1 May 2025 13:53:22 -0600
Subject: [PATCH 2/2] fix for the sen5x variable in device status by removing
 the underscore

---
 package-lock.json          | 2 +-
 src/common/StatusSen5x.tsx | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1d555ad..4ec8169 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10993,7 +10993,7 @@
     },
     "node_modules/protobuf-ts": {
       "version": "1.0.0",
-      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#aa8f16032048128898ec624f215fd03427957962",
+      "resolved": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#71512b1821dbe01eebe5ebb9539ce5a6a8f865a7",
       "dependencies": {
         "protobufjs": "^6.8.8"
       }
diff --git a/src/common/StatusSen5x.tsx b/src/common/StatusSen5x.tsx
index cc92085..262f595 100644
--- a/src/common/StatusSen5x.tsx
+++ b/src/common/StatusSen5x.tsx
@@ -142,12 +142,12 @@ export default function StatusPlenum(props: Props) {
           >
             <Grid2>
               <Typography variant="body2" style={{ color: green[300]}}>
-                {device.status.sen5x?.dust_1ug.toFixed(1)}ug/m3
+                {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
               </Typography>
             </Grid2>
             <Grid2>
               <Typography variant="body2" style={{ color: green[400]}}>
-                {device.status.sen5x?.dust_2ug.toFixed(1)}ug/m3
+                {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
               </Typography>
             </Grid2>
           </Grid2>
@@ -159,12 +159,12 @@ export default function StatusPlenum(props: Props) {
           >
             <Grid2>
               <Typography variant="body2" style={{ color: green[500]}}>
-                {device.status.sen5x?.dust_4ug.toFixed(1)}ug/m3
+                {device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
               </Typography>
             </Grid2>
             <Grid2>
               <Typography variant="body2" style={{ color: green[600]}}>
-                {device.status.sen5x?.dust_10ug.toFixed(1)}ug/m3
+                {device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
               </Typography>
             </Grid2>
           </Grid2>