scouting/www/entry/entry.ng.html

<div class="header" #header>
  <h2>{{section}}</h2>
</div>

<ng-container [ngSwitch]="section">
  <div
    *ngSwitchCase="'Team Selection'"
    id="team_selection"
    class="container-fluid"
  >
    <div class="row">
      <label for="match_number">Match Number</label>
      <input
        [(ngModel)]="matchNumber"
        type="number"
        id="match_number"
        min="1"
        max="999"
      />
    </div>
    <div class="row">
      <label for="team_number">Team Number</label>
      <input
        [(ngModel)]="teamNumber"
        type="number"
        id="team_number"
        min="1"
        max="9999"
      />
    </div>
    <div class="row">
      <label for="set_number">Set Number</label>
      <input
        [(ngModel)]="setNumber"
        type="number"
        id="set_number"
        min="1"
        max="10"
      />
    </div>
    <div class="row">
      <label for="comp_level">Comp Level</label>
      <select [(ngModel)]="compLevel" type="number" id="comp_level">
        <option *ngFor="let level of COMP_LEVELS" [ngValue]="level">
          {{COMP_LEVEL_LABELS[level]}}
        </option>
      </select>
    </div>
    <div class="buttons">
      <!-- hack to right align the next button -->
      <div></div>
      <button class="btn btn-primary" (click)="changeSectionTo('Init');">
        Next
      </button>
    </div>
  </div>

  <div *ngSwitchCase="'Init'" id="init" class="container-fluid">
    <h2>Select Starting Position</h2>
    <div *ngFor="let i of [1, 2, 3, 4]">
      <label>
        <input
          type="radio"
          name="radio-group"
          [value]="i"
          (change)="selectedValue = $event.target.value"
        />
        {{ i }}
      </label>
    </div>
    <div class="buttons">
      <button
        class="btn btn-primary"
        [disabled]="!selectedValue"
        (click)="changeSectionTo('Pickup'); addAction({type: 'startMatchAction', position: selectedValue});"
      >
        Start Match
      </button>
    </div>
  </div>

  <div *ngSwitchCase="'Pickup'" id="PickUp" class="container-fluid">
    <button class="btn btn-danger" (click)="undoLastAction()">UNDO</button>
    <button
      class="btn btn-warning"
      (click)="changeSectionTo('Place'); addAction({type: 'pickupObjectAction', objectType: ObjectType.kCone});"
    >
      CONE
    </button>
    <button
      class="btn btn-primary"
      (click)="changeSectionTo('Place'); addAction({type: 'pickupObjectAction', objectType: ObjectType.kCube});"
    >
      CUBE
    </button>
    <!-- 'Balancing' during auto. -->
    <div *ngIf="autoPhase">
      <label>
        <input type="checkbox" (change)="dockedValue = $event.target.value" />
        Docked
      </label>
      <label>
        <input type="checkbox" (change)="engagedValue = $event.target.value" />
        Engaged
      </label>
      <br />
      <button
        class="btn btn-info"
        (click)="addAction({type: 'autoBalanceAction', docked: dockedValue, engaged: engagedValue});"
      >
        Submit Balancing
      </button>
    </div>
    <button
      *ngIf="autoPhase"
      class="btn btn-info"
      (click)="autoPhase = false; addAction({type: 'endAutoPhase'});"
    >
      Start Teleop
    </button>
    <button
      *ngIf="!autoPhase"
      class="btn btn-info"
      (click)="changeSectionTo('Endgame')"
    >
      Endgame
    </button>
  </div>

  <div *ngSwitchCase="'Place'" id="Place" class="container-fluid">
    <button class="btn btn-danger" (click)="undoLastAction()">UNDO</button>
    <button
      class="btn btn-success"
      (click)="changeSectionTo('Pickup'); addAction({type: 'placeObjectAction', scoreLevel: ScoreLevel.kHigh});"
    >
      HIGH
    </button>
    <button
      class="btn btn-warning"
      (click)="changeSectionTo('Pickup'); addAction({type: 'placeObjectAction', scoreLevel: ScoreLevel.kMiddle});"
    >
      MID
    </button>
    <button
      class="btn btn-danger"
      (click)="changeSectionTo('Pickup'); addAction({type: 'placeObjectAction', scoreLevel: ScoreLevel.kLow});"
    >
      LOW
    </button>
    <button
      *ngIf="autoPhase"
      class="btn btn-info"
      (click)="autoPhase = false; addAction({type: 'endAutoPhase'});"
    >
      Start Teleop
    </button>
    <button
      *ngIf="!autoPhase"
      class="btn btn-info"
      (click)="changeSectionTo('Endgame')"
    >
      Endgame
    </button>
  </div>

  <div *ngSwitchCase="'Endgame'" id="Endgame" class="container-fluid">
    <button class="btn btn-danger" (click)="undoLastAction()">UNDO</button>
    <label>
      <input type="checkbox" (change)="dockedValue = $event.target.value" />
      Docked
    </label>
    <label>
      <input type="checkbox" (change)="engagedValue = $event.target.value" />
      Engaged
    </label>
    <button
      *ngIf="!autoPhase"
      class="btn btn-info"
      (click)="changeSectionTo('Review and Submit'); addAction({type: 'endMatchAction', docked: dockedValue, engaged: engagedValue});"
    >
      End Match
    </button>
  </div>

  <div *ngSwitchCase="'Review and Submit'" id="Review" class="container-fluid">
    <button class="btn btn-danger" (click)="undoLastAction()">UNDO</button>
    <button
      *ngIf="!autoPhase"
      class="btn btn-warning"
      (click)="submitActions();"
    >
      Submit
    </button>
  </div>

  <div *ngSwitchCase="'Success'" id="Success" class="container-fluid">
    <h2>Successfully submitted data.</h2>
  </div>
</ng-container>