scouting: setting up html and css for adding shift schedule tab

Decided to use scouting schedule using ending in number method, so could
scale infinitely into larger numbers rather than set amount of matches.
Ignore component.ts portion of commit, used for later when sending data
to flatbuffer.

Signed-off-by: Milo Lin <100027790@mvla.net>
Change-Id: I3b132e135a9e3a5d5ae34e0c31468709ebde0053
diff --git a/scouting/www/BUILD b/scouting/www/BUILD
index 99dcde6..3b473f1 100644
--- a/scouting/www/BUILD
+++ b/scouting/www/BUILD
@@ -21,6 +21,7 @@
         "//scouting/www/import_match_list",
         "//scouting/www/match_list",
         "//scouting/www/notes",
+        "//scouting/www/shift_schedule",
         "@npm//@angular/animations",
         "@npm//@angular/common",
         "@npm//@angular/core",
diff --git a/scouting/www/app.ng.html b/scouting/www/app.ng.html
index ab1e433..1357228 100644
--- a/scouting/www/app.ng.html
+++ b/scouting/www/app.ng.html
@@ -46,6 +46,15 @@
       Import Match List
     </a>
   </li>
+  <li class="nav-item">
+    <a
+      class="nav-link"
+      [class.active]="tabIs('ShiftSchedule')"
+      (click)="switchTabToGuarded('ShiftSchedule')"
+    >
+      Shift Schedule
+    </a>
+  </li>
 </ul>
 
 <ng-container [ngSwitch]="tab">
@@ -63,4 +72,5 @@
   <app-import-match-list
     *ngSwitchCase="'ImportMatchList'"
   ></app-import-match-list>
+  <shift-schedule *ngSwitchCase="'ShiftSchedule'"></shift-schedule>
 </ng-container>
diff --git a/scouting/www/app.ts b/scouting/www/app.ts
index 02af125..85620f1 100644
--- a/scouting/www/app.ts
+++ b/scouting/www/app.ts
@@ -1,6 +1,11 @@
 import {Component, ElementRef, ViewChild} from '@angular/core';
 
-type Tab = 'MatchList' | 'Notes' | 'Entry' | 'ImportMatchList';
+type Tab =
+  | 'MatchList'
+  | 'Notes'
+  | 'Entry'
+  | 'ImportMatchList'
+  | 'ShiftSchedule';
 type TeamInMatch = {
   teamNumber: number;
   matchNumber: number;
diff --git a/scouting/www/app_module.ts b/scouting/www/app_module.ts
index 9c762f6..b3c788f 100644
--- a/scouting/www/app_module.ts
+++ b/scouting/www/app_module.ts
@@ -7,6 +7,7 @@
 import {ImportMatchListModule} from './import_match_list/import_match_list.module';
 import {MatchListModule} from './match_list/match_list.module';
 import {NotesModule} from './notes/notes.module';
+import {ShiftScheduleModule} from './shift_schedule/shift_schedule.module';
 
 @NgModule({
   declarations: [App],
@@ -17,6 +18,7 @@
     NotesModule,
     ImportMatchListModule,
     MatchListModule,
+    ShiftScheduleModule,
   ],
   exports: [App],
   bootstrap: [App],
diff --git a/scouting/www/shift_schedule/BUILD b/scouting/www/shift_schedule/BUILD
new file mode 100644
index 0000000..8fe99e4
--- /dev/null
+++ b/scouting/www/shift_schedule/BUILD
@@ -0,0 +1,27 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_library")
+
+ts_library(
+    name = "shift_schedule",
+    srcs = [
+        "shift_schedule.component.ts",
+        "shift_schedule.module.ts",
+    ],
+    angular_assets = [
+        "shift_schedule.component.css",
+        "shift_schedule.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/shift_schedule/shift_schedule.component.css b/scouting/www/shift_schedule/shift_schedule.component.css
new file mode 100644
index 0000000..bafeb4c
--- /dev/null
+++ b/scouting/www/shift_schedule/shift_schedule.component.css
@@ -0,0 +1,17 @@
+* {
+  padding: 5px;
+}
+
+.badge {
+  height: 20px;
+}
+
+.red {
+  background-color: #dc3545;
+  border-radius: 5px;
+}
+
+.blue {
+  background-color: #0d6efd;
+  border-radius: 5px;
+}
diff --git a/scouting/www/shift_schedule/shift_schedule.component.ts b/scouting/www/shift_schedule/shift_schedule.component.ts
new file mode 100644
index 0000000..2f22653
--- /dev/null
+++ b/scouting/www/shift_schedule/shift_schedule.component.ts
@@ -0,0 +1,15 @@
+import {Component, OnInit} from '@angular/core';
+import {Builder, ByteBuffer} from 'flatbuffers';
+import {ErrorResponse} from 'org_frc971/scouting/webserver/requests/messages/error_response_generated';
+
+@Component({
+  selector: 'shift-schedule',
+  templateUrl: './shift_schedule.ng.html',
+  styleUrls: ['../common.css', './shift_schedule.component.css'],
+})
+export class ShiftsComponent {
+  progressMessage: string = '';
+  errorMessage: string = '';
+  // used to calculate shift blocks from starting match to ending match
+  numMatches: number[] = [20, 40, 60, 80, 100, 120, 140, 160, 180, 200];
+}
diff --git a/scouting/www/shift_schedule/shift_schedule.module.ts b/scouting/www/shift_schedule/shift_schedule.module.ts
new file mode 100644
index 0000000..0e5aa48
--- /dev/null
+++ b/scouting/www/shift_schedule/shift_schedule.module.ts
@@ -0,0 +1,12 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+
+import {ShiftsComponent} from './shift_schedule.component';
+
+@NgModule({
+  declarations: [ShiftsComponent],
+  exports: [ShiftsComponent],
+  imports: [CommonModule, FormsModule],
+})
+export class ShiftScheduleModule {}
diff --git a/scouting/www/shift_schedule/shift_schedule.ng.html b/scouting/www/shift_schedule/shift_schedule.ng.html
new file mode 100644
index 0000000..3a9cdf0
--- /dev/null
+++ b/scouting/www/shift_schedule/shift_schedule.ng.html
@@ -0,0 +1,33 @@
+<div class="header">
+  <h2>Shift Schedule</h2>
+</div>
+
+<div class="container-fluid">
+  <div class="row">
+    <div *ngFor="let num of numMatches">
+      <span class="badge bg-secondary rounded-left">
+        Scouting matches from {{num-19}} to {{num}}
+      </span>
+      <div class="list-group list-group-horizontal-sm">
+        <div class="redColumn">
+          <div *ngFor="let allianceNum of [1, 2, 3]">
+            <input
+              class="red text-center text-white fw-bold list-group-item list-group-item-action"
+              type="text"
+            />
+          </div>
+        </div>
+        <div class="blueColumn">
+          <div *ngFor="let allianceNum of [1, 2, 3]">
+            <input
+              class="blue text-center text-white fw-bold list-group-item list-group-item-action"
+              type="text"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <button class="btn btn-primary">Save</button>
+  <span class="error_message" role="alert">{{ errorMessage }}</span>
+</div>