src/app/standby-schedule/dialogs/replace-dialog/replace-dialog.component.html

<!--
/********************************************************************************
 * Copyright © 2018 Mettenmeier GmbH.
 *
 * 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 class="modal-header">
  <h4 class="modal-title" id="modal-basic-title">Bereitschaft ersetzen</h4>
  <button type="button" class="close" aria-label="Close" (click)="decide(false)" id="replaceDialogClose">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <form class="mt-3" [formGroup]="form" novalidate>
    <div>
      <div class="form-group row d-flex align-items-center h-100">
        <label class="form-check-label col-form-label col-md-3">
          Von
        </label>
        <div class="input-group col-md-6" formGroupName="date">
          <input class="form-control" placeholder="von" name="dp" ngbDatepicker #validFrom="ngbDatepicker"
            formControlName="validFrom" required id="validityDateFromInput">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" (click)="validFrom.toggle()" type="button" id="validityDateFromPicker">
              <i class="fa fa-calendar" aria-hidden="true"></i>
            </button>
          </div>
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" (click)="setDefaultDate('validFrom')" type="button" id="validityDateFromDefault"
              data-toggle="tooltip" data-placement="bottom" title="Auf Standardwert setzen">
              <i class="fa fa-clock-o" aria-hidden="true"></i>
            </button>
          </div>
          <ok-error [control]="form.controls['date'].controls['validFrom']" class="w-100"></ok-error>
          <ok-error [control]="form.controls['date']"></ok-error>
        </div>
        <div class="col-md-3">
          <ngb-timepicker formControlName="validFromTime" id="moveTimePickerFrom"></ngb-timepicker>
        </div>
      </div>
      <div class="form-group row d-flex align-items-center h-100">
        <label class="form-check-label col-form-label col-md-3">
          Bis
        </label>
        <div class="input-group col-md-6" formGroupName="date">
          <input class="form-control" placeholder="bis" name="dp" ngbDatepicker #validTo="ngbDatepicker"
            formControlName="validTo" required id="validityDateToInput">
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" (click)="validTo.toggle()" type="button" id="validityDateToPicker">
              <i class="fa fa-calendar" aria-hidden="true"></i>
            </button>
          </div>
          <div class="input-group-append">
            <button class="btn btn-outline-secondary" (click)="setDefaultDate('validTo')" type="button" id="validityDateToDefault"
              data-toggle="tooltip" data-placement="bottom" title="Auf Standardwert setzen">
              <i class="fa fa-clock-o" aria-hidden="true"></i>
            </button>
          </div>
          <ok-error [control]="form.controls['date'].controls['validTo']" class="w-100"></ok-error>
        </div>
        <div class="col-md-3">
          <ngb-timepicker formControlName="validToTime" id="moveTimePickerTo"></ngb-timepicker>
        </div>
      </div>
    </div>
    <div class="form-group row">
      <label for="currentUser" class="col-sm-3 col-form-label">Aktuelle Bereitschaft</label>
      <div class="col-sm-9">
        <p-dropdown [options]="userList" formControlName="currentUserId" [style]="{'width':'100%'}" placeholder="Bereitschaft auswählen"
          filter="true">
        </p-dropdown>
        <ok-error [control]="form.controls['currentUserId']"></ok-error>
      </div>
    </div>
    <div class="form-group row">
      <label for="newUser" class="col-sm-3 col-form-label">Neue Bereitschaft</label>
      <div class="col-sm-9">
        <p-dropdown [options]="userList" formControlName="newUserId" [style]="{'width':'100%'}" placeholder="Bereitschaft auswählen"
          filter="true">
        </p-dropdown>
        <ok-error [control]="form.controls['newUserId']"></ok-error>
      </div>
    </div>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-success" (click)="decide(true)" id="validityConfirm">Ersetzen</button>
  <button type="button" class="btn btn-danger" (click)="decide(false)" id="validityCancel">Abbrechen</button>
</div>