src/app/filter/filter.component.html

<!--
******************************************************************************
* Copyright © 2017-2018 PTA GmbH.
* All rights reserved. This program and the accompanying materials
* are made available under the terms of the Eclipse Public License v1.0
* which accompanies this distribution, and is available at
* 
*     http://www.eclipse.org/legal/epl-v10.html
* 
******************************************************************************
-->

<div id="collapse9" class="panel-collapse collapse" [ngClass]="{'in': filterExpanded }">
  <div class="panel panel-default ">
    <div class="panel-heading">
      <h4 class="panel-title">
        Filter
      </h4>
    </div>
    <div style="width:100%;">
      <div *ngIf="bannerMessage.isActive" [ngClass]="{'alert':true, 
    'alert-danger':bannerMessage.status===bannerMessageStatus.error,
    'alert-info':bannerMessage.status===bannerMessageStatus.info,
    'alert-warning':bannerMessage.status===bannerMessageStatus.warning,
    'alert-success':bannerMessage.status===bannerMessageStatus.success}">
        <div class="close" (click)="bannerMessage.hide()">x</div>
        {{bannerMessage.text}}
      </div>
    </div>
    <div class="panel-body">
      <table class="table table-bordered responsibility-column-striped">
        <thead>
          <tr>
            <th style="border: 0"></th>
            <th style="min-width: 64px">Strom</th>
            <th style="min-width: 64px">Gas</th>
            <th style="min-width: 64px">FW</th>
            <th style="min-width: 64px">Wasser</th>
            <th style="min-width: 64px">ZSM</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let responsibilityRow of responsibilityContainerMatrix">
            <td>{{ responsibilityRow.gridTerritoryDescription }}</td>
            <td>
              <span class="filterCheckbox"><input type="checkbox" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'S')"
                  (change)="responsibilitiesSelectionChanged(true)" class="responsibility-checkbox-er" [(ngModel)]="getResponsiblity(responsibilityRow,'S').isActive"></span>
              <span class="filterUsername" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'S')">{{
                mapUserName(getResponsiblity(responsibilityRow, 'S').responsibleUser) }}</span>
            </td>
            <td>
              <span class="filterCheckbox"><input type="checkbox" *ngIf="responsibilityRow  && getResponsiblity(responsibilityRow,'G')"
                  (change)="responsibilitiesSelectionChanged(true)" class="responsibility-checkbox-gr" [(ngModel)]="getResponsiblity(responsibilityRow,'G').isActive"></span>
              <span class="filterUsername" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'G')">{{
                mapUserName(getResponsiblity(responsibilityRow, 'G').responsibleUser) }}</span>
            </td>
            <td>
              <span class="filterCheckbox"><input type="checkbox" *ngIf="responsibilityRow  && getResponsiblity(responsibilityRow,'F')"
                  (change)="responsibilitiesSelectionChanged(true)" class="responsibility-checkbox-dhr" [(ngModel)]="getResponsiblity(responsibilityRow,'F').isActive"></span>
              <span class="filterUsername" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'F')">{{
                mapUserName(getResponsiblity(responsibilityRow, 'F').responsibleUser) }}</span>
            </td>
            <td>
              <span class="filterCheckbox"><input type="checkbox" *ngIf="responsibilityRow  && getResponsiblity(responsibilityRow,'W')"
                  (change)="responsibilitiesSelectionChanged(true)" class="responsibility-checkbox-wr" [(ngModel)]="getResponsiblity(responsibilityRow,'W').isActive"></span>
              <span class="filterUsername" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'W')">{{
                mapUserName(getResponsiblity(responsibilityRow, 'W').responsibleUser) }}</span>
            </td>
            <td>
              <span class="filterCheckbox"><input type="checkbox" *ngIf="responsibilityRow  && getResponsiblity(responsibilityRow,'Z')"
                  (change)="responsibilitiesSelectionChanged(true)" class="responsibility-checkbox-wr" [(ngModel)]="getResponsiblity(responsibilityRow,'Z').isActive"></span>
              <span class="filterUsername" *ngIf="responsibilityRow && getResponsiblity(responsibilityRow,'Z')">{{
                mapUserName(getResponsiblity(responsibilityRow, 'Z').responsibleUser) }}</span>
            </td>
          </tr>
        </tbody>
      </table>
      <button id="selectAllButton" class="btn btn-primary btn-sm" (click)="selectAllResponsibilities()">Alle setzen</button>
      <button id="deselectAllButton" class="btn btn-primary btn-sm" (click)="deselectAllResponsibilities()">Alle löschen</button>
      <button id="resetAllButton" class="btn btn-primary btn-sm" (click)="resetToDefaultAllResponsibilities()">Filter & Sortierung zurücksetzen</button>
    </div>
  </div>
</div>