src/app/reporting/components/dashboard/dashboard.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="sticky-top-querysection border-bottom">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 border-bottom">
          <h1 class="h2" id="listHeader">Aktuelle Bereitschaft abfragen</h1>
          <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row pb-2">
      <div class="col-md-12">
        <form class="mt-3" [formGroup]="form" novalidate>
          <div class="row">
            <div class="col-sm-12 col-xl-6">
              <div class="form-group row d-flex align-items-center h-100">
                <label class="form-check-label col-form-label col-md-3">
                  Abfragezeit
                </label>
                <div class="input-group col-md-5" formGroupName="date">
                  <input class="form-control" placeholder="von" name="dp" ngbDatepicker #dateIndex="ngbDatepicker"
                    formControlName="dateIndex" required id="validityDateFromInput">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary" (click)="dateIndex.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('dateIndex')" 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.get('date').get('dateIndex')" class="w-100"></ok-error>
                </div>
                <div class="col-md-3">
                  <ngb-timepicker formControlName="timeIndex" id="moveTimePickerFrom"></ngb-timepicker>
                  <ok-error [control]="form.controls['timeIndex']"></ok-error>
                </div>
              </div>
            </div>
            <div class="col-md-12 col-sm-12 col-xl-6">
              <div class="form-group row">
                <label for="city" class="col-md-3 col-form-label">Ort</label>
                <div class="col-md-9">
                  <p-dropdown [options]="searchList" formControlName="locationId" placeholder="Ort auswählen" [style]="{'width':'100%'}"
                    filter="true" [showClear]="true">
                    <ng-template let-item pTemplate="selectedItem">
                      <span style="vertical-align:middle; margin-left: .5em">{{item.label}}</span>
                    </ng-template>
                  </p-dropdown>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-md-3 col-form-label">Sparten</label>
                <div class="col-md-9">
                  <label class="col-form-label" *ngIf="branches.length === 0">Außerhalb des Netzgebietes!</label>
                  <p-multiSelect *ngIf="branches.length > 0" formControlName="lsBranchSelected" [options]="branches"
                    selectedItemsLabel="{0} Sparten ausgewählt" defaultLabel="Sparten eingrenzen" [panelStyle]="{minWidth:'12em'}"></p-multiSelect>
                </div>
              </div>
              <div class="form-group row">
                <label class="col-md-3 col-form-label">Bereitschaftsliste</label>
                <div class="col-md-9">
                  <select class="form-control" id="standbyListId" formControlName="listId">
                    <option value=""></option>
                    <option *ngFor="let standbylist of standbylistSelectionData" [value]="standbylist.id">{{standbylist.title}}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xl-1 col-md-2 col-sm-12">
              <button class="btn btn-primary btn-block" (click)="search()" id="btnSearch">suchen</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<div class="container-fluid">
  <div class="row mt-3" *ngIf="rowData">
    <div class="col-md-12">
      <table class="table stick-table-top">
        <thead>
          <tr>
            <th></th>
            <th>Bereitschaftsgruppe</th>
            <th>Org. Einheit</th>
            <th>Vorname</th>
            <th>Nachname</th>
            <th>Wohnort</th>
            <th>Strasse</th>
            <th>Telefon-Nr. dienstl. / Hotline</th>
            <th>Telefon-Nr. privat</th>
            <th>Mobiltelefon dienstl.</th>
            <th>Mobiltelefon privat</th>
            <th>Funk-Nr.</th>
            <th>Strecke Privat</th>
            <th>Strecke Geschäftl.</th>
            <th>von</th>
            <th>bis</th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let row of rowData">
            <tr>
              <td><button class="btn btn-primary btn-sm" (click)="row.isCollapsed = !row.isCollapsed" title="Details anzeigen">
                  <i class="fa fa-eye" aria-hidden="true"></i>
                </button></td>
              <td scope="row">{{row.standbyGroup?.title}}</td>
              <td scope="row">{{row.user?.organisation?.orgaName}}</td>
              <td scope="row">{{row.user?.firstname}}</td>
              <td scope="row">{{row.user?.lastname}}</td>
              <td scope="row">{{row.user?.privateAddress?.community}}</td>
              <td scope="row">{{row.user?.privateAddress?.street}}</td>
              <td scope="row">{{row.user?.businessContactData?.phone}}</td>
              <td scope="row">{{row.user?.privateContactData?.phone}}</td>
              <td scope="row">{{row.user?.businessContactData?.cellphone}}</td>
              <td scope="row">{{row.user?.privateContactData?.cellphone}}</td>
              <td scope="row">{{row.user?.businessContactData?.radiocomm}}</td>
              <td scope="row">{{row.privateDistance}}</td>
              <td scope="row">{{row.organisationDistance}}</td>
              <td scope="row">{{(row.validFrom | date:'HH:mm')}} Uhr</td>
              <td scope="row">{{(row.validTo | date:'HH:mm')}} Uhr</td>
            </tr>
            <tr [ngbCollapse]="row.isCollapsed" *ngFor="let groupUser of row.lsUserInStandbyGroup">
              <td></td>
              <td scope="row">{{groupUser.standbyGroup?.title}}</td>
              <td scope="row">{{groupUser.user?.organisation?.orgaName}}</td>
              <td scope="row">{{groupUser.user?.firstname}}</td>
              <td scope="row">{{groupUser.user?.lastname}}</td>
              <td scope="row">{{groupUser.user?.privateAddress?.community}}</td>
              <td scope="row">{{groupUser.user?.privateAddress?.street}}</td>
              <td scope="row">{{groupUser.user?.businessContactData?.phone}}</td>
              <td scope="row">{{groupUser.user?.privateContactData?.phone}}</td>
              <td scope="row">{{groupUser.user?.businessContactData?.cellphone}}</td>
              <td scope="row">{{groupUser.user?.privateContactData?.cellphone}}</td>
              <td scope="row">{{groupUser.user?.businessContactData?.radiocomm}}</td>
              <td scope="row">{{groupUser.privateDistance}}</td>
              <td scope="row">{{groupUser.organisationDistance}}</td>
              <td scope="row"></td>
              <td scope="row"></td>
            </tr>
          </ng-container>
        </tbody>
      </table>
      <div class="w-100" *ngIf="rowData.length === 0">
        <p class="text-center font-italic">Keine Daten vorhanden</p>
      </div>
    </div>
  </div>
</div>