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

<!--
******************************************************************************
* Copyright © 2018 PTA GmbH.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* 
*     http://www.eclipse.org/legal/epl-v10.html
* 
******************************************************************************
-->
<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="" [required]="true" 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" [required]="true" name="stepPresentState" id="stepPresentState" class="form-control"
            [(ngModel)]="step.presentState" />
        </div>
        <div class="col-md-6">
          <input autofocus maxlength="256" type="text" [required]="true" 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" type="text" [required]="true" name="stepPresentTime" id="stepPresentTime" class="form-control"
            [(ngModel)]="step.presentTime" />
        </div>
        <div class="col-md-6">
          <input autofocus maxlength="256" type="text" [required]="true" 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" [required]="true" 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 class="btn btn-success" id="addStepBtn" (click)="processAddStep()" [disabled]="storageInProgress">Schritt hinzufügen
          <span class="glyphicon glyphicon-plus" id="addStepGlIcon"></span>
        </button>
      </div>
    </div>
  </form>
</div>