feat: control schemes redesign

modules/pages/control-scheme-rename/src/lib/control-scheme-rename-page.component.ts

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, OnInit, Signal } from '@angular/cor
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { TranslocoPipe, TranslocoService } from '@ngneat/transloco';
 import { Store } from '@ngrx/store';
-import { map, of } from 'rxjs';
+import { of } from 'rxjs';
 import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';
 import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
@@ -47,7 +47,7 @@ import { CURRENT_SCHEME_NAME } from './control-scheme-rename-page.selectors';
 export class ControlSchemeRenamePageComponent implements IUnsavedChangesComponent, OnInit {
     public readonly currentSchemeName: Signal<string | null>;
 
-    public cancelPath: string[] = [];
+    public readonly cancelPath = this.routesBuilderService.controlSchemesList;
 
     protected readonly validationErrorsL10nMap: ValidationErrorsL10nMap = {
         [CONTROL_SCHEME_NAME_IS_NOT_UNIQUE]: 'controlScheme.newSchemeDialogNameUniqueness'
@@ -87,33 +87,29 @@ export class ControlSchemeRenamePageComponent implements IUnsavedChangesComponen
                 name: this.nameFormControl.value.trim()
             }));
             this.nameFormControl.markAsPristine();
-            this.router.navigate(this.routesBuilderService.controlSchemeView(this.nameFormControl.value));
+            this.router.navigate(this.routesBuilderService.controlSchemesList);
         }
     }
 
     public ngOnInit(): void {
         const previousName = this.currentSchemeName();
         if (previousName !== null) {
             this.nameFormControl.setValue(previousName);
-            this.cancelPath = previousName !== null ? this.routesBuilderService.controlSchemeView(previousName) : [];
-
             this.breadcrumbs.setBreadcrumbsDef(
-                of(previousName).pipe(
-                    map((scheme) => [
-                        {
-                            label$: this.translocoService.selectTranslate('pageTitle.controlSchemesList'),
-                            route: this.routesBuilderService.controlSchemesList
-                        },
-                        {
-                            label$: of(previousName),
-                            route: this.routesBuilderService.controlSchemeView(previousName)
-                        },
-                        {
-                            label$: this.translocoService.selectTranslate('pageTitle.controlSchemeRename', { previousName }),
-                            route: this.routesBuilderService.controlSchemeRename(scheme)
-                        }
-                    ])
-                )
+                of([
+                    {
+                        label$: this.translocoService.selectTranslate('pageTitle.controlSchemesList'),
+                        route: this.routesBuilderService.controlSchemesList
+                    },
+                    {
+                        label$: of(previousName),
+                        route: this.routesBuilderService.controlSchemeView(previousName)
+                    },
+                    {
+                        label$: this.translocoService.selectTranslate('pageTitle.controlSchemeRename', { previousName }),
+                        route: this.routesBuilderService.controlSchemeRename(previousName)
+                    }
+                ])
             );
             this.titleService.setTitle$(this.translocoService.selectTranslate('pageTitle.controlSchemeRename', { previousName }));
         }

modules/pages/control-scheme-view/src/lib/binding-action-list-item/binding-action-list-item.component.html → modules/pages/control-scheme-view/src/lib/bindings-section/binding-action-list-item/binding-action-list-item.component.html

@@ -1,4 +1,6 @@
-<span class="action-name">
+<span class="action-name"
+      libEllipsisTitle
+>
     {{ actionName() | async }}:
 </span>
 

modules/pages/control-scheme-view/src/lib/binding-action-list-item/binding-action-list-item.component.scss → modules/pages/control-scheme-view/src/lib/bindings-section/binding-action-list-item/binding-action-list-item.component.scss

@@ -9,6 +9,6 @@
 }
 
 .action-name {
-    min-width: 100px;
+    width: 150px;
     font-weight: 500;
 }

