openems Enhancements to Select Channels in UI

Objective

This PR introduces an improvement in our user interface concerning the dependency between the component selection ("CHANNELS.Component") and channel selection ("CHANNELS.CHANNEL"). Previously, users could attempt to select a channel before selecting a component, which could lead to confusion or improper configurations. This update ensures a more intuitive and error-proof user experience by enforcing a selection order.

Changes

The primary changes involve making the "CHANNELS.CHANNEL" selection dependent on the "CHANNELS.Component" being selected first. Below is the updated code snippet illustrating these changes:

<ion-list>
  <ion-item lines="none">
    <ion-select style="white-space: initial;width: 100%;" #selectedComponentId interface="alert"
      (ionChange)="componentSelected = $event.detail.value"
      [placeholder]="'CHANNELS.Component'| translate">
      <ion-select-option style="white-space: normal !important;"
        *ngFor="let entry of (config.components | keys)" [value]="entry.key">
        {{ entry.value.id }} ({{ entry.value.alias }})
      </ion-select-option>
    </ion-select>
  </ion-item>
  <ion-item lines="none">
    <ion-select style="white-space: initial;width: 100%;" #selectedChannelId interface="alert"
      [disabled]="!componentSelected"
      [placeholder]="'CHANNELS.CHANNEL'| translate">
      <ng-container *ngIf="componentSelected">
        <ion-select-option
          *ngFor="let entry of (config.components[componentSelected]?.channels | keys)" [value]="entry.key">
          {{ entry.key }}
        </ion-select-option>
      </ng-container>
    </ion-select>
  </ion-item>
</ion-list>

This improvement:

Enhances the user experience by guiding them through the configuration process in a logical sequence.
Implements a cleaner, more intuitive UI flow.

Previously, we attempted to restrict user interaction by disabling the ability to click until a certain condition was met but it did not work as the Window still popped up.

Enhanced UI Feedback

The updated UI now:

Grays out the "CHANNELS.CHANNEL" selection until a component is selected, providing a clear visual cue that selection is currently unavailable.
Updates in real-time to reflect the available actions to the user, enhancing the overall interactivity and responsiveness of the UI.