opt-cc/static/src/app/request/award/req-award.component.html

<form #form="ngForm" class="overview">
  <h3>{{'request.award.headline' | translate}}</h3>

  <div class="form-group">
    <label for="user">{{'request.award.field.user' | translate}}</label>
    <select class="form-control"
            name="user"
            id="user"
            [(ngModel)]="user"
            [compareWith]="equals"
            (change)="toggleUser()"
            required>
      <option [ngValue]="{_id: '0'}">{{'request.award.field.user.placeholder' | translate}}</option>
      <option *ngFor="let user of users" [ngValue]="user">
        {{user.username}}
      </option>
    </select>
  </div>

  <div class="form-group">
    <label for="decoration">{{'request.award.field.award' | translate}}</label>
    <select class="form-control"
            name="decoration"
            id="decoration"
            [(ngModel)]="decoration"
            [compareWith]="equals"
            (change)="toggleDecoPreview(decoDescription, decoPreview)"
            required>
      <option [ngValue]="{_id: '0'}">{{'request.award.field.award.placeholder' | translate}}</option>
      <option *ngFor="let deco of decorations" [ngValue]="deco">
        {{deco.name}}
      </option>
    </select>
  </div>

  <div class="div-table-row" [style.display]="decoPreviewDisplay" style="margin-top: 5px; margin-bottom:10px">
    <div class="col-sm-1 decoration-preview">
      <img class="center-block" #decoPreview>
    </div>
    <div class="col-sm-2"
         style="border-radius: 0px 15px 15px 0px; font-style: oblique" #decoDescription>
      &nbsp;
    </div>
  </div>

  <div class="form-group">
    <label for="reason">{{'request.award.field.reason' | translate}}</label>
    <textarea class="form-control center-block" name="reason" [(ngModel)]="reason" required
              id="reason" placeholder="{{'request.award.field.reason.placeholder' | translate}}" rows="3"></textarea>
  </div>

  <button id="cancel"
          (click)="cancel()"
          class="btn btn-default">
    {{'request.award.button.cancel' | translate}}
  </button>

  <button id="save"
          (click)="addAwarding(decoPreview, decoDescription)"
          class="btn btn-default"
          [disabled]="!form.valid || user._id === '0' || decoration._id === '0'">
    {{'request.award.button.submit' | translate}}
  </button>

  <div class="table-container" *ngIf="showForm">
    <table class="table table-hover">
      <thead>
      <tr>
        <th class="col-sm-1">{{'request.award.table.head.image' | translate}}</th>
        <th class="col-sm-2">{{'request.award.table.head.name' | translate}}</th>
        <th class="col-sm-2">{{'request.award.table.head.reason' | translate}}</th>
        <th class="col-sm-1 ">{{'request.award.table.head.requester' | translate}}</th>
        <th class="col-sm-1 text-right">{{'request.award.table.head.date' | translate}}</th>
        <th class="col-sm-1 text-center">{{'request.award.table.head.status' | translate}}</th>
        <th class="col-sm-2 text-right">{{'request.award.table.head.reject.reason' | translate}}</th>
      </tr>
      </thead>
      <tbody *ngFor="let award of awards">
      <tr>
        <td class="table-cell-id" *ngIf="award.decorationId.isMedal">
          <img height="40px" src="resource/decoration/{{award.decorationId._id}}.png">
        </td>
        <td class="table-cell-id" *ngIf="!award.decorationId.isMedal">
          <img width="60px" src="resource/decoration/{{award.decorationId._id}}.png">
        </td>
        <td>
          {{award.decorationId.name}}
        </td>
        <td>
          {{award.reason}}
        </td>
        <td>
          {{award.proposer?.username}}
        </td>
        <td class="text-right">
          {{award.date | date: 'dd.MM.yyyy'}}
        </td>
        <td class="text-center">
           <span *ngIf="award.confirmed === 0">
            {{'request.award.table.status.progressing' | translate}}
          </span>
          <span *ngIf="award.confirmed === 1">
            {{'request.award.table.status.accepted' | translate}}
          </span>
          <span *ngIf="award.confirmed !== 0 && award.confirmed !== 1">
            {{'request.award.table.status.rejected' | translate}}
          </span>
        </td>
        <td class="text-right">
          {{award.rejectReason ? award.rejectReason : ''}}
        </td>
      </tr>
      </tbody>
    </table>
  </div>

</form>