senslog-dashboard/src/app/shared/nav-bar/components/data-download/data-download-popup.component.html

<p-dialog [visible]="isVisible" [modal]="true" [closable]="false" [draggable]="false" header="Data download"
          [baseZIndex]="10000" [className]="'popup-form'">

  <form [formGroup]="downloadForm">
    <div class="input-group form-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fas fa-file-signature"></i></span>
        <select formControlName="sensor_id" id="sensor_id">
          <option value="null" disabled>Select sensor</option>
          <option *ngFor="let s of sensors; let i = index" [value]="sensors[i].sensorId">
            {{s.sensorName + '   (' + s.sensorId + ')'}}
          </option>
        </select>
      </div>
    </div>
    <div class="input-group form-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="far fa-calendar-alt"></i>From</span>
        <p-calendar [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2021" inputId="navigators" formControlName="from"></p-calendar>
      </div>
    </div>
    <div class="input-group form-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="far fa-calendar-alt"></i>To</span>
        <p-calendar [monthNavigator]="true" [yearNavigator]="true" yearRange="2000:2021" inputId="navigators" formControlName="to"></p-calendar>
      </div>
    </div>
    <p-listbox [options]="units" formControlName="selectedUnits" [metaKeySelection]="false" [checkbox]="true" [filter]="true" filterPlaceHolder="Search and select units"
               optionLabel="description" optionValue="unitId"
               emptyFilterMessage="No units for specified filter" [multiple]="true" [listStyle]="{'max-height':'250px'}" [style]="{'width':'100%'}">
    </p-listbox>
  </form>
  <div *ngIf="inProgress" class="download-progress">Export in progress<p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar></div>
  <p-footer>
    <div class="row">
      <div class="popup-buttons">
        <button pButton type="button" label="Close" class="p-button-primary dark" icon="pi pi-times" (click)="close()"></button>
        <button pButton type="submit" label="Download" class="p-button-primary dark" icon="pi pi-download" (click)="processDownload()" [disabled]="inProgress"></button>
      </div>
    </div>
  </p-footer>
</p-dialog>