Add a Match/Team Selection screen to the scouting web page

Now we can start working on actually submitting scouting data.

Signed-off-by: Philipp Schrader <philipp.schrader@gmail.com>
Change-Id: Ie26a80d0db317625590efc10cb67c4b176bdc124
diff --git a/scouting/www/entry/BUILD b/scouting/www/entry/BUILD
index 8f46de7..0d0e7f6 100644
--- a/scouting/www/entry/BUILD
+++ b/scouting/www/entry/BUILD
@@ -16,5 +16,6 @@
     deps = [
         "@npm//@angular/common",
         "@npm//@angular/core",
+        "@npm//@angular/forms",
     ],
 )
diff --git a/scouting/www/entry/entry.component.ts b/scouting/www/entry/entry.component.ts
index a1cffc3..0e7223b 100644
--- a/scouting/www/entry/entry.component.ts
+++ b/scouting/www/entry/entry.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 
-type Section = 'Auto'|'TeleOp'|'Climb'|'Defense'|'Review and Submit'|'Home'
+type Section = 'Team Selection'|'Auto'|'TeleOp'|'Climb'|'Defense'|'Review and Submit'|'Home'
 type Level = 'Low'|'Medium'|'High'|'Transversal'
 
 @Component({
@@ -9,7 +9,9 @@
     styleUrls: ['./entry.component.css']
 })
 export class EntryComponent {
-    section: Section = 'Auto'; //placeholder
+    section: Section = 'Team Selection';
+    matchNumber: number = 1
+    teamNumber: number = 1
     autoUpperShotsMade: number = 0;
     autoLowerShotsMade: number = 0;
     autoShotsMissed: number = 0;
@@ -59,7 +61,9 @@
     }
 
     nextSection() {
-        if (this.section === 'Auto') {
+        if (this.section === 'Team Selection') {
+            this.section = 'Auto';
+        } else if (this.section === 'Auto') {
             this.section = 'TeleOp';
         } else if (this.section === 'TeleOp') {
             this.section = 'Climb';
@@ -73,7 +77,9 @@
     }
 
     prevSection() {
-      if (this.section === 'TeleOp') {
+      if (this.section === 'Auto') {
+        this.section = 'Team Selection';
+      } else if (this.section === 'TeleOp') {
         this.section = 'Auto';
       } else if (this.section === 'Climb') {
         this.section = 'TeleOp';
diff --git a/scouting/www/entry/entry.module.ts b/scouting/www/entry/entry.module.ts
index d454c2e..35ecd26 100644
--- a/scouting/www/entry/entry.module.ts
+++ b/scouting/www/entry/entry.module.ts
@@ -1,11 +1,12 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {EntryComponent} from './entry.component';
+import {FormsModule} from '@angular/forms';
 
 @NgModule({
   declarations: [EntryComponent],
   exports: [EntryComponent],
-  imports: [CommonModule],
+  imports: [CommonModule, FormsModule],
 })
 export class EntryModule {
 }
diff --git a/scouting/www/entry/entry.ng.html b/scouting/www/entry/entry.ng.html
index da77ce6..a1c248c 100644
--- a/scouting/www/entry/entry.ng.html
+++ b/scouting/www/entry/entry.ng.html
@@ -3,6 +3,20 @@
 </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="text-right">
+            <button class="btn btn-primary" (click)="nextSection()">Next</button>
+        </div>
+    </div>
+
     <div *ngSwitchCase="'Auto'" id="auto" class="container-fluid">
         <div class="row">
             <!--Image here-->
@@ -158,6 +172,12 @@
     </div>
 
     <div *ngSwitchCase="'Review and Submit'" id="review" class="container-fluid">
+        <h4>Team Selection</h4>
+        <ul>
+            <li>Match number: {{matchNumber}}</li>
+            <li>Team number: {{teamNumber}}</li>
+        </ul>
+
         <h4>Auto</h4>
         <ul>
             <li>Upper Shots Made: {{autoUpperShotsMade}}</li>