opt-cc/static/src/app/users/user-list/user-list.component.html

<div class="user-list">
  <h2>Übersicht</h2>
  <div class="input-group search-bar" style="padding-bottom: 5px; width:100%">
    <form class="pull-left form-group">
      <label class="radio-inline">
        <input type="radio" name="fractSelect"
               [checked]="(fractionRadioSelect == undefined) ? 'true' : 'false'"
               [(ngModel)]="fractionRadioSelect"
               (change)="filterUsersByFraction(query.value)">Alle
      </label>
      <label class="radio-inline">
        <input type="radio" name="fractSelect" value="blufor"
               [(ngModel)]="fractionRadioSelect"
               #fractRadioBufor
               (change)="filterUsersByFraction(query.value, fractRadioBufor.value)">NATO
      </label>
      <label class="radio-inline">
        <input type="radio" name="fractSelect" value="opfor"
               [(ngModel)]="fractionRadioSelect"
               #fractRadioOpfor
               (change)="filterUsersByFraction(query.value, fractRadioOpfor.value)">CSAT
      </label>
    </form>
    <a class="pull-right btn btn-success" (click)="openNewUserForm()">
      Neuen Teilnehmer hinzufügen
    </a>
  </div>

  <div class="input-group search-bar" style="padding-top: 0;">
    <input id="search-tasks"
           type="text" #query class="form-control"
           (keyup.enter)="findUsers(query.value)"
           [formControl]="searchTerm">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button"
              (click)="findUsers(query.value)">
        Suchen
      </button>
    </span>
  </div>

  <div>
    <pjm-user-item *ngFor="let user of users$ | async"
                   [user]="user"
                   (userDelete)="deleteUser(user)"
                   (userSelected)="selectUser($event)"
                   (userAward)="awardUser($event, $event)"
                   [selected]="user._id == selectedUserId">
    </pjm-user-item>
  </div>
  <br>
</div>