refactor(control schemes): add multiple inputs support for a binding

src/app/control-schemes/binding-edit/binding-linear/binding-linear-edit.component.html

@@ -1,12 +1,12 @@
 <ng-container *ngIf="form">
     <app-controller-select [operationMode]="linearHubIoOperationMode"
-                           [inputFormGroup]="form.controls.input"
-                           [title]="'controlScheme.bindingGenericInputTitle' | transloco "
+                           [inputFormGroup]="form.controls.inputs.controls.accelerate"
+                           [title]="'controlScheme.linearInput' | transloco "
     ></app-controller-select>
 
-    <ng-container *ngIf="form.controls.input.valid">
+    <ng-container *ngIf="form.controls.inputs.valid">
         <app-binding-input-gain-select *ngIf="isInputGainConfigurable"
-                                       [control]="form.controls.input.controls.gain"
+                                       [control]="form.controls.inputs.controls.accelerate.controls.gain"
         ></app-binding-input-gain-select>
 
         <app-slider-control [min]="0"

src/app/control-schemes/binding-edit/binding-linear/binding-linear-edit.component.ts

@@ -21,7 +21,7 @@ import { BindingInputGainSelectComponent } from '../control-axial-output-modifie
         ToggleControlComponent,
         BindingControlSelectControllerComponent,
         TranslocoModule,
