finished the card to detect i2c components and select ones to add

src/device/autoDetect/DeviceScannedComponents.tsx

@@ -1,4 +1,4 @@
-import { Box, Card, DialogContent, FormControlLabel, Radio, RadioGroup, Step, StepLabel, Stepper } from "@mui/material";
+import { Box, Button, Card, DialogActions, DialogContent, DialogTitle, FormControlLabel, Grid2, Radio, RadioGroup, Step, StepLabel, Stepper, Typography } from "@mui/material";
 import { cloneDeep } from "lodash";
 import { getSubtypes, Subtype } from "pbHelpers/ComponentType";
 import { pond, quack } from "protobuf-ts/pond";
@@ -7,10 +7,16 @@ import { useEffect, useState } from "react";
 import ScannedI2C from "./ScannedI2C";
 import ComponentForm from "component/ComponentForm";
 import { Component, Device } from "models";
+import { DeviceAvailabilityMap, OffsetAvailabilityMap } from "pbHelpers/DeviceAvailability";
+import ResponsiveDialog from "common/ResponsiveDialog";
+import { useComponentAPI, useSnackbar } from "hooks";
 
 interface Props {
   scannedComponents: pond.ComponentAddressMap
   device: Device
+  availablePositions: DeviceAvailabilityMap
+  availableOffsets: OffsetAvailabilityMap
+  refreshCallback: () => void
 }
 
 interface CompStep {
@@ -19,12 +25,15 @@ interface CompStep {
 }
 
 export default function DeviceScannedComponents(props: Props){
-  const {scannedComponents, device} = props
+  const {scannedComponents, device, availablePositions, availableOffsets, refreshCallback} = props
+  const compAPI = useComponentAPI();
   const [scannedI2C, setScannedI2C] = useState<pond.DetectI2C>()
   const [components, setComponents] = useState<Component[]>([])
   const [steps, setSteps] = useState<CompStep[]>([]);
+  const { error, success } = useSnackbar();
   const [currentStep, setCurrentStep] = useState(0)
   const [settingsValid, setSettingsValid] = useState(false);
+  const [openDialog, setOpenDialog] = useState(false);
 
   useEffect(()=>{
     if (scannedComponents.i2c) setScannedI2C(scannedComponents.i2c)
@@ -38,6 +47,7 @@ export default function DeviceScannedComponents(props: Props){
         completed: false
       })
     })
+    setSteps(steps)
   },[components])
 
   const stepper = () => {
@@ -57,37 +67,136 @@ export default function DeviceScannedComponents(props: Props){
     );
   };
 
-  const addComponentContent = () => {
+  const addComponents = () => {
+    let c: pond.MultiComponentSettings = pond.MultiComponentSettings.create();
+    components.forEach(component => {
+      c.components.push(component.settings);
+    });
+    compAPI
+      .addMultiComponents(device.id(), c)
+      .then(resp => {
+        success("Components added to Device");
+      })
+      .catch(err => {
+        error("One or more component failed to add");
+      })
+      .finally(() => {
+        refreshCallback();
+      });
+  };
+
+  const addComponentDialog = () => {
     return (
-      <DialogContent>
-        {stepper()}
-        <ComponentForm
-          component={components[currentStep]}
-          canEdit
-          device={device}
-          componentChanged={(component, isValid) => {
-            components[currentStep].settings = component.settings;
-            setSettingsValid(isValid);
-          }}
-        />
-      </DialogContent>
+      <ResponsiveDialog open={openDialog} onClose={()=>{setOpenDialog(false)}}>
+        <DialogTitle>Adding Components</DialogTitle>
+        <DialogContent>
+          {stepper()}
+          <ComponentForm
+            component={components[currentStep]}
+            canEdit
+            device={device}
+            componentChanged={(component, isValid) => {
+              components[currentStep].settings = component.settings;
+              setSettingsValid(isValid);
+            }}
+            />
+        </DialogContent>
+            <DialogActions>
+                    <Grid2 container direction="row" justifyContent="space-between">
+                      <Grid2>
+                        <Button
+                          variant="contained"
+                          color="primary"
+                          onClick={() => {
+                            close();
+                          }}>
+                          Cancel
+                        </Button>
+                      </Grid2>
+                      <Grid2>
+                        {currentStep !== 0 && (
+                          <Button
+                            sx={{marginX: 1}}
+                            variant="contained"
+                            color="primary"
+                            onClick={() => {
+                              setCurrentStep(currentStep - 1);
+                            }}>
+                            Back
+                          </Button>
+                        )}
+                        {currentStep !== steps.length - 1 && (
+                          <React.Fragment>
+                            <Button
+                            sx={{marginX: 1}}
+                              variant="contained"
+                              color="primary"
+                              onClick={() => {
+                                setCurrentStep(currentStep + 1);
+                              }}>
+                              Next
+                            </Button>
+                          </React.Fragment>
+                        )}
+                        <Button
+                          sx={{marginX: 1}}
+                          variant="contained"
+                          color="primary"
+                          onClick={() => {
+                            //setConfirmationDialogOpen(true)
+                            setOpenDialog(false)
+                            addComponents();
+                          }}>
+                          Confirm
+                        </Button>
+                      </Grid2>
+                    </Grid2>
+                  </DialogActions>
+      </ResponsiveDialog>
     );
   };
 
+  const componentSelection = (newComponent: Component, checked: boolean) => {
+    let cloneList = cloneDeep(components)
+    if(checked){
+      //add the component to the list
+      cloneList.push(newComponent)
+    }else{
+      //remove any components that match the component location: (type)-(addressType)-(address)
+      components.forEach((comp, i) => {
+        //check the components location against the one in the list
+        if(comp.locationString() === newComponent.locationString()){
+          cloneList.splice(i, 1)
+        }
+      })
+    }
+    setComponents(cloneList)
+  }
+
 
 
   return (
-    <Card>
-      {scannedI2C && 
-        <React.Fragment>
-        <Box>I2C Components Found</Box>
-        {scannedI2C?.settings?.foundAddresses.map((addr, index) => {
-          return (
-            <ScannedI2C key={index} decimalAddress={addr} deviceProduct={device.settings.product} updateComponentList={()=>{}} />
-          )
-        })}
-        </React.Fragment>
-      }
-    </Card>
+    <React.Fragment>
+      <Card raised sx={{padding: 1}}>
+        {scannedI2C !== undefined && 
+          <React.Fragment>
+          <Box>
+            <Typography sx={{fontWeight: 650}}>
+              I2C Components Found
+            </Typography>
+          </Box>
+          {scannedI2C?.settings?.foundAddresses.map((addr, index) => {
+            return (
+              <ScannedI2C key={index} decimalAddress={addr} deviceProduct={device.settings.product} componentSelectionCallback={componentSelection} availablePositions={availablePositions.get(quack.AddressType.ADDRESS_TYPE_I2C) ?? []}/>
+            )
+          })}
+          </React.Fragment>
+        }
+        <Box display="flex" flexDirection="row-reverse" marginTop={2}>
+          <Button disabled={components.length === 0} variant="contained" color="primary" onClick={()=>{setOpenDialog(true)}}>Add Components</Button>
+        </Box>
+      </Card>
+      {addComponentDialog()}
+    </React.Fragment>
   )
 }