src/app/pages/step/step.component.html

<!--
 *******************************************************************************
 * Copyright (c) 2018 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License v. 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0.
 *
 * SPDX-License-Identifier: EPL-2.0
 *******************************************************************************
-->

<div #stepFormContainer>
  <form #stepForm="ngForm" (change)="onStepFormValidation(stepForm.form.valid)">
    <fieldset class="form-group" disabled="{{ readOnlyForm ? 'disabled' : ''}}">

      <div class="row">
        <div class="col-md-12">
          <label class="form-field-label" for="stepAffectedResourcesGroupList">Betriebsmittel-Gruppe</label>
        </div>
        <div class="col-md-12">
          <select type="text" (change)="onChangeResourceGroup($event.target.value)" name="stepAffectedResourcesGroupList"
            id="stepAffectedResourcesGroupList" class="form-control">
            <option *ngFor="let stepAffectedResourcesGroupListString of stepAffectedResourcesGroupList" value="{{stepAffectedResourcesGroupListString}}">{{stepAffectedResourcesGroupListString}}</option>
          </select>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <label class="form-field-label" for="stepAffectedResources">Betriebsmittel</label>
        </div>
      </div>
      <div class="row" id="treeTable">
        <div class="col-md-12" *ngIf="!isTreeAvailable">Noch keine Betriebsmittel-Gruppe ausgewählt</div>
        <div *ngIf="isTreeAvailable">
          <tree [tree]="tree" #treeComponent (loadNextLevel)="handleNextLevel($event)" (nodeSelected)="handleSelected($event)"
            [settings]="{rootIsVisible: false}"></tree>
        </div>
      </div>
    </fieldset>
    <fieldset class="form-group" disabled="{{ readOnlyForm ? 'disabled' : ''}}">
      <div class="row">
        <div class="col-md-12">
          <label class="form-field-label" for="switchingObject">Objekt der Schaltung</label>
        </div>
        <div class="col-md-12">
          <input maxlength="256" type="text" list="" name="stepSwitchingObject" id="stepSwitchingObject" class="form-control"
            [(ngModel)]="step.switchingObject" />
          <datalist id="switchingObjectList">
            <option></option>
          </datalist>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <label class="form-field-label" for="presentStateControl">Ist-Zustand</label>
        </div>
        <div class="col-md-6">
          <label class="form-field-label" for="targetStateControl">Soll-Zustand</label>
        </div>
        <div class="col-md-6">
          <input autofocus maxlength="256" type="text" name="stepPresentState" id="stepPresentState" class="form-control"
            [(ngModel)]="step.presentState" />
        </div>
        <div class="col-md-6">
          <input autofocus maxlength="256" type="text" name="stepTargetState" id="stepTargetState" class="form-control"
            [(ngModel)]="step.targetState" />
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <label class="form-field-label" for="presentTimeControl">Ist-Zeit</label>
        </div>
        <div class="col-md-6">
          <label class="form-field-label" for="typeControl">Typ</label>
        </div>
        <div class="col-md-6">
          <input autofocus maxlength="256" placeholder="hh:mm" pattern="^((?:[01]\d|2[0-3]):[0-5]\d$)" type="text" name="stepPresentTime"
            id="stepPresentTime" class="form-control" [(ngModel)]="step.presentTime" />
        </div>
        <div class="col-md-6">
          <input autofocus maxlength="256" type="text" name="stepType" id="stepType" class="form-control" [(ngModel)]="step.type" />
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <label class="form-field-label" for="stepOperator">Ausführender</label>
        </div>
        <div class="col-md-12">
          <input autofocus maxlength="256" type="text" name="stepOperator" id="stepOperator" class="form-control"
            [(ngModel)]="step.operator" />
        </div>
      </div>
    </fieldset>
    <div class="row">
      <div class="col-md-12" style="justify-content: flex-end">
        <button type="button" class="btn btn-success" id="addStepBtn" (click)="processAddStep()" [disabled]="storageInProgress || readOnlyForm || !stepForm.form.valid">Schritt
          hinzufügen
          <span class="glyphicon glyphicon-plus" id="addStepGlIcon"></span>
        </button>
      </div>
    </div>
  </form>
</div>