finished the functionality for adding components from the scan

src/device/autoDetect/DeviceScannedComponents.tsx

@@ -203,6 +203,7 @@ export default function DeviceScannedComponents(props: Props){
         })
       })
     }
+    console.log(cloneList)
     setComponents(cloneList)
   }
 
@@ -251,7 +252,6 @@ export default function DeviceScannedComponents(props: Props){
               <Typography sx={{fontWeight: 650}}>
                 Pin Port Sensors
               </Typography>
-              <Button variant="contained" color="primary" onClick={()=>{}}>Clear Scan</Button>
             </Box>
             {scannedOneWire.map((scan,i) => {
               let map = FindAvailablePositions([], device.settings.product).availability.get(quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY)
@@ -265,9 +265,14 @@ export default function DeviceScannedComponents(props: Props){
                 }
               })
               return(
-                <Box key={i}>
-                  <Typography>Port: {portLabel}</Typography>
-                  <ScannedOneWirePort scan={scan}/>
+                <Box key={i} padding={2} paddingBottom={0}>
+                  <Box  display="flex" justifyContent="space-between">
+                    <Typography>Port: {portLabel}</Typography>
+                    <Button variant="contained" color="primary" onClick={()=>{
+                      removeScan(scan.key)
+                    }}>Clear Port Scan</Button>
+                  </Box>
+                    <ScannedOneWirePort scan={scan} componentSelectionCallback={componentSelection}/>
                 </Box>
               )
             })}

src/device/autoDetect/OneWire/PortComponent.tsx

@@ -1,46 +1,84 @@
-import { Box, MenuItem, TextField } from "@mui/material"
+import { Box, Checkbox, MenuItem, TextField, Tooltip } from "@mui/material"
 import { getFriendlyName, getSubtypes, Subtype } from "pbHelpers/ComponentType"
 import { quack } from "protobuf-ts/quack"
 import React, { useEffect, useState } from "react"
 
 interface Props {
   compData: quack.OneWireComponentData
+  componentSelect: (selected: boolean, componentData: quack.OneWireComponentData) => void
 }
 
 export default function PortComponent(props: Props){
-  const {compData} = props
-  const [selectedSubtype, setSelectedSubtype] = useState<number>(-1)
+  const {compData, componentSelect} = props
+  // const [selectedSubtype, setSelectedSubtype] = useState<number>(0)
+  const [subtypeVal, setSubtypeVal] = useState("none")//note that this is the friendly name and not the key or the value because it needs to be different from the other alias options
+  const [subtypeMap, setSubtypeMap] = useState<Map<string, number>>(new Map())
+  const [subtypeOptions, setSubtypeOptions] = useState<Subtype[]>([])
+  const [added, setAdded] = useState(false)
 
   useEffect(()=>{
-    setSelectedSubtype(compData.subtype)
-  },[compData])
-
-  const subtypeSelector = (compData: quack.OneWireComponentData) => {
+    // setSelectedSubtype(compData.subtype)
     let validSubtypes: Subtype[] = []
+    let subMap: Map<string, number> = new Map()
+    let subVal: string = "none"
     getSubtypes(compData.type).forEach(option => {
       if(compData.subtype === option.key || compData.subtype === 0){
         validSubtypes.push(option)
+        if(subVal === "none"){
+          subVal = option.friendlyName
+        }
       }
+      subMap.set(option.friendlyName, option.key)
     })
+    setSubtypeOptions(validSubtypes)
+    setSubtypeMap(subMap)
+    setSubtypeVal(subVal)
+  },[compData])
+
+  const subtypeSelector = () => {
     return (
       <TextField
-        value={selectedSubtype}
+        value={subtypeVal}
+        disabled={added}
+        onChange={(event) => {
+          setSubtypeVal(event.target.value)
+          // setSelectedSubtype(subtypeMap.get(event.target.value) ?? 0)
+          compData.subtype = subtypeMap.get(event.target.value) ?? 0
+        }}
         select>
-          <MenuItem key={-1} value={-1}>Select the Component Subtype</MenuItem>
-        {validSubtypes.map((s, i) => (
-          <MenuItem key={i} value={s.key}>{s.friendlyName}</MenuItem>
+          <MenuItem key={-1} value={"none"}>Select the Component Subtype</MenuItem>
+        {subtypeOptions.map((s, i) => (
+          <MenuItem key={i} value={s.friendlyName}>{s.friendlyName}</MenuItem>
       ))}
       </TextField>
     )
   }
 
+  const selectCompCheckbox = () => {
+    return (
+      <Tooltip 
+      title="Add to list to be added to the device"
+      children={
+        <Checkbox 
+        value={added}
+        onChange={(_, checked) => {
+          setAdded(checked)
+          componentSelect(checked, compData)
+        }}
+        />
+      }
+      />
+    )
+  }
+
   return (
     <React.Fragment>
           <Box>
             {getFriendlyName(compData.type)}
             Cable ID: {compData.cableId}
             Number of nodes: {compData.nodeCount}
-            {subtypeSelector(compData)}
+            {subtypeOptions.length < 2 ? subtypeVal : subtypeSelector()}
+            {selectCompCheckbox()}
           </Box>
     </React.Fragment>
   )

src/device/autoDetect/OneWire/ScannedOneWirePort.tsx

@@ -4,26 +4,49 @@ import { pond } from "protobuf-ts/pond"
 import { quack } from "protobuf-ts/quack"
 import React, { useEffect, useState } from "react"
 import PortComponent from "./PortComponent"
+import { Component } from "models"
 
 interface Props {
   scan: pond.DetectOneWire
+  componentSelectionCallback: (newComponents: Component[], checked: boolean) => void
 }
 
 export default function ScannedOneWirePort(props: Props){
-  const {scan} = props
+  const {scan, componentSelectionCallback} = props
   const [portComponents, setPortComponents] = useState<quack.OneWireComponentData[]>([])
 
   useEffect(()=>{
     setPortComponents(scan.settings?.oneWireData?.components ?? [])
   },[scan])
 
+  const componentSelected = (checked: boolean, componentData: quack.OneWireComponentData) => {
+    let newComponents: Component[] = []
+    //use the component data to create a new Component
+    //build a component with given information and defaults for the rest
+    let primaryComponent = Component.create()
+    primaryComponent.settings.type = componentData.type
+    primaryComponent.settings.subtype = componentData.subtype
+    primaryComponent.settings.address = scan.settings?.oneWireData?.port ?? 0
+    primaryComponent.settings.addressType = quack.AddressType.ADDRESS_TYPE_CONFIGURABLE_PIN_ARRAY
+    primaryComponent.settings.name = getFriendlyName(componentData.type, componentData.subtype)
+
+    //need to check if the component is chainable, meaning the address type will reflect the cable id
+    let ext = extension(componentData.type, componentData.subtype)
+    if(ext.isChainable){
+    primaryComponent.settings.addressType = componentData.cableId + 8
+    }
+    newComponents.push(primaryComponent)
+
+    componentSelectionCallback(newComponents, checked)
+  }
+
   return (
     <React.Fragment>
       {portComponents.map((compData, i) => {
-        // let ext = extension(compData.type, compData.subtype)
-        // console.log(ext)
         return (
-          <PortComponent compData={compData}/>
+          <PortComponent key={i} compData={compData} componentSelect={(checked, component) => {
+            componentSelected(checked, component)
+          }}/>
         )
       })}
     </React.Fragment>