modules/pages/control-scheme-view/src/lib/binding-action-list-item/binding-action-list-item.component.ts → modules/pages/control-scheme-view/src/lib/bindings-section/binding-action-list-item/binding-action-list-item.component.ts

@@ -6,6 +6,7 @@ import { Store } from '@ngrx/store';
 import { CONTROLLER_CONNECTION_SELECTORS, ControlSchemeBinding, ControlSchemeBindingInputs, ControlSchemeInputConfig } from '@app/store';
 import { BINDING_CONTROLLER_INPUT_NAME_RESOLVER, IBindingControllerInputNameResolver } from '@app/shared-control-schemes';
 import { ControlSchemeBindingType } from '@app/shared-misc';
+import { EllipsisTitleDirective } from '@app/shared-ui';
 
 import { BINDING_INPUT_NAME_RESOLVER, IBindingInputNameResolver } from './i-binding-input-name-resolver';
 
@@ -16,7 +17,8 @@ import { BINDING_INPUT_NAME_RESOLVER, IBindingInputNameResolver } from './i-bind
     styleUrls: [ './binding-action-list-item.component.scss' ],
     imports: [
         AsyncPipe,
-        TranslocoPipe
+        TranslocoPipe,
+        EllipsisTitleDirective
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })

modules/pages/control-scheme-view/src/lib/bindings-section/bindings-list.selectors.ts

@@ -0,0 +1,37 @@
+import { createSelector } from '@ngrx/store';
+import {
+    ATTACHED_IO_MODES_SELECTORS,
+    ATTACHED_IO_PORT_MODE_INFO_SELECTORS,
+    ATTACHED_IO_SELECTORS,
+    CONTROL_SCHEME_SELECTORS,
+    ControlSchemeModel
+} from '@app/store';
+import { areControllableIosPresent } from '@app/shared-control-schemes';
+
+import { CONTROL_SCHEME_PAGE_SELECTORS } from '../control-scheme-page.selectors';
+
+export const BINDING_LIST_SELECTORS = {
+    selectSchemeHubsIds: createSelector(
+        CONTROL_SCHEME_PAGE_SELECTORS.selectCurrentlyViewedScheme,
+        (
+            scheme: ControlSchemeModel | undefined,
+        ): string[] => {
+            const hubIds = new Set<string>();
+            if (scheme) {
+                for (const binding of scheme.bindings) {
+                    hubIds.add(binding.hubId);
+                }
+            }
+            return [ ...hubIds ];
+        }
+    ),
+    canAddBinding: createSelector(
+        ATTACHED_IO_SELECTORS.selectAll,
+        ATTACHED_IO_MODES_SELECTORS.selectEntities,
+        ATTACHED_IO_PORT_MODE_INFO_SELECTORS.selectEntities,
+        CONTROL_SCHEME_SELECTORS.selectIsAnySchemeRunning,
+        (ios, ioSupportedModesEntities, portModeInfoEntities, isAnySchemeRunning) => {
+            return !isAnySchemeRunning && areControllableIosPresent(ios, ioSupportedModesEntities, portModeInfoEntities);
+        }
+    ),
+} as const;

modules/pages/control-scheme-view/src/lib/bindings-section/bindings-section.component.html

@@ -0,0 +1,36 @@
+<section class="section"
+         [class.section_running]="isSchemeRunning()"
+>
+    <h3 class="section-title">
+        {{ 'controlScheme.bindingsSectionTitle' | transloco }}
+    </h3>
+</section>
+
+<div class="bindings-container"
+     [class.bindings-container_running]="isSchemeRunning()"
+>
+    @if (controlSchemeName(); as schemeName) {
+        @for (hubId of hubIds(); track hubId) {
+            <page-control-scheme-view-hub-list-item class="hub-bindings"
+                                                    [hubId]="hubId"
+                                                    [controlSchemeName]="schemeName"
+            ></page-control-scheme-view-hub-list-item>
+        }
+    }
+
+    <div class="add-binding-button-container"
+         [class.add-binding-button-container_running]="!canAddBinding()"
+    >
+        <a mat-fab
+           color="primary"
+           class="add-binding-button"
+           [class.add-binding-button_running]="!canAddBinding()"
+           [disabled]="!canAddBinding()"
+           [routerLink]="addBindingPath()"
+           [title]="'controlScheme.addBindingButtonTitle' | transloco"
+        >
+            <mat-icon [fontIcon]="'add'"></mat-icon>
+        </a>
+    </div>
+</div>
+

