ymanager/webapp/src/app/dashboard/add-vacation-dialog/add-vacation-dialog.component.html @ d2799ca5

<h1 mat-dialog-title>{{ 'addVacation.headline' | translate }}</h1>

<div mat-dialog-content>
  <div class="vacation-selection-container">
    <label id="vacation-type-radio-group-label" class="dialog-label">{{ 'basic.vacationType' | translate }}</label>
    <mat-radio-group aria-labelledby="vacation-type-radio-group-label" class="vacation-type-radio-group" [(ngModel)]="selectedVacationType">
      <mat-radio-button class="vacation-type-radio-button" [value]=vacationType.SICKDAY>
        {{ vacationType.SICKDAY | translate }}
      </mat-radio-button>
      <mat-radio-button class="vacation-type-radio-button" [value]=vacationType.VACATION>
        {{ vacationType.VACATION | translate }}
      </mat-radio-button>
    </mat-radio-group>
  </div>
  <div class="datetime-selection-container">
    <div class="date-selection">
      <span class="dialog-label">{{ 'basic.date' | translate }}</span>
      <mat-form-field class="date-input">
        <input id="date-input" matInput [matDatepicker]="datePicker" [(ngModel)]="data.date">
        <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
        <mat-datepicker #datePicker></mat-datepicker>
      </mat-form-field>
    </div>
    <div class="datetime-interval" *ngIf="selectedVacationType == vacationType.VACATION">
      <div class="from-time">
        <span class="dialog-label">Od:</span>
        <div class="time-input-container">
          <input class="time-input" [format]="24" [value]="data.fromTime" [ngxTimepicker]="fromTimePicker">
          <ngx-material-timepicker [minutesGap]="MINUTE_STEP" (timeSet)="data.fromTime = $event" #fromTimePicker></ngx-material-timepicker>
          <i class="material-icons">access_time</i>
        </div>
      </div>
      <div class="to-time">
        <span class="dialog-label">Do:</span>
        <div class="time-input-container">
          <input class="time-input" [format]="24" [value]="data.toTime" [ngxTimepicker]="toTimePicker">
          <ngx-material-timepicker [minutesGap]="MINUTE_STEP" (timeSet)="data.toTime = $event" #toTimePicker></ngx-material-timepicker>
          <i class="material-icons">access_time</i>
        </div>
      </div>
    </div>
  </div>
</div>

<div mat-dialog-actions align="end">
  <button mat-raised-button color="primary" (click)="onConfirmClick()">{{ 'button.confirm' | translate }}</button>
  <button mat-raised-button color="basic" (click)="onCloseClick()">{{ 'button.close' | translate }}</button>
</div>