setting up the framework for rebuilding the bin modes

src/bin/binModes/BinModeController.tsx

@@ -0,0 +1,54 @@
+import { Box, Button, DialogActions, DialogContent, DialogTitle } from "@mui/material";
+import ResponsiveDialog from "common/ResponsiveDialog";
+import { Bin } from "models";
+import { pond } from "protobuf-ts/pond";
+import React from "react";
+import StorageMode from "./StorageMode";
+import DryingMode from "./DryingMode";
+import HydratingMode from "./HydratingMode";
+import CooldownMode from "./CooldownMode";
+
+interface Props {
+    newMode: pond.BinMode //used to control which dialog to open
+    open: boolean
+    onClose: () => void
+    bin: Bin
+}
+
+export default function BinModeControl(props: Props) {
+    const {open, onClose, newMode} = props
+
+    //the mode controller could handle the actual api call for adding the interactions etc but the dialogs would create them and pass them up
+
+    //steps involved for devices when changing the bin mode:
+    //remove conflicting interactions
+    //add new interactions
+    //updating the controllers
+
+    const renderContent = () => {
+        switch(newMode){
+            case pond.BinMode.BIN_MODE_DRYING:
+                return <DryingMode />
+            case pond.BinMode.BIN_MODE_HYDRATING:
+                return <HydratingMode />
+            case pond.BinMode.BIN_MODE_COOLDOWN:
+                return <CooldownMode />
+            default:
+                return <StorageMode />
+        }
+    }
+
+    return (
+        <ResponsiveDialog open={open} onClose={onClose}>
+            <DialogTitle>Change Bin Mode</DialogTitle>
+            <DialogContent>
+                {renderContent()}
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}>
+                    Close
+                </Button>
+            </DialogActions>
+        </ResponsiveDialog>
+    )
+}

src/bin/binModes/CooldownMode.tsx

@@ -0,0 +1,9 @@
+import { Box } from "@mui/material";
+
+export default function CooldownMode(){
+    return (
+        <Box>
+            
+        </Box>
+    )
+}

src/bin/binModes/DryingMode.tsx

@@ -0,0 +1,9 @@
+import { Box } from "@mui/material";
+
+export default function DryingMode(){
+    return (
+        <Box>
+            
+        </Box>
+    )
+}

src/bin/binModes/HydratingMode.tsx

@@ -0,0 +1,9 @@
+import { Box } from "@mui/material";
+
+export default function HydratingMode(){
+    return (
+        <Box>
+            
+        </Box>
+    )
+}

src/bin/binModes/StorageMode.tsx

@@ -0,0 +1,9 @@
+import { Box } from "@mui/material";
+
+export default function StorageMode(){
+    return (
+        <Box>
+            
+        </Box>
+    )
+}