modules/pages/control-scheme-view/src/lib/bindings-section/bindings-section.component.scss

@@ -0,0 +1,66 @@
+.section {
+    height: 48px;
+    display: flex;
+    align-items: center;
+
+    transition: height 0.5s, opacity 0.5s;
+
+    &-title {
+        font-size: 22px;
+        line-height: 22px;
+        font-weight: 500;
+        margin: 0;
+    }
+
+    &_running {
+        height: 0;
+        opacity: 0;
+        overflow: hidden;
+    }
+}
+
+.add-binding-button-container {
+    display: flex;
+    height: 60px;
+    border-width: 3px;
+    border-style: dashed;
+    border-color: var(--app-well-color);
+    border-radius: 10px;
+    justify-content: center;
+    align-items: center;
+    margin-top: 5px;
+    overflow: hidden;
+
+    transition: height 0.5s, border-color 0.5s;
+
+    &_running {
+        height: 0;
+        border-color: rgba(0,0,0,0);
+    }
+}
+
+.hub-bindings + .hub-bindings {
+    margin-top: 10px;
+}
+
+.bindings-container {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--app-well-color);
+    border-radius: 5px;
+    padding: 5px;
+
+    transition: border-color 0.5s;
+
+    &_running {
+        border-color: rgba(0,0,0,0);
+    }
+}
+
+.add-binding-button {
+    transition: opacity 0.5s;
+
+    &_running {
+        opacity: 0;
+    }
+}

