feat: add looping mode selection to *-shift ops

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

@@ -66,6 +66,8 @@
                                               [translocoTitle]="'controlScheme.outputEndStateControlTitle'"
         ></app-binding-control-output-end-state>
 
+        <app-binding-control-select-looping-mode [control]="form.controls.loopingMode"></app-binding-control-select-looping-mode>
+
         <app-toggle-control [translocoTitle]="'controlScheme.useAccelerationProfile'"
                             [control]="form.controls.useAccelerationProfile"
         ></app-toggle-control>

src/app/control-schemes/binding-edit/binding-angle-shift/binding-angle-shift-edit.component.ts

@@ -17,6 +17,7 @@ import { BindingControlOutputEndStateComponent } from '../control-output-end-sta
 import { CommonFormControlsBuilderService } from '../forms';
 import { BindingControlReadMotorPositionComponent } from '../control-read-pos';
 import { ControlSchemeInputActionToL10nKeyPipe } from '../../control-scheme-input-action-to-l10n-key.pipe';
+import { BindingControlSelectLoopingModeComponent } from '../contorl-select-looping-mode';
 
 @Component({
     standalone: true,
@@ -36,7 +37,8 @@ import { ControlSchemeInputActionToL10nKeyPipe } from '../../control-scheme-inpu
         BindingControlOutputEndStateComponent,
         BindingControlReadMotorPositionComponent,
         PushPipe,
-        ControlSchemeInputActionToL10nKeyPipe
+        ControlSchemeInputActionToL10nKeyPipe,
+        BindingControlSelectLoopingModeComponent
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })

src/app/control-schemes/binding-edit/binding-speed-shift/binding-speed-shift.component.html

@@ -52,6 +52,8 @@
                             [translocoTitle]="'controlScheme.speedShiftBinding.outputPower'"
         ></app-slider-control>
 
+        <app-binding-control-select-looping-mode [control]="form.controls.loopingMode"></app-binding-control-select-looping-mode>
+
         <app-toggle-control [translocoTitle]="'controlScheme.useAccelerationProfile'"
                             [control]="form.controls.useAccelerationProfile"
         ></app-toggle-control>

src/app/control-schemes/binding-edit/binding-speed-shift/binding-speed-shift.component.ts

@@ -13,6 +13,7 @@ import { BindingControlSelectControllerComponent } from '../control-select-contr
 import { CommonFormControlsBuilderService } from '../forms';
 import { BindingControlNumInputComponent } from '../control-num-input';
 import { ControlSchemeInputActionToL10nKeyPipe } from '../../control-scheme-input-action-to-l10n-key.pipe';
+import { BindingControlSelectLoopingModeComponent } from '../contorl-select-looping-mode';
 
 @Component({
     standalone: true,
@@ -29,7 +30,8 @@ import { ControlSchemeInputActionToL10nKeyPipe } from '../../control-scheme-inpu
         MatIconModule,
         ToggleControlComponent,
         SliderControlComponent,
-        ControlSchemeInputActionToL10nKeyPipe
+        ControlSchemeInputActionToL10nKeyPipe,
+        BindingControlSelectLoopingModeComponent
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })

src/app/control-schemes/binding-edit/contorl-select-looping-mode/binding-control-select-looping-mode.component.html

