merged tidio and accepted incoming changes

package.json

@@ -55,7 +55,7 @@
     "mui-tel-input": "^7.0.0",
     "notistack": "^3.0.1",
     "openweathermap-ts": "^1.2.10",
-    "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#dev",
+    "protobuf-ts": "git+https://gitlab+deploy-token-50627:hv8mB4WkyvtjBpJKU1rN@gitlab.com/brandx/protobuf-ts.git#master",
     "query-string": "^9.2.1",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",

src/app/UserWrapper.tsx

@@ -13,6 +13,7 @@ import { CssBaseline, Theme } from '@mui/material'
 import { AppThemeProvider } from 'theme/AppThemeProvider'
 import HTTPProvider from 'providers/http'
 import { Crisp } from "crisp-sdk-web";
+import { useSnackbar } from 'hooks'
 // import FirmwareLoader from './FirmwareLoader'
 
 const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState => {
@@ -65,6 +66,7 @@ export default function UserWrapper(props: Props) {
   const useAuth = useAuth0();
   const hasFetched = useRef(false);
   const [global, setGlobal] = useState<undefined | GlobalState>(undefined)
+  const snackbar = useSnackbar()
 
   const user_id = or(useAuth.user?.sub, "")
 
@@ -85,7 +87,8 @@ export default function UserWrapper(props: Props) {
         backgroundTasksComplete: false,
         firmware: new Map()
       })
-    }).catch(() => {
+    }).catch((err) => {
+      snackbar.error("get user and team: "+err)
       userAPI.getUser(user_id).then(user => {
         setGlobal({
           user: user ? user : User.create(),
@@ -96,7 +99,8 @@ export default function UserWrapper(props: Props) {
           backgroundTasksComplete: false,
           firmware: new Map()
         })
-      }).catch(() => {
+      }).catch((err) => {
+        snackbar.error("get user: "+err)
         setGlobal(globalDefault)
       })
       

src/bin/AddBinFab.tsx

@@ -27,9 +27,9 @@ const useStyles = makeStyles((theme: Theme) => {
       },
       position: "fixed",
       bottom: theme.spacing(8), //for mobile navigator
-      right: theme.spacing(2),
+      right: theme.spacing(10.25),
       [theme.breakpoints.up("sm")]: {
-        bottom: theme.spacing(2)
+        bottom: theme.spacing(1.75)
       }
     },
     pulse: {

src/bin/BinCardV2.tsx

@@ -263,32 +263,39 @@ export default function BinCard(props: Props) {
     let val;
     let useEMC = false;
 
-    switch (valDisplay) {
+    //taking the switch cases out so that the node always displays the average for the moisture/humidity
-      case "average":
+    if (average?.emc) {
-        if (average?.emc) {
+      useEMC = true;
-          useEMC = true;
+      val = average.emc;
-          val = average.emc;
+    } else {
-        } else {
+      val = average?.humid;
-          val = average?.humid;
-        }
-        break;
-      case "low":
-        if (coldNode?.emc) {
-          useEMC = true;
-          val = coldNode.emc;
-        } else {
-          val = coldNode?.humid;
-        }
-        break;
-      case "high":
-        if (hotNode?.emc) {
-          useEMC = true;
-          val = hotNode.emc;
-        } else {
-          val = hotNode?.humid;
-        }
-        break;
     }
+    // switch (valDisplay) {
+    //   case "average":
+    //     if (average?.emc) {
+    //       useEMC = true;
+    //       val = average.emc;
+    //     } else {
+    //       val = average?.humid;
+    //     }
+    //     break;
+    // case "low": 
+    //   if (coldNode?.emc) {
+    //     useEMC = true;
+    //     val = coldNode.emc;
+    //   } else {
+    //     val = coldNode?.humid;
+    //   }
+    //   break;
+    // case "high":
+    //   if (hotNode?.emc) {
+    //     useEMC = true;
+    //     val = hotNode.emc;
+    //   } else {
+    //     val = hotNode?.humid;
+    //   }
+    //   break;
+    // }
 
     if (val !== undefined && !isNaN(val)) {
       display = val.toFixed(2);
@@ -334,7 +341,8 @@ export default function BinCard(props: Props) {
                 color="textSecondary"
                 noWrap
                 style={{ fontSize: "0.5rem" }}>
-                {valDisplay === "high" ? "High" : valDisplay === "low" ? "Low" : "Average"}
+                {/* {valDisplay === "high" ? "High" : valDisplay === "low" ? "Low" : "Average"} */}
+                Average
               </Typography>
             </Box>
           </Grid>

src/bin/BinsList.tsx

@@ -23,6 +23,12 @@ interface Props {
   //startingTranslate: number;
   valDisplay?: "high" | "low" | "average";
   insert?: boolean
+  /**
+   * optional function for when you want clicking the card to do something other than navigate to the bin page
+   * @param bin the bin model for the card that was clicked
+   * @returns void
+   */
+  cardClickFunction?: (bin: Bin) => void
 }
 
 const useStyles = makeStyles((_theme) => {
@@ -40,7 +46,7 @@ const useStyles = makeStyles((_theme) => {
 });
 
 export default function BinsList(props: Props) {
-  const { bins, duplicateBin, title, gridView, loadMore, valDisplay, insert } = props;
+  const { bins, duplicateBin, title, gridView, loadMore, valDisplay, insert, cardClickFunction } = props;
   const classes = useStyles();
   // const history = useHistory();
   const navigate = useNavigate()
@@ -53,6 +59,14 @@ export default function BinsList(props: Props) {
     navigate(path, { state: {bin: bins[i]} });
   };
 
+  const cardClicked = (index: number) => {
+    if(cardClickFunction) {
+      cardClickFunction(bins[index])
+    }else{
+      goToBin(index)
+    }
+  }
+
   const leftArrow = () => {
     const visibility = useContext(VisibilityContext);
     //const isFirstVisible = visibility.useIsVisible('first', false)
@@ -95,7 +109,7 @@ export default function BinsList(props: Props) {
             key={i} 
             className={classes.gridListTile} 
             onClick={() => {
-                !duplicate && goToBin(i)
+                !duplicate && cardClicked(i)
               }}>
             <BinCardV2
               bin={b}
@@ -129,7 +143,7 @@ export default function BinsList(props: Props) {
               key={i}
               className={classes.gridListTile}
               onClick={() => {
-                !duplicate && goToBin(i)
+                !duplicate && cardClicked(i)
               }}>
               <BinCardV2
                 bin={b}

src/bin/BinyardDisplay.tsx

@@ -42,6 +42,11 @@ import BinsList from "./BinsList";
 interface Props {
   yardKey: string;
   insert?: boolean;
+  /**
+   * function to run when a bin card is clicked, when not passed in will default to attempting to navigate to the bin page by adding the bin key to the url
+   * @param bin the selected bin model
+   */
+  binClicked?: (bin: Bin) => void
 }
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -82,7 +87,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 export default function BinyardDisplay(props: Props) {
-  const { yardKey, insert } = props;
+  const { yardKey, insert, binClicked } = props;
   const classes = useStyles();
   const binAPI = useBinAPI();
   const theme = useTheme();
@@ -321,6 +326,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={grainBins}
                   duplicateBin={duplicateBin}
                   title={"Grain Bins"}
+                  cardClickFunction={binClicked}
                 />
               </Grid>
             </React.Fragment>
@@ -338,6 +344,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={fertBins}
                   duplicateBin={duplicateBin}
                   title={"Fertilizer Bins"}
+                  cardClickFunction={binClicked}
                 />
               </Grid>
             </React.Fragment>
@@ -355,6 +362,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={emptyBins}
                   duplicateBin={duplicateBin}
                   title={"Empty Bins"}
+                  cardClickFunction={binClicked}
                   // loadMore={newTranslation => {
                   //   //only triggered in the scroll view so this will never trigger in grid view
                   //   if (yardBins.length < binTotal) {

src/gate/GateDevice.tsx

@@ -56,55 +56,6 @@ export default function GateDevice(props: Props) {
   const [lastTemps, setLastTemps] = useState({ t1: 0, t2: 0 });
   const [lastPressures, setLastPressures] = useState({ p1: 0, p2: 0 });
 
-  // const StyledToggleButtonGroup = withStyles(theme => ({
-  //   grouped: {
-  //     margin: theme.spacing(-0.5),
-  //     border: "none",
-  //     padding: theme.spacing(1),
-  //     "&:not(:first-child):not(:last-child)": {
-  //       borderRadius: 24,
-  //       marginRight: theme.spacing(0.5),
-  //       marginLeft: theme.spacing(0.5)
-  //     },
-  //     "&:first-child": {
-  //       borderRadius: 24,
-  //       marginLeft: theme.spacing(0.25)
-  //     },
-  //     "&:last-child": {
-  //       borderRadius: 24,
-  //       marginRight: theme.spacing(0.25)
-  //     }
-  //   },
-  //   root: {
-  //     backgroundColor: darken(
-  //       theme.palette.background.paper,
-  //       getThemeType() === "light" ? 0.05 : 0.25
-  //     ),
-  //     borderRadius: 24,
-  //     content: "border-box"
-  //   }
-  // }))(ToggleButtonGroup);
-
-  // const StyledToggle = withStyles({
-  //   root: {
-  //     backgroundColor: "transparent",
-  //     overflow: "visible",
-  //     content: "content-box",
-  //     "&$selected": {
-  //       backgroundColor: "gold",
-  //       color: "black",
-  //       borderRadius: 24,
-  //       fontWeight: "bold"
-  //     },
-  //     "&$selected:hover": {
-  //       backgroundColor: "rgb(255, 255, 0)",
-  //       color: "black",
-  //       borderRadius: 24
-  //     }
-  //   },
-  //   selected: {}
-  // })(ToggleButton);
-
   useEffect(() => {
     if (comprehensiveDevice.device) {
       setDevice(Device.any(comprehensiveDevice.device));
@@ -141,7 +92,7 @@ export default function GateDevice(props: Props) {
                 c.status.measurement[0].values[0] &&
                 c.status.measurement[0].values[0].values[1]
               ) {
-                setPCAFanOn(c.status.measurement[0].values[0].values[1] > 250); //apx 1 iwg
+                setPCAFanOn(c.status.measurement[0].values[0].values[1] > 996); //apx 4 iwg
               }
               break;
             default:
@@ -338,11 +289,11 @@ export default function GateDevice(props: Props) {
   return (
     <Grid
       container
-      direction={(isMobile) ? "column" : "row"}
+      // direction={(isMobile) ? "column" : "row"}
       width="100%"
-      alignItems="center"
+      //alignItems="center"
       >
-      <Grid size={{ sm: 12, lg: isMobile || drawerView ? 12 : 4}} style={{ padding: 10 }}>
+      <Grid width={"100%"} size={{ sm: 12, lg: isMobile || drawerView ? 12 : 4}} style={{ padding: 10 }}>
         <Box
           display="flex"
           justifyContent="space-between"
@@ -363,7 +314,7 @@ export default function GateDevice(props: Props) {
             ]}
           />
         </Box>
-        <Card raised>
+        <Card>
           <GateSVG
             finalTemp={
               gate.gateMutations[device.id().toString()] &&

src/gate/GateFlowGraph.tsx

@@ -70,8 +70,9 @@ export default function GateFlowGraph(props: Props) {
   const classes = useStyles();
   const [flowEvents, setFlowEvents] = useState<pond.AirFlowEvent[]>([]);
   const [eventsLoading, setEventsLoading] = useState(false);
-  const eventThreshold = 5;
+  //these two constants could be entered by the user at time of retrieval
-  const idleFlow = 2.44;
+  const eventThreshold = 5; //the threshold that if crossed from one measurement to the next during a flow event will end the current flow event and start a new one
+  const idleFlow = 3.5; //the mass air flow that must be crossed in order to start a flow event, anything below this will not start an event but must go below this to end an event
 
   useEffect(() => {
     if (loadingChartData) return;
@@ -102,7 +103,6 @@ export default function GateFlowGraph(props: Props) {
                 timestamp: time.valueOf(),
                 value: val.airFlow ?? 0
               };
-
               data.push(newPoint);
               if (!recent || recent.timestamp < newPoint.timestamp) {
                 recent = newPoint;

src/gate/GateGraphs.tsx

@@ -27,6 +27,7 @@ import React, { useEffect, useState } from "react";
 import { avg } from "utils";
 import GateFlowGraph from "./GateFlowGraph";
 import { makeStyles } from "@mui/styles";
+import { cloneDeep } from "lodash";
 
 interface Props {
   gate: Gate;
@@ -245,7 +246,9 @@ export default function GateGraphs(props: Props) {
 
   const graphHeader = (comp: Component) => {
     const componentIcon = GetComponentIcon(comp.settings.type, comp.settings.subtype, themeType);
-
+    console.log(comp)
+    let measurement = cloneDeep(comp.status.measurement)
+    let umArray = measurement.map(um => UnitMeasurement.create(um, user))
     return (
       <CardHeader
         avatar={
@@ -260,9 +263,7 @@ export default function GateGraphs(props: Props) {
         subheader={
           <UnitMeasurementSummary
             component={comp}
-            reading={UnitMeasurement.convertLastMeasurement(
+            reading={UnitMeasurement.convertLastMeasurement(umArray)}
-              comp.status.measurement.map(um => UnitMeasurement.create(um, user)) ?? []
-            )}
           />
         }
       />

src/gate/GateSVG.tsx

@@ -333,7 +333,7 @@ export default function GateSVG(props: Props) {
   const deviceCheckIn = () => {
     return (
       <g key={"deviceCheckIn"}>
-        <text x={95} y={12} fontSize={7} fontWeight={650} fill={"white"}>
+        <text x={85} y={12} fontSize={7} fontWeight={650} fill={"white"}>
           Last Checked In: {moment(checkInTime).fromNow()}
         </text>
       </g>
@@ -342,7 +342,7 @@ export default function GateSVG(props: Props) {
 
   return (
     <React.Fragment>
-      <Box height={"100%"} maxWidth={isMobile ? 360 : 460} margin="auto">
+      <Box height={"100%"} maxWidth={isMobile ? 400 : 460} margin="auto">
         <svg
           width={"100%"}
           height={"100%"}

src/maps/mapDrawers/BinYardDrawer.tsx

@@ -1,6 +1,7 @@
 import BinyardDisplay from "bin/BinyardDisplay";
 import DisplayDrawer from "common/DisplayDrawer";
 import MapMarkerSettings from "maps/MapMarkerSettings";
+import { Bin } from "models";
 //import Bins from "pages/Bins";
 import { pond } from "protobuf-ts/pond";
 import { useBinYardAPI, useGlobalState, useSnackbar } from "providers";
@@ -14,10 +15,11 @@ interface Props {
   removeMarker: (key: string) => void;
   updateMarker: (key: string, objectSettings: pond.BinYardSettings) => void;
   moveMap: (long: number, lat: number) => void;
+  binClicked: (bin: Bin) => void
 }
 
 export default function BinYardDrawer(props: Props) {
-  const { open, onClose, selectedYard, yards, removeMarker, updateMarker, moveMap } = props;
+  const { open, onClose, selectedYard, yards, removeMarker, updateMarker, moveMap, binClicked } = props;
   const [{as}] = useGlobalState();
   const [yard, setYard] = useState<pond.BinYardSettings>(pond.BinYardSettings.create());
   const [openMarkerSettings, setOpenMarkerSettings] = useState(false);
@@ -85,7 +87,12 @@ export default function BinYardDrawer(props: Props) {
 
   const drawerBody = () => {
     //return <Bins insert yardFilter={yard.key} />;
-    return <BinyardDisplay insert yardKey={yard.key} />;
+    return (
+      <BinyardDisplay 
+        insert 
+        yardKey={yard.key} 
+        binClicked={binClicked}/>
+    )
   };
 
   /**

src/maps/mapObjectControllers/AgMapController.tsx

@@ -1659,6 +1659,18 @@ import { Result } from "@mapbox/mapbox-gl-geocoder";
           <React.Fragment>
             <BinYardDrawer
               open={yardDrawer}
+              binClicked={(bin) => {
+                //move the map to the correct bin location, assuming the bin was plotted on the map
+                let location = bin.location()
+                if(location !== null && location !== undefined){
+                  moveMap(location.latitude, location.longitude, zoomLevels.close, isMobile)
+                }
+                //close the yarddrawer
+                setYardDrawer(false)
+                //open the bin drawer using the correct bin
+                setObjectKey(bin.key())
+                setBinDrawer(true)
+              }}
               onClose={() => {
                 if (new Date().valueOf() > endTime) {
                   setYardDrawer(false);

src/pages/Bins.tsx

@@ -199,6 +199,7 @@ export default function Bins(props: Props) {
   const [cardValDisplay, setCardValDisplay] = useState<"high" | "low" | "average">("high");
   
   const [teamsDialog, setTeamsDialog] = useState(false)
+  const snackbar = useSnackbar()
   
   // const [scrollTranslations, setScrollTranslations] = useState({
   //   bins: 0,
@@ -265,6 +266,8 @@ export default function Bins(props: Props) {
           // console.log("should?")
           setTeamsDialog(true)
         }
+      }).catch(err => {
+        snackbar.error("error listing teams: "+err)
       })
     }
   }, [doneLoadingPage, grainBins, grainBags])

src/pages/Device.tsx

@@ -158,9 +158,9 @@ export default function DevicePage() {
         if (length > 0) {
           warningString = warningString + " through " + getContextTypes()[length - 1];
         }
-        snackbar.warning(warningString);
+        snackbar.warning("page data warning: "+warningString);
       } else {
-        snackbar.error(err);
+        snackbar.error("page data error: "+err);
       }
     })
     .finally(() => setLoading(false));
@@ -174,7 +174,7 @@ export default function DevicePage() {
         }
       })
       .catch(err => {
-        console.log(err)
+        console.log("load port scan: "+err)
       })
   }