feat: create/delete virtual port configurations

src/app/control-schemes/edit/binding-output/control-scheme-binding-output.component.ts

@@ -120,7 +120,7 @@ export class ControlSchemeBindingOutputComponent {
                 if (hubId === null || portId === null) {
                     return of(null);
                 }
-                return this.store.select(HUB_ATTACHED_IO_SELECTORS.selectIOAtPort(hubId, portId));
+                return this.store.select(HUB_ATTACHED_IO_SELECTORS.selectIOAtPort({ hubId, portId }));
             }),
             map((io) => io?.ioType ?? null)
         );

src/app/hubs/create-virtual-port-dialog/create-virtual-port-configuration-dialog.component.html

@@ -0,0 +1,50 @@
+<h2 mat-dialog-title>
+    {{ 'io.createVirtualPortConfigurationDialogTitle' | transloco }}
+</h2>
+<mat-dialog-content *ngIf="data">
+    <mat-form-field class="form-field">
+        <mat-label>
+            {{ 'io.createVirtualPortConfigurationDialogNameLabel' | transloco }}
+        </mat-label>
+        <input matInput [formControl]="form.controls.name"/>
+    </mat-form-field>
+    <mat-form-field class="form-field">
+        <mat-label>
+            {{ 'io.createVirtualPortConfigurationDialogPortALabel' | transloco }}
+        </mat-label>
+        <mat-select [formControl]="form.controls.portIdA">
+            <mat-option *ngFor="let mergeableIO of data.mergeableIOs; trackBy: mergeableIOTrackByFn"
+                        [value]="mergeableIO.portId"
+            >
+                {{ mergeableIO.portId }} : {{ mergeableIO.ioType | ioTypeToL10nKey | transloco }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+
+    <mat-form-field class="form-field">
+        <mat-label>
+            {{ 'io.createVirtualPortConfigurationDialogPortBLabel' | transloco }}
+        </mat-label>
+        <mat-select [formControl]="form.controls.portIdB">
+            <mat-option *ngFor="let mergeableIO of availableSecondIOs; trackBy: mergeableIOTrackByFn"
+                        [value]="mergeableIO.portId"
+            >
+                {{ mergeableIO.portId }} : {{ mergeableIO.ioType | ioTypeToL10nKey | transloco }}
+            </mat-option>
+        </mat-select>
+    </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions [align]="'end'">
+    <button mat-button
+            [color]="'primary'"
+            [disabled]="!form.valid"
+            (click)="onConfirm()"
+    >
+        {{ 'io.createVirtualPortConfigurationDialogConfirmButtonTitle' | transloco }}
+    </button>
+    <button mat-button
+            [mat-dialog-close]="'cancel'"
+    >
+        {{ 'io.createVirtualPortConfigurationDialogCancelButtonTitle' | transloco }}
+    </button>
+</mat-dialog-actions>

src/app/hubs/create-virtual-port-dialog/create-virtual-port-configuration-dialog.component.scss

@@ -0,0 +1,8 @@
+:host {
+    display: block;
+    width: 400px;
+}
+
+.form-field {
+    width: 100%;
+}

src/app/hubs/create-virtual-port-dialog/create-virtual-port-configuration-dialog.component.ts

@@ -0,0 +1,148 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, OnDestroy, OnInit, Output } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSelectModule } from '@angular/material/select';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { TranslocoModule } from '@ngneat/transloco';
+import { NgForOf, NgIf } from '@angular/common';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { Subscription, startWith } from 'rxjs';
+import { MatInputModule } from '@angular/material/input';
+import { IOType } from '@nvsukhanov/rxpoweredup';
+
+import { IOFullInfo, hubAttachedIosIdFn } from '../../store';
+import { IoTypeToL10nKeyPipe } from '@app/shared';
+
+export type CreateVirtualPortDialogData = {
+    readonly hubId: string;
+    readonly mergeableIOs: ReadonlyArray<IOFullInfo>;
+    readonly portIdA?: number;
+}
+
+export type CreateVirtualPortDialogResult = {
+    readonly name: string;
+    readonly portIdA: number;
+    readonly ioAType: IOType;
+    readonly ioAHardwareRevision: string;
+    readonly ioASoftwareRevision: string;
+    readonly portIdB: number;
+    readonly ioBType: IOType;
+    readonly ioBHardwareRevision: string;
+    readonly ioBSoftwareRevision: string;
+}
+
+@Component({
+    standalone: true,
+    selector: 'app-create-virtual-port-configuration-dialog',
+    templateUrl: './create-virtual-port-configuration-dialog.component.html',
+    styleUrls: [ './create-virtual-port-configuration-dialog.component.scss' ],
+    imports: [
+        MatCardModule,
+        MatButtonModule,
+        MatSelectModule,
+        MatDialogModule,
+        IoTypeToL10nKeyPipe,
+        TranslocoModule,
+        NgIf,
+        NgForOf,
+        ReactiveFormsModule,
+        MatInputModule
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class CreateVirtualPortConfigurationDialogComponent implements OnInit, OnDestroy {
+    @Output() public readonly createVirtualPortConfiguration: EventEmitter<CreateVirtualPortDialogResult> = new EventEmitter<CreateVirtualPortDialogResult>();
+
+    public readonly form = this.formBuilder.group({
+        name: this.formBuilder.control<string>(
+            '',
+            {
+                nonNullable: true,
+                validators: [
+                    Validators.required,
+                    Validators.maxLength(20)
+                ]
+            }
+        ),
+        portIdA: this.formBuilder.control<number | null>(
+            this.data.portIdA ?? null,
+            {
+                nonNullable: false,
+                validators: [ Validators.required ]
+            }
+        ),
+        portIdB: this.formBuilder.control<number | null>(
+            null,
+            {
+                nonNullable: false,
+                validators: [ Validators.required ]
+            }
+        )
+    });
+
+    public availableSecondIOs: ReadonlyArray<IOFullInfo> = [];
+
+    private formUpdateSubscription?: Subscription;
+
+    constructor(
+        @Inject(MAT_DIALOG_DATA) public readonly data: CreateVirtualPortDialogData,
+        private readonly formBuilder: FormBuilder
+    ) {
+    }
+
+    public ngOnInit(): void {
+        this.formUpdateSubscription = this.form.controls.portIdA.valueChanges.pipe(
+            startWith(this.form.controls.portIdA.value)
+        ).subscribe((portIdA) => {
+            this.availableSecondIOs = this.data.mergeableIOs.filter((io) => {
+                return io.portId !== portIdA;
+            });
+            this.form.controls.portIdB.setValue(this.availableSecondIOs[0].portId ?? null);
+        });
+    }
+
+    public ngOnDestroy(): void {
+        this.formUpdateSubscription?.unsubscribe();
+    }
+
+    public mergeableIOTrackByFn(
+        _: number,
+        io: IOFullInfo
+    ): string {
+        return hubAttachedIosIdFn(io);
+    }
+
+    public onConfirm(): void {
+        if (!this.form.valid) {
+            return;
+        }
+        const ioA = this.form.controls.portIdA.value !== null
+                    ? this.findIOByPortId(this.form.controls.portIdA.value)
+                    : undefined;
+        const ioB = this.form.controls.portIdB.value !== null
+                    ? this.findIOByPortId(this.form.controls.portIdB.value)
+                    : undefined;
+        if (!ioA || !ioB) {
+            return;
+        }
+        this.createVirtualPortConfiguration.emit({
+            name: this.form.controls.name.value,
+            portIdA: ioA.portId,
+            ioAType: ioA.ioType,
+            ioAHardwareRevision: ioA.hardwareRevision,
+            ioASoftwareRevision: ioA.softwareRevision,
+            portIdB: ioB.portId,
+            ioBType: ioB.ioType,
+            ioBHardwareRevision: ioB.hardwareRevision,
+            ioBSoftwareRevision: ioB.softwareRevision
+        });
+    }
+
+    private findIOByPortId(
+        portId: number
+    ): IOFullInfo | undefined {
+        return this.data.mergeableIOs.find((io) => {
+            return io.portId === portId;
+        });
+    }
+}

src/app/hubs/create-virtual-port-dialog/index.ts

@@ -0,0 +1 @@
+export * from './create-virtual-port-configuration-dialog.component';

src/app/hubs/hub-view/hub-port-view/hub-io-view.component.html → src/app/hubs/hub-view/hub-io-view/hub-io-view.component.html

@@ -1,4 +1,8 @@
-<mat-expansion-panel *ngIf="ioFullInfo">
+<mat-expansion-panel *ngIf="ioFullInfo"
+                     [class.io-port_expanded]="ioPortPanel.expanded"
+                     [class.io-port_collapsed]="!ioPortPanel.expanded"
+                     #ioPortPanel
+>
     <mat-expansion-panel-header>
         <mat-panel-title>
             <h3 class="io-port__title">
@@ -7,6 +11,25 @@ <h3 class="io-port__title">
         </mat-panel-title>
         <mat-panel-description>
             {{ ioFullInfo.ioType | ioTypeToL10nKey | transloco }}
+            <ng-container *ngIf="canBeMerged">
+                <mat-icon [fontIcon]="'merge'"
+                          [title]="'io.canCreateVirtualPort' | transloco"
+                          class="io-port__can-be-merged"
+                ></mat-icon>
+                <span class="cdk-visually-hidden">
+                    {{ 'io.canCreateVirtualPort' | transloco }}
+                </span>
+            </ng-container>
+            <ng-container *ngIf="ioFullInfo.virtualPort">
+                <mat-icon [fontIcon]="'merge'"
+                          [title]="'io.isAPartOfVirtualPortConfiguration' | transloco"
+                          [color]="'primary'"
+                          class="io-port__can-be-merged"
+                ></mat-icon>
+                <span class="cdk-visually-hidden">
+                    {{ 'io.isAPartOfVirtualPortConfiguration' | transloco }}
+                </span>
+            </ng-container>
         </mat-panel-description>
     </mat-expansion-panel-header>
 
@@ -17,20 +40,14 @@ <h3 class="io-port__title">
         <dt class="io-properties__title">{{ 'io.softwareRevision' | transloco }}</dt>
         <dd class="io-properties__value">{{ ioFullInfo.softwareRevision }}</dd>
 
-        <dt class="io-properties__title">{{ 'io.ioSynchronizableTitle' | transloco }}</dt>
-        <dd class="io-properties__value">
-            <ng-container *ngIf="ioFullInfo.synchronizable; else notSynchronizable">
+        <ng-container *ngIf="ioFullInfo.synchronizable">
+            <dt class="io-properties__title">{{ 'io.ioSynchronizableTitle' | transloco }}</dt>
+            <dd class="io-properties__value">
                 <mat-icon [fontIcon]="'check_box'"
                           [color]="'primary'"
                 ></mat-icon>
-            </ng-container>
-            <ng-template #notSynchronizable>
-                <mat-icon [fontIcon]="'check_box_outline_blank'"></mat-icon>
-            </ng-template>
-            <span class="cdk-visually-hidden">
-                {{ 'io.ioSynchronizableValue' | transloco: ioFullInfo }}
-            </span>
-        </dd>
+            </dd>
+        </ng-container>
 
         <dt class="io-properties__title">{{ 'io.ioInputCapabilities' | transloco }}</dt>
         <dd class="io-properties__value">
@@ -54,10 +71,25 @@ <h3 class="io-port__title">
             </ul>
         </dd>
 
+        <ng-container *ngIf="ioFullInfo.virtualPort">
+            <dt class="io-properties__title">{{ 'io.virtualPortNameField' | transloco }}</dt>
+            <dd class="io-properties__value">
+                {{ ioFullInfo.virtualPort.name }}
+            </dd>
+        </ng-container>
+
         <ng-template #emptyModesList>
             <p class="io-properties__list-empty">
                 {{ 'io.ioCapabilitiesEmpty' | transloco }}
             </p>
         </ng-template>
     </dl>
+
+    <mat-action-row *ngIf="canBeMerged">
+        <button mat-button
+                (click)="onCreateVirtualPortConfiguration()"
+        >
+            {{ 'io.createVirtualPortConfiguration' | transloco }}
+        </button>
+    </mat-action-row>
 </mat-expansion-panel>

src/app/hubs/hub-view/hub-port-view/hub-io-view.component.scss → src/app/hubs/hub-view/hub-io-view/hub-io-view.component.scss

@@ -1,15 +1,28 @@
 .io-port {
+    &_collapsed {
+        box-shadow: none;
+        border-radius: 0;
+    }
+
+    &_expanded {
+        margin: 10px 0;
+    }
+
     &__title {
         margin: 0;
         font-size: 16px;
         font-weight: 500;
     }
+
+    &__can-be-merged {
+        margin-left: 10px;
+    }
 }
 
 .io-properties {
     &__grid {
         display: grid;
-        grid-template-columns: auto 1fr;
+        grid-template-columns: 1fr 4fr;
         grid-gap: 10px;
         margin: 10px;
         align-items: center;
@@ -46,11 +59,10 @@
         font-style: italic;
         font-weight: 300;
         font-size: 15px;
-        margin: 0 0 10px 0;
+        margin: 0;
         display: flex;
         flex-direction: row;
         align-items: center;
-        padding-left: 50px;
     }
 
     &__mode {

src/app/hubs/hub-view/hub-port-view/hub-io-view.component.ts → src/app/hubs/hub-view/hub-io-view/hub-io-view.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { NgForOf, NgIf } from '@angular/common';
 import { TranslocoModule } from '@ngneat/transloco';
@@ -29,6 +29,18 @@ import { IOFullInfo, PortModeInfo, hubPortModeInfoIdFn } from '../../../store';
 export class HubIoViewComponent {
     @Input() public ioFullInfo: IOFullInfo | undefined;
 
+    @Input() public mergeableCount = 0;
+
+    @Output() public readonly createVirtualPortConfiguration = new EventEmitter<void>();
+
+    public get canBeMerged(): boolean {
+        return this.ioFullInfo?.synchronizable === true && this.mergeableCount > 1;
+    }
+
+    public onCreateVirtualPortConfiguration(): void {
+        this.createVirtualPortConfiguration.emit();
+    }
+
     public portModeInfoTrackById(
         _: number,
         portModeInfo: PortModeInfo