projects/grid-failure-information-app/src/app/pages/grid-failure/grid-failure-details/grid-failure-details.component.html

<!-- /********************************************************************************
* Copyright (c) 2020 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
********************************************************************************/ -->
<app-card-layout>
  <div header>
    <div class="header-container">
      <span>{{ 'GridFailure.Title' | translate }}</span>
      <div class="diverse-btn-container">
        <div>
          <button type="button" class="btn btn-primary button" (click)="gridFailureDetailsSandbox.cancel()">
            {{ 'CancelBtn' | translate }}
          </button>
          <ng-container *ngIf="gridFailureDetailsSandbox.showStornoButton && gridFailureDetailsSandbox.saveEnabled">
            <ng-template visibleByRight [acceptedRole]="RolesEnum.QUALIFIER">
              <button type="button" class="btn btn-primary right-button" (click)="gridFailureDetailsSandbox.setState(StateEnum.CANCELED)">
                {{ 'StornoBtn' | translate }}
              </button>
            </ng-template>
          </ng-container>
        </div>
        <div>
          <ng-container *ngIf="gridFailureDetailsSandbox.showQualifyButton && gridFailureDetailsSandbox.saveEnabled">
            <ng-template visibleByRight [acceptedRole]="RolesEnum.QUALIFIER">
              <button type="button" class="btn btn-primary button" (click)="gridFailureDetailsSandbox.setState(StateEnum.QUALIFIED)">
                {{ 'QualifyBtn' | translate }}
              </button>
            </ng-template>
          </ng-container>
          <button
            *ngIf="gridFailureDetailsSandbox.saveEnabled"
            type="button"
            class="btn btn-success button"
            (click)="gridFailureDetailsSandbox.saveGridFailure()"
          >
            {{ 'SaveBtn' | translate }}
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="grid-failure-grid-wrapper" body>
    <div *ngIf="gridFailureDetailsSandbox.maxVersionNumber">
      <label> {{ 'GridFailure.Version' | translate }}</label>
      <select class="version-select" (change)="gridFailureDetailsSandbox.loadGridFailureVersion($event.target.value)">
        <option
          *ngFor="let version of gridFailureVersions$ | async"
          [selected]="version.versionNumber == (gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async).value.versionNumber"
          >{{ version.versionNumber }}</option
        >
      </select>
      <label>
        {{ 'GridFailure.CreatedOn' | translate }}
        {{ (gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async).value.modDate | date: 'dd.MM.yyyy HH:mm:ss' }}
        {{ 'GridFailure.CreatedFrom' | translate }}
        {{ (gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async).value.modUser | uppercase }}
      </label>
    </div>
    <form [ngrxFormState]="gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async">
      <div>
        <app-expandable [showBodyInitially]="true">
          <label header>{{ 'GridFailure.SubTitle1' | translate }}</label>
          <div class="expandable-content" body>
            <!-- failureClassification -->
            <div class="form-group row">
              <label for="failureClassification" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureClassification' | translate }}</label>
              <div class="col-sm-4">
                <select
                  type="text"
                  class="form-control"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureClassificationId']"
                >
                  <option [value]="null" selected>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let classification of gridFailureDetailsSandbox.gridFailureClassifications$ | async" [value]="classification.id">{{
                    classification.classification
                  }}</option>
                </select>
              </div>
            </div>

            <!-- failureType -->
            <div class="form-group row">
              <label for="failureType" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureType' | translate }}</label>
              <div class="col-sm-4">
                <select
                  type="text"
                  class="form-control"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureTypeId']"
                >
                  <option [value]="null" selected>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let type of gridFailureDetailsSandbox.gridFailureTypes$ | async" [value]="type.id">{{ type.type }}</option>
                </select>
              </div>
            </div>

            <!-- responsibility -->
            <div class="form-group row">
              <label for="responsibility" class="col-sm-2 col-form-label">{{ 'GridFailure.Responsibility' | translate }}</label>
              <div class="col-sm-4">
                <input
                  type="text"
                  maxlength="255"
                  class="form-control"
                  id="responsibility"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['responsibility']"
                  autocomplete="off"
                />
              </div>
            </div>

            <!-- internExtern -->
            <div class="form-group row">
              <label for="internExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.InternExtern' | translate }}</label>
              <div class="col-sm-4">
                <select
                  type="text"
                  class="form-control"
                  id="internExtern"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['internExtern']"
                >
                  <option [value]="null" selected>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let enum of gridFailureDetailsSandbox.internExternEnum | keyvalue" [value]="enum.key">{{ enum.value }}</option>
                </select>
              </div>
            </div>

            <!-- statusIntern -->
            <div class="form-group row">
              <label for="statusIntern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusIntern' | translate }}</label>
              <div class="col-sm-4">
                <select
                  required
                  type="text"
                  class="form-control"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusInternId']"
                >
                  <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let state of gridFailureDetailsSandbox.gridFailureInternalStates$ | async" [value]="state.id">{{ state.status }}</option>
                </select>
              </div>
            </div>

            <!-- statusExtern -->
            <div class="form-group row">
              <label for="statusExtern" class="col-sm-2 col-form-label">{{ 'GridFailure.StatusExtern' | translate }}</label>
              <div class="col-sm-4">
                <select
                  required
                  type="text"
                  class="form-control"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['statusExternId']"
                >
                  <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let state of gridFailureDetailsSandbox.gridFailureExternalStates$ | async" [value]="state.id">{{ state.status }}</option>
                </select>
              </div>
            </div>

            <!-- publicationStatus -->
            <div class="form-group row">
              <label for="publicationStatus" class="col-sm-2 col-form-label">{{ 'GridFailure.PublicationStatus' | translate }}</label>
              <div class="col-sm-4">
                <select
                  type="text"
                  class="form-control"
                  id="publicationStatus"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['publicationStatus']"
                >
                  <option [value]="null" selected>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let enum of gridFailureDetailsSandbox.publicationStatusEnum | keyvalue" [value]="enum.key">{{ enum.value }}</option>
                </select>
              </div>
            </div>
          </div>
        </app-expandable>

        <app-expandable [showBodyInitially]="true">
          <label header>{{ 'GridFailure.SubTitle2' | translate }}</label>
          <div class="expandable-content" body>
            <!-- branch -->
            <div class="form-group row">
              <label for="branch" class="col-sm-2 col-form-label">{{ 'GridFailure.Branch' | translate }}</label>
              <div class="col-sm-4">
                <select
                  required
                  type="text"
                  class="form-control"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['branchId']"
                >
                  <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let branch of gridFailureDetailsSandbox.gridFailureBranches$ | async" [value]="branch.id">{{ branch.description }}</option>
                </select>
              </div>
            </div>

            <!-- voltageLevel -->
            <div class="form-group row">
              <label for="voltageLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.VoltageLevel' | translate }}</label>
              <div class="col-sm-4">
                <select
                  required
                  type="text"
                  class="form-control"
                  id="voltageLevel"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['voltageLevel']"
                >
                  <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let enum of gridFailureDetailsSandbox.voltageLevelEnum | keyvalue" [value]="enum.key">{{ enum.value }}</option>
                </select>
              </div>
            </div>

            <!-- pressureLevel -->
            <div class="form-group row">
              <label for="pressureLevel" class="col-sm-2 col-form-label">{{ 'GridFailure.PressureLevel' | translate }}</label>
              <div class="col-sm-4">
                <select
                  type="text"
                  class="form-control"
                  id="pressureLevel"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['pressureLevel']"
                >
                  <option [value]="null" selected>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let enum of gridFailureDetailsSandbox.pressureLevelEnum | keyvalue" [value]="enum.key">{{ enum.value }}</option>
                </select>
              </div>
            </div>

            <!-- failureBegin -->
            <div class="form-group row">
              <label for="failureBegin" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureBegin' | translate }}</label>
              <div class="input-group col-sm-4">
                <div class="input-group-prepend">
                  <app-date-time-picker
                    (dateTimeChange)="setGridFailureDateTime($event, 'failureBegin')"
                    [dateString]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureBegin']?.value"
                    [disabled]="!gridFailureDetailsSandbox.saveEnabled"
                    [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
                  ></app-date-time-picker>
                </div>

                <input
                  required
                  class="form-control editable"
                  type="text"
                  placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
                  id="failureBegin"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureBegin']"
                  [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
                  [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
                  readonly
                />
                <div class="input-group-append">
                  <button
                    class="btn btn-outline-primary calendar"
                    (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureBegin)"
                    type="button"
                    [disabled]="!gridFailureDetailsSandbox.saveEnabled"
                    [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
                  >
                    <em class="fa fa-times-circle" aria-hidden="true"></em>
                  </button>
                </div>
              </div>
            </div>

            <!-- failureEndPlanned -->
            <div class="form-group row">
              <label for="failureEndPlanned" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureEndPlanned' | translate }}</label>
              <div class="input-group col-sm-4">
                <div class="input-group-prepend">
                  <app-date-time-picker
                    (dateTimeChange)="setGridFailureDateTime($event, 'failureEndPlanned')"
                    [dateString]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndPlanned']?.value"
                    [disabled]="!gridFailureDetailsSandbox.saveEnabled"
                    [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
                  ></app-date-time-picker>
                </div>

                <input
                  class="form-control editable"
                  type="text"
                  placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
                  id="failureEndPlanned"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndPlanned']"
                  [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
                  [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
                  readonly
                />
                <div class="input-group-append">
                  <button
                    class="btn btn-outline-primary calendar"
                    (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureEndPlanned)"
                    type="button"
                    [disabled]="!gridFailureDetailsSandbox.saveEnabled"
                    [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
                  >
                    <em class="fa fa-times-circle" aria-hidden="true"></em>
                  </button>
                </div>
              </div>
            </div>

            <!-- failureEndResupplied -->
            <div class="form-group row">
              <label for="failureEndResupplied" class="col-sm-2 col-form-label">{{ 'GridFailure.FailureEndResupplied' | translate }}</label>
              <div class="input-group col-sm-4">
                <app-date-time-picker
                  (dateTimeChange)="setGridFailureDateTime($event, 'failureEndResupplied')"
                  [dateString]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndResupplied']?.value"
                  [disabled]="!gridFailureDetailsSandbox.saveEnabled"
                  [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
                ></app-date-time-picker>
                <input
                  class="form-control editable"
                  type="text"
                  placeholder="{{ Globals.DATE_TIME_PLACEHOLDER_PATTERN }}"
                  id="failureEndResupplied"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['failureEndResupplied']"
                  [ngrxValueConverter]="gridFailureDetailsSandbox.dateTimeValueConverter"
                  [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
                  readonly
                />
                <div class="input-group-append">
                  <button
                    class="btn btn-outline-primary calendar"
                    (click)="resetGridFailureDateTime(gridFailureDetailsSandbox.datePickerResetEnum.FailureEndResupplied)"
                    type="button"
                    [disabled]="!gridFailureDetailsSandbox.saveEnabled"
                    [class.isDisabled]="!gridFailureDetailsSandbox.saveEnabled"
                  >
                    <em class="fa fa-times-circle" aria-hidden="true"></em>
                  </button>
                </div>
              </div>
            </div>

            <!-- expectedReason -->
            <div class="form-group row">
              <label for="expectedReason" class="col-sm-2 col-form-label">{{ 'GridFailure.ExpectedReason' | translate }}</label>
              <div class="col-sm-4">
                <select
                  required
                  type="text"
                  class="form-control"
                  id="expectedReason"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['expectedReasonId']"
                >
                  <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let item of gridFailureDetailsSandbox.gridFailureExpectedReasons$ | async" [value]="item.id">{{ item.text }}</option>
                </select>
              </div>
              <!-- freetext feld (planned) -->
              <div class="col-sm-4" *ngIf="false">
                <input
                  type="text"
                  maxlength="255"
                  class="form-control"
                  id="publicationFreetext"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['publicationFreetext']"
                  autocomplete="off"
                />
              </div>
            </div>

            <!-- internalRemark -->
            <div class="form-group row">
              <label for="internalRemark" class="col-sm-2 col-form-label">{{ 'GridFailure.InternalRemark' | translate }}</label>
              <div class="col-sm-4">
                <input
                  type="text"
                  maxlength="255"
                  class="form-control"
                  id="internalRemark"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['internalRemark']"
                  autocomplete="off"
                />
              </div>
            </div>
          </div>
        </app-expandable>

        <app-expandable [showBodyInitially]="true">
          <label header>{{ 'GridFailure.SubTitle3' | translate }}</label>

          <div class="expandable-content" body>
            <!-- postcode -->
            <div class="form-group row">
              <label for="postcode" class="col-sm-2 col-form-label">{{ 'GridFailure.Postcode' | translate }}</label>
              <div class="col-sm-4">
                <input
                  type="text"
                  maxlength="255"
                  class="form-control"
                  id="postcode"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['postcode']"
                  autocomplete="off"
                />
              </div>
            </div>

            <!-- city -->
            <div class="form-group row">
              <label for="city" class="col-sm-2 col-form-label">{{ 'GridFailure.City' | translate }}</label>
              <div class="col-sm-4">
                <input
                  required
                  type="text"
                  maxlength="255"
                  class="form-control"
                  id="city"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['city']"
                  autocomplete="off"
                />
              </div>
            </div>

            <!-- district -->
            <div class="form-group row">
              <label for="district" class="col-sm-2 col-form-label">{{ 'GridFailure.District' | translate }}</label>
              <div class="col-sm-4">
                <input
                  type="text"
                  maxlength="255"
                  class="form-control"
                  id="district"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['district']"
                  autocomplete="off"
                />
              </div>
            </div>

            <!-- street -->
            <div class="form-group row">
              <label for="street" class="col-sm-2 col-form-label">{{ 'GridFailure.Street' | translate }}</label>
              <div class="col-sm-4">
                <input
                  required
                  type="text"
                  maxlength="255"
                  class="form-control"
                  id="street"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['street']"
                  autocomplete="off"
                />
              </div>
            </div>

            <!-- housenumber -->
            <div class="form-group row">
              <label for="housenumber" class="col-sm-2 col-form-label">{{ 'GridFailure.Housenumber' | translate }}</label>
              <div class="col-sm-4">
                <input
                  type="text"
                  maxlength="255"
                  class="form-control"
                  id="housenumber"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['housenumber']"
                  autocomplete="off"
                />
              </div>
            </div>
          </div>
        </app-expandable>

        <app-expandable [showBodyInitially]="true">
          <label header>{{ 'GridFailure.SubTitle4' | translate }}</label>
          <div class="expandable-content" body>
            <!-- stationDescription -->
            <div class="form-group row">
              <label for="stationDescription" class="col-sm-2 col-form-label">{{ 'GridFailure.StationDescription' | translate }}</label>
              <div class="col-sm-4">
                <input
                  type="text"
                  maxlength="255"
                  class="form-control"
                  [ngbTypeahead]="gridFailureDetailsSandbox.searchForStation"
                  [ngrxValueConverter]="gridFailureDetailsSandbox.stationValueConverter"
                  (selectItem)="gridFailureDetailsSandbox.latLonMapping($event)"
                  id="stationDescription"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['stationDescription']"
                  autocomplete="off"
                  [resultFormatter]="gridFailureDetailsSandbox.formatter"
                  [inputFormatter]="gridFailureDetailsSandbox.formatter"
                />
              </div>
            </div>

            <!-- radius -->
            <div class="form-group row">
              <label for="radius" class="col-sm-2 col-form-label">{{ 'GridFailure.RadiusInMeter' | translate }}</label>
              <div class="col-sm-4">
                <select
                  required
                  type="text"
                  class="form-control"
                  [ngrxFormControlState]="((gridFailureDetailsSandbox.gridFailureDetailsFormState$ | async)?.controls)['radiusId']"
                >
                  <option [value]="null" selected disabled>{{ 'SelectOption' | translate }}</option>
                  <option *ngFor="let item of gridFailureDetailsSandbox.gridFailureRadii$ | async" [value]="item.id">{{ item.radius }}</option>
                </select>
              </div>
            </div>
          </div>
        </app-expandable>
      </div>
    </form>
  </div>
</app-card-layout>