Add tab for viewing data

Change-Id: Ib5a4194d1a0627fc85fa69dbcbf9495a8938ffc4
Signed-off-by: Ishan Katpally <100026402@mvla.net>
diff --git a/scouting/www/BUILD b/scouting/www/BUILD
index 647af14..b14c29b 100644
--- a/scouting/www/BUILD
+++ b/scouting/www/BUILD
@@ -21,6 +21,7 @@
         "//scouting/www/match_list",
         "//scouting/www/notes",
         "//scouting/www/shift_schedule",
+        "//scouting/www/view",
         "@npm//@angular/animations",
         "@npm//@angular/common",
         "@npm//@angular/core",
diff --git a/scouting/www/app.ng.html b/scouting/www/app.ng.html
index 1357228..3c9c2c2 100644
--- a/scouting/www/app.ng.html
+++ b/scouting/www/app.ng.html
@@ -55,6 +55,15 @@
       Shift Schedule
     </a>
   </li>
+  <li class="nav-item">
+    <a
+      class="nav-link"
+      [class.active]="tabIs('View')"
+      (click)="switchTabToGuarded('View')"
+    >
+      View
+    </a>
+  </li>
 </ul>
 
 <ng-container [ngSwitch]="tab">
@@ -73,4 +82,8 @@
     *ngSwitchCase="'ImportMatchList'"
   ></app-import-match-list>
   <shift-schedule *ngSwitchCase="'ShiftSchedule'"></shift-schedule>
+  <app-view
+    (switchTabsEvent)="switchTabTo($event)"
+    *ngSwitchCase="'View'"
+  ></app-view>
 </ng-container>
diff --git a/scouting/www/app.ts b/scouting/www/app.ts
index ab9c229..9d6c539 100644
--- a/scouting/www/app.ts
+++ b/scouting/www/app.ts
@@ -5,7 +5,8 @@
   | 'Notes'
   | 'Entry'
   | 'ImportMatchList'
-  | 'ShiftSchedule';
+  | 'ShiftSchedule'
+  | 'View';
 
 // Ignore the guard for tabs that don't require the user to enter any data.
 const unguardedTabs: Tab[] = ['MatchList', 'ImportMatchList'];
diff --git a/scouting/www/app_module.ts b/scouting/www/app_module.ts
index b3c788f..8c18f7a 100644
--- a/scouting/www/app_module.ts
+++ b/scouting/www/app_module.ts
@@ -8,6 +8,7 @@
 import {MatchListModule} from './match_list/match_list.module';
 import {NotesModule} from './notes/notes.module';
 import {ShiftScheduleModule} from './shift_schedule/shift_schedule.module';
+import {ViewModule} from './view/view.module';
 
 @NgModule({
   declarations: [App],
@@ -19,6 +20,7 @@
     ImportMatchListModule,
     MatchListModule,
     ShiftScheduleModule,
+    ViewModule,
   ],
   exports: [App],
   bootstrap: [App],
diff --git a/scouting/www/view/BUILD b/scouting/www/view/BUILD
new file mode 100644
index 0000000..fae4b23
--- /dev/null
+++ b/scouting/www/view/BUILD
@@ -0,0 +1,27 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
+ts_library(
+    name = "view",
+    srcs = [
+        "view.component.ts",
+        "view.module.ts",
+    ],
+    angular_assets = [
+        "view.component.css",
+        "view.ng.html",
+        "//scouting/www:common_css",
+    ],
+    compiler = "//tools:tsc_wrapped_with_angular",
+    target_compatible_with = ["@platforms//cpu:x86_64"],
+    use_angular_plugin = True,
+    visibility = ["//visibility:public"],
+    deps = [
+        "//scouting/webserver/requests/messages:error_response_ts_fbs",
+        "//scouting/webserver/requests/messages:request_all_matches_response_ts_fbs",
+        "//scouting/webserver/requests/messages:request_all_matches_ts_fbs",
+        "@com_github_google_flatbuffers//ts:flatbuffers_ts",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//@angular/forms",
+    ],
+)
diff --git a/scouting/www/view/view.component.css b/scouting/www/view/view.component.css
new file mode 100644
index 0000000..e220645
--- /dev/null
+++ b/scouting/www/view/view.component.css
@@ -0,0 +1,3 @@
+* {
+  padding: 10px;
+}
diff --git a/scouting/www/view/view.component.ts b/scouting/www/view/view.component.ts
new file mode 100644
index 0000000..8150efd
--- /dev/null
+++ b/scouting/www/view/view.component.ts
@@ -0,0 +1,8 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-view',
+  templateUrl: './view.ng.html',
+  styleUrls: ['../common.css', './view.component.css'],
+})
+export class ViewComponent {}
diff --git a/scouting/www/view/view.module.ts b/scouting/www/view/view.module.ts
new file mode 100644
index 0000000..075034e
--- /dev/null
+++ b/scouting/www/view/view.module.ts
@@ -0,0 +1,11 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {ViewComponent} from './view.component';
+
+@NgModule({
+  declarations: [ViewComponent],
+  exports: [ViewComponent],
+  imports: [CommonModule, FormsModule],
+})
+export class ViewModule {}
diff --git a/scouting/www/view/view.ng.html b/scouting/www/view/view.ng.html
new file mode 100644
index 0000000..b7ed627
--- /dev/null
+++ b/scouting/www/view/view.ng.html
@@ -0,0 +1 @@
+<h2>View Data</h2>