src/app/pages/grid-measure-detail-tab/grid-measure-detail-tab.component.html

<!--
******************************************************************************
* Copyright © 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
******************************************************************************

-->
<app-loading-spinner *ngIf="showSpinnerGrid"></app-loading-spinner>
<div #gridMeasureDetailTabContainer>
  <form #gridMeasureDetailForm="ngForm" *ngIf="!showSpinnerGrid" (change)="onGridMeasureDetailFormValidation(gridMeasureDetailForm.form.valid)">
    <fieldset class="form-group" disabled="{{ readOnlyForm ? 'disabled' : ''}}">

      <!-- 1. row -->
      <div class="row">
        <div class="col-md-4">
          <label class="form-field-label" for="plannedStarttimeFirstSinglemeasure">Beginn der ersten geplanten Einzelmaßnahme</label>
          <div class="input-group">
            <label class="input-group-addon dateRangePickerIcon" for="plannedStarttimeFirstSinglemeasure" style="cursor: no-drop;">
              <span class="glyphicon glyphicon-calendar"></span>
            </label>
            <input disabled="disabled" #input *ngIf="gridMeasureDetail.plannedStarttimeFirstSinglemeasure" maxlength="256" [required]="true"
              type="text" name="plannedStarttimeFirstSinglemeasure" id="plannedStarttimeFirstSinglemeasure" class="form-control"
              [ngModel]="gridMeasureDetail.plannedStarttimeFirstSinglemeasure|date:dateFormatLocale" />
            <input disabled="disabled" #input *ngIf="!gridMeasureDetail.plannedStarttimeFirstSinglemeasure" maxlength="256" [required]="true"
              type="text" [ngModel]="gridMeasureDetail.plannedStarttimeFirstSinglemeasure" name="plannedStarttimeFirstSinglemeasure"
              id="plannedStarttimeFirstSinglemeasure" class="form-control" />
          </div>
        </div>
        <div class="col-md-4">
          <label class="form-field-label" for="endtimeGridmeasure">Ende der Netzmaßnahme</label>
          <div class="input-group">
            <label class="input-group-addon dateRangePickerIcon" for="endtimeGridmeasure" style="cursor: no-drop;">
              <span class="glyphicon glyphicon-calendar"></span>
            </label>
            <input disabled="disabled" #input *ngIf="gridMeasureDetail.endtimeGridmeasure" maxlength="256" [required]="false" type="text"
              [ngModel]="gridMeasureDetail.endtimeGridmeasure|date:dateFormatLocale" name="endtimeGridmeasure" id="endtimeGridmeasure"
              class="form-control" />
            <input disabled="disabled" #input *ngIf="!gridMeasureDetail.endtimeGridmeasure" maxlength="256" [required]="false" type="text"
              [ngModel]="gridMeasureDetail.endtimeGridmeasure" name="endtimeGridmeasure" id="endtimeGridmeasure" class="form-control"
            />
          </div>
        </div>
        <div class="col-md-4">
          <label class="form-field-label" for="affectedResourceControl">Betroffenes Objekt / Betriebsmittel</label>
          <input maxlength="256" [required]="true" type="text" name="affectedResource" id="affectedResourceControl" list="affectedResourcesList"
            [(ngModel)]="gridMeasureDetail.affectedResource" autocomplete="off" class="form-control" />
          <datalist id="affectedResourcesList">
            <option *ngFor="let affectedResources of affectedResourcesList" [ngValue]="affectedResources">{{affectedResources}}</option>
          </datalist>
        </div>
      </div>

      <!-- 2. row -->
      <div class="row">
        <div class="col-md-4">
          <label class="form-field-label" for="appointmentNumberOf">Häufigkeit</label>
          <input maxlength="256" [required]="true" type="number" min="0" oninput="validity.valid||(value='');" name="appointmentNumberOf"
            id="appointmentNumberOf" [(ngModel)]="gridMeasureDetail.appointmentNumberOf" (ngModelChange)="checkAppointmentNumberOfValue($event)"
            class="form-control" />
        </div>
        <div class="col-md-4">
          <label class="form-field-label" for="appointmentRepetition">Wiederholung</label>
          <select [required]="true" type="text" name="appointmentRepetition" id="appointmentRepetition" [(ngModel)]="gridMeasureDetail.appointmentRepetition"
            (change)="gridMeasureDetail.appointmentRepetition = $event.target.value" class="form-control">
            <option *ngFor="let appointmentRepetitionString of appointmentRepetitionList" value="{{appointmentRepetitionString}}" [selected]="appointmentRepetitionString === gridMeasureDetail.appointmentRepetition">{{appointmentRepetitionString}}</option>
          </select>
        </div>
        <div class="col-md-4">
          <label class="form-field-label" for="timeOfReallocation">Wiederbereitstellungszeit</label>
          <input maxlength="256" [required]="true" type="text" name="timeOfReallocation" id="timeOfReallocation" [(ngModel)]="gridMeasureDetail.timeOfReallocation"
            class="form-control" />
        </div>
      </div>

      <!-- 3. row -->
      <div class="row">
        <div class="col-md-4">
          <label style="height: 2em;"></label>
          <p *ngIf="!isAppointmentNumberOfValid" style="font-weight: bold;color:red">
            <small>Der eingetragene Wert überschreitet das zulässige Limit</small>
          </p>
        </div>
      </div>

      <!-- 4. row -->
      <div class="row">
        <div class="col-lg-12">
          <label class="form-field-label" for="description">
            Beschreibung der Maßnahme
          </label>
          <textarea style="resize:none;" maxlength="1024" [required]="true" rows="3" name="description" id="description" [(ngModel)]="gridMeasureDetail.description"
            class="form-control"></textarea>
        </div>
      </div>

      <!-- 5. row -->
      <div class="row">
        <div class="col-lg-12">
          <label class="form-field-label" for="remark">Bemerkungen</label>
          <textarea style="resize:none" maxlength="1024" rows="3" [required]="false" name="remark" id="remark" [(ngModel)]="gridMeasureDetail.remark"
            class="form-control" #gmRemark></textarea>
        </div>
      </div>
    </fieldset>

    <fieldset class="form-group" disabled="{{ readOnlyForm ? 'disabled' : ''}}">
      <div class="row">
        <div class="col-md-4">
          <div class="upload-buttons">
            <label for="file" class="btn btn-primary" id="fileUploadLabel">
              <input type="file" onclick="this.value = null" id="file" (change)="handleFileInput($event.target.files)">
              <i class="fa fa-folder"></i>Datei auswählen
            </label>
            <button type="button" [disabled]="!id || !fileSelected" (click)="uploadDocument()" class="btn btn-primary">
              <i class="fa fa-cloud-upload"></i>Datei hochladen
            </button>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-md-4">
          <label class="upload-label">Anhang</label>
          <input class="form-control" type="text" name="fileName" id="fileName" [ngModel]="fileName" readonly>
        </div>
        <div class="col-md-4">
          <label class="form-field-label" for="modUser">Letzter Bearbeiter</label>
          <input maxlength="256" type="text" name="modUser" id="modUser" [ngModel]="sessionContext.getUserMap().findAndRenderUser(gridMeasureDetail.modUser|| sessionContext.getCurrUser().username) "
            class="form-control" />
        </div>
        <div class="col-md-4">
          <label class="form-field-label" for="modUserDepartment">Abteilung letzter Bearbeiter</label>
          <select [required]="true" type="text" name="modUserDepartment" id="modUserDepartment" [(ngModel)]="gridMeasureDetail.modUserDepartment"
            class="form-control">
            <option value=""></option>
            <option *ngFor="let department of departmentList" value="{{ department.id }}">{{ department.name }}</option>
          </select>
        </div>

      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="dropzone droptext" [ngClass]="{'dropzone-active':this.dragEntered}" (drop)="drop($event)" (dragover)="allowDrop($event)"
            (dragleave)="dragleave($event)" (dragenter)="dragenter($event)">
            Datei ziehen und hier ablegen
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div *ngIf="listOfDocuments && listOfDocuments.length > 0" class="documents">
            <label>Anhang</label>
            <table class="table table-striped">
              <tr *ngFor="let document of listOfDocuments;let i = index">
                <td class="document-name" (click)="downloadDocument(document.id)">{{document.documentName}}</td>
                <td class="document-buttons">
                  <span *ngIf="this.gridMeasureDetail.statusId < Globals.STATUS.APPLIED && !readOnlyForm" (click)="deleteDocument(document.id, i)"
                    class="glyphicon glyphicon-remove remove"></span>
                  <span (click)="downloadDocument(document.id)" class="glyphicon glyphicon-download-alt download"></span>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <app-loading-spinner *ngIf="showSpinnerFileUpload"></app-loading-spinner>
    </fieldset>
  </form>
</div>