feat(controllers): add handset input support

nvsukhanov · Aug 16, 2023 · ecaef58 · ecaef58
1 parent bb8cd3e
commit ecaef58
Show file tree

Hide file tree

Showing 40 changed files with 398 additions and 230 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "@ngrx/router-store": "^16.0.1",
     "@ngrx/store": "^16.0.1",
     "@ngrx/store-devtools": "^16.0.1",
-    "@nvsukhanov/rxpoweredup": "^0.0.33",
+    "@nvsukhanov/rxpoweredup": "^0.0.35",
     "ngrx-store-localstorage": "^16.0.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.2",

diff --git a/src/app/control-schemes/binding-edit/binding-linear/binding-linear-edit.component.html b/src/app/control-schemes/binding-edit/binding-linear/binding-linear-edit.component.html
@@ -1,14 +1,12 @@
 <ng-container *ngIf="form">
-    <app-controller-select [controllerIdFormControl]="form.controls.controllerId"
-                           [inputIdFormControl]="form.controls.inputId"
-                           [operationMode]="linearHubIoOperationMode"
-                           [inputTypeControl]="form.controls.inputType"
+    <app-controller-select [operationMode]="linearHubIoOperationMode"
+                           [inputFormGroup]="form.controls.input"
                            [title]="'controlScheme.bindingGenericInputTitle' | transloco "
     ></app-controller-select>
 
-    <ng-container *ngIf="form.controls.controllerId.valid && form.controls.inputId.valid">
+    <ng-container *ngIf="form.controls.input.valid">
         <app-binding-input-gain-select *ngIf="isInputGainConfigurable"
-                                       [control]="form.controls.inputGain"
+                                       [control]="form.controls.input.controls.gain"
         ></app-binding-input-gain-select>
 
         <app-slider-control [min]="0"
@@ -23,7 +21,7 @@
                             [translocoTitle]="'controlScheme.outputPowerControlTitle'"
         ></app-slider-control>
 
-        <app-toggle-control *ngIf="form.controls.inputType.value === controllerInputButtonType"
+        <app-toggle-control *ngIf="isToggleable"
                             [translocoTitle]="'controlScheme.linearOutputConfigurationTreatAsSwitch'"
                             [control]="form.controls.isToggle"
         ></app-toggle-control>

diff --git a/src/app/control-schemes/binding-edit/binding-linear/binding-linear-edit.component.ts b/src/app/control-schemes/binding-edit/binding-linear/binding-linear-edit.component.ts
@@ -39,9 +39,14 @@ export class BindingLinearEditComponent implements IBindingsDetailsEditComponent
     ) {
     }
 
