scouting/www/driver_ranking/driver_ranking.ng.html

<div class="header">
  <h2>Driver Ranking</h2>
</div>

<ng-container [ngSwitch]="section">
  <div *ngSwitchCase="'TeamSelection'">
    <label for="match_number_selection">Match Number</label>
    <input
      [(ngModel)]="match_number"
      type="number"
      id="match_number_selection"
      min="1"
      max="9999"
    />
    <br />
    <br />
    <label>Team Numbers</label>
    <input
      *ngFor="let x of [1,2,3]; let i = index;"
      [(ngModel)]="team_ranking[i]"
      type="text"
      id="team_input_{{i}}"
    />
    <button
      class="btn btn-primary"
      (click)="setTeamNumbers()"
      id="select_button"
    >
      Select
    </button>
  </div>
  <div *ngSwitchCase="'Data'">
    <h4 id="match_number_heading">Match #{{match_number}}</h4>
    <div *ngFor="let team_key of team_ranking; let i = index">
      <div class="d-flex flex-row justify-content-center pt-2">
        <div class="d-flex flex-row">
          <h4 class="align-self-center" id="team_rank_label_{{i}}">
            {{i + 1}}
          </h4>
          <h1 class="align-self-center" id="team_key_label_{{i}}">
            {{team_key}}
          </h1>
        </div>
        <button
          class="btn btn-success"
          (click)="rankUp(i)"
          id="up_button_{{i}}"
        >
          &uarr;
        </button>
        <!--&uarr; is the html code for an up arrow-->
        <button
          class="btn btn-danger"
          (click)="rankDown(i)"
          id="down_button_{{i}}"
        >
          &darr;
        </button>
        <!--&darr; is the html code for a down arrow-->
      </div>
    </div>
    <div class="d-flex flex-row justify-content-center pt-2">
      <div>
        <button class="btn btn-secondary" (click)="editTeams()">
          Edit Teams
        </button>
      </div>
      <div>
        <button
          class="btn btn-success"
          (click)="submitData()"
          id="submit_button"
        >
          Submit
        </button>
      </div>
    </div>
  </div>
  <div class="error">{{errorMessage}}</div>
</ng-container>