@@ -0,0 +1,14 @@
+<ng-container *ngIf="control">
+    <mat-form-field>
+        <mat-label>
+            {{ 'controlScheme.loopingModeTitle' | transloco }}
+        </mat-label>
+        <mat-select [formControl]="control">
+            <mat-option *ngFor="let mode of availableLoopingModes"
+                        [value]="mode"
+            >
+                {{ mode | loopingModeToL10nKey | transloco }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+</ng-container>

src/app/control-schemes/binding-edit/contorl-select-looping-mode/binding-control-select-looping-mode.component.scss

@@ -0,0 +1,7 @@
+:host {
+    display: block;
+}
+
+mat-form-field {
+    width: 100%;
+}

src/app/control-schemes/binding-edit/contorl-select-looping-mode/binding-control-select-looping-mode.component.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { NgForOf, NgIf } from '@angular/common';
+import { TranslocoModule } from '@ngneat/transloco';
+import { LoopingMode } from '@app/store';
+
+import { LoopingModeToL10nKeyPipe } from './looping-mode-to-l10n-key.pipe';
+
+@Component({
+    standalone: true,
+    selector: 'app-binding-control-select-looping-mode',
+    templateUrl: './binding-control-select-looping-mode.component.html',
+    styleUrls: [ './binding-control-select-looping-mode.component.scss' ],
+    imports: [
+        MatFormFieldModule,
+        MatOptionModule,
+        MatSelectModule,
+        NgForOf,
+        NgIf,
+        ReactiveFormsModule,
+        TranslocoModule,
+        LoopingModeToL10nKeyPipe
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BindingControlSelectLoopingModeComponent {
+    @Input() public control?: FormControl<LoopingMode>;
+
+    public readonly availableLoopingModes: ReadonlyArray<LoopingMode> = Object.values(LoopingMode);
+}

src/app/control-schemes/binding-edit/contorl-select-looping-mode/index.ts

@@ -0,0 +1 @@
+export * from './binding-control-select-looping-mode.component';

src/app/control-schemes/binding-edit/contorl-select-looping-mode/looping-mode-to-l10n-key.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { LoopingMode } from '@app/store';
+
+@Pipe({
+    standalone: true,
+    name: 'loopingModeToL10nKey',
+    pure: true
+})
+export class LoopingModeToL10nKeyPipe implements PipeTransform {
+    private readonly loopingModeToL10nKeyMap: { [k in LoopingMode]: string } = {
+        [LoopingMode.None]: 'controlScheme.loopingModeNone',
+        [LoopingMode.Wrap]: 'controlScheme.loopingModeWrap',
+        [LoopingMode.Mirror]: 'controlScheme.loopingModeMirror'
+    };
+
+    public transform(
+        value: LoopingMode
+    ): string {
+        return this.loopingModeToL10nKeyMap[value];
+    }
+}

src/app/control-schemes/binding-edit/forms/angle-shift-binding-form-builder.service.ts

@@ -32,6 +32,7 @@ export class AngleShiftBindingFormBuilderService {
             }),
             speed: this.commonFormControlsBuilder.speedControl(),
             power: this.commonFormControlsBuilder.powerControl(),
+            loopingMode: this.commonFormControlsBuilder.loopingModeControl(),
             endState: this.commonFormControlsBuilder.servoEndStateControl(),
             useAccelerationProfile: this.commonFormControlsBuilder.toggleControl(),
             useDecelerationProfile: this.commonFormControlsBuilder.toggleControl(),

src/app/control-schemes/binding-edit/forms/angle-shift-binding-form-mapper.service.ts

@@ -20,6 +20,7 @@ export class AngleShiftBindingFormMapperService {
             angles: form.controls.angles.getRawValue(),
             speed: form.controls.speed.getRawValue(),
             power: form.controls.power.getRawValue(),
+            loopingMode: form.controls.loopingMode.getRawValue(),
             endState: form.controls.endState.getRawValue(),
             useAccelerationProfile: form.controls.useAccelerationProfile.getRawValue(),
             useDecelerationProfile: form.controls.useDecelerationProfile.getRawValue(),

src/app/control-schemes/binding-edit/forms/common-form-controls-builder.service.ts

@@ -2,7 +2,7 @@ import { Inject, Injectable } from '@angular/core';
 import { FormBuilder, FormControl, Validators } from '@angular/forms';
 import { ButtonGroupButtonId, MOTOR_LIMITS, MotorServoEndState } from 'rxpoweredup';
 import { ControllerInputType, WINDOW } from '@app/shared';
-import { ControlSchemeInput, InputGain } from '@app/store';
+import { ControlSchemeInput, InputGain, LoopingMode } from '@app/store';
 
 import { InputFormGroup, OptionalInputFormGroup } from '../types';
 
@@ -87,6 +87,15 @@ export class CommonFormControlsBuilderService {
         });
     }
 
+    public loopingModeControl(
+        initialValue: LoopingMode = LoopingMode.None
+    ): FormControl<LoopingMode> {
+        return this.formBuilder.control<LoopingMode>(initialValue, {
+            nonNullable: true,
+            validators: [ Validators.required ]
+        });
+    }
+
     public inputFormGroup(
         initialValue?: Partial<ControlSchemeInput>
     ): InputFormGroup {

src/app/control-schemes/binding-edit/forms/speed-shift-binding-form-builder.service.ts

@@ -9,31 +9,32 @@ import { CommonFormControlsBuilderService } from './common-form-controls-builder
 export class SpeedShiftBindingFormBuilderService {
     constructor(
         private readonly formBuilder: FormBuilder,
-        private commonFormControlBuilder: CommonFormControlsBuilderService
+        private commonFormControlsBuilder: CommonFormControlsBuilderService
     ) {
     }
 
     public build(): SpeedShiftBindingForm {
         return this.formBuilder.group({
-            id: this.commonFormControlBuilder.bindingIdControl(),
+            id: this.commonFormControlsBuilder.bindingIdControl(),
             inputs: this.formBuilder.group({
-                [ControlSchemeInputAction.NextLevel]: this.commonFormControlBuilder.inputFormGroup(),
-                [ControlSchemeInputAction.PrevLevel]: this.commonFormControlBuilder.optionalInputFormGroup(),
-                [ControlSchemeInputAction.Reset]: this.commonFormControlBuilder.optionalInputFormGroup()
+                [ControlSchemeInputAction.NextLevel]: this.commonFormControlsBuilder.inputFormGroup(),
+                [ControlSchemeInputAction.PrevLevel]: this.commonFormControlsBuilder.optionalInputFormGroup(),
+                [ControlSchemeInputAction.Reset]: this.commonFormControlsBuilder.optionalInputFormGroup()
             }),
-            hubId: this.commonFormControlBuilder.hubIdControl(),
-            portId: this.commonFormControlBuilder.portIdControl(),
+            hubId: this.commonFormControlsBuilder.hubIdControl(),
+            portId: this.commonFormControlsBuilder.portIdControl(),
             levels: this.formBuilder.array<FormControl<number>>([
-                this.commonFormControlBuilder.speedSelectControl(0)
+                this.commonFormControlsBuilder.speedSelectControl(0)
             ], {
                 validators: [
                     Validators.required,
                     Validators.minLength(2)
                 ]
             }),
-            power: this.commonFormControlBuilder.powerControl(),
-            useAccelerationProfile: this.commonFormControlBuilder.toggleControl(),
-            useDecelerationProfile: this.commonFormControlBuilder.toggleControl(),
+            power: this.commonFormControlsBuilder.powerControl(),
+            loopingMode: this.commonFormControlsBuilder.loopingModeControl(),
+            useAccelerationProfile: this.commonFormControlsBuilder.toggleControl(),
+            useDecelerationProfile: this.commonFormControlsBuilder.toggleControl(),
             initialStepIndex: this.formBuilder.control<number>(0, { nonNullable: true })
         });
     }
@@ -46,10 +47,10 @@ export class SpeedShiftBindingFormBuilderService {
         form.controls.levels.clear();
         if (patch.levels) {
             patch.levels.forEach((step) =>
-                form.controls.levels.push(this.commonFormControlBuilder.speedSelectControl(step))
+                form.controls.levels.push(this.commonFormControlsBuilder.speedSelectControl(step))
             );
         } else {
-            form.controls.levels.push(this.commonFormControlBuilder.speedSelectControl(0));
+            form.controls.levels.push(this.commonFormControlsBuilder.speedSelectControl(0));
             form.controls.initialStepIndex.setValue(0);
         }
     }

src/app/control-schemes/binding-edit/forms/speed-shift-binding-form-mapper.service.ts

@@ -19,6 +19,7 @@ export class SpeedShiftBindingFormMapperService {
             portId: form.controls.portId.getRawValue(),
             levels: form.controls.levels.getRawValue(),
             power: form.controls.power.getRawValue(),
+            loopingMode: form.controls.loopingMode.getRawValue(),
             useAccelerationProfile: form.controls.useAccelerationProfile.getRawValue(),
             useDecelerationProfile: form.controls.useDecelerationProfile.getRawValue(),
             initialStepIndex: form.controls.initialStepIndex.getRawValue()

src/app/control-schemes/binding-edit/types.ts

@@ -1,6 +1,6 @@
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { ButtonGroupButtonId, MotorServoEndState } from 'rxpoweredup';
-import { ControlSchemeInputAction, InputGain } from '@app/store';
+import { ControlSchemeInputAction, InputGain, LoopingMode } from '@app/store';
 import { ControlSchemeBindingType, ControllerInputType } from '@app/shared';
 
 export type InputFormGroup = FormGroup<{
@@ -94,6 +94,7 @@ export type SpeedShiftBindingForm = FormGroup<{
     portId: FormControl<number>;
     levels: FormArray<FormControl<number>>;
     power: FormControl<number>;
+    loopingMode: FormControl<LoopingMode>;
     useAccelerationProfile: FormControl<boolean>;
     useDecelerationProfile: FormControl<boolean>;
     initialStepIndex: FormControl<number>;
@@ -110,6 +111,7 @@ export type AngleShiftBindingForm = FormGroup<{
     angles: FormArray<FormControl<number>>;
     power: FormControl<number>;
     speed: FormControl<number>;
+    loopingMode: FormControl<LoopingMode>;
     endState: FormControl<MotorServoEndState>;
     useAccelerationProfile: FormControl<boolean>;
     useDecelerationProfile: FormControl<boolean>;

src/app/control-schemes/control-scheme-page/control-scheme-page.component.ts

@@ -116,6 +116,7 @@ export class ControlSchemePageComponent implements OnDestroy {
                 previousName: scheme.name,
                 name
             }));
+            this.router.navigate(this.routesBuilderService.controlSchemeView(name));
         });
     }
 

src/app/control-schemes/port-command-task-summary/speed-shift-port-command-task-summary-builder.service.ts

@@ -11,13 +11,8 @@ export class SpeedShiftPortCommandTaskSummaryBuilderService {
     }
 
     public build(
-        task: SpeedShiftTaskPayload
+        payload: SpeedShiftTaskPayload
     ): Observable<string> {
-        return this.translocoService.selectTranslate(
-            'controlScheme.speedShiftBinding.taskSummary',
-            {
-                speed: task.speed,
-            }
-        );
+        return this.translocoService.selectTranslate('controlScheme.speedShiftBinding.taskSummary', payload);
     }
 }