Add match list tab

So the user can easily see what teams are playing in what matches

Signed-off-by: Ravago Jones <ravagojones@gmail.com>
Change-Id: Ie5efefbc890d02e8aec6b991dbc5b10249f41370
diff --git a/scouting/www/app.ts b/scouting/www/app.ts
index e34283a..fbde74f 100644
--- a/scouting/www/app.ts
+++ b/scouting/www/app.ts
@@ -1,6 +1,11 @@
 import {Component, ElementRef, ViewChild} from '@angular/core';
 
-type Tab = 'Entry'|'ImportMatchList';
+type Tab = 'MatchList'|'Entry'|'ImportMatchList';
+type TeamInMatch = {
+  teamNumber: number,
+  matchNumber: number,
+  compLevel: string
+};
 
 @Component({
   selector: 'my-app',
@@ -8,14 +13,17 @@
   styleUrls: ['./common.css']
 })
 export class App {
-  tab: Tab = 'Entry';
+  selectedTeamInMatch:
+      TeamInMatch = {teamNumber: 1, matchNumber: 1, compLevel: 'qm'};
+  tab: Tab = 'MatchList';
 
-  @ViewChild("block_alerts") block_alerts: ElementRef;
+  @ViewChild('block_alerts') block_alerts: ElementRef;
 
   constructor() {
     window.addEventListener('beforeunload', (e) => {
       if (!this.block_alerts.nativeElement.checked) {
-        // Based on https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#example
+        // Based on
+        // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#example
         // This combination ensures a dialog will be shown on most browsers.
         e.preventDefault();
         e.returnValue = '';
@@ -27,7 +35,12 @@
     return this.tab == tab;
   }
 
-  switchTabTo(tab: Tab) {
+  selectTeamInMatch(teamInMatch: TeamInMatch) {
+    this.selectedTeamInMatch = teamInMatch;
+    this.switchTabTo('Entry');
+  }
+
+  switchTabToGuarded(tab: Tab) {
     let shouldSwitch = true;
     if (this.tab !== tab) {
       if (!this.block_alerts.nativeElement.checked) {
@@ -35,7 +48,11 @@
       }
     }
     if (shouldSwitch) {
-      this.tab = tab;
+      this.switchTabTo(tab);
     }
   }
+
+  private switchTabTo(tab: Tab) {
+    this.tab = tab;
+  }
 }