Merge branch 'staging_environment'

2026-01-06 11:24:46 -06:00 · 2026-01-06 11:24:46 -06:00 · 7e4899f7a7
commit 7e4899f7a7
parent d9bcd07c8d 7964aa09cc
29 changed files with 2093 additions and 660 deletions
--- a/src/bin/BinTour.tsx
+++ b/src/bin/BinTour.tsx
@ -1,6 +1,6 @@
 // import { useAuth0 } from "@auth0/auth0-react";
 import { Typography } from "@mui/material";
-import Tour from "common/Tour";
+import Tour, { TourStep } from "common/Tour";
 import { random } from "lodash";
 import moment from "moment";
 import { useGlobalState, useSnackbar, useUserAPI } from "providers";
@ -8,8 +8,13 @@ import React, { useEffect, useState } from "react";
 import { Step } from "react-joyride";
 // import Emoji from "react-emoji-render";

-export default function BinTour() {
+interface Props {
+  setDetailTabState?: ( detail: "inventory" | "sensors" | "analytics" | "presets" | "alerts" | "transactions", buttonIndex: number) => void
+}
+
+export default function BinTour(props: Props) {
  // const { userID } = useAuth0();
+  const {setDetailTabState} = props
  const [{ user }, dispatch] = useGlobalState();
  const userID = user.id()
  const { error } = useSnackbar();
@ -35,8 +40,8 @@ export default function BinTour() {
    }
  };

-  const getTourSteps = (): Step[] => {
-    let steps: Step[] = [
+  const getTourSteps = (): TourStep[] => {
+    let steps: TourStep[] = [
      {
        title: (
          <React.Fragment>
@ -103,24 +108,12 @@ export default function BinTour() {
        disableBeacon: false
      },
      {
-        title: "Graphs",
+        title: "View Other Data",
        content: (
          <React.Fragment>
            <Typography variant="body2" paragraph>
-              Bin related analytics are displayed here.
-            </Typography>
-          </React.Fragment>
-        ),
-        target: "#tour-graphs",
-        placement: "left",
-        disableBeacon: false
-      },
-      {
-        title: "Choose your graphs",
-        content: (
-          <React.Fragment>
-            <Typography variant="body2" paragraph>
-              Use this tab to view other sets of data. Sensors must be attached to view sensor data.
+              Use these tabs to view other Bin Details such as inventory levels over time, 
+              alerts and interactions for connected components, and data for attached sensors
            </Typography>
          </React.Fragment>
        ),
@ -128,6 +121,122 @@ export default function BinTour() {
        placement: "bottom",
        disableBeacon: false
      },
+      {
+        title: "Inventory",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The inventory tab shows your bins inventory level over a specified window as well as the times the bin mode was changed.
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("sensors", 1)
+        }
+      },
+      {
+        title: "Sensors",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The sensors tab shows readings from attached sensors over time
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("analytics", 2)
+        }
+      },
+      {
+        title: "Analytics",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The analysis tab shows analytic bin data using attached sensors
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("alerts", 3)
+        }
+      },
+      {
+        title: "Alerts and Interactions",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The Alerts tab allows you to view or add any new interactions or alerts for connected components 
+              and displays recent notifications from those alerts
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("presets", 4)
+        }
+      },
+      {
+        title: "Bin Mode Presets",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The Presets tab allows you to create custom presets for the interactions for a device when changing bin modes
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("transactions", 5)
+        }
+      },
+      {
+        title: "Bin Transactions",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              The transactions tab allows view any pending transaction when using a hybrid inventory control
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-details",
+        placement: "left-start",
+        disableBeacon: false,
+        onNext: () => {
+          if (setDetailTabState) setDetailTabState("inventory", 0)
+        }
+      },
+      {
+        title: "Bin Conditions",
+        content: (
+          <React.Fragment>
+            <Typography variant="body2" paragraph>
+              This section will display conditions based on the bin mode
+            </Typography>
+            <Typography variant="body2" paragraph>
+              Storage Mode: simply displays the Storage conditions by itself with the target temperature and moisture set in the bin settings
+            </Typography>
+            <Typography variant="body2" paragraph>
+              Other Modes: will display the interactions for the bins devices that are controlling a fan or heater on the bin as well as the storage conditions
+            </Typography>
+          </React.Fragment>
+        ),
+        target: "#tour-conditions",
+        placement: "right",
+        disableBeacon: false
+      },
      {
        title: "Change Mode",
        content: (
@ -138,12 +247,15 @@ export default function BinTour() {
            <ul>
              <li>Storage mode: default</li>
              <li>
-                Drying mode: use heat to dry grain ☀️
+                Cooldown mode: use fans to hold bin temperature lower  ❆❅
+                {/* <Emoji text="  ❆❅" /> */}
+              </li>
+              <li>
+                Drying mode: use heat to dry grain ☀️ (only visible when the target moisture is lower than the starting moisture in the bin settings)
                {/* <Emoji text=" ☀️" /> */}
              </li>
              <li>
-                Cooldown mode: use fans to hold bin temperature lower  ❆❅
-                {/* <Emoji text="  ❆❅" /> */}
+                Hydrating mode: use humid air to hydrate grain (only visible when the target moisture is higher than the starting moisture in the bin settings)
              </li>
            </ul>
          </React.Fragment>
--- a/src/bin/BinVisualizerV2.tsx
+++ b/src/bin/BinVisualizerV2.tsx
@ -1727,32 +1727,34 @@ export default function BinVisualizer(props: Props) {
        {modeChangeInProgress &&
          <CircularProgress color="primary" size={25}/>
        }
-        <ButtonGroup 
-          disableAll={modeChangeInProgress}
-          buttons={[
-            {
-              title: "Storage",
-              function: () => {
-                setModeStorage()
+        <Box id="tour-bin-mode">
+          <ButtonGroup 
+            disableAll={modeChangeInProgress}
+            buttons={[
+              {
+                title: "Storage",
+                function: () => {
+                  setModeStorage()
+                }
+              },
+              {
+                title: "Cooldown",
+                function: () => {
+                  setModeCooldown()
+                }
+              },
+              {
+                title: bin.settings.inventory && bin.settings.inventory?.initialMoisture < bin.settings.inventory?.targetMoisture ? "Hydrating" : "Drying",
+                function: () => {
+                  // setShowInputMoisture(true)
+                  setModeConditioning() //will set it to either drying or hydrating based on the initial and target moisture
+                }
              }
-            },
-            {
-              title: "Cooldown",
-              function: () => {
-                setModeCooldown()
-              }
-            },
-            {
-              title: bin.settings.inventory && bin.settings.inventory?.initialMoisture < bin.settings.inventory?.targetMoisture ? "Hydrating" : "Drying",
-              function: () => {
-                // setShowInputMoisture(true)
-                setModeConditioning() //will set it to either drying or hydrating based on the initial and target moisture
-              }
-            }
-          ]}
-          toggledButtons={determineToggle(mode)}
-          toggle
-        />
+            ]}
+            toggledButtons={determineToggle(mode)}
+            toggle
+            />
+        </Box>
      </Box>
    );
  };
--- a/src/bin/BinsList.tsx
+++ b/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}
--- a/src/bin/BinyardDisplay.tsx
+++ 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) {