implemented the epansion line stuff

made adjustments to to the grain cable by adding i2c as an option as long as you set and expander line,
also ajusted DeviceAvailability so that an i2c address will not be claimed if the component has an expansion line set, updated the device wizard to removed pin options if the i2c port was selected and vice versa for pins since we now have a components that supports both types, updated the components setting to set the default address type based on the restriction passed in that is set by the wizard, and fall back to what is was before if one is not passed in

src/component/ComponentSettings.tsx

@@ -169,6 +169,7 @@ export default function ComponentSettings(props: Props) {
   const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
   const [formComponent, setFormComponent] = useState<Component>(new Component());
   const [cableID, setCableID] = useState(0);
+  const [expansionLine, setExpansionLine] = useState(0);
   const [overlayIndex, setOverlayIndex] = useState(0);
   const [overlayColourDialog, setOverlayCoulourDialog] = useState(false);
   const [tabVal, setTabVal] = useState(0);
@@ -222,6 +223,9 @@ export default function ComponentSettings(props: Props) {
   const isFormValid = () => {
     //let { component } = form;
     let type = or(formComponent.settings.type, "");
+    if(supportsExpansion() && expansionLine === 0){
+      return false
+    }
     return isComponentTypeValid(type) && isAddressValid(formComponent);
   };
 
@@ -238,7 +242,6 @@ export default function ComponentSettings(props: Props) {
     componentType: quack.ComponentType
   ): number[] => {
     let positions = availablePositions.get(addressType);
-    console.log(positions)
     if (!positions) return [];
     switch (addressType) {
       case quack.AddressType.ADDRESS_TYPE_I2C:
@@ -306,6 +309,7 @@ export default function ComponentSettings(props: Props) {
     const component = formComponent;
     //component.settings.calibrationCoefficient = Number(form.coefficient);
     if (cableID > 0) component.settings.addressType = cableID + 8;
+    component.settings.expansionLine = expansionLine
     componentAPI
       .add(device.id(), component.settings, as)
       .then((_response: any) => {
@@ -372,10 +376,10 @@ export default function ComponentSettings(props: Props) {
       let ext = extension(type, subtype);
       formComponent.settings.type = type;
       formComponent.settings.subtype = subtype;
-      formComponent.settings.addressType = getAddressTypes(
+      formComponent.settings.addressType = or(addressTypeRestriction, getAddressTypes(
         formComponent.settings.type,
         formComponent.settings.subtype
-      )[0];
+      )[0]);
       formComponent.settings.address = or(
         getAvailablePositions(formComponent.settings.addressType, formComponent.settings.type)[0],
         Component.create().settings.address
@@ -398,11 +402,19 @@ export default function ComponentSettings(props: Props) {
   };
 
   const handlePositionChanged = (event: any) => {
+    setCableID(0)
+    setExpansionLine(0)
     let f = cloneDeep(formComponent);
-    f.settings.address = event.target.value
-      .toString()
-      .split(":")
-      .pop();
+    //split the string
+    let split: string[] = event.target.value.toString().split(":")
+    // pop the addres off of the end of the array
+    f.settings.address = parseInt(split.pop() ?? "0")
+    // pop the address type out of the array next
+    f.settings.addressType = parseInt(split.pop() ?? "0")
+    // f.settings.address = event.target.value
+    //   .toString()
+    //   .split(":")
+    //   .pop();
     setFormComponent(f);
   };
 
@@ -413,7 +425,6 @@ export default function ComponentSettings(props: Props) {
     for (let i = 0; i < addressTypes.length; i++) {
       let addressType = addressTypes[i];
       let availablePositions = getAvailablePositions(addressType, type);
-      console.log(availablePositions)
 
       availableMenuItemPositions.push(
         <MenuItem key={addressType} divider disabled>
@@ -490,6 +501,21 @@ export default function ComponentSettings(props: Props) {
     );
   };
 
+  const isCableComponent = () => {
+    return (formComponent.settings.type === quack.ComponentType.COMPONENT_TYPE_GRAIN_CABLE ||
+              formComponent.settings.type ===
+                quack.ComponentType.COMPONENT_TYPE_DRAGER_GAS_DONGLE ||
+              formComponent.settings.type === quack.ComponentType.COMPONENT_TYPE_PRESSURE_CABLE ||
+              (formComponent.settings.type === quack.ComponentType.COMPONENT_TYPE_CAPACITOR_CABLE &&
+                formComponent.subType() ===
+                  quack.CapacitorCableSubtype.CAPACITOR_CABLE_SUBTYPE_FROG))
+  }
+
+  const supportsExpansion = () => {
+    return (formComponent.settings.type === quack.ComponentType.COMPONENT_TYPE_GRAIN_CABLE &&
+            formComponent.settings.addressType === quack.AddressType.ADDRESS_TYPE_I2C)
+  }
+
   const addForm = () => {
     return (
       <DialogContent>
@@ -543,14 +569,8 @@ export default function ComponentSettings(props: Props) {
                 formComponent.settings.subtype
               )}
             </TextField>
-            {(formComponent.settings.type === quack.ComponentType.COMPONENT_TYPE_GRAIN_CABLE ||
-              formComponent.settings.type ===
-                quack.ComponentType.COMPONENT_TYPE_DRAGER_GAS_DONGLE ||
-              formComponent.settings.type === quack.ComponentType.COMPONENT_TYPE_PRESSURE_CABLE ||
-              (formComponent.settings.type === quack.ComponentType.COMPONENT_TYPE_CAPACITOR_CABLE &&
-                formComponent.subType() ===
-                  quack.CapacitorCableSubtype.CAPACITOR_CABLE_SUBTYPE_FROG)) &&
-              setComponentAddrType()}
+            {supportsExpansion() && setExpLine()}
+            {(isCableComponent() && !supportsExpansion())&& setComponentAddrType()}
           </React.Fragment>
         ) : activeStep === 1 ? (
           <ComponentForm
@@ -582,6 +602,28 @@ export default function ComponentSettings(props: Props) {
       </DialogContent>
     );
   };
+
+  const setExpLine = () => {
+    return (
+      <TextField
+        label="Expansion Line"
+        type="number"
+        margin="normal"
+        error={expansionLine < 1 || expansionLine > 12}
+        fullWidth
+        variant="outlined"
+        value={expansionLine}
+        helperText="Enter line the cable is connected to on your expander"
+        onChange={e => {
+          let number = parseInt(e.target.value);
+          if (number < 0 || isNaN(number)) number = 0;
+          if (number > 12) number = 12;
+          setExpansionLine(number);
+        }}
+      />
+    );
+  };
+
   const setComponentAddrType = () => {
     return (
       <TextField