src/app/dialogs/shift-change/shift-change.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
* 
******************************************************************************
-->

<header>
  <h2 *ngIf="!isFetchingResp">Schichtübergabe</h2>
  <h2 *ngIf="isFetchingResp">Schichtübernahme</h2>
</header>

<div>
  <div class="dialog">
    <div class="panel panel-default ">
      <div *ngIf="sessionContext.bannerMessage.isActive" [ngClass]="{ 'alert':true, 
                'alert-danger': sessionContext.bannerMessage.status === bannerMessageStatus.error,
                'alert-info': sessionContext.bannerMessage.status === bannerMessageStatus.info,
                'alert-warning': sessionContext.bannerMessage.status === bannerMessageStatus.warning,
                'alert-success': bannerMessageStatus.success }">
        <div class="close" (click)="sessionContext.bannerMessage.hide()">x</div>
        {{sessionContext.bannerMessage.text}}
      </div>
      <div class="panel-body" style="max-width: 450px;">
        <multiselect class="customMultiSelect" *ngIf="!isFetchingResp" [data]="allRelevantUsers" [(ngModel)]="preSelectedUsers"
          [settings]="dropdownSettings" ngDefaultControl></multiselect>
      </div>
      <form #shiftForm="ngForm" novalidate>
        <div class="panel-body">
          <fieldset [disabled]="!preSelectedUsers || preSelectedUsers.length===0">
            <table class="table table-bordered responsibility-column-striped">
              <thead>
                <tr>
                  <th style="border: 0"></th>
                  <th>Strom</th>
                  <th>Gas</th>
                  <th>FW</th>
                  <th>Wasser</th>
                  <th>ZSM</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let responsibilityContainer of responsibilityContainers">
                  <td class="shc-table-col">{{ responsibilityContainer.gridTerritoryDescription }}</td>

                  <!-- Strom -->
                  <td class="shc-table-col shc-table-data">
                    <div class="form-group">
                      <span class="curr-resp-label" *ngIf="isFetchingResp">
                        Aktuell:
                        {{sessionContext.getUserMap().findAndRenderUser(getResponsibilityAll(responsibilityContainer,'S').responsibleUser)}}
                        <br>
                      </span>
                      <span class="curr-new-resp-label" *ngIf="isFetchingResp && isNewUserPresent(getResponsibilityAll(responsibilityContainer,'S'))">
                        Geplant:
                        {{sessionContext.getUserMap().findAndRenderUser(getResponsibilityAll(responsibilityContainer,'S').newResponsibleUser)}}
                      </span>
                      <select [(ngModel)]="getResponsiblity(responsibilityContainer,'S').newResponsibleUser" *ngIf="responsibilityContainer && getResponsiblity(responsibilityContainer,'S')"
                        style="height:30px !important" class="form-control shc-table-select" name="'responsibleUserSelectionS_{{getResponsiblity(responsibilityContainer,'S').id}}'"
                        (change)="checkIfPersonSelected()">
                        <option></option>
                        <option *ngFor="let user of preSelectedUsers" value="{{user.username}}">{{user.name}}</option>
                      </select>
                    </div>
                  </td>

                  <!-- Gas -->
                  <td class="shc-table-col shc-table-data">
                    <div class="form-group">
                      <span class="curr-resp-label" *ngIf="isFetchingResp">
                        Aktuell:
                        {{sessionContext.getUserMap().findAndRenderUser(getResponsibilityAll(responsibilityContainer,'G').responsibleUser)}}
                        <br>
                      </span>
                      <span class="curr-new-resp-label" *ngIf="isFetchingResp && isNewUserPresent(getResponsibilityAll(responsibilityContainer,'G'))">
                        Geplant:
                        {{sessionContext.getUserMap().findAndRenderUser(getResponsibilityAll(responsibilityContainer,'G').newResponsibleUser)}}
                      </span>
                      <select [(ngModel)]="getResponsiblity(responsibilityContainer,'G').newResponsibleUser" *ngIf="responsibilityContainer && getResponsiblity(responsibilityContainer,'G')"
                        style="height:30px !important" class="form-control shc-table-select" name="'responsibleUserSelectionG_{{getResponsiblity(responsibilityContainer,'G').id}}'"
                        (change)="checkIfPersonSelected()">
                        <option></option>
                        <option *ngFor="let user of preSelectedUsers" value="{{user.username}}">{{user.name}}</option>
                      </select>
                    </div>
                  </td>

                  <!-- FW (Fernwärme) -->
                  <td class="shc-table-col shc-table-data">
                    <div class="form-group">
                      <span class="curr-resp-label" *ngIf="isFetchingResp">
                        Aktuell:
                        {{sessionContext.getUserMap().findAndRenderUser(getResponsibilityAll(responsibilityContainer,'F').responsibleUser)}}
                        <br>
                      </span>
                      <span class="curr-new-resp-label" *ngIf="isFetchingResp && isNewUserPresent(getResponsibilityAll(responsibilityContainer,'F'))">
                        Geplant:
                        {{sessionContext.getUserMap().findAndRenderUser(getResponsibilityAll(responsibilityContainer,'F').newResponsibleUser)}}
                      </span>
                      <select [(ngModel)]="getResponsiblity(responsibilityContainer,'F').newResponsibleUser" *ngIf="responsibilityContainer && getResponsiblity(responsibilityContainer,'F')"
                        style="height:30px !important" class="form-control shc-table-select" name="'responsibleUserSelectionF_{{getResponsiblity(responsibilityContainer,'F').id}}'"
                        (change)="checkIfPersonSelected()">
                        <option></option>
                        <option *ngFor="let user of preSelectedUsers" value="{{user.username}}">{{user.name}}</option>
                      </select>
                    </div>
                  </td>

                  <!-- Wasser -->
                  <td class="shc-table-col shc-table-data">
                    <div class="form-group">
                      <span class="curr-resp-label" *ngIf="isFetchingResp">
                        Aktuell:
                        {{sessionContext.getUserMap().findAndRenderUser(getResponsibilityAll(responsibilityContainer,'W').responsibleUser)}}
                        <br>
                      </span>
                      <span class="curr-new-resp-label" *ngIf="isFetchingResp && isNewUserPresent(getResponsibilityAll(responsibilityContainer,'W'))">
                        Geplant:
                        {{sessionContext.getUserMap().findAndRenderUser(getResponsibilityAll(responsibilityContainer,'W').newResponsibleUser)}}
                      </span>
                      <select [(ngModel)]="getResponsiblity(responsibilityContainer,'W').newResponsibleUser" *ngIf="responsibilityContainer && getResponsiblity(responsibilityContainer,'W')"
                        style="height:30px !important" class="form-control shc-table-select" name="'responsibleUserSelectionW_{{getResponsiblity(responsibilityContainer,'W').id}}'"
                        (change)="checkIfPersonSelected()">
                        <option></option>
                        <option *ngFor="let user of preSelectedUsers" value="{{user.username}}">{{user.name}}</option>
                      </select>
                    </div>
                  </td>

                  <!-- ZSM (Zentrale Störmeldestelle) -->
                  <td class="shc-table-col shc-table-data">
                    <div class="form-group">
                      <span class="curr-resp-label" *ngIf="isFetchingResp">
                        Aktuell:
                        {{sessionContext.getUserMap().findAndRenderUser(getResponsibilityAll(responsibilityContainer,'Z').responsibleUser)}}
                        <br>
                      </span>
                      <span class="curr-new-resp-label" *ngIf="isFetchingResp && isNewUserPresent(getResponsibilityAll(responsibilityContainer,'Z'))">
                        Geplant:
                        {{sessionContext.getUserMap().findAndRenderUser(getResponsibilityAll(responsibilityContainer,'Z').newResponsibleUser)}}
                      </span>
                      <select [(ngModel)]="getResponsiblity(responsibilityContainer,'Z').newResponsibleUser" *ngIf="responsibilityContainer && getResponsiblity(responsibilityContainer,'Z')"
                        style="height:30px !important" class="form-control shc-table-select" name="'responsibleUserSelectionZ_{{getResponsiblity(responsibilityContainer,'Z').id}}'"
                        (change)="checkIfPersonSelected()">
                        <option></option>
                        <option *ngFor="let user of preSelectedUsers" value="{{user.username}}">{{user.name}}</option>
                      </select>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </fieldset>
        </div>
      </form>
    </div>
  </div>
  <div class="margin-top">
    <button *ngIf="!isFetchingResp" class="btn btn-primary btn-sm" [disabled]="shiftChangeFormInValid" (click)="shiftChange(true)"
      autofocus>Übergeben</button>
    <button *ngIf="isFetchingResp" class="btn btn-primary btn-sm" [disabled]="shiftChangeFormInValid" (click)="shiftChange(true)"
      autofocus>Übernehmen</button>

    <button *ngIf="!isFetchingResp" class="btn btn-primary btn-sm" (click)="cancelChange()" autofocus>Stornieren</button>
    <button class="btn btn-primary btn-sm " (click)="dialogRef.close()">Abbrechen</button>
  </div>
  <div class="important-text" *ngIf="!shiftChangeFormInValid && isFetchingResp"><span>Mit "Übernehmen" gelangen Sie auf
      die Logout-Seite und müssen die Anwendung neu starten!</span></div>
</div>