hooked up the mode change stuff for the new summary

src/bin/binSummary/BinSummary.tsx

@@ -21,9 +21,11 @@ interface Props {
     permissions: pond.Permission[]
     componentDevices: Map<string, number>
     componentMap: Map<string, Component>
+    binPrefs?: Map<string, pond.BinComponentPreferences>
+    updateBinCallback?: (bin: Bin) => void
 }
 export default function BinSummary(props: Props){
-    const {bin, devices, fans, heaters, permissions, componentDevices, componentMap} = props
+    const {bin, devices, fans, heaters, permissions, componentDevices, componentMap, binPrefs, updateBinCallback} = props
     const [currentDevice, setCurrentDevice] = useState<Device | undefined>(undefined)
     const isMobile = useMobile()
 
@@ -155,7 +157,17 @@ export default function BinSummary(props: Props){
             <Grid2 container spacing={2}>
                 <Grid2 size={isMobile ? 12 : 7}>
                     <Card raised>
-                      <Bin3dVisualizer bin={bin} fans={fans} heaters={heaters} permissions={permissions} devices={devices} componentDevices={componentDevices} componentMap={componentMap}/>
+                      <Bin3dVisualizer 
+                        bin={bin} 
+                        fans={fans} 
+                        heaters={heaters} 
+                        permissions={permissions} 
+                        devices={devices} 
+                        componentDevices={componentDevices} 
+                        componentMap={componentMap}
+                        binPrefs={binPrefs}
+                        updateBinCallback={updateBinCallback}
+                    />
                     </Card>
                 </Grid2>
                 <Grid2 size={isMobile ? 12 : 5}>

src/bin/binSummary/components/bin3dVisualizer.tsx

@@ -8,6 +8,8 @@ import { useState } from "react";
 import NodeControls from "./nodeControls";
 import { NodeData } from "bin/3dView/Data/BuildNodeData";
 import { CableData } from "bin/3dView/Data/BuildCableData";
+import ModeChangeDialog from "bin/conditioning/modeChangeDialog";
+import { cloneDeep } from "lodash";
 
 interface Props {
     bin: Bin
@@ -18,23 +20,27 @@ interface Props {
     permissions: pond.Permission[]
     componentDevices: Map<string, number>
     componentMap: Map<string, Component>
+    binPrefs?: Map<string, pond.BinComponentPreferences>
+    updateBinCallback?: (bin: Bin) => void
 }
 export default function bin3dVisualizer(props: Props){
-    const {bin, fans, heaters, permissions, devices, componentDevices, componentMap} = props
+    const {bin, fans, heaters, permissions, devices, componentDevices, componentMap, binPrefs, updateBinCallback} = props
     const [showHeatmap, setShowHeatmap] = useState(true)
-    const [showHotspots, setShowHotspots] = useState(false)
-    const [showFill, setShowFill] = useState(false)
+    // const [showHotspots, setShowHotspots] = useState(false)
+    // const [showFill, setShowFill] = useState(false)
     const [showTemp, setShowTemp] = useState(true)
     const [showMoisture, setShowMoisture] = useState(false)
     const [showMoistureHeatmap, setShowMoistureHeatmap] = useState(false)
     const [binDisplay, setBinDisplay] = useState<string>("temp")
     const [binMode, setBinMode] = useState<pond.BinMode>(pond.BinMode.BIN_MODE_NONE)
+    const [openModeChange, setOpenModeChange] = useState(false)
     const [selectedCable, setSelectedCable] = useState<CableData | undefined>(undefined)
     const [selectedNode, setSelectedNode] = useState<NodeData | undefined>(undefined)
     const [selectedCableDevice, setSelectedCableDevice] = useState(Device.create()) //this is the device that the cable that has the node that was clicked on belongs to 
     const [filteredComponents, setFilteredComponents] = useState<Component[]>([]) //components that are filtered to only include ones on the same device 
     const [openNodeControls, setOpenNodeControls] = useState(false)
     const [devMap, setDevMap] = useState<Map<number, Device>>(new Map())
+    const [modeChangeInProgress, setModeChangeInProgress] = useState(false)
 
     useEffect(()=>{
       let newMap: Map<number, Device> = new Map()
@@ -48,6 +54,14 @@ export default function bin3dVisualizer(props: Props){
       setBinMode(bin.settings.mode)
     },[bin])
 
+    const updateBin = () => {
+      if(updateBinCallback){
+        let clone = cloneDeep(bin)
+        clone.settings.mode = binMode
+        updateBinCallback(clone)
+      }
+    };
+
     const binModeControl = () => {
       return (
         <Box>
@@ -55,6 +69,7 @@ export default function bin3dVisualizer(props: Props){
             <FormControl fullWidth>
               <Select
                 value={binMode}
+                disabled={modeChangeInProgress}
                 sx={{
                   borderRadius: 1,
                   bgcolor: 'rgba(255,255,255,0.08)',
@@ -68,6 +83,7 @@ export default function bin3dVisualizer(props: Props){
                 onChange={event => {
                   console.log("change bin mode")
                   setBinMode(event.target.value as pond.BinMode)
+                  setOpenModeChange(true)
                 }}
               >
                 <MenuItem value={pond.BinMode.BIN_MODE_STORAGE}>Storage</MenuItem>
@@ -227,14 +243,47 @@ export default function bin3dVisualizer(props: Props){
             }}
           />
         }
+        <ModeChangeDialog 
+          binKey={bin.key()}
+          binMode={binMode}
+          grain={bin.settings.inventory?.grainType}
+          devices={devices}
+          open={openModeChange}
+          compDevMap={componentDevices}
+          preferences={binPrefs}
+          onClose={(refresh) => {
+            setOpenModeChange(false)
+            if(refresh) {
+              updateBin()
+            }else{
+              setBinMode(bin.settings.mode)
+            };
+          }}
+          defaultTargetMoisture={bin.settings.inventory?.initialMoisture}
+          // defaultOutdoorTemp={outdoorTemp}
+          // defaultOutdoorHumidity={outdoorHumidity}
+          // changeTargetMoisture={newMoisture => {
+          //   setTargetMoisture(newMoisture)
+          // }}
+          // changeOutdoorTemp={newTemp => {
+          //   setOutdoorTemp(newTemp)
+          // }}
+          // changeOutdoorHumidity={newHumidity => {
+          //   setOutdoorHumidity(newHumidity)
+          // }}
+          startChange={() => {
+            setModeChangeInProgress(true)
+          }}
+          changeComplete={() => {
+            setModeChangeInProgress(false)
+          }}
+  
+        />
         <Box position={"relative"} height={600}>
           <Bin3dView 
             bin={bin}
-            // cables={cables}
             fillPercent={bin.fillPercent()/100}//expects a decimal between 0 and 1
             nodeClick={(node, cable) => {
-              // console.log(node)
-              // console.log(cable)
               //this will be how to control the dialog to update the top nodes and node exclusion etc (make new component called NodeControls for this)
               //use the cable data to get the device it belongs to
               let d = devMap.get(cable.grainCable.device)
@@ -273,8 +322,8 @@ export default function bin3dVisualizer(props: Props){
             showMoistureHeatmap={showMoistureHeatmap}
             showTemp={showTemp}
             showMoisture={showMoisture}
-            showGrain={showFill}
-            showHotspots={showHotspots}
+            // showGrain={showFill}
+            // showHotspots={showHotspots}
             xOffset={-150}
           />
           <Box position={"absolute"} top={20} left={30} height={"80%"} width={"30%"} padding={2}>

src/bin/binSummary/components/binDetails.tsx

@@ -0,0 +1,17 @@
+import { Box } from "@mui/material";
+
+interface Props {
+
+}
+
+export default function BinDetails (props: Props) {
+
+
+    //this is where we will have the tabs abd tab panels for the table view, alerts, interactions, and analysis
+
+    return (
+        <Box>
+            
+        </Box>
+    )
+}

src/pages/BinV2.tsx

@@ -3,7 +3,7 @@ import PageContainer from "./PageContainer";
 import { DevicePreset } from "models/DevicePreset";
 import { Controller } from "models/Controller";
 import { useNavigate, useParams } from "react-router-dom";
-import { useMobile } from "hooks";
+import { useMobile, useSnackbar } from "hooks";
 import { Component, Device, Bin as IBin, Interaction } from "models";
 import { useBinAPI, useGlobalState } from "providers";
 import { pond } from "protobuf-ts/pond";
@@ -69,6 +69,7 @@ export default function BinV2(){
     const [pressures, setPressures] = useState<Pressure[]>([]);
     const [headspaceCO2, setHeadspaceCO2] = useState<CO2[]>([]);
     const [heaters, setHeaters] = useState<Controller[]>([]);
+    const {openSnack} = useSnackbar()
     const [fans, setFans] = useState<Controller[]>([]);
     const [compositionNameMap, setCompositionNameMap] = useState<Map<string, string>>(new Map());
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -432,7 +433,22 @@ export default function BinV2(){
     return (
         <PageContainer>
             {pageHeader()}
-            <BinSummary bin={bin} devices={devices} fans={fans} heaters={heaters} permissions={permissions} componentDevices={componentDevices} componentMap={components}/>
+            <BinSummary 
+              bin={bin} 
+              devices={devices} 
+              fans={fans} 
+              heaters={heaters}
+              permissions={permissions} 
+              componentDevices={componentDevices} 
+              componentMap={components}
+              binPrefs={preferences}
+              updateBinCallback={(bin) => {
+                setBin(bin)
+                binAPI.updateBin(bin.key(), bin.settings).then(resp => {
+                  openSnack("Bin has Been Updated")
+                })
+              }}
+            />
             {/* render drawers */}
             {noteDrawer()}
             {taskDrawer()}