+    public get isToggleable(): boolean {
+        const inputType = this.form?.controls.input.controls.inputType.value;
+        return inputType === ControllerInputType.Button || inputType === ControllerInputType.ButtonGroup;
+    }
+
     public get isInputGainConfigurable(): boolean {
-        return this.form?.controls.inputType.value === ControllerInputType.Axis
-            || this.form?.controls.inputType.value === ControllerInputType.Trigger;
+        return this.form?.controls.input.controls.inputType.value === ControllerInputType.Axis
+            || this.form?.controls.input.controls.inputType.value === ControllerInputType.Trigger;
     }
 
     public setForm(
@@ -50,9 +55,9 @@ export class BindingLinearEditComponent implements IBindingsDetailsEditComponent
         if (outputBinding !== this.form) {
             this.form = outputBinding;
             merge(
-                outputBinding.controls.controllerId.valueChanges,
-                outputBinding.controls.inputId.valueChanges,
-                outputBinding.controls.inputType.valueChanges,
+                outputBinding.controls.input.controls.controllerId.valueChanges,
+                outputBinding.controls.input.controls.inputId.valueChanges,
+                outputBinding.controls.input.controls.inputType.valueChanges,
             ).subscribe(() => {
                 this.cd.markForCheck();
             });

diff --git a/src/app/control-schemes/binding-edit/binding-servo/binding-servo-edit.component.html b/src/app/control-schemes/binding-edit/binding-servo/binding-servo-edit.component.html
@@ -1,14 +1,12 @@
 <ng-container *ngIf="form">
-    <app-controller-select [controllerIdFormControl]="form.controls.controllerId"
-                           [inputIdFormControl]="form.controls.inputId"
-                           [operationMode]="servoOperationMode"
-                           [inputTypeControl]="form.controls.inputType"
+    <app-controller-select [operationMode]="servoOperationMode"
+                           [inputFormGroup]="form.controls.input"
                            [title]="'controlScheme.bindingGenericInputTitle' | transloco "
     ></app-controller-select>
 
-    <ng-container *ngIf="form.controls.controllerId.valid && form.controls.inputId.valid">
+    <ng-container *ngIf="form.controls.input.valid">
         <app-binding-input-gain-select *ngIf="isInputGainConfigurable"
-                                       [control]="form.controls.inputGain"
+                                       [control]="form.controls.input.controls.gain"
         ></app-binding-input-gain-select>
 
         <button mat-raised-button

diff --git a/src/app/control-schemes/binding-edit/binding-servo/binding-servo-edit.component.ts b/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.inputType.value === ControllerInputType.Axis
-            || this.form?.controls.inputType.value === ControllerInputType.Trigger;
+        return this.form?.controls.input.controls.inputType.value === ControllerInputType.Axis
+            || this.form?.controls.input.controls.inputType.value === ControllerInputType.Trigger;
     }
 
     public get canCalibrate$(): Observable<boolean> {

diff --git a/src/app/control-schemes/binding-edit/binding-set-angle/binding-set-angle-edit.component.html b/src/app/control-schemes/binding-edit/binding-set-angle/binding-set-angle-edit.component.html
@@ -1,12 +1,10 @@
 <ng-container *ngIf="form">
-    <app-controller-select [controllerIdFormControl]="form.controls.controllerId"
-                           [inputIdFormControl]="form.controls.inputId"
-                           [operationMode]="setAngleHubIoOperationMode"
-                           [inputTypeControl]="form.controls.inputType"
+    <app-controller-select [operationMode]="setAngleHubIoOperationMode"
+                           [inputFormGroup]="form.controls.input"
                            [title]="'controlScheme.bindingGenericInputTitle' | transloco "
     ></app-controller-select>
 
-    <ng-container *ngIf="form.controls.controllerId.valid && form.controls.inputId.valid">
+    <ng-container *ngIf="form.controls.input.valid">
         <app-binding-control-num-input [translocoTitle]="'controlScheme.setAngleOutputConfigurationAngle'"
                                        [control]="form.controls.angle"
                                        [min]="motorLimits.minRawAngle"

diff --git a/src/app/control-schemes/binding-edit/binding-stepper/binding-stepper-edit.component.html b/src/app/control-schemes/binding-edit/binding-stepper/binding-stepper-edit.component.html
@@ -1,12 +1,10 @@
 <ng-container *ngIf="form">
-    <app-controller-select [controllerIdFormControl]="form.controls.controllerId"
-                           [inputIdFormControl]="form.controls.inputId"
-                           [operationMode]="stepperHubIoOperationMode"
-                           [inputTypeControl]="form.controls.inputType"
+    <app-controller-select [operationMode]="stepperHubIoOperationMode"
+                           [inputFormGroup]="form.controls.input"
                            [title]="'controlScheme.bindingGenericInputTitle' | transloco "
     ></app-controller-select>
 
-    <ng-container *ngIf="form.controls.controllerId.valid && form.controls.inputId.valid">
+    <ng-container *ngIf="form.controls.input.valid">
         <app-binding-control-num-input [translocoTitle]="'controlScheme.stepperOutputConfigurationDegree'"
                                        [control]="form.controls.degree"
                                        [min]="minStepperDegree"

diff --git a/...s/binding-edit/control-select-controller/binding-control-select-controller.component.html b/...s/binding-edit/control-select-controller/binding-control-select-controller.component.html
@@ -1,13 +1,11 @@
-<ng-container *ngIf="controllerIdFormControl && inputIdFormControl && inputTypeControl">
-    <div *ngIf="controllerIdFormControl.valid && inputIdFormControl.valid && inputTypeControl.valid; else assignControl"
+<ng-container *ngIf="inputFormGroup">
+    <div *ngIf="inputFormGroup.valid; else assignControl"
          class="control-info">
         <mat-label class="title">
             {{ title }}:
         </mat-label>
         <app-full-controller-input-name class="control-info__control-name"
-                                        [controllerId]="controllerIdFormControl.value"
-                                        [inputId]="inputIdFormControl.value"
-                                        [inputType]="inputTypeControl.value"
+                                        [inputData]="controllerData"
         ></app-full-controller-input-name>
 
         <button mat-raised-button

diff --git a/...mes/binding-edit/control-select-controller/binding-control-select-controller.component.ts b/...mes/binding-edit/control-select-controller/binding-control-select-controller.component.ts
@@ -1,20 +1,19 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input } from '@angular/core';
-import { FormControl } from '@angular/forms';
 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 { ControllerInputModel } from '@app/store';
-import { ControllerInputType, HubIoOperationMode } from '@app/shared';
+import { ControlSchemeInput, ControllerInputModel } from '@app/store';
+import { HubIoOperationMode, ToFormGroup } from '@app/shared';
 
 import { IWaitingForInputDialogData, WaitForControllerInputDialogComponent } from '../wait-for-controller-input-dialog';
 import { FullControllerInputNameComponent } from '../../full-controller-input-name';
 
 @Component({
     standalone: true,
-    selector: 'app-controller-select[operationMode][controllerIdFormControl][inputIdFormControl][inputTypeControl][title]',
+    selector: 'app-controller-select',
     templateUrl: './binding-control-select-controller.component.html',
     styleUrls: [ './binding-control-select-controller.component.scss' ],
     imports: [
@@ -31,11 +30,7 @@ import { FullControllerInputNameComponent } from '../../full-controller-input-na
 export class BindingControlSelectControllerComponent {
     @Input() public operationMode?: HubIoOperationMode;
 
-    @Input() public controllerIdFormControl?: FormControl<string>;
-
-    @Input() public inputIdFormControl?: FormControl<string>;
-
-    @Input() public inputTypeControl?: FormControl<ControllerInputType>;
+    @Input() public inputFormGroup?: ToFormGroup<ControlSchemeInput>;
 
     @Input() public title = '';
 
@@ -45,6 +40,10 @@ export class BindingControlSelectControllerComponent {
     ) {
     }
 
+    public get controllerData(): ControlSchemeInput | undefined {
+        return this.inputFormGroup?.getRawValue();
+    }
+
     public onBind(): void {
         if (this.operationMode === undefined) {
             return;
@@ -60,24 +59,14 @@ export class BindingControlSelectControllerComponent {
             }
         );
         dialog.afterClosed().subscribe((result) => {
-            if (result && this.controllerIdFormControl && this.inputIdFormControl && this.inputTypeControl) {
-                if (this.controllerIdFormControl.value !== result.controllerId) {
-                    this.controllerIdFormControl.markAsTouched();
-                    this.controllerIdFormControl.markAsDirty();
-                    this.controllerIdFormControl.setValue(result.controllerId);
-                }
-                if (this.inputIdFormControl.value !== result.inputId) {
-                    this.inputIdFormControl.markAsTouched();
-                    this.inputIdFormControl.markAsDirty();
-                    this.inputIdFormControl.setValue(result.inputId);
-                }
-                if (this.inputTypeControl.value !== result.inputType) {
-                    this.inputTypeControl.markAsTouched();
-                    this.inputTypeControl.markAsDirty();
-                    this.inputTypeControl.setValue(result.inputType);
-                }
-                this.cd.detectChanges();
+            if (!result || !this.inputFormGroup) {
+                return;
             }
+            this.inputFormGroup.patchValue(result);
+            this.inputFormGroup.markAsDirty();
+            this.inputFormGroup.markAsTouched();
+            this.inputFormGroup.updateValueAndValidity();
+            this.cd.detectChanges();
         });
     }
 }
diff --git a/src/app/control-schemes/binding-edit/form-builders/common-form-controls-builder.service.ts b/src/app/control-schemes/binding-edit/form-builders/common-form-controls-builder.service.ts
@@ -1,8 +1,8 @@
 import { Inject, Injectable } from '@angular/core';
 import { FormBuilder, FormControl, Validators } from '@angular/forms';
-import { MOTOR_LIMITS, MotorServoEndState } from '@nvsukhanov/rxpoweredup';
-import { ControllerInputType, WINDOW } from '@app/shared';
-import { InputGain } from '@app/store';
+import { ButtonGroupButtonId, MOTOR_LIMITS, MotorServoEndState } from '@nvsukhanov/rxpoweredup';
+import { ControllerInputType, ToFormGroup, WINDOW } from '@app/shared';
+import { ControlSchemeInput, InputGain } from '@app/store';
 
 @Injectable({ providedIn: 'root' })
 export class CommonFormControlsBuilderService {
@@ -16,20 +16,6 @@ export class CommonFormControlsBuilderService {
         return this.formBuilder.control<string>(this.window.crypto.randomUUID(), { nonNullable: true });
     }
 
-    public controllerIdControl(): FormControl<string> {
-        return this.formBuilder.control<string>('', {
-            nonNullable: true,
-            validators: [ Validators.required ]
-        });
-    }
-
-    public inputIdControl(): FormControl<string> {
-        return this.formBuilder.control<string>('', {
-            nonNullable: true,
-            validators: [ Validators.required ]
-        });
-    }
-
     public hubIdControl(): FormControl<string> {
         return this.formBuilder.control<string>('', {
             nonNullable: true,
@@ -81,21 +67,28 @@ export class CommonFormControlsBuilderService {
         });
     }
 
-    public controllerInputTypeControl(
-        initialValue: ControllerInputType
-    ): FormControl<ControllerInputType> {
-        return this.formBuilder.control<ControllerInputType>(initialValue, {
-            nonNullable: true,
-            validators: [ Validators.required ]
-        });
-    }
-
-    public axialInputFunctionControl(
-        initialValue: InputGain
-    ): FormControl<InputGain> {
-        return this.formBuilder.control<InputGain>(initialValue, {
-            nonNullable: true,
-            validators: [ Validators.required ]
+    public inputFormGroup(
+        initialValue?: Partial<ControlSchemeInput>
+    ): ToFormGroup<ControlSchemeInput> {
+        return this.formBuilder.group({
+            controllerId: this.formBuilder.control<string>(initialValue?.controllerId ?? '', {
+                nonNullable: true,
+                validators: [ Validators.required ]
+            }),
+            inputType: this.formBuilder.control<ControllerInputType>(initialValue?.inputType ?? ControllerInputType.Button, {
+                nonNullable: true,
+                validators: [ Validators.required ]
+            }),
+            inputId: this.formBuilder.control<string>(initialValue?.inputId ?? '', {
+                nonNullable: true,
+                validators: [ Validators.required ]
+            }),
+            gain: this.formBuilder.control<InputGain>(initialValue?.gain ?? InputGain.None, {
+                nonNullable: true,
+                validators: [ Validators.required ]
+            }),
+            buttonId: this.formBuilder.control<ButtonGroupButtonId | null>(initialValue?.portId ?? null),
+            portId: this.formBuilder.control<number | null>(initialValue?.portId ?? null)
         });
     }
 }
diff --git a/.../control-schemes/binding-edit/form-builders/linear-output-control-form-builder.service.ts b/.../control-schemes/binding-edit/form-builders/linear-output-control-form-builder.service.ts
@@ -1,7 +1,5 @@
 import { Injectable } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
-import { ControllerInputType } from '@app/shared';
-import { InputGain } from '@app/store';
 
 import { LinearBindingForm } from '../types';
 import { CommonFormControlsBuilderService } from './common-form-controls-builder.service';
@@ -17,10 +15,7 @@ export class LinearOutputControlFormBuilderService {
     public build(): LinearBindingForm {
         return this.formBuilder.group({
             id: this.commonFormControlBuilder.schemeIdControl(),
-            controllerId: this.commonFormControlBuilder.controllerIdControl(),
-            inputId: this.commonFormControlBuilder.inputIdControl(),
-            inputType: this.commonFormControlBuilder.controllerInputTypeControl(ControllerInputType.Button),
-            inputGain: this.commonFormControlBuilder.axialInputFunctionControl(InputGain.None),
+            input: this.commonFormControlBuilder.inputFormGroup(),
             hubId: this.commonFormControlBuilder.hubIdControl(),
             portId: this.commonFormControlBuilder.portIdControl(),
             maxSpeed: this.commonFormControlBuilder.speedControl(),

diff --git a/...p/control-schemes/binding-edit/form-builders/servo-output-control-form-builder.service.ts b/...p/control-schemes/binding-edit/form-builders/servo-output-control-form-builder.service.ts
@@ -1,8 +1,6 @@
 import { MOTOR_LIMITS } from '@nvsukhanov/rxpoweredup';
 import { FormBuilder, Validators } from '@angular/forms';
 import { Injectable } from '@angular/core';
-import { ControllerInputType } from '@app/shared';
-import { InputGain } from '@app/store';
 
 import { ServoBindingForm } from '../types';
 import { CommonFormControlsBuilderService } from './common-form-controls-builder.service';
@@ -18,10 +16,7 @@ export class ServoOutputControlFormBuilderService {
     public build(): ServoBindingForm {
         return this.formBuilder.group({
             id: this.commonFormControlBuilder.schemeIdControl(),
-            controllerId: this.commonFormControlBuilder.controllerIdControl(),
-            inputId: this.commonFormControlBuilder.inputIdControl(),
-            inputType: this.commonFormControlBuilder.controllerInputTypeControl(ControllerInputType.Button),
-            inputGain: this.commonFormControlBuilder.axialInputFunctionControl(InputGain.None),
+            input: this.commonFormControlBuilder.inputFormGroup(),
             hubId: this.commonFormControlBuilder.hubIdControl(),
             portId: this.commonFormControlBuilder.portIdControl(),
             range: this.formBuilder.control<number>(MOTOR_LIMITS.maxServoDegreesRange, {

diff --git a/...ntrol-schemes/binding-edit/form-builders/set-angle-output-control-form-builder.service.ts b/...ntrol-schemes/binding-edit/form-builders/set-angle-output-control-form-builder.service.ts
@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
-import { ControllerInputType } from '@app/shared';
 
 import { SetAngleBindingForm } from '../types';
 import { CommonFormControlsBuilderService } from './common-form-controls-builder.service';
@@ -16,9 +15,7 @@ export class SetAngleOutputControlFormBuilderService {
     public build(): SetAngleBindingForm {
         return this.formBuilder.group({
             id: this.commonFormControlBuilder.schemeIdControl(),
-            controllerId: this.commonFormControlBuilder.controllerIdControl(),
-            inputId: this.commonFormControlBuilder.inputIdControl(),
-            inputType: this.commonFormControlBuilder.controllerInputTypeControl(ControllerInputType.Button),
+            input: this.commonFormControlBuilder.inputFormGroup(),
             hubId: this.commonFormControlBuilder.hubIdControl(),
             portId: this.commonFormControlBuilder.portIdControl(),
             angle: this.formBuilder.control<number>(0, {