-        BindingInputGainSelectComponent
+        BindingInputGainSelectComponent,
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
@@ -40,24 +40,25 @@ export class BindingLinearEditComponent implements IBindingsDetailsEditComponent
     }
 
     public get isToggleable(): boolean {
-        const inputType = this.form?.controls.input.controls.inputType.value;
+        const inputType = this.form?.controls.inputs.controls.accelerate.controls.inputType.value;
         return inputType === ControllerInputType.Button || inputType === ControllerInputType.ButtonGroup;
     }
 
     public get isInputGainConfigurable(): boolean {
-        return this.form?.controls.input.controls.inputType.value === ControllerInputType.Axis
-            || this.form?.controls.input.controls.inputType.value === ControllerInputType.Trigger;
+        return this.form?.controls.inputs.controls.accelerate.controls.inputType.value === ControllerInputType.Axis
+            || this.form?.controls.inputs.controls.accelerate.controls.inputType.value === ControllerInputType.Trigger;
     }
 
     public setForm(
         outputBinding: LinearBindingForm
     ): void {
+        const accelerateControls = outputBinding.controls.inputs.controls.accelerate.controls;
         if (outputBinding !== this.form) {
             this.form = outputBinding;
             merge(
-                outputBinding.controls.input.controls.controllerId.valueChanges,
-                outputBinding.controls.input.controls.inputId.valueChanges,
-                outputBinding.controls.input.controls.inputType.valueChanges,
+                accelerateControls.controllerId.valueChanges,
+                accelerateControls.inputId.valueChanges,
+                accelerateControls.inputType.valueChanges,
             ).subscribe(() => {
                 this.cd.markForCheck();
             });

src/app/control-schemes/binding-edit/binding-servo/binding-servo-edit.component.html

@@ -1,12 +1,12 @@
 <ng-container *ngIf="form">
     <app-controller-select [operationMode]="servoOperationMode"
-                           [inputFormGroup]="form.controls.input"
-                           [title]="'controlScheme.bindingGenericInputTitle' | transloco "
+                           [inputFormGroup]="form.controls.inputs.controls.servo"
+                           [title]="'controlScheme.servoInput' | transloco "
     ></app-controller-select>
 
-    <ng-container *ngIf="form.controls.input.valid">
+    <ng-container *ngIf="form.controls.inputs.valid">
         <app-binding-input-gain-select *ngIf="isInputGainConfigurable"
-                                       [control]="form.controls.input.controls.gain"
+                                       [control]="form.controls.inputs.controls.servo.controls.gain"
         ></app-binding-input-gain-select>
 
         <button mat-raised-button

src/app/control-schemes/binding-edit/binding-servo/binding-servo-edit.component.ts

@@ -58,8 +58,8 @@ export class BindingServoEditComponent implements IBindingsDetailsEditComponent<
     }
 
     public get isInputGainConfigurable(): boolean {
-        return this.form?.controls.input.controls.inputType.value === ControllerInputType.Axis
-            || this.form?.controls.input.controls.inputType.value === ControllerInputType.Trigger;
+        return this.form?.controls.inputs.controls.servo.controls.inputType.value === ControllerInputType.Axis
+            || this.form?.controls.inputs.controls.servo.controls.inputType.value === ControllerInputType.Trigger;
     }
 
     public get canCalibrate$(): Observable<boolean> {

src/app/control-schemes/binding-edit/binding-set-angle/binding-set-angle-edit.component.html

@@ -1,10 +1,10 @@
 <ng-container *ngIf="form">
     <app-controller-select [operationMode]="setAngleHubIoOperationMode"
-                           [inputFormGroup]="form.controls.input"
-                           [title]="'controlScheme.bindingGenericInputTitle' | transloco "
+                           [inputFormGroup]="form.controls.inputs.controls.setAngle"
+                           [title]="'controlScheme.setAngleInput' | transloco "
     ></app-controller-select>
 
-    <ng-container *ngIf="form.controls.input.valid">
+    <ng-container *ngIf="form.controls.inputs.valid">
         <app-binding-control-num-input [translocoTitle]="'controlScheme.setAngleOutputConfigurationAngle'"
                                        [control]="form.controls.angle"
                                        [min]="motorLimits.minRawAngle"

src/app/control-schemes/binding-edit/binding-stepper/binding-stepper-edit.component.html

@@ -1,10 +1,10 @@
 <ng-container *ngIf="form">
     <app-controller-select [operationMode]="stepperHubIoOperationMode"
-                           [inputFormGroup]="form.controls.input"
-                           [title]="'controlScheme.bindingGenericInputTitle' | transloco "
+                           [inputFormGroup]="form.controls.inputs.controls.step"
+                           [title]="'controlScheme.stepperInput' | transloco "
     ></app-controller-select>
 
-    <ng-container *ngIf="form.controls.input.valid">
+    <ng-container *ngIf="form.controls.inputs.valid">
         <app-binding-control-num-input [translocoTitle]="'controlScheme.stepperOutputConfigurationDegree'"
                                        [control]="form.controls.degree"
                                        [min]="minStepperDegree"

src/app/control-schemes/binding-edit/control-select-controller/binding-control-select-controller.component.html

@@ -1,26 +1,31 @@
 <ng-container *ngIf="inputFormGroup">
-    <div *ngIf="inputFormGroup.valid; else assignControl"
-         class="control-info">
+    <div class="control-info">
+        <mat-icon [fontIcon]="'gamepad'"></mat-icon>
         <mat-label class="title">
-            {{ title }}:
+            {{ title }}
         </mat-label>
-        <app-full-controller-input-name class="control-info__control-name"
-                                        [inputData]="controllerData"
-        ></app-full-controller-input-name>
+        <ng-container *ngIf="inputFormGroup.valid; else controllerIsNotAssigned">
+            <app-full-controller-input-name class="control-info__control-name"
+                                            [inputData]="controllerData"
+            ></app-full-controller-input-name>
 
-        <button mat-raised-button
-                (click)="onBind()"
-        >
-            {{ 'controlScheme.bindToAnotherInputButtonTitle' | transloco }}
-        </button>
+            <button mat-raised-button
+                    (click)="onBind()"
+            >
+                {{ 'controlScheme.bindToAnotherInputButtonTitle' | transloco }}
+            </button>
+        </ng-container>
+        <ng-template #controllerIsNotAssigned>
+            <span class="control-info__control-name">
+                {{ 'controlScheme.bindingInputIsNotAssigned' | transloco }}
+            </span>
+
+            <button class="assign-control"
+                    mat-raised-button
+                    (click)="onBind()"
+            >
+                {{ 'controlScheme.bindingAssignControlButtonTitle' | transloco }}
+            </button>
+        </ng-template>
     </div>
 </ng-container>
-
-<ng-template #assignControl>
-    <button class="assign-control"
-            mat-raised-button
-            (click)="onBind()"
-    >
-        {{ 'controlScheme.bindingAssignControlButtonTitle' | transloco }}
-    </button>
-</ng-template>

src/app/control-schemes/binding-edit/control-select-controller/binding-control-select-controller.component.scss

@@ -4,7 +4,7 @@
 
 .title {
     font-weight: 500;
-    margin-right: 10px;
+    margin: 0 10px;
 }
 
 .control-info {
@@ -16,7 +16,3 @@
         flex-grow: 1;
     }
 }
-
-.assign-control {
-    width: 100%;
-}

src/app/control-schemes/binding-edit/control-select-controller/binding-control-select-controller.component.ts

@@ -2,9 +2,9 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@a
 import { NgIf } from '@angular/common';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 import { TranslocoModule } from '@ngneat/transloco';
 import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
 import { ControlSchemeInput, ControllerInputModel } from '@app/store';
 import { HubIoOperationMode, ToFormGroup } from '@app/shared';
 
@@ -21,9 +21,9 @@ import { FullControllerInputNameComponent } from '../../full-controller-input-na
         MatDialogModule,
         FullControllerInputNameComponent,
         MatButtonModule,
-        MatIconModule,
         TranslocoModule,
-        MatInputModule
+        MatInputModule,
+        MatIconModule
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })

src/app/control-schemes/binding-edit/form-builders/linear-output-control-form-builder.service.ts

@@ -15,7 +15,9 @@ export class LinearOutputControlFormBuilderService {
     public build(): LinearBindingForm {
         return this.formBuilder.group({
             id: this.commonFormControlBuilder.schemeIdControl(),
-            input: this.commonFormControlBuilder.inputFormGroup(),
+            inputs: this.formBuilder.group({
+                accelerate: this.commonFormControlBuilder.inputFormGroup()
+            }),
             hubId: this.commonFormControlBuilder.hubIdControl(),
             portId: this.commonFormControlBuilder.portIdControl(),
             maxSpeed: this.commonFormControlBuilder.speedControl(),

src/app/control-schemes/binding-edit/form-builders/servo-output-control-form-builder.service.ts

@@ -16,7 +16,9 @@ export class ServoOutputControlFormBuilderService {
     public build(): ServoBindingForm {
         return this.formBuilder.group({
             id: this.commonFormControlBuilder.schemeIdControl(),
-            input: this.commonFormControlBuilder.inputFormGroup(),
+            inputs: this.formBuilder.group({
+                servo: this.commonFormControlBuilder.inputFormGroup()
+            }),
             hubId: this.commonFormControlBuilder.hubIdControl(),
             portId: this.commonFormControlBuilder.portIdControl(),
             range: this.formBuilder.control<number>(MOTOR_LIMITS.maxServoDegreesRange, {

src/app/control-schemes/binding-edit/form-builders/set-angle-output-control-form-builder.service.ts

@@ -15,7 +15,9 @@ export class SetAngleOutputControlFormBuilderService {
     public build(): SetAngleBindingForm {
         return this.formBuilder.group({
             id: this.commonFormControlBuilder.schemeIdControl(),
-            input: this.commonFormControlBuilder.inputFormGroup(),
+            inputs: this.formBuilder.group({
+                setAngle: this.commonFormControlBuilder.inputFormGroup()
+            }),
             hubId: this.commonFormControlBuilder.hubIdControl(),
             portId: this.commonFormControlBuilder.portIdControl(),
             angle: this.formBuilder.control<number>(0, {

src/app/control-schemes/binding-edit/form-builders/stepper-output-control-form-builder.service.ts

@@ -18,7 +18,9 @@ export class StepperOutputControlFormBuilderService {
     public build(): StepperBindingForm {
         return this.formBuilder.group({
             id: this.commonFormControlBuilder.schemeIdControl(),
-            input: this.commonFormControlBuilder.inputFormGroup(),
+            inputs: this.formBuilder.group({
+                step: this.commonFormControlBuilder.inputFormGroup()
+            }),
             hubId: this.commonFormControlBuilder.hubIdControl(),
             portId: this.commonFormControlBuilder.portIdControl(),
             degree: this.formBuilder.control<number>(this.defaultStepDegree, {

src/app/control-schemes/control-scheme-page/control-scheme-view-io-list/binding-tree-node/binding-tree-node.component.ts

@@ -12,7 +12,7 @@ import { MatListModule } from '@angular/material/list';
 import { EllipsisTitleDirective, HubIoOperationMode, IoOperationTypeToL10nKeyPipe } from '@app/shared';
 
 import { BindingTreeNodeViewModel } from './binding-tree-node-view-model';
-import { SINGLE_INPUT_TREE_NODE_VIEW_MODEL_SELECTOR } from './single-input-tree-node-view-model.selector';
+import { INPUT_TREE_NODE_VIEW_MODEL_SELECTOR } from './input-tree-node-view-model.selector';
 import { FullControllerInputNameComponent } from '../../../full-controller-input-name';
 import { BindingViewUrlPipe } from './binding-view-url.pipe';
 import { ControlSchemeViewBindingTreeNodeData } from '../../types';
@@ -76,9 +76,9 @@ export class BindingTreeNodeComponent {
             case HubIoOperationMode.SetAngle:
             case HubIoOperationMode.Servo:
             case HubIoOperationMode.Linear:
-                return this.store.select(SINGLE_INPUT_TREE_NODE_VIEW_MODEL_SELECTOR(
+                return this.store.select(INPUT_TREE_NODE_VIEW_MODEL_SELECTOR(
                     treeNodeData.controlSchemeId,
-                    treeNodeData.binding.input,
+                    treeNodeData.binding.inputs,
                     treeNodeData.binding.operationMode,
                     treeNodeData.binding.id,
                     treeNodeData.isActive,

src/app/control-schemes/control-scheme-page/control-scheme-view-io-list/binding-tree-node/input-tree-node-view-model.selector.ts

@@ -0,0 +1,33 @@
+import { createSelector } from '@ngrx/store';
+import { Dictionary } from '@ngrx/entity';
+import { CONTROLLER_CONNECTION_SELECTORS, ControlSchemeInput, ControlSchemeInputsRecord, ControllerConnectionModel } from '@app/store';
+import { HubIoOperationMode } from '@app/shared';
+
+import { BindingTreeNodeRecord, BindingTreeNodeViewModel } from './binding-tree-node-view-model';
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export const INPUT_TREE_NODE_VIEW_MODEL_SELECTOR = (
+    controlSchemeId: string,
+    inputs: ControlSchemeInputsRecord,
+    operationMode: HubIoOperationMode,
+    bindingId: string,
+    isActive: boolean,
+    ioHasNoRequiredCapabilities: boolean
+) => createSelector(
+    CONTROLLER_CONNECTION_SELECTORS.selectEntities,
+    (controllerConnectionEntities: Dictionary<ControllerConnectionModel>): BindingTreeNodeViewModel => {
+        return {
+            controlSchemeId,
+            bindingId,
+            isActive,
+            ioHasNoRequiredCapabilities,
+            operationMode,
+            controlData: Object.values(inputs).map((input: ControlSchemeInput): BindingTreeNodeRecord => {
+                return {
+                    input,
+                    isControllerConnected: !!controllerConnectionEntities[input.controllerId]
+                };
+            })
+        };
+    }
+);

src/app/control-schemes/control-scheme-page/control-scheme-view.selectors.ts

@@ -207,7 +207,7 @@ export const CONTROL_SCHEME_VIEW_SELECTORS = {
         (
             viewTree,
             runningState,
-            controllerEntities: Dictionary<ControllerConnectionModel>
+            controllerConnectionEntities: Dictionary<ControllerConnectionModel>
         ): boolean => {
             let allHubAreConnected = true;
             let allIosAreConnected = true;
@@ -222,7 +222,11 @@ export const CONTROL_SCHEME_VIEW_SELECTORS = {
                 hubNode.children.forEach((ioNode) => {
                     allIosAreConnected = allIosAreConnected && ioNode.isConnected;
                     allIosTypesMatches = allIosTypesMatches && ioNode.children.every((c) => !c.ioHasNoRequiredCapabilities);
-                    allControllersConnected = allControllersConnected && ioNode.children.some((c) => !!controllerEntities[c.binding.input.controllerId]);
+                    ioNode.children.forEach((c) => {
+                        Object.values(c.binding.inputs).forEach((input) => {
+                            allControllersConnected = allControllersConnected && !!controllerConnectionEntities[input.controllerId];
+                        });
+                    });
                     hasBindings = hasBindings || ioNode.children.length > 0;
                 });
             });

src/app/store/effects/tasks-processing/task-builder/servo-task-builder.ts

@@ -19,14 +19,14 @@ export class ServoTaskBuilder extends BaseTaskBuilder {
             return null;
         }
 
-        const inputRecord = inputsState[controllerInputIdFn(binding.input)];
-        const inputValue = calcInputGain(inputRecord?.value ?? 0, binding.input.gain);
+        const servoInput = inputsState[controllerInputIdFn(binding.inputs.servo)];
+        const servoInputValue = calcInputGain(servoInput?.value ?? 0, binding.inputs.servo.gain);
 
         const translationPaths = getTranslationArcs(motorEncoderOffset, binding.aposCenter);
         const resultingCenter = translationPaths.cw < translationPaths.ccw ? translationPaths.cw : -translationPaths.ccw;
 
         const arcSize = binding.range;
-        const arcPosition = inputValue * arcSize / 2 * (binding.invert ? -1 : 1);
+        const arcPosition = servoInputValue * arcSize / 2 * (binding.invert ? -1 : 1);
 
         const targetAngle = arcPosition + resultingCenter;
         const minAngle = resultingCenter - arcSize / 2;
@@ -43,7 +43,7 @@ export class ServoTaskBuilder extends BaseTaskBuilder {
             useAccelerationProfile: binding.useAccelerationProfile,
             useDecelerationProfile: binding.useDecelerationProfile,
         };
-        return { payload, inputTimestamp: inputRecord?.timestamp ?? Date.now() };
+        return { payload, inputTimestamp: servoInput?.timestamp ?? Date.now() };
     }
 
     protected buildCleanupPayload(