modules/pages/control-scheme-view/src/lib/bindings-section/bindings-section.component.ts

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { MatCard, MatCardContent } from '@angular/material/card';
+import { MatFabAnchor, MatFabButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { TranslocoPipe } from '@ngneat/transloco';
+import { RouterLink } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { MatDivider } from '@angular/material/divider';
+import { RoutesBuilderService } from '@app/shared-misc';
+
+import { HubListItemComponent } from './hub-list-item';
+import { BINDING_LIST_SELECTORS } from './bindings-list.selectors';
+import { CONTROL_SCHEME_PAGE_SELECTORS } from '../control-scheme-page.selectors';
+
+@Component({
+    standalone: true,
+    selector: 'page-control-scheme-view-bindings-section',
+    templateUrl: './bindings-section.component.html',
+    styleUrls: [ './bindings-section.component.scss' ],
+    imports: [
+        HubListItemComponent,
+        MatCard,
+        MatCardContent,
+        MatFabButton,
+        MatIcon,
+        TranslocoPipe,
+        MatFabAnchor,
+        RouterLink,
+        MatDivider
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class BindingsSectionComponent {
+    public readonly hubIds = this.store.selectSignal(BINDING_LIST_SELECTORS.selectSchemeHubsIds);
+
+    public readonly canAddBinding = this.store.selectSignal(BINDING_LIST_SELECTORS.canAddBinding);
+
+    public readonly controlSchemeName = computed(() => {
+        const controlScheme = this.store.selectSignal(CONTROL_SCHEME_PAGE_SELECTORS.selectCurrentlyViewedScheme)();
+        return controlScheme ? controlScheme.name : '';
+    });
+
+    public readonly addBindingPath = computed(() => {
+        const controlScheme = this.store.selectSignal(CONTROL_SCHEME_PAGE_SELECTORS.selectCurrentlyViewedScheme)();
+        return controlScheme ? this.routeBuilderService.bindingCreate(controlScheme.name) : [];
+    });
+
+    public readonly isSchemeRunning = this.store.selectSignal(CONTROL_SCHEME_PAGE_SELECTORS.isCurrentControlSchemeRunning);
+
+    constructor(
+        private readonly store: Store,
+        private readonly routeBuilderService: RoutesBuilderService
+    ) {
+    }
+}

modules/pages/control-scheme-view/src/lib/bindings-section/hub-list-item/hub-list-item.component.html

@@ -0,0 +1,30 @@
+<mat-card class="hub__card">
+    <mat-card-content class="hub__card-content">
+        <lib-hub-inline-view [isHubKnown]="isHubKnown()"
+                             [name]="hubName()"
+                             [hubId]="hubId()"
+                             [batteryLevel]="batteryLevel()"
+                             [rssiLevel]="rssi()"
+                             [isButtonPressed]="buttonState()"
+                             [hasCommunication]="hasCommunication()"
+                             [isConnected]="isConnected()"
+                             [showControls]="false"
+        ></lib-hub-inline-view>
+    </mat-card-content>
+</mat-card>
+
+@if (portIds().length) {
+    <section class="hub-ports">
+        @for (portId of portIds(); track portId) {
+            <mat-card class="hub-ports__card">
+                <mat-card-content class="hub-ports__card-content">
+
+                    <page-control-scheme-view-hub-port-list-item [portId]="portId"
+                                                                 [hubId]="hubId()"
+                                                                 [controlSchemeName]="controlSchemeName()"
+                    ></page-control-scheme-view-hub-port-list-item>
+                </mat-card-content>
+            </mat-card>
+        }
+    </section>
+}

modules/pages/control-scheme-view/src/lib/bindings-section/hub-list-item/hub-list-item.component.scss

@@ -0,0 +1,23 @@
+:host {
+    display: block;
+}
+
+.hub__card {
+    &-content {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+}
+
+.hub-ports {
+    margin-left: 20px;
+
+    &__card {
+        margin-top: 1px;
+
+        &-content {
+            padding-top: 8px;
+            padding-bottom: 8px;
+        }
+    }
+}

modules/pages/control-scheme-view/src/lib/hub-list-item/hub-list-item.component.ts → modules/pages/control-scheme-view/src/lib/bindings-section/hub-list-item/hub-list-item.component.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input, Signal, WritableSignal, computed, signal } from '@angular/core';
 import { Store } from '@ngrx/store';
+import { MatCard, MatCardContent } from '@angular/material/card';
 import { HubInlineViewComponent } from '@app/shared-ui';
 
 import { HUB_LIST_ITEM_SELECTORS } from './hub-list-item.selectors';
@@ -12,7 +13,9 @@ import { HubPortListItemComponent } from '../hub-port-list-item';
     styleUrls: [ './hub-list-item.component.scss' ],
     imports: [
         HubInlineViewComponent,
-        HubPortListItemComponent
+        HubPortListItemComponent,
+        MatCard,
+        MatCardContent
     ],
     changeDetection: ChangeDetectionStrategy.OnPush
 })

modules/pages/control-scheme-view/src/lib/hub-port-list-item/hub-port-list-item.component.scss → modules/pages/control-scheme-view/src/lib/bindings-section/hub-port-list-item/hub-port-list-item.component.scss

@@ -43,8 +43,9 @@
 
 .task-info {
     display: inline-flex;
-    align-items: center;
+    align-items: baseline;
     gap: 5px;
+    white-space: nowrap;
 }
 
 .bindings {

modules/pages/control-scheme-view/src/lib/bindings-section/index.ts

@@ -0,0 +1,3 @@
+export * from './bindings-section.component';
+export { IPortCommandTaskSummaryBuilder, PORT_COMMAND_TASK_SUMMARY_BUILDER } from './hub-port-list-item';
+export { IBindingInputNameResolver, BINDING_INPUT_NAME_RESOLVER } from './binding-